gitadmin
/
moviebox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor global state management for movies: remove initialMovies prop from GlobalStoreProvider, implement useEffect to fetch movies on mount, and update layout metadata for a personalized movie tracking experience.

This commit is contained in:
Norbert Maciaszek 2025-08-08 17:34:37 +02:00
parent 3d9c1ce715
commit 050295babd
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/layout.tsx
View File

@ -3,7 +3,6 @@ import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { Navbar } from "@/components/organisms/Navbar"; import { Navbar } from "@/components/organisms/Navbar";
import { GlobalStoreProvider } from "./store/globalStore"; import { GlobalStoreProvider } from "./store/globalStore";
import { getMovies } from "@/lib/db";
const geistSans = Geist({ const geistSans = Geist({
variable: "--font-geist-sans", variable: "--font-geist-sans",
@ -16,8 +15,8 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Movie List",
description: "Generated by create next app", description: "Personal watch list and progress tracker",
}; };
export default async function RootLayout({ export default async function RootLayout({
@ -25,14 +24,12 @@ export default async function RootLayout({
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const movies = await getMovies();
return ( return (
<html lang="en"> <html lang="en">
<body <body
className={`${geistSans.variable} ${geistMono.variable} antialiased`} className={`${geistSans.variable} ${geistMono.variable} antialiased`}
> >
<GlobalStoreProvider initialMovies={movies}> <GlobalStoreProvider>
<Navbar /> <Navbar />
{children} {children}

14
src/app/store/globalStore.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { getMovies } from "@/lib/db";
import { movies } from "@/lib/db/schema"; import { movies } from "@/lib/db/schema";
import { createContext, FC, use, useState } from "react"; import { createContext, FC, use, useEffect, useState } from "react";
type Movie = typeof movies.$inferSelect; type Movie = typeof movies.$inferSelect;
@ -20,11 +21,16 @@ const globalStore = createContext<GlobalStore>({
type Props = { type Props = {
children: React.ReactNode; children: React.ReactNode;
initialMovies: GlobalStore["movies"];
}; };
export const GlobalStoreProvider: FC<Props> = ({ children, initialMovies }) => { export const GlobalStoreProvider: FC<Props> = ({ children }) => {
const [movies, setMovies] = useState<GlobalStore["movies"]>(initialMovies); const [movies, setMovies] = useState<GlobalStore["movies"]>([]);
useEffect(() => {
getMovies().then((movies) => {
setMovies(movies);
});
}, []);
const addMovie = async (movie: Movie) => { const addMovie = async (movie: Movie) => {
if (movies.find((m) => m.id === movie.id)) return; if (movies.find((m) => m.id === movie.id)) return;

2
src/lib/db/index.ts
View File

@ -6,7 +6,7 @@ import { eq } from "drizzle-orm";
const db = drizzle(process.env.DB_FILE_NAME!); const db = drizzle(process.env.DB_FILE_NAME!);
export const getMovies = async () => { export const getMovies = async () => {
return await db.select().from(movies); return await db.select().from(movies).$withCache();
}; };
export const addMovie = async (movie: typeof movies.$inferInsert) => { export const addMovie = async (movie: typeof movies.$inferInsert) => {