improved performance on calendar view

nextjs/src/hooks/localCourse/assignmentHooks.ts

@@ -1,28 +1,40 @@
-"use client"
+"use client";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
-import { useSuspenseQuery, useSuspenseQueries, useQueryClient, useMutation } from "@tanstack/react-query";
+import {
+  useSuspenseQuery,
+  useSuspenseQueries,
+  useQueryClient,
+  useMutation,
+} from "@tanstack/react-query";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
+export const getAssignmentNamesQueryConfig = (
+  courseName: string,
+  moduleName: string
+) => ({
+  queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
+  queryFn: async (): Promise<string[]> => {
+    const url =
+      "/api/courses/" +
+      encodeURIComponent(courseName) +
+      "/modules/" +
+      encodeURIComponent(moduleName) +
+      "/assignments";
+    const response = await axios.get(url);
+    return response.data;
+  },
+});
+
 export const useAssignmentNamesQuery = (moduleName: string) => {
   const { courseName } = useCourseContext();
-  return useSuspenseQuery({
-    queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
-    queryFn: async (): Promise<string[]> => {
-      const url =
-        "/api/courses/" +
-        encodeURIComponent(courseName) +
-        "/modules/" +
-        encodeURIComponent(moduleName) +
-        "/assignments";
-      const response = await axios.get(url);
-      return response.data;
-    },
-  });
+  return useSuspenseQuery(
+    getAssignmentNamesQueryConfig(courseName, moduleName)
+  );
 };
 
-const getAssignmentQueryConfig = (
+export const getAssignmentQueryConfig = (
   courseName: string,
   moduleName: string,
   assignmentName: string
@@ -46,6 +58,7 @@ const getAssignmentQueryConfig = (
     },
   };
 };
+
 export const useAssignmentQuery = (
   moduleName: string,
   assignmentName: string
@@ -101,7 +114,11 @@ export const useUpdateAssignmentMutation = () => {
     },
     onSuccess: (_, { moduleName, assignmentName }) => {
       queryClient.invalidateQueries({
-        queryKey: localCourseKeys.assignment(courseName, moduleName, assignmentName),
+        queryKey: localCourseKeys.assignment(
+          courseName,
+          moduleName,
+          assignmentName
+        ),
       });
       queryClient.invalidateQueries({
         queryKey: localCourseKeys.assignmentNames(courseName, moduleName),

nextjs/src/hooks/localCourse/localCoursesHooks.ts

@@ -1,14 +1,20 @@
 "use client";
 import { LocalCourseSettings } from "@/models/local/localCourse";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import {
+  useQueries,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import {
+  getAssignmentNamesQueryConfig,
+  getAssignmentQueryConfig,
   useAssignmentNamesQuery,
   useAssignmentsQueries,
 } from "./assignmentHooks";
-import { usePageNamesQuery, usePagesQueries } from "./pageHooks";
-import { useQuizNamesQuery, useQuizzesQueries } from "./quizHooks";
+import { getPageNamesQueryConfig, getPageQueryConfig, usePageNamesQuery, usePagesQueries } from "./pageHooks";
+import { getQuizNamesQueryConfig, getQuizQueryConfig, useQuizNamesQuery, useQuizzesQueries } from "./quizHooks";
 import { useMemo } from "react";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
@@ -48,33 +54,128 @@ export const useModuleNamesQuery = () => {
 
 // dangerous? really slowed down page...
 // maybe it only slowed down with react query devtools...
-// export const useModuleDataQuery = (moduleName: string) => {
-//   console.log("running");
-//   const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
-//   const { data: quizNames } = useQuizNamesQuery(moduleName);
-//   const { data: pageNames } = usePageNamesQuery(moduleName);
+export const useModuleDataQuery = (moduleName: string) => {
+  console.log("running");
+  const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
+  const { data: quizNames } = useQuizNamesQuery(moduleName);
+  const { data: pageNames } = usePageNamesQuery(moduleName);
 
-//   const { data: assignments } = useAssignmentsQueries(
-//     moduleName,
-//     assignmentNames
-//   );
-//   const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
-//   const { data: pages } = usePagesQueries(moduleName, pageNames);
+  const { data: assignments } = useAssignmentsQueries(
+    moduleName,
+    assignmentNames
+  );
+  const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
+  const { data: pages } = usePagesQueries(moduleName, pageNames);
 
-//   return {
-//     assignments,
-//     quizzes,
-//     pages,
-//   };
-//   // return useMemo(
-//   //   () => ({
-//   //     assignments,
-//   //     quizzes,
-//   //     pages,
-//   //   }),
-//   //   [assignments, pages, quizzes]
-//   // );
-// };
+  return {
+    assignments,
+    quizzes,
+    pages,
+  };
+  // return useMemo(
+  //   () => ({
+  //     assignments,
+  //     quizzes,
+  //     pages,
+  //   }),
+  //   [assignments, pages, quizzes]
+  // );
+};
+
+export const useAllCourseDataQuery = () => {
+  const { courseName } = useCourseContext();
+  const { data: moduleNames } = useModuleNamesQuery();
+
+  const { data: assignmentNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getAssignmentNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((assignmentName) => ({
+          moduleName: moduleNames[i],
+          assignmentName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: assignmentsAndModules } = useSuspenseQueries({
+    queries: assignmentNamesAndModules.map(
+      ({ moduleName, assignmentName }, i) =>
+        getAssignmentQueryConfig(courseName, moduleName, assignmentName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: assignmentNamesAndModules[i].moduleName,
+        assignment: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const {data: quizNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getQuizNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((quizName) => ({
+          moduleName: moduleNames[i],
+          quizName: quizName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: quizzesAndModules } = useSuspenseQueries({
+    queries: quizNamesAndModules.map(
+      ({ moduleName, quizName }, i) =>
+        getQuizQueryConfig(courseName, moduleName, quizName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: quizNamesAndModules[i].moduleName,
+        quiz: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const {data: pageNamesAndModules } = useSuspenseQueries({
+    queries: moduleNames.map((moduleName) =>
+      getPageNamesQueryConfig(courseName, moduleName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) =>
+        r.data.map((pageName) => ({
+          moduleName: moduleNames[i],
+          pageName,
+        }))
+      ),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+  const { data: pagesAndModules } = useSuspenseQueries({
+    queries: pageNamesAndModules.map(
+      ({ moduleName, pageName }, i) =>
+        getPageQueryConfig(courseName, moduleName, pageName)
+    ),
+    combine: (results) => ({
+      data: results.flatMap((r, i) => ({
+        moduleName: pageNamesAndModules[i].moduleName,
+        page: r.data,
+      })),
+      pending: results.some((r) => r.isPending),
+    }),
+  });
+
+
+  return {  assignmentsAndModules, quizzesAndModules, pagesAndModules };
+};
 
 // export const useUpdateCourseMutation = (courseName: string) => {
 //   const queryClient = useQueryClient();

nextjs/src/hooks/localCourse/pageHooks.ts

@@ -10,9 +10,11 @@ import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
-export const usePageNamesQuery = (moduleName: string) => {
-  const { courseName } = useCourseContext();
-  return useSuspenseQuery({
+export function getPageNamesQueryConfig(
+  courseName: string,
+  moduleName: string
+) {
+  return {
     queryKey: localCourseKeys.pageNames(courseName, moduleName),
     queryFn: async (): Promise<string[]> => {
       const url =
@@ -24,8 +26,14 @@ export const usePageNamesQuery = (moduleName: string) => {
       const response = await axios.get(url);
       return response.data;
     },
-  });
+  };
+}
+
+export const usePageNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getPageNamesQueryConfig(courseName, moduleName));
 };
+
 export const usePageQuery = (moduleName: string, pageName: string) => {
   const { courseName } = useCourseContext();
   return useSuspenseQuery(getPageQueryConfig(courseName, moduleName, pageName));
@@ -44,7 +52,7 @@ export const usePagesQueries = (moduleName: string, pageNames: string[]) => {
   });
 };
 
-function getPageQueryConfig(
+export function getPageQueryConfig(
   courseName: string,
   moduleName: string,
   pageName: string

nextjs/src/hooks/localCourse/quizHooks.ts

@@ -10,13 +10,12 @@ import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
-export const useQuizNamesQuery = (moduleName: string) => {
-  const { courseName } = useCourseContext();
-  return useSuspenseQuery({
+
+export function getQuizNamesQueryConfig(courseName: string, moduleName: string) {
+  return {
     queryKey: localCourseKeys.quizNames(courseName, moduleName),
     queryFn: async (): Promise<string[]> => {
-      const url =
-        "/api/courses/" +
+      const url = "/api/courses/" +
         encodeURIComponent(courseName) +
         "/modules/" +
         encodeURIComponent(moduleName) +
@@ -24,7 +23,11 @@ export const useQuizNamesQuery = (moduleName: string) => {
       const response = await axios.get(url);
       return response.data;
     },
-  });
+  };
+}
+export const useQuizNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getQuizNamesQueryConfig(courseName, moduleName));
 };
 
 export const useQuizQuery = (moduleName: string, quizName: string) => {
@@ -45,7 +48,7 @@ export const useQuizzesQueries = (moduleName: string, quizNames: string[]) => {
   });
 };
 
-function getQuizQueryConfig(
+export function getQuizQueryConfig(
   courseName: string,
   moduleName: string,
   quizName: string