Refactor layout components: separate layout with global data into its own file, restore GlobalStoreProvider in the new layout, and update global state management to accept initial movies as a prop for improved data handling.
This commit is contained in:
parent
e128a5f493
commit
181826cceb
|
|
@ -0,0 +1,15 @@
|
|||
import { getMovies } from "@/lib/db";
|
||||
import { GlobalStoreProvider } from "../store/globalStore";
|
||||
|
||||
export const revalidate = 0;
|
||||
export default async function WithGlobalDataLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const movies = await getMovies();
|
||||
|
||||
return (
|
||||
<GlobalStoreProvider initialMovies={movies}>{children}</GlobalStoreProvider>
|
||||
);
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import type { Metadata } from "next";
|
|||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { Navbar } from "@/components/organisms/Navbar";
|
||||
import { GlobalStoreProvider } from "./store/globalStore";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
|
|
@ -29,7 +28,7 @@ export default async function RootLayout({
|
|||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<GlobalStoreProvider>{children}</GlobalStoreProvider>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
"use client";
|
||||
import { getMovies } from "@/lib/db";
|
||||
import { movies } from "@/lib/db/schema";
|
||||
import { createContext, FC, use, useEffect, useState } from "react";
|
||||
import { createContext, FC, use, useState } from "react";
|
||||
|
||||
type Movie = typeof movies.$inferSelect;
|
||||
|
||||
|
|
@ -21,16 +20,11 @@ const globalStore = createContext<GlobalStore>({
|
|||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
initialMovies: Movie[];
|
||||
};
|
||||
|
||||
export const GlobalStoreProvider: FC<Props> = ({ children }) => {
|
||||
const [movies, setMovies] = useState<GlobalStore["movies"]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getMovies().then((movies) => {
|
||||
setMovies(movies);
|
||||
});
|
||||
}, []);
|
||||
export const GlobalStoreProvider: FC<Props> = ({ children, initialMovies }) => {
|
||||
const [movies, setMovies] = useState<GlobalStore["movies"]>(initialMovies);
|
||||
|
||||
const addMovie = async (movie: Movie) => {
|
||||
if (movies.find((m) => m.id === movie.id)) return;
|
||||
|
|
|
|||
Loading…
Reference in New Issue