alex/canvasManagement
1
0
Fork 0
mirror of https://github.com/alexmickelson/canvasManagement.git synced 2026-03-25 23:28:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

concurrent loading

Browse Source
This commit is contained in:
Alex Mickelson
2024-11-11 13:57:27 -07:00
parent 1302e00429
commit fcf426d4a6
2 changed files with 221 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,6 @@ import type { Metadata } from "next";
import "./globals.css"; import "./globals.css";
import Providers from "./providers"; import Providers from "./providers";
import { Suspense } from "react"; import { Suspense } from "react";
import { hydrateCourses } from "@/hooks/hookHydration";
import { dehydrate, HydrationBoundary } from "@tanstack/react-query"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import { MyToaster } from "./MyToaster"; import { MyToaster } from "./MyToaster";
import { createServerSideHelpers } from "@trpc/react-query/server"; import { createServerSideHelpers } from "@trpc/react-query/server";
@@ -58,22 +57,39 @@ async function DataHydration({
}); });
const allSettings = await fileStorageService.settings.getAllCoursesSettings(); const allSettings = await fileStorageService.settings.getAllCoursesSettings();
// assignments
await Promise.all( await Promise.all(
allSettings.map(async (settings) => { allSettings.map(async (settings) => {
const courseName = settings.name; const courseName = settings.name;
const moduleNames = await fileStorageService.modules.getModuleNames( const moduleNames = await trpcHelper.module.getModuleNames.fetch({
courseName courseName,
); });
await Promise.all( await Promise.all([
moduleNames.map( // assignments
...moduleNames.map(
async (moduleName) => async (moduleName) =>
await trpcHelper.assignment.getAllAssignments.fetch({ await trpcHelper.assignment.getAllAssignments.prefetch({
courseName, courseName,
moduleName, 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,
})
),
]);
}) })
); );
@@ -87,8 +103,6 @@ async function DataHydration({
) )
); );
// await hydrateCourses(trpcHelper.queryClient);
const dehydratedState = dehydrate(trpcHelper.queryClient); const dehydratedState = dehydrate(trpcHelper.queryClient);
console.log("ran hydration"); console.log("ran hydration");

390
nextjs/src/hooks/hookHydration.ts
View File

@@ -1,208 +1,208 @@
import { QueryClient } from "@tanstack/react-query"; // import { QueryClient } from "@tanstack/react-query";
import { localCourseKeys } from "./localCourse/localCourseKeys"; // import { localCourseKeys } from "./localCourse/localCourseKeys";
import { fileStorageService } from "@/services/fileStorage/fileStorageService"; // import { fileStorageService } from "@/services/fileStorage/fileStorageService";
import { LocalCourseSettings } from "@/models/local/localCourseSettings"; // import { LocalCourseSettings } from "@/models/local/localCourseSettings";
import { canvasAssignmentService } from "@/services/canvas/canvasAssignmentService"; // import { canvasAssignmentService } from "@/services/canvas/canvasAssignmentService";
import { canvasAssignmentKeys } from "./canvas/canvasAssignmentHooks"; // import { canvasAssignmentKeys } from "./canvas/canvasAssignmentHooks";
import { LocalAssignment } from "@/models/local/assignment/localAssignment"; // import { LocalAssignment } from "@/models/local/assignment/localAssignment";
import { LocalCoursePage } from "@/models/local/page/localCoursePage"; // import { LocalCoursePage } from "@/models/local/page/localCoursePage";
import { LocalQuiz } from "@/models/local/quiz/localQuiz"; // import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { canvasQuizService } from "@/services/canvas/canvasQuizService"; // import { canvasQuizService } from "@/services/canvas/canvasQuizService";
import { canvasPageService } from "@/services/canvas/canvasPageService"; // import { canvasPageService } from "@/services/canvas/canvasPageService";
import { canvasQuizKeys } from "./canvas/canvasQuizHooks"; // import { canvasQuizKeys } from "./canvas/canvasQuizHooks";
import { canvasPageKeys } from "./canvas/canvasPageHooks"; // import { canvasPageKeys } from "./canvas/canvasPageHooks";
// import { getLecturesQueryConfig } from "./localCourse/lectureHooks"; // // import { getLecturesQueryConfig } from "./localCourse/lectureHooks";
// https://tanstack.com/query/latest/docs/framework/react/guides/ssr // // https://tanstack.com/query/latest/docs/framework/react/guides/ssr
export const hydrateCourses = async (queryClient: QueryClient) => { // export const hydrateCourses = async (queryClient: QueryClient) => {
const allSettings = await fileStorageService.settings.getAllCoursesSettings(); // const allSettings = await fileStorageService.settings.getAllCoursesSettings();
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.allCoursesSettings, // queryKey: localCourseKeys.allCoursesSettings,
queryFn: () => allSettings, // queryFn: () => allSettings,
}); // });
await Promise.all( // await Promise.all(
allSettings.map(async (settings) => { // allSettings.map(async (settings) => {
await hydrateCourse(queryClient, settings); // await hydrateCourse(queryClient, settings);
}) // })
); // );
}; // };
export const hydrateCourse = async ( // export const hydrateCourse = async (
queryClient: QueryClient, // queryClient: QueryClient,
courseSettings: LocalCourseSettings // courseSettings: LocalCourseSettings
) => { // ) => {
const courseName = courseSettings.name; // const courseName = courseSettings.name;
const moduleNames = await fileStorageService.modules.getModuleNames( // const moduleNames = await fileStorageService.modules.getModuleNames(
courseName // courseName
); // );
// await Promise.all( // // await Promise.all(
// moduleNames.map(async (moduleName) => { // // moduleNames.map(async (moduleName) => {
// const assignments = await trpcHelpers.assignment.getAllAssignments.fetch({ // // const assignments = await trpcHelpers.assignment.getAllAssignments.fetch({
// courseName, // // courseName,
// moduleName, // // moduleName,
// }); // // });
// await Promise.all( // // await Promise.all(
// assignments.map( // // assignments.map(
// async (a) => // // async (a) =>
// await trpcHelpers.assignment.getAssignment.fetch({ // // await trpcHelpers.assignment.getAssignment.fetch({
// courseName, // // courseName,
// moduleName, // // moduleName,
// assignmentName: a.name, // // assignmentName: a.name,
// }) // // })
// ) // // )
// ); // // );
// }) // // })
// ); // // );
const modulesData = await Promise.all( // const modulesData = await Promise.all(
moduleNames.map((moduleName) => loadAllModuleData(courseName, moduleName)) // moduleNames.map((moduleName) => loadAllModuleData(courseName, moduleName))
); // );
// await queryClient.prefetchQuery(getLecturesQueryConfig(courseName)); // // await queryClient.prefetchQuery(getLecturesQueryConfig(courseName));
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.settings(courseName), // queryKey: localCourseKeys.settings(courseName),
queryFn: () => courseSettings, // queryFn: () => courseSettings,
}); // });
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.moduleNames(courseName), // queryKey: localCourseKeys.moduleNames(courseName),
queryFn: () => moduleNames, // queryFn: () => moduleNames,
}); // });
await Promise.all( // await Promise.all(
modulesData.map((d) => hydrateModuleData(d, courseName, queryClient)) // modulesData.map((d) => hydrateModuleData(d, courseName, queryClient))
); // );
}; // };
export const hydrateCanvasCourse = async ( // export const hydrateCanvasCourse = async (
canvasCourseId: number, // canvasCourseId: number,
queryClient: QueryClient // queryClient: QueryClient
) => { // ) => {
await Promise.all([ // await Promise.all([
queryClient.prefetchQuery({ // queryClient.prefetchQuery({
queryKey: canvasAssignmentKeys.assignments(canvasCourseId), // queryKey: canvasAssignmentKeys.assignments(canvasCourseId),
queryFn: async () => await canvasAssignmentService.getAll(canvasCourseId), // queryFn: async () => await canvasAssignmentService.getAll(canvasCourseId),
}), // }),
queryClient.prefetchQuery({ // queryClient.prefetchQuery({
queryKey: canvasQuizKeys.quizzes(canvasCourseId), // queryKey: canvasQuizKeys.quizzes(canvasCourseId),
queryFn: async () => await canvasQuizService.getAll(canvasCourseId), // queryFn: async () => await canvasQuizService.getAll(canvasCourseId),
}), // }),
queryClient.prefetchQuery({ // queryClient.prefetchQuery({
queryKey: canvasPageKeys.pagesInCourse(canvasCourseId), // queryKey: canvasPageKeys.pagesInCourse(canvasCourseId),
queryFn: async () => await canvasPageService.getAll(canvasCourseId), // queryFn: async () => await canvasPageService.getAll(canvasCourseId),
}), // }),
]); // ]);
}; // };
const loadAllModuleData = async (courseName: string, moduleName: string) => { // const loadAllModuleData = async (courseName: string, moduleName: string) => {
const [pages, quizzes] = await Promise.all([ // const [pages, quizzes] = await Promise.all([
// await fileStorageService.assignments.getAssignmentNames( // // await fileStorageService.assignments.getAssignmentNames(
// courseName, // // courseName,
// moduleName // // moduleName
// ), // // ),
await fileStorageService.pages.getPages(courseName, moduleName), // await fileStorageService.pages.getPages(courseName, moduleName),
await fileStorageService.quizzes.getQuizzes(courseName, moduleName), // await fileStorageService.quizzes.getQuizzes(courseName, moduleName),
]); // ]);
// const [assignments] = await Promise.all([ // // const [assignments] = await Promise.all([
// await Promise.all( // // await Promise.all(
// assignmentNames.map(async (assignmentName) => { // // assignmentNames.map(async (assignmentName) => {
// try { // // try {
// return await fileStorageService.assignments.getAssignment( // // return await fileStorageService.assignments.getAssignment(
// courseName, // // courseName,
// moduleName, // // moduleName,
// assignmentName // // assignmentName
// ); // // );
// } catch (error) { // // } catch (error) {
// console.error(`Error fetching assignment: ${assignmentName}`, error); // // console.error(`Error fetching assignment: ${assignmentName}`, error);
// return null; // or any other placeholder value // // return null; // or any other placeholder value
// } // // }
// }) // // })
// ), // // ),
// ]); // // ]);
// const assignmentsLoaded = assignments.filter((a) => a !== null); // // const assignmentsLoaded = assignments.filter((a) => a !== null);
return { // return {
moduleName, // moduleName,
// assignments: assignmentsLoaded, // // assignments: assignmentsLoaded,
quizzes, // quizzes,
pages, // pages,
}; // };
}; // };
const hydrateModuleData = async ( // const hydrateModuleData = async (
{ // {
moduleName, // moduleName,
// assignments, // // assignments,
quizzes, // quizzes,
pages, // pages,
}: { // }: {
moduleName: string; // moduleName: string;
// assignments: LocalAssignment[]; // // assignments: LocalAssignment[];
quizzes: LocalQuiz[]; // quizzes: LocalQuiz[];
pages: LocalCoursePage[]; // pages: LocalCoursePage[];
}, // },
courseName: string, // courseName: string,
queryClient: QueryClient // queryClient: QueryClient
) => { // ) => {
// await queryClient.prefetchQuery({ // // await queryClient.prefetchQuery({
// queryKey: localCourseKeys.allItemsOfType( // // queryKey: localCourseKeys.allItemsOfType(
// courseName, // // courseName,
// moduleName, // // moduleName,
// "Assignment" // // "Assignment"
// ), // // ),
// queryFn: () => assignments, // // queryFn: () => assignments,
// }); // // });
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Quiz"), // queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Quiz"),
queryFn: () => quizzes, // queryFn: () => quizzes,
}); // });
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Page"), // queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Page"),
queryFn: () => pages, // queryFn: () => pages,
}); // });
// await Promise.all( // // await Promise.all(
// assignments.map( // // assignments.map(
// async (assignment) => // // async (assignment) =>
// await queryClient.prefetchQuery({ // // await queryClient.prefetchQuery({
// queryKey: localCourseKeys.itemOfType( // // queryKey: localCourseKeys.itemOfType(
// courseName, // // courseName,
// moduleName, // // moduleName,
// assignment.name, // // assignment.name,
// "Assignment" // // "Assignment"
// ), // // ),
// queryFn: () => assignment, // // queryFn: () => assignment,
// }) // // })
// ) // // )
// ); // // );
await Promise.all( // await Promise.all(
quizzes.map( // quizzes.map(
async (quiz) => // async (quiz) =>
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.itemOfType( // queryKey: localCourseKeys.itemOfType(
courseName, // courseName,
moduleName, // moduleName,
quiz.name, // quiz.name,
"Quiz" // "Quiz"
), // ),
queryFn: () => quiz, // queryFn: () => quiz,
}) // })
) // )
); // );
await Promise.all( // await Promise.all(
pages.map( // pages.map(
async (page) => // async (page) =>
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.itemOfType( // queryKey: localCourseKeys.itemOfType(
courseName, // courseName,
moduleName, // moduleName,
page.name, // page.name,
"Page" // "Page"
), // ),
queryFn: () => page, // queryFn: () => page,
}) // })
) // )
); // );
}; // };