diff --git a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
index b3cc793..430f584 100644
--- a/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
+++ b/nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
@@ -81,7 +81,8 @@ function Pages({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) +
"/page/" +
encodeURIComponent(p.name)
- } shallow={true}
+ }
+ shallow={true}
>
{p.name}
@@ -142,7 +143,8 @@ function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) +
"/quiz/" +
encodeURIComponent(q.name)
- } shallow={true}
+ }
+ shallow={true}
>
{q.name}
@@ -204,7 +206,8 @@ function Assignments({ moduleName, day }: { moduleName: string; day: string }) {
encodeURIComponent(moduleName) +
"/assignment/" +
encodeURIComponent(a.name)
- } shallow={true}
+ }
+ shallow={true}
>
{a.name}
diff --git a/nextjs/src/app/course/[courseName]/layout.tsx b/nextjs/src/app/course/[courseName]/layout.tsx
index a1d23ae..a89c664 100644
--- a/nextjs/src/app/course/[courseName]/layout.tsx
+++ b/nextjs/src/app/course/[courseName]/layout.tsx
@@ -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 ;
}
- const queryClient = getQueryClient();
-
- await hydrateCourse(queryClient, decodedCourseName);
- const dehydratedState = dehydrate(queryClient);
-
- // console.log("hydrated course state", courseName, dehydratedState);
return (
-
- {children}
-
+ {children}
);
diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx
index d73a44b..58e8585 100644
--- a/nextjs/src/app/layout.tsx
+++ b/nextjs/src/app/layout.tsx
@@ -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 (
- {children}
+
+
+ {children}
+
+
diff --git a/nextjs/src/app/page.tsx b/nextjs/src/app/page.tsx
index 775af56..d1c929f 100644
--- a/nextjs/src/app/page.tsx
+++ b/nextjs/src/app/page.tsx
@@ -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 (
-
-
-
+
);
}
diff --git a/nextjs/src/app/providersQueryClientUtils.ts b/nextjs/src/app/providersQueryClientUtils.ts
index f141e37..6ce4a3d 100644
--- a/nextjs/src/app/providersQueryClientUtils.ts
+++ b/nextjs/src/app/providersQueryClientUtils.ts
@@ -9,6 +9,7 @@ export function makeQueryClient() {
staleTime: 60_000,
refetchOnWindowFocus: false,
retry: 0,
+ refetchOnMount: false
},
},
});
diff --git a/nextjs/src/hooks/hookHydration.ts b/nextjs/src/hooks/hookHydration.ts
index 3c494eb..3f2057d 100644
--- a/nextjs/src/hooks/hookHydration.ts
+++ b/nextjs/src/hooks/hookHydration.ts
@@ -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(