starting to gut

nextjs/src/app/api/trpc/[trpc]/route.ts

@@ -1,13 +1,13 @@
-import { createContext } from "@/services/trpc/context";
-import { appRouter } from "@/services/trpc/router/app";
+import { createTrpcContext } from "@/services/trpc/context";
+import { trpcAppRouter } from "@/services/trpc/router/app";
 import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
 
 const handler = (request: Request) => {
   return fetchRequestHandler({
     endpoint: "/api/trpc",
     req: request,
-    router: appRouter,
-    createContext: createContext,
+    router: trpcAppRouter,
+    createContext: createTrpcContext,
   });
 };
 

nextjs/src/app/course/[courseName]/layout.tsx

@@ -4,6 +4,10 @@ import { Suspense } from "react";
 import { getQueryClient } from "@/app/providersQueryClientUtils";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { hydrateCanvasCourse } from "@/hooks/hookHydration";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import { trpcAppRouter } from "@/services/trpc/router/app";
+import { createTrpcContext } from "@/services/trpc/context";
+import superjson from "superjson";
 
 export default async function CourseLayout({
   children,
@@ -23,12 +27,49 @@ export default async function CourseLayout({
   const queryClient = getQueryClient();
   await hydrateCanvasCourse(settings.canvasId, queryClient);
   const dehydratedState = dehydrate(queryClient);
+  const trpcHelper = createServerSideHelpers({
+    router: trpcAppRouter,
+    ctx: createTrpcContext(),
+    transformer: superjson,
+  });
+
+  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
+  await Promise.all(
+    allSettings.map(async (settings) => {
+      const courseName = settings.name;
+      const moduleNames = await fileStorageService.modules.getModuleNames(
+        courseName
+      );
+      await Promise.all(
+        moduleNames.map(async (moduleName) => {
+          await trpcHelper.assignment.getAllAssignments.prefetch({
+            courseName,
+            moduleName,
+          });
+
+          // await Promise.all(
+          //   assignments.map(
+          //     async (a) =>
+          //       await trpcHelper.assignment.getAssignment.fetch({
+          //         courseName,
+          //         moduleName,
+          //         assignmentName: a.name,
+          //       })
+          //   )
+          // );
+        })
+      );
+    })
+  );
+  const dehydratedTrpc = trpcHelper.dehydrate();
   return (
     <Suspense>
       <HydrationBoundary state={dehydratedState}>
-        <CourseContextProvider localCourseName={decodedCourseName}>
-          {children}
-        </CourseContextProvider>
+        <HydrationBoundary state={dehydratedTrpc}>
+          <CourseContextProvider localCourseName={decodedCourseName}>
+            {children}
+          </CourseContextProvider>
+        </HydrationBoundary>
       </HydrationBoundary>
     </Suspense>
   );

nextjs/src/app/layout.tsx

@@ -7,7 +7,13 @@ import { hydrateCourses } from "@/hooks/hookHydration";
 import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { MyToaster } from "./MyToaster";
 import { cookies } from "next/headers";
-export const dynamic = 'force-dynamic'
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import { trpcAppRouter } from "@/services/trpc/router/app";
+import { createTrpcContext } from "@/services/trpc/context";
+import superjson from "superjson";
+import { fileStorageService } from "@/services/fileStorage/fileStorageService";
+import ClientOnly from "@/components/ClientOnly";
+export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
   title: "Canvas Manager 2.0",
@@ -21,21 +27,59 @@ export default async function RootLayout({
   const queryClient = getQueryClient();
   await hydrateCourses(queryClient);
   const dehydratedState = dehydrate(queryClient);
-  cookies() // disables static page generation at build time
+  cookies(); // disables static page generation at build time
 
+  const trpcHelper = createServerSideHelpers({
+    router: trpcAppRouter,
+    ctx: createTrpcContext(),
+    transformer: superjson,
+  });
+
+  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
+  await Promise.all(
+    allSettings.map(async (settings) => {
+      const courseName = settings.name;
+      const moduleNames = await fileStorageService.modules.getModuleNames(
+        courseName
+      );
+      await Promise.all(
+        moduleNames.map(async (moduleName) => {
+          await trpcHelper.assignment.getAllAssignments.prefetch({
+            courseName,
+            moduleName,
+          });
+
+          // await Promise.all(
+          //   assignments.map(
+          //     async (a) =>
+          //       await trpcHelper.assignment.getAssignment.fetch({
+          //         courseName,
+          //         moduleName,
+          //         assignmentName: a.name,
+          //       })
+          //   )
+          // );
+        })
+      );
+    })
+  );
+
+  const dehydratedTrpc = trpcHelper.dehydrate();
   return (
     <html lang="en">
       <head></head>
       <body className="flex justify-center">
         <div className="bg-slate-900 h-screen text-slate-300 w-full sm:p-1">
-            <MyToaster />
-            <Suspense>
-              <Providers>
+          <MyToaster />
+          <Suspense>
+            <Providers>
+              <HydrationBoundary state={dehydratedTrpc}>
                 <HydrationBoundary state={dehydratedState}>
                   {children}
                 </HydrationBoundary>
-              </Providers>
-            </Suspense>
+              </HydrationBoundary>
+            </Providers>
+          </Suspense>
         </div>
       </body>
     </html>

nextjs/src/hooks/hookHydration.ts

@@ -12,10 +12,6 @@ import { canvasPageService } from "@/services/canvas/canvasPageService";
 import { canvasQuizKeys } from "./canvas/canvasQuizHooks";
 import { canvasPageKeys } from "./canvas/canvasPageHooks";
 import { getLecturesQueryConfig } from "./localCourse/lectureHooks";
-import { createServerSideHelpers } from "@trpc/react-query/server";
-import { appRouter } from "@/services/trpc/router/app";
-import superjson from "superjson";
-import { createContext } from "@/services/trpc/context";
 
 // https://tanstack.com/query/latest/docs/framework/react/guides/ssr
 export const hydrateCourses = async (queryClient: QueryClient) => {
@@ -36,26 +32,30 @@ export const hydrateCourse = async (
   queryClient: QueryClient,
   courseSettings: LocalCourseSettings
 ) => {
-  const trpcHelpers = createServerSideHelpers({
-    router: appRouter,
-    ctx: createContext(),
-    transformer: superjson,
-  });
 
   const courseName = courseSettings.name;
   const moduleNames = await fileStorageService.modules.getModuleNames(
     courseName
   );
 
-  await Promise.all(
-    moduleNames.map(
-      async (moduleName) =>
-        await trpcHelpers.assignment.getAllAssignments.fetch({
-          courseName,
-          moduleName,
-        })
-    )
-  );
+  // await Promise.all(
+  //   moduleNames.map(async (moduleName) => {
+  //     const assignments = await trpcHelpers.assignment.getAllAssignments.fetch({
+  //       courseName,
+  //       moduleName,
+  //     });
+  //     await Promise.all(
+  //       assignments.map(
+  //         async (a) =>
+  //           await trpcHelpers.assignment.getAssignment.fetch({
+  //             courseName,
+  //             moduleName,
+  //             assignmentName: a.name,
+  //           })
+  //       )
+  //     );
+  //   })
+  // );
 
   const modulesData = await Promise.all(
     moduleNames.map((moduleName) => loadAllModuleData(courseName, moduleName))
@@ -136,26 +136,26 @@ const loadAllModuleData = async (courseName: string, moduleName: string) => {
 const hydrateModuleData = async (
   {
     moduleName,
-    assignments,
+    // assignments,
     quizzes,
     pages,
   }: {
     moduleName: string;
-    assignments: LocalAssignment[];
+    // assignments: LocalAssignment[];
     quizzes: LocalQuiz[];
     pages: LocalCoursePage[];
   },
   courseName: string,
   queryClient: QueryClient
 ) => {
-  await queryClient.prefetchQuery({
-    queryKey: localCourseKeys.allItemsOfType(
-      courseName,
-      moduleName,
-      "Assignment"
-    ),
-    queryFn: () => assignments,
-  });
+  // await queryClient.prefetchQuery({
+  //   queryKey: localCourseKeys.allItemsOfType(
+  //     courseName,
+  //     moduleName,
+  //     "Assignment"
+  //   ),
+  //   queryFn: () => assignments,
+  // });
   await queryClient.prefetchQuery({
     queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Quiz"),
     queryFn: () => quizzes,
@@ -164,20 +164,20 @@ const hydrateModuleData = async (
     queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Page"),
     queryFn: () => pages,
   });
-  await Promise.all(
-    assignments.map(
-      async (assignment) =>
-        await queryClient.prefetchQuery({
-          queryKey: localCourseKeys.itemOfType(
-            courseName,
-            moduleName,
-            assignment.name,
-            "Assignment"
-          ),
-          queryFn: () => assignment,
-        })
-    )
-  );
+  // await Promise.all(
+  //   assignments.map(
+  //     async (assignment) =>
+  //       await queryClient.prefetchQuery({
+  //         queryKey: localCourseKeys.itemOfType(
+  //           courseName,
+  //           moduleName,
+  //           assignment.name,
+  //           "Assignment"
+  //         ),
+  //         queryFn: () => assignment,
+  //       })
+  //   )
+  // );
   await Promise.all(
     quizzes.map(
       async (quiz) =>

nextjs/src/hooks/localCourse/assignmentHooks.ts

@@ -35,7 +35,7 @@ export const useAssignmentQuery = (
 
 export const useAssignmentsQuery = (moduleName: string) => {
   const { courseName } = useCourseContext();
-  return trpc.assignment.getAllAssignments.useSuspenseQuery({
+  return trpc.assignment.getAllAssignments.useQuery({
     moduleName,
     courseName,
   });

nextjs/src/services/trpc/context.ts

@@ -1,9 +1,6 @@
-import type { CreateNextContextOptions } from '@trpc/server/adapters/next';
- 
-export const createContext = async () => {
- 
-  return {
-  };
+
+export const createTrpcContext = async () => {
+  return {};
 };
- 
-export type Context = typeof createContext;
+
+export type TrpcContext = typeof createTrpcContext;

nextjs/src/services/trpc/router/app.ts

@@ -1,6 +1,6 @@
-import { createContext } from "../context";
+import { createTrpcContext } from "../context";
 import publicProcedure from "../procedures/public";
-import { createCallerFactory, mergeRouters, router } from "../trpc";
+import { createCallerFactory, router } from "../trpc";
 import { assignmentRouter } from "./assignmentRouter";
 
 export const helloRouter = router({
@@ -11,16 +11,16 @@ export const helloRouter = router({
   }),
 });
 
-export const appRouter = router({
+export const trpcAppRouter = router({
   hello: helloRouter,
   assignment: assignmentRouter,
 });
 
-export const createCaller = createCallerFactory(appRouter);
+export const createCaller = createCallerFactory(trpcAppRouter);
 
 export const createAsyncCaller = async () => {
-  const context = await createContext();
+  const context = await createTrpcContext();
   return createCaller(context);
 };
 
-export type AppRouter = typeof appRouter;
+export type AppRouter = typeof trpcAppRouter;