pushing state down with contexts

nextjs/src/hooks/localCourse/assignmentHooks.ts

@@ -2,12 +2,11 @@ import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { LocalAssignment } from "@/models/local/assignmnet/localAssignment";
 import { useSuspenseQuery, useSuspenseQueries } from "@tanstack/react-query";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
-export const useAssignmentNamesQuery = (
-  courseName: string,
-  moduleName: string
-) =>
-  useSuspenseQuery({
+export const useAssignmentNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery({
     queryKey: localCourseKeys.assignmentNames(courseName, moduleName),
     queryFn: async (): Promise<string[]> => {
       const url =
@@ -20,13 +19,13 @@ export const useAssignmentNamesQuery = (
       return response.data;
     },
   });
+};
 
 const getAssignmentQueryConfig = (
   courseName: string,
   moduleName: string,
   assignmentName: string
 ) => {
-  if (assignmentName === "Final Project Milestone ") console.log(moduleName);
   return {
     queryKey: localCourseKeys.assignment(
       courseName,
@@ -47,20 +46,22 @@ const getAssignmentQueryConfig = (
   };
 };
 export const useAssignmentQuery = (
-  courseName: string,
   moduleName: string,
   assignmentName: string
-) =>
-  useSuspenseQuery(
+) => {
+  const { courseName } = useCourseContext();
+
+  return useSuspenseQuery(
     getAssignmentQueryConfig(courseName, moduleName, assignmentName)
   );
+};
 
 export const useAssignmentsQueries = (
-  courseName: string,
   moduleName: string,
   assignmentNames: string[]
-) =>
-  useSuspenseQueries({
+) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQueries({
     queries: assignmentNames.map((name) =>
       getAssignmentQueryConfig(courseName, moduleName, name)
     ),
@@ -69,3 +70,4 @@ export const useAssignmentsQueries = (
       pending: results.some((r) => r.isPending),
     }),
   });
+};

nextjs/src/hooks/localCourse/localCoursesHooks.ts

@@ -9,6 +9,7 @@ import {
 import { usePageNamesQuery, usePagesQueries } from "./pageHooks";
 import { useQuizNamesQuery, useQuizzesQueries } from "./quizHooks";
 import { useMemo } from "react";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
 export const useLocalCourseNamesQuery = () =>
   useSuspenseQuery({
@@ -20,8 +21,9 @@ export const useLocalCourseNamesQuery = () =>
     },
   });
 
-export const useLocalCourseSettingsQuery = (courseName: string) =>
-  useSuspenseQuery({
+export const useLocalCourseSettingsQuery = () => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery({
     queryKey: localCourseKeys.settings(courseName),
     queryFn: async (): Promise<LocalCourseSettings> => {
       const url = `/api/courses/${courseName}/settings`;
@@ -29,9 +31,11 @@ export const useLocalCourseSettingsQuery = (courseName: string) =>
       return response.data;
     },
   });
+};
 
-export const useModuleNamesQuery = (courseName: string) =>
-  useSuspenseQuery({
+export const useModuleNamesQuery = () => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery({
     queryKey: localCourseKeys.moduleNames(courseName),
     queryFn: async (): Promise<string[]> => {
       const url = `/api/courses/${courseName}/modules`;
@@ -39,26 +43,24 @@ export const useModuleNamesQuery = (courseName: string) =>
       return response.data;
     },
   });
+};
 
-export const useModuleDataQuery = (courseName: string, moduleName: string) => {
+export const useModuleDataQuery = (moduleName: string) => {
   const { data: assignmentNames } = useAssignmentNamesQuery(
-    courseName,
     moduleName
   );
-  const { data: quizNames } = useQuizNamesQuery(courseName, moduleName);
-  const { data: pageNames } = usePageNamesQuery(courseName, moduleName);
+  const { data: quizNames } = useQuizNamesQuery(moduleName);
+  const { data: pageNames } = usePageNamesQuery(moduleName);
 
   const { data: assignments } = useAssignmentsQueries(
-    courseName,
     moduleName,
     assignmentNames
   );
   const { data: quizzes } = useQuizzesQueries(
-    courseName,
     moduleName,
     quizNames
   );
-  const { data: pages } = usePagesQueries(courseName, moduleName, pageNames);
+  const { data: pages } = usePagesQueries(moduleName, pageNames);
 
   return useMemo(
     () => ({

nextjs/src/hooks/localCourse/pageHooks.ts

@@ -2,9 +2,11 @@ import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
-export const usePageNamesQuery = (courseName: string, moduleName: string) =>
-  useSuspenseQuery({
+export const usePageNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery({
     queryKey: localCourseKeys.pageNames(courseName, moduleName),
     queryFn: async (): Promise<string[]> => {
       const url =
@@ -17,17 +19,14 @@ export const usePageNamesQuery = (courseName: string, moduleName: string) =>
       return response.data;
     },
   });
-export const usePageQuery = (
-  courseName: string,
-  moduleName: string,
-  pageName: string
-) => useSuspenseQuery(getPageQueryConfig(courseName, moduleName, pageName));
+};
+export const usePageQuery = (moduleName: string, pageName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getPageQueryConfig(courseName, moduleName, pageName));
+};
 
-export const usePagesQueries = (
-  courseName: string,
-  moduleName: string,
-  pageNames: string[]
-) => {
+export const usePagesQueries = (moduleName: string, pageNames: string[]) => {
+  const { courseName } = useCourseContext();
   return useSuspenseQueries({
     queries: pageNames.map((name) =>
       getPageQueryConfig(courseName, moduleName, name)

nextjs/src/hooks/localCourse/quizHooks.ts

@@ -7,9 +7,11 @@ import {
 } from "@tanstack/react-query";
 import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 
-export const useQuizNamesQuery = (courseName: string, moduleName: string) =>
-  useSuspenseQuery({
+export const useQuizNamesQuery = (moduleName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery({
     queryKey: localCourseKeys.quizNames(courseName, moduleName),
     queryFn: async (): Promise<string[]> => {
       const url =
@@ -22,19 +24,16 @@ export const useQuizNamesQuery = (courseName: string, moduleName: string) =>
       return response.data;
     },
   });
+};
 
-export const useQuizQuery = (
-  courseName: string,
-  moduleName: string,
-  quizName: string
-) => useSuspenseQuery(getQuizQueryConfig(courseName, moduleName, quizName));
+export const useQuizQuery = (moduleName: string, quizName: string) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQuery(getQuizQueryConfig(courseName, moduleName, quizName));
+};
 
-export const useQuizzesQueries = (
-  courseName: string,
-  moduleName: string,
-  quizNames: string[]
-) =>
-  useSuspenseQueries({
+export const useQuizzesQueries = (moduleName: string, quizNames: string[]) => {
+  const { courseName } = useCourseContext();
+  return useSuspenseQueries({
     queries: quizNames.map((name) =>
       getQuizQueryConfig(courseName, moduleName, name)
     ),
@@ -43,6 +42,7 @@ export const useQuizzesQueries = (
       pending: results.some((r) => r.isPending),
     }),
   });
+};
 
 function getQuizQueryConfig(
   courseName: string,
@@ -65,7 +65,9 @@ function getQuizQueryConfig(
   };
 }
 
-export const useUpdateQuizMutation = (courseName: string) => {
+export const useUpdateQuizMutation = () => {
+
+  const { courseName } = useCourseContext();
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: async ({