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

moving data to be held by react query

Browse Source
This commit is contained in:
Alex Mickelson
2024-08-30 09:12:25 -06:00
parent 9d6a3d1199
commit 5d9ece63fa
15 changed files with 185 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nextjs/src/app/course/[courseName]/CourseSettings.tsx
View File

@@ -1,8 +1,8 @@
"use client";
import { useCourseContext } from "./context/courseContext";
import { useLocalCourseSettingsQuery } from "@/hooks/localCoursesHooks";
export default function CourseSettings() {
const context = useCourseContext();
return <div>{context.localCourse.settings.name}</div>;
export default function CourseSettings({ courseName }: { courseName: string }) {
const { data: settings } = useLocalCourseSettingsQuery(courseName);
return <div>{settings.name}</div>;
}

27
nextjs/src/app/course/[courseName]/calendar/CourseCalendar.tsx
View File

@@ -5,18 +5,18 @@ import { getMonthsBetweenDates } from "./calendarMonthUtils";
import { CalendarMonth } from "./CalendarMonth";
export default function CourseCalendar() {
const {
localCourse: {
settings: { startDate, endDate },
},
} = useCourseContext();
// const {
// localCourse: {
// settings: { startDate, endDate },
// },
// } = useCourseContext();
const startDateTime = getDateFromStringOrThrow(
startDate,
"course start date"
);
const endDateTime = getDateFromStringOrThrow(endDate, "course end date");
const months = getMonthsBetweenDates(startDateTime, endDateTime);
// const startDateTime = getDateFromStringOrThrow(
// startDate,
// "course start date"
// );
// const endDateTime = getDateFromStringOrThrow(endDate, "course end date");
// const months = getMonthsBetweenDates(startDateTime, endDateTime);
return (
<div
@@ -29,9 +29,10 @@ export default function CourseCalendar() {
bg-slate-950
"
>
{months.map((month) => (
Month Goes Here
{/* {months.map((month) => (
<CalendarMonth key={month.month + "" + month.year} month={month} />
))}
))} */}
</div>
);
}

51
nextjs/src/app/course/[courseName]/context/CourseContextProvider.tsx
View File

@@ -2,7 +2,7 @@
import { ReactNode, useState } from "react";
import { CourseContext, DraggableItem } from "./courseContext";
import {
useLocalCourseDetailsQuery,
useLocalCourseSettingsQuery,
useUpdateCourseMutation,
} from "@/hooks/localCoursesHooks";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
@@ -16,8 +16,8 @@ export default function CourseContextProvider({
children: ReactNode;
localCourseName: string;
}) {
const { data: course } = useLocalCourseDetailsQuery(localCourseName);
const updateCourseMutation = useUpdateCourseMutation(course.settings.name);
const { data: settings } = useLocalCourseSettingsQuery(localCourseName);
const updateCourseMutation = useUpdateCourseMutation(localCourseName);
const [itemBeingDragged, setItemBeingDragged] = useState<
DraggableItem | undefined
>();
@@ -30,34 +30,33 @@ export default function CourseContextProvider({
dueAt: dateToMarkdownString(day),
};
const localModule = course.modules.find((m) =>
m.quizzes.map((q) => q.name).includes(updatedQuiz.name)
);
if (!localModule)
console.log("could not find module for quiz ", updatedQuiz);
// const localModule = course.modules.find((m) =>
// m.quizzes.map((q) => q.name).includes(updatedQuiz.name)
// );
// if (!localModule)
// console.log("could not find module for quiz ", updatedQuiz);
const updatedCourse: LocalCourse = {
...course,
modules: course.modules.map((m) =>
m.name !== localModule?.name
? m
: {
...m,
quizzes: m.quizzes.map((q) =>
q.name === updatedQuiz.name ? updatedQuiz : q
),
}
),
};
updateCourseMutation.mutate({
updatedCourse,
previousCourse: course,
});
// const updatedCourse: LocalCourse = {
// ...course,
// modules: course.modules.map((m) =>
// m.name !== localModule?.name
// ? m
// : {
// ...m,
// quizzes: m.quizzes.map((q) =>
// q.name === updatedQuiz.name ? updatedQuiz : q
// ),
// }
// ),
// };
// updateCourseMutation.mutate({
// updatedCourse,
// previousCourse: course,
// });
};
return (
<CourseContext.Provider
value={{
localCourse: course,
startItemDrag: (d) => {
setItemBeingDragged(d);
},

16
nextjs/src/app/course/[courseName]/context/courseContext.ts
View File

@@ -1,6 +1,5 @@
"use client";
import { IModuleItem } from "@/models/local/IModuleItem";
import { LocalCourse } from "@/models/local/localCourse";
import { createContext, useContext } from "react";
export interface DraggableItem {
@@ -9,27 +8,12 @@ export interface DraggableItem {
}
export interface CourseContextInterface {
localCourse: LocalCourse;
startItemDrag: (dragging: DraggableItem) => void;
endItemDrag: () => void;
itemDrop: (droppedOnDay?: Date) => void;
}
const defaultValue: CourseContextInterface = {
localCourse: {
modules: [],
settings: {
name: "",
assignmentGroups: [],
daysOfWeek: [],
startDate: "",
endDate: "",
defaultDueTime: {
hour: 0,
minute: 0,
},
},
},
startItemDrag: () => {},
endItemDrag: () => {},
itemDrop: () => {},

10
nextjs/src/app/course/[courseName]/loading.tsx
View File

@@ -1,10 +0,0 @@
import { Spinner } from "@/components/Spinner";
import React from "react";
export default function Loading() {
return (
<div>
<Spinner />
</div>
);
}

8
nextjs/src/app/course/[courseName]/modules/ModuleList.tsx
View File

@@ -3,14 +3,12 @@ import { useCourseContext } from "../context/courseContext";
import ExpandableModule from "./ExpandableModule";
export default function ModuleList() {
const {
localCourse: { modules },
} = useCourseContext();
return (
<div>
{modules.map((m) => (
modules here
{/* {modules.map((m) => (
<ExpandableModule key={m.name} module={m} />
))}
))} */}
</div>
);
}

2
nextjs/src/app/course/[courseName]/page.tsx
View File

@@ -15,7 +15,7 @@ export default async function CoursePage({
<HydrationBoundary state={dehydratedState}>
<CourseContextProvider localCourseName={courseName}>
<div className="h-full flex flex-col">
<CourseSettings />
<CourseSettings courseName={courseName} />
<div className="flex flex-row min-h-0">
<div className="flex-1 min-h-0">
<CourseCalendar />