From 5c7ddf18d6229d474156e6f5f1cb061fcfba2eb3 Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Fri, 13 Sep 2024 16:06:50 -0600 Subject: [PATCH] updates --- .../[courseName]/calendar/CalendarMonth.tsx | 2 - .../context/CalendarItemsContextProvider.tsx | 1 - nextjs/src/app/newCourse/NewCourseForm.tsx | 6 +- .../localCourse/localCourseModuleHooks.ts | 148 +++++++++++++++++ .../hooks/localCourse/localCoursesHooks.ts | 155 ------------------ 5 files changed, 150 insertions(+), 162 deletions(-) create mode 100644 nextjs/src/hooks/localCourse/localCourseModuleHooks.ts diff --git a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx index 03b3e62..fbd38d2 100644 --- a/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx +++ b/nextjs/src/app/course/[courseName]/calendar/CalendarMonth.tsx @@ -10,7 +10,6 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => { new Date(month.year, month.month, 1) < new Date(Date.now() - weekInMilliseconds); - console.log(month, isInPast); const [isCollapsed, setIsCollapsed] = useState(isInPast); const monthName = new Date(month.year, month.month - 1, 1).toLocaleString( @@ -20,7 +19,6 @@ export const CalendarMonth = ({ month }: { month: CalendarMonthModel }) => { const toggleCollapse = () => setIsCollapsed(!isCollapsed); const weekDaysList: DayOfWeek[] = Object.values(DayOfWeek); - console.log(isCollapsed); return ( <>
diff --git a/nextjs/src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx b/nextjs/src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx index 962d281..4ba0fb3 100644 --- a/nextjs/src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx +++ b/nextjs/src/app/course/[courseName]/context/CalendarItemsContextProvider.tsx @@ -2,7 +2,6 @@ import { ReactNode } from "react"; import { useCourseContext } from "./courseContext"; import { useAllCourseDataQuery, - useModuleDataQuery, } from "@/hooks/localCourse/localCoursesHooks"; import { CalendarItemsContext, diff --git a/nextjs/src/app/newCourse/NewCourseForm.tsx b/nextjs/src/app/newCourse/NewCourseForm.tsx index 6371705..af773ae 100644 --- a/nextjs/src/app/newCourse/NewCourseForm.tsx +++ b/nextjs/src/app/newCourse/NewCourseForm.tsx @@ -87,14 +87,12 @@ export default function NewCourseForm() { daysOfWeek: selectedDaysOfWeek, canvasId: selectedCanvasCourse.id, startDate: selectedTerm.start_at ?? "", - endDate: selectedTerm.start_at ?? "", + endDate: selectedTerm.end_at ?? "", defaultDueTime: { hour: 11, minute: 59 }, }, }) .then(() => { - router.push(getCourseUrl(selectedDirectory), undefined, { - shallow: true, - }); + router.push(getCourseUrl(selectedDirectory)); }); } }} diff --git a/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts b/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts new file mode 100644 index 0000000..6038df7 --- /dev/null +++ b/nextjs/src/hooks/localCourse/localCourseModuleHooks.ts @@ -0,0 +1,148 @@ +import { useCourseContext } from "@/app/course/[courseName]/context/courseContext"; +import { axiosClient } from "@/services/axiosUtils"; +import { useMutation, useSuspenseQuery } from "@tanstack/react-query"; +import { localCourseKeys } from "./localCourseKeys"; + +export const useModuleNamesQuery = () => { + const { courseName } = useCourseContext(); + return useSuspenseQuery({ + queryKey: localCourseKeys.moduleNames(courseName), + queryFn: async (): Promise => { + const url = `/api/courses/${courseName}/modules`; + const response = await axiosClient.get(url); + return response.data; + }, + }); +}; + +export const useCreateModuleMutation = () => { + const { courseName } = useCourseContext(); + return useMutation({ + mutationFn: async (moduleName: string) => { + const url = `/api/courses/${courseName}/modules`; + const response = await axiosClient.post(url, {moduleName}); + return response.data;}, + }); +}; + +// // 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); + +// 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] +// // ); +// }; + +// 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 }; +// }; diff --git a/nextjs/src/hooks/localCourse/localCoursesHooks.ts b/nextjs/src/hooks/localCourse/localCoursesHooks.ts index 2546bdd..6e4facf 100644 --- a/nextjs/src/hooks/localCourse/localCoursesHooks.ts +++ b/nextjs/src/hooks/localCourse/localCoursesHooks.ts @@ -2,32 +2,11 @@ import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse"; import { useMutation, - useQueries, useQueryClient, - useSuspenseQueries, useSuspenseQuery, } from "@tanstack/react-query"; -import axios from "axios"; import { localCourseKeys } from "./localCourseKeys"; import { axiosClient } from "@/services/axiosUtils"; -import { - getAssignmentNamesQueryConfig, - getAssignmentQueryConfig, - useAssignmentNamesQuery, - useAssignmentsQueries, -} from "./assignmentHooks"; -import { - getPageNamesQueryConfig, - getPageQueryConfig, - usePageNamesQuery, - usePagesQueries, -} from "./pageHooks"; -import { - getQuizNamesQueryConfig, - getQuizQueryConfig, - useQuizNamesQuery, - useQuizzesQueries, -} from "./quizHooks"; import { useCourseContext } from "@/app/course/[courseName]/context/courseContext"; export const useLocalCoursesSettingsQuery = () => @@ -94,140 +73,6 @@ export const useUpdateLocalCourseSettingsMutation = () => { }); }; -export const useModuleNamesQuery = () => { - const { courseName } = useCourseContext(); - return useSuspenseQuery({ - queryKey: localCourseKeys.moduleNames(courseName), - queryFn: async (): Promise => { - const url = `/api/courses/${courseName}/modules`; - const response = await axiosClient.get(url); - return response.data; - }, - }); -}; - -// 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); - - 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] - // ); -}; - -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(); // return useMutation({