alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-26 07:38:33 -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) +
"/page/" +
encodeURIComponent(p.name)
} shallow={true}
}
shallow={true}
>
{p.name}
</Link>
@@ -142,7 +143,8 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) +
"/quiz/" +
encodeURIComponent(q.name)
} shallow={true}
}
shallow={true}
>
{q.name}
</Link>
@@ -204,7 +206,8 @@ function Assignments({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) +
"/assignment/" +
encodeURIComponent(a.name)
} shallow={true}
}
shallow={true}
>
{a.name}
</Link>

13
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 { Suspense } from "react";
@@ -16,18 +13,10 @@ export default async function CourseLayout({
console.log("cannot load course that is .js.map " + decodedCourseName);
return <div></div>;
}
const queryClient = getQueryClient();
await hydrateCourse(queryClient, decodedCourseName);
const dehydratedState = dehydrate(queryClient);
// console.log("hydrated course state", courseName, dehydratedState);
return (
<Suspense>
<CourseContextProvider localCourseName={decodedCourseName}>
<HydrationBoundary state={dehydratedState}>
{children}
</HydrationBoundary>
{children}
</CourseContextProvider>
</Suspense>
);

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

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

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

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

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

@@ -9,6 +9,7 @@ export function makeQueryClient() {
staleTime: 60_000,
refetchOnWindowFocus: false,
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";
// https://tanstack.com/query/latest/docs/framework/react/guides/ssr
export const hydrateCourses = async (queryClient: QueryClient) => {
const courseNames = await fileStorageService.getCourseNames();
await queryClient.prefetchQuery({
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 (
queryClient: QueryClient,
courseName: string
) => {
const settings = await fileStorageService.getCourseSettings(courseName);
const moduleNames = await fileStorageService.getModuleNames(courseName);
const modulesData = await Promise.all(