small refactors

src/app/DataHydration.tsx

@@ -0,0 +1,80 @@
+import { fileStorageService } from "@/features/local/utils/fileStorageService";
+import { trpcAppRouter } from "@/services/serverFunctions/appRouter";
+import { createTrpcContext } from "@/services/serverFunctions/context";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
+import { createServerSideHelpers } from "@trpc/react-query/server";
+import superjson from "superjson";
+
+export default async function DataHydration({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  console.log("starting hydration");
+  const trpcHelper = createServerSideHelpers({
+    router: trpcAppRouter,
+    ctx: createTrpcContext(),
+    transformer: superjson,
+    queryClientConfig: {
+      defaultOptions: {
+        queries: {
+          staleTime: Infinity,
+        },
+      },
+    },
+  });
+
+  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
+
+  await Promise.all(
+    allSettings.map(async (settings) => {
+      const courseName = settings.name;
+      const moduleNames = await trpcHelper.module.getModuleNames.fetch({
+        courseName,
+      });
+      await Promise.all([
+        // assignments
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.assignment.getAllAssignments.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+        // quizzes
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.quiz.getAllQuizzes.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+        // pages
+        ...moduleNames.map(
+          async (moduleName) =>
+            await trpcHelper.page.getAllPages.prefetch({
+              courseName,
+              moduleName,
+            })
+        ),
+      ]);
+    })
+  );
+
+  // lectures
+  await Promise.all(
+    allSettings.map(
+      async (settings) =>
+        await trpcHelper.lectures.getLectures.fetch({
+          courseName: settings.name,
+        })
+    )
+  );
+
+  const dehydratedState = dehydrate(trpcHelper.queryClient);
+  console.log("ran hydration");
+
+  return (
+    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
+  );
+}

src/app/course/[courseName]/page.tsx

@@ -3,7 +3,7 @@ import DraggingContextProvider from "./context/drag/DraggingContextProvider";
 import { CourseNavigation } from "./CourseNavigation";
 import { DragStyleContextProvider } from "./context/drag/dragStyleContext";
 import CollapsableSidebar from "./CollapsableSidebar";
-
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
 
 export default async function CoursePage() {
   return (
@@ -13,8 +13,10 @@ export default async function CoursePage() {
           <DraggingContextProvider>
             <div className="flex sm:flex-row h-full flex-col max-w-[2400px] w-full mx-auto">
               <div className="flex-1 h-full flex flex-col">
-                <CourseNavigation />
-                <CourseCalendar />
+                <SuspenseAndErrorHandling>
+                  <CourseNavigation />
+                  <CourseCalendar />
+                </SuspenseAndErrorHandling>
               </div>
               <CollapsableSidebar />
             </div>

src/app/layout.tsx

@@ -2,15 +2,10 @@ import type { Metadata } from "next";
 import "./globals.css";
 import Providers from "./providers";
 import { Suspense } from "react";
-import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { MyToaster } from "./MyToaster";
-import { createServerSideHelpers } from "@trpc/react-query/server";
-import { trpcAppRouter } from "@/services/serverFunctions/appRouter";
-import { createTrpcContext } from "@/services/serverFunctions/context";
-import superjson from "superjson";
-import { fileStorageService } from "@/features/local/utils/fileStorageService";
 import { ClientCacheInvalidation } from "../components/realtime/ClientCacheInvalidation";
 import { getTitle } from "@/services/titleUtils";
+import DataHydration from "./DataHydration";
 export const dynamic = "force-dynamic";
 
 export const metadata: Metadata = {
@@ -34,84 +29,10 @@ export default async function RootLayout({
                 <ClientCacheInvalidation></ClientCacheInvalidation>
                 {children}
               </DataHydration>
-            </Providers>
+            </Providers>  
           </Suspense>
         </div>
       </body>
     </html>
   );
 }
-
-async function DataHydration({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  console.log("starting hydration");
-  const trpcHelper = createServerSideHelpers({
-    router: trpcAppRouter,
-    ctx: createTrpcContext(),
-    transformer: superjson,
-    queryClientConfig: {
-      defaultOptions: {
-        queries: {
-          staleTime: Infinity,
-        },
-      },
-    },
-  });
-
-  const allSettings = await fileStorageService.settings.getAllCoursesSettings();
-
-  await Promise.all(
-    allSettings.map(async (settings) => {
-      const courseName = settings.name;
-      const moduleNames = await trpcHelper.module.getModuleNames.fetch({
-        courseName,
-      });
-      await Promise.all([
-        // assignments
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.assignment.getAllAssignments.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-        // quizzes
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.quiz.getAllQuizzes.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-        // pages
-        ...moduleNames.map(
-          async (moduleName) =>
-            await trpcHelper.page.getAllPages.prefetch({
-              courseName,
-              moduleName,
-            })
-        ),
-      ]);
-    })
-  );
-
-  // lectures
-  await Promise.all(
-    allSettings.map(
-      async (settings) =>
-        await trpcHelper.lectures.getLectures.fetch({
-          courseName: settings.name,
-        })
-    )
-  );
-
-  const dehydratedState = dehydrate(trpcHelper.queryClient);
-  console.log("ran hydration");
-
-  return (
-    <HydrationBoundary state={dehydratedState}>{children}</HydrationBoundary>
-  );
-}