diff --git a/nextjs/src/app/api/trpc/[trpc]/route.ts b/nextjs/src/app/api/trpc/[trpc]/route.ts index f64f71d..f76a8e6 100644 --- a/nextjs/src/app/api/trpc/[trpc]/route.ts +++ b/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, }); }; diff --git a/nextjs/src/app/course/[courseName]/layout.tsx b/nextjs/src/app/course/[courseName]/layout.tsx index 3919c4d..8685634 100644 --- a/nextjs/src/app/course/[courseName]/layout.tsx +++ b/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 ( - - {children} - + + + {children} + + ); diff --git a/nextjs/src/app/layout.tsx b/nextjs/src/app/layout.tsx index e405f35..09827db 100644 --- a/nextjs/src/app/layout.tsx +++ b/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 (
- - - + + + + {children} - - + + +
diff --git a/nextjs/src/hooks/hookHydration.ts b/nextjs/src/hooks/hookHydration.ts index 034047a..9e3248b 100644 --- a/nextjs/src/hooks/hookHydration.ts +++ b/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) => diff --git a/nextjs/src/hooks/localCourse/assignmentHooks.ts b/nextjs/src/hooks/localCourse/assignmentHooks.ts index cf8b741..f85b6b1 100644 --- a/nextjs/src/hooks/localCourse/assignmentHooks.ts +++ b/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, }); diff --git a/nextjs/src/services/trpc/context.ts b/nextjs/src/services/trpc/context.ts index 6bbb5a6..70b84f3 100644 --- a/nextjs/src/services/trpc/context.ts +++ b/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; \ No newline at end of file + +export type TrpcContext = typeof createTrpcContext; diff --git a/nextjs/src/services/trpc/router/app.ts b/nextjs/src/services/trpc/router/app.ts index 76c6096..67dc1aa 100644 --- a/nextjs/src/services/trpc/router/app.ts +++ b/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;