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");

362
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(
allSettings.map(async (settings) => {
await hydrateCourse(queryClient, settings);
})
);
};
export const hydrateCourse = async (
queryClient: QueryClient,
courseSettings: LocalCourseSettings
) => {
const courseName = courseSettings.name;
const moduleNames = await fileStorageService.modules.getModuleNames(
courseName
);
// await Promise.all(
// moduleNames.map(async (moduleName) => {
// const assignments = await trpcHelpers.assignment.getAllAssignments.fetch({
// courseName,
// moduleName,
// }); // });
// await Promise.all( // await Promise.all(
// assignments.map( // allSettings.map(async (settings) => {
// async (a) => // await hydrateCourse(queryClient, settings);
// await trpcHelpers.assignment.getAssignment.fetch({
// courseName,
// moduleName,
// assignmentName: a.name,
// })
// )
// );
// }) // })
// ); // );
// };
const modulesData = await Promise.all( // export const hydrateCourse = async (
moduleNames.map((moduleName) => loadAllModuleData(courseName, moduleName)) // queryClient: QueryClient,
); // courseSettings: LocalCourseSettings
// ) => {
// const courseName = courseSettings.name;
// const moduleNames = await fileStorageService.modules.getModuleNames(
// courseName
// );
// await queryClient.prefetchQuery(getLecturesQueryConfig(courseName)); // // 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,
// // })
// // )
// // );
// // })
// // );
await queryClient.prefetchQuery({ // const modulesData = await Promise.all(
queryKey: localCourseKeys.settings(courseName), // moduleNames.map((moduleName) => loadAllModuleData(courseName, moduleName))
queryFn: () => courseSettings, // );
});
await queryClient.prefetchQuery({
queryKey: localCourseKeys.moduleNames(courseName),
queryFn: () => moduleNames,
});
await Promise.all( // // await queryClient.prefetchQuery(getLecturesQueryConfig(courseName));
modulesData.map((d) => hydrateModuleData(d, courseName, queryClient))
);
};
export const hydrateCanvasCourse = async ( // await queryClient.prefetchQuery({
canvasCourseId: number, // queryKey: localCourseKeys.settings(courseName),
queryClient: QueryClient // queryFn: () => courseSettings,
) => { // });
await Promise.all([ // await queryClient.prefetchQuery({
queryClient.prefetchQuery({ // queryKey: localCourseKeys.moduleNames(courseName),
queryKey: canvasAssignmentKeys.assignments(canvasCourseId), // queryFn: () => moduleNames,
queryFn: async () => await canvasAssignmentService.getAll(canvasCourseId), // });
}),
queryClient.prefetchQuery({
queryKey: canvasQuizKeys.quizzes(canvasCourseId),
queryFn: async () => await canvasQuizService.getAll(canvasCourseId),
}),
queryClient.prefetchQuery({
queryKey: canvasPageKeys.pagesInCourse(canvasCourseId),
queryFn: async () => await canvasPageService.getAll(canvasCourseId),
}),
]);
};
const loadAllModuleData = async (courseName: string, moduleName: string) => {
const [pages, quizzes] = await Promise.all([
// await fileStorageService.assignments.getAssignmentNames(
// courseName,
// moduleName
// ),
await fileStorageService.pages.getPages(courseName, moduleName),
await fileStorageService.quizzes.getQuizzes(courseName, moduleName),
]);
// const [assignments] = await Promise.all([
// await Promise.all( // await Promise.all(
// assignmentNames.map(async (assignmentName) => { // modulesData.map((d) => hydrateModuleData(d, courseName, queryClient))
// try {
// return await fileStorageService.assignments.getAssignment(
// courseName,
// moduleName,
// assignmentName
// ); // );
// } catch (error) { // };
// console.error(`Error fetching assignment: ${assignmentName}`, error);
// return null; // or any other placeholder value // export const hydrateCanvasCourse = async (
// } // canvasCourseId: number,
// }) // queryClient: QueryClient
// ), // ) => {
// await Promise.all([
// queryClient.prefetchQuery({
// queryKey: canvasAssignmentKeys.assignments(canvasCourseId),
// queryFn: async () => await canvasAssignmentService.getAll(canvasCourseId),
// }),
// queryClient.prefetchQuery({
// queryKey: canvasQuizKeys.quizzes(canvasCourseId),
// queryFn: async () => await canvasQuizService.getAll(canvasCourseId),
// }),
// queryClient.prefetchQuery({
// queryKey: canvasPageKeys.pagesInCourse(canvasCourseId),
// queryFn: async () => await canvasPageService.getAll(canvasCourseId),
// }),
// ]);
// };
// const loadAllModuleData = async (courseName: string, moduleName: string) => {
// const [pages, quizzes] = await Promise.all([
// // await fileStorageService.assignments.getAssignmentNames(
// // courseName,
// // moduleName
// // ),
// await fileStorageService.pages.getPages(courseName, moduleName),
// await fileStorageService.quizzes.getQuizzes(courseName, moduleName),
// ]); // ]);
// const assignmentsLoaded = assignments.filter((a) => a !== null); // // const [assignments] = await Promise.all([
return { // // await Promise.all(
moduleName, // // assignmentNames.map(async (assignmentName) => {
// assignments: assignmentsLoaded, // // try {
quizzes, // // return await fileStorageService.assignments.getAssignment(
pages, // // courseName,
}; // // moduleName,
}; // // assignmentName
// // );
// // } catch (error) {
// // console.error(`Error fetching assignment: ${assignmentName}`, error);
// // return null; // or any other placeholder value
// // }
// // })
// // ),
// // ]);
const hydrateModuleData = async ( // // const assignmentsLoaded = assignments.filter((a) => a !== null);
{ // return {
moduleName,
// assignments,
quizzes,
pages,
}: {
moduleName: string;
// assignments: LocalAssignment[];
quizzes: LocalQuiz[];
pages: LocalCoursePage[];
},
courseName: string,
queryClient: QueryClient
) => {
// await queryClient.prefetchQuery({
// queryKey: localCourseKeys.allItemsOfType(
// courseName,
// moduleName, // moduleName,
// "Assignment" // // assignments: assignmentsLoaded,
// ), // quizzes,
// queryFn: () => assignments, // pages,
// };
// };
// const hydrateModuleData = async (
// {
// moduleName,
// // assignments,
// quizzes,
// pages,
// }: {
// moduleName: string;
// // 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, "Quiz"),
// queryFn: () => quizzes,
// }); // });
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Quiz"), // queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Page"),
queryFn: () => quizzes, // queryFn: () => pages,
}); // });
await queryClient.prefetchQuery({ // // await Promise.all(
queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, "Page"), // // assignments.map(
queryFn: () => pages, // // async (assignment) =>
}); // // await queryClient.prefetchQuery({
// // queryKey: localCourseKeys.itemOfType(
// // courseName,
// // moduleName,
// // assignment.name,
// // "Assignment"
// // ),
// // queryFn: () => assignment,
// // })
// // )
// // );
// await Promise.all( // await Promise.all(
// assignments.map( // quizzes.map(
// async (assignment) => // async (quiz) =>
// await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
// queryKey: localCourseKeys.itemOfType( // queryKey: localCourseKeys.itemOfType(
// courseName, // courseName,
// moduleName, // moduleName,
// assignment.name, // quiz.name,
// "Assignment" // "Quiz"
// ), // ),
// queryFn: () => assignment, // queryFn: () => quiz,
// }) // })
// ) // )
// ); // );
await Promise.all( // await Promise.all(
quizzes.map( // pages.map(
async (quiz) => // async (page) =>
await queryClient.prefetchQuery({ // await queryClient.prefetchQuery({
queryKey: localCourseKeys.itemOfType( // queryKey: localCourseKeys.itemOfType(
courseName, // courseName,
moduleName, // moduleName,
quiz.name, // page.name,
"Quiz" // "Page"
), // ),
queryFn: () => quiz, // queryFn: () => page,
}) // })
) // )
); // );
await Promise.all( // };
pages.map(
async (page) =>
await queryClient.prefetchQuery({
queryKey: localCourseKeys.itemOfType(
courseName,
moduleName,
page.name,
"Page"
),
queryFn: () => page,
})
)
);
};