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

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

@ -1,6 +1,7 @@
"use client";
import { getMovies } from "@/lib/db";
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;
@ -20,11 +21,16 @@ const globalStore = createContext<GlobalStore>({
type Props = {
children: React.ReactNode;
initialMovies: GlobalStore["movies"];
};
export const GlobalStoreProvider: FC<Props> = ({ children, initialMovies }) => {
const [movies, setMovies] = useState<GlobalStore["movies"]>(initialMovies);
export const GlobalStoreProvider: FC<Props> = ({ children }) => {
const [movies, setMovies] = useState<GlobalStore["movies"]>([]);
useEffect(() => {
getMovies().then((movies) => {
setMovies(movies);
});
}, []);
const addMovie = async (movie: Movie) => {
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!);
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) => {