alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 23:58:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

trying to get nextjs fast

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-09 12:15:31 -06:00
parent 88fd59606b
commit ef2e6da760
6 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
View File

@@ -81,7 +81,8 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) + encodeURIComponent(moduleName) +
"/page/" + "/page/" +
encodeURIComponent(p.name) encodeURIComponent(p.name)
} shallow={true} }
shallow={true}
> >
{p.name} {p.name}
</Link> </Link>
@@ -142,7 +143,8 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) + encodeURIComponent(moduleName) +
"/quiz/" + "/quiz/" +
encodeURIComponent(q.name) encodeURIComponent(q.name)
} shallow={true} }
shallow={true}
> >
{q.name} {q.name}
</Link> </Link>
@@ -204,7 +206,8 @@ function Assignments({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) + encodeURIComponent(moduleName) +
"/assignment/" + "/assignment/" +
encodeURIComponent(a.name) encodeURIComponent(a.name)
} shallow={true} }
shallow={true}
> >
{a.name} {a.name}
</Link> </Link>

11
nextjs/src/app/course/[courseName]/layout.tsx
View File

@@ -1,6 +1,3 @@
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { getQueryClient } from "@/app/providersQueryClientUtils";
import { hydrateCourse } from "@/hooks/hookHydration";
import CourseContextProvider from "./context/CourseContextProvider"; import CourseContextProvider from "./context/CourseContextProvider";
import { Suspense } from "react"; import { Suspense } from "react";
@@ -16,18 +13,10 @@ export default async function CourseLayout({
console.log("cannot load course that is .js.map " + decodedCourseName); console.log("cannot load course that is .js.map " + decodedCourseName);
return <div></div>; return <div></div>;
} }
const queryClient = getQueryClient();
await hydrateCourse(queryClient, decodedCourseName);
const dehydratedState = dehydrate(queryClient);
// console.log("hydrated course state", courseName, dehydratedState);
return ( return (
<Suspense> <Suspense>
<CourseContextProvider localCourseName={decodedCourseName}> <CourseContextProvider localCourseName={decodedCourseName}>
<HydrationBoundary state={dehydratedState}>
{children} {children}
</HydrationBoundary>
</CourseContextProvider> </CourseContextProvider>
</Suspense> </Suspense>
); );

15
nextjs/src/app/layout.tsx
View File

@@ -2,21 +2,32 @@ import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Providers from "./providers"; import Providers from "./providers";
import { Suspense } from "react"; import { Suspense } from "react";
import { getQueryClient } from "./providersQueryClientUtils";
import { hydrateCourses } from "@/hooks/hookHydration";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Canvas Manager 2.0", title: "Canvas Manager 2.0",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const queryClient = getQueryClient();
await hydrateCourses(queryClient);
const dehydratedState = dehydrate(queryClient);
return ( return (
<html lang="en"> <html lang="en">
<body className="bg-slate-900 h-screen p-1 text-slate-300"> <body className="bg-slate-900 h-screen p-1 text-slate-300">
<Suspense> <Suspense>
<Providers>{children}</Providers> <Providers>
<HydrationBoundary state={dehydratedState}>
{children}
</HydrationBoundary>
</Providers>
</Suspense> </Suspense>
</body> </body>
</html> </html>

10
nextjs/src/app/page.tsx
View File

@@ -1,19 +1,9 @@
import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query";
import CourseList from "./CourseList"; import CourseList from "./CourseList";
import { hydrateCourses } from "@/hooks/hookHydration";
import { getQueryClient } from "./providersQueryClientUtils";
export default async function Home() { export default async function Home() {
const queryClient = getQueryClient();
await hydrateCourses(queryClient);
const dehydratedState = dehydrate(queryClient);
return ( return (
<main className="min-h-screen"> <main className="min-h-screen">
<HydrationBoundary state={dehydratedState}>
<CourseList /> <CourseList />
</HydrationBoundary>
</main> </main>
); );
} }

1
nextjs/src/app/providersQueryClientUtils.ts
View File

@@ -9,6 +9,7 @@ export function makeQueryClient() {
staleTime: 60_000, staleTime: 60_000,
refetchOnWindowFocus: false, refetchOnWindowFocus: false,
retry: 0, retry: 0,
refetchOnMount: false
}, },
}, },
}); });

10
nextjs/src/hooks/hookHydration.ts
View File

@@ -3,17 +3,23 @@ import { localCourseKeys } from "./localCourse/localCourseKeys";
import { fileStorageService } from "@/services/fileStorage/fileStorageService"; import { fileStorageService } from "@/services/fileStorage/fileStorageService";
// https://tanstack.com/query/latest/docs/framework/react/guides/ssr // https://tanstack.com/query/latest/docs/framework/react/guides/ssr
export const hydrateCourses = async (queryClient: QueryClient) => { export const hydrateCourses = async (queryClient: QueryClient) => {
const courseNames = await fileStorageService.getCourseNames();
await queryClient.prefetchQuery({ await queryClient.prefetchQuery({
queryKey: localCourseKeys.allCourses, queryKey: localCourseKeys.allCourses,
queryFn: async () => await fileStorageService.getCourseNames(), queryFn: () => courseNames,
}); });
await Promise.all(
courseNames.map(async (courseName) => {
await hydrateCourse(queryClient, courseName);
})
);
}; };
export const hydrateCourse = async ( export const hydrateCourse = async (
queryClient: QueryClient, queryClient: QueryClient,
courseName: string courseName: string
) => { ) => {
const settings = await fileStorageService.getCourseSettings(courseName); const settings = await fileStorageService.getCourseSettings(courseName);
const moduleNames = await fileStorageService.getModuleNames(courseName); const moduleNames = await fileStorageService.getModuleNames(courseName);
const modulesData = await Promise.all( const modulesData = await Promise.all(