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

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

11
nextjs/src/app/api/courses/[courseName]/route.ts
View File

@@ -9,15 +9,6 @@ export async function PUT(
console.log(updatedCourse); console.log(updatedCourse);
console.log(courseName); console.log(courseName);
await fileStorageService.saveCourseAsync(updatedCourse, previousCourse); // await fileStorageService.saveCourseAsync(updatedCourse, previousCourse);
return Response.json({}); return Response.json({});
} }
export async function GET(
request: Request,
{ params: { courseName } }: { params: { courseName: string } }
) {
const courses = await fileStorageService.loadSavedCourses();
const course = courses.find((c) => c.settings.name === courseName);
return Response.json(course);
}

9
nextjs/src/app/api/courses/[courseName]/settings/route.ts Normal file
View File

@@ -0,0 +1,9 @@
import { fileStorageService } from "@/services/fileStorage/fileStorageService";
export async function GET(
_request: Request,
{ params: { courseName } }: { params: { courseName: string } }
) {
const settings = await fileStorageService.getCourseSettings(courseName)
return Response.json(settings);
}

3
nextjs/src/app/api/courses/route.ts
View File

@@ -1,6 +1,7 @@
import { fileStorageService } from "@/services/fileStorage/fileStorageService"; import { fileStorageService } from "@/services/fileStorage/fileStorageService";
export async function GET() { export async function GET() {
const courses = await fileStorageService.loadSavedCourses(); const courses = await fileStorageService.getCourseNames();
return Response.json(courses); return Response.json(courses);
} }

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

@@ -1,8 +1,8 @@
"use client"; "use client";
import { useCourseContext } from "./context/courseContext"; import { useLocalCourseSettingsQuery } from "@/hooks/localCoursesHooks";
export default function CourseSettings() { export default function CourseSettings({ courseName }: { courseName: string }) {
const context = useCourseContext(); const { data: settings } = useLocalCourseSettingsQuery(courseName);
return <div>{context.localCourse.settings.name}</div>; 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"; import { CalendarMonth } from "./CalendarMonth";
export default function CourseCalendar() { export default function CourseCalendar() {
const { // const {
localCourse: { // localCourse: {
settings: { startDate, endDate }, // settings: { startDate, endDate },
}, // },
} = useCourseContext(); // } = useCourseContext();
const startDateTime = getDateFromStringOrThrow( // const startDateTime = getDateFromStringOrThrow(
startDate, // startDate,
"course start date" // "course start date"
); // );
const endDateTime = getDateFromStringOrThrow(endDate, "course end date"); // const endDateTime = getDateFromStringOrThrow(endDate, "course end date");
const months = getMonthsBetweenDates(startDateTime, endDateTime); // const months = getMonthsBetweenDates(startDateTime, endDateTime);
return ( return (
<div <div
@@ -29,9 +29,10 @@ export default function CourseCalendar() {
bg-slate-950 bg-slate-950
" "
> >
{months.map((month) => ( Month Goes Here
{/* {months.map((month) => (
<CalendarMonth key={month.month + "" + month.year} month={month} /> <CalendarMonth key={month.month + "" + month.year} month={month} />
))} ))} */}
</div> </div>
); );
} }

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

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

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

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

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

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

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

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

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

2
nextjs/src/hooks/hookHydration.ts
View File

@@ -5,6 +5,6 @@ import { fileStorageService } from "@/services/fileStorage/fileStorageService";
export const hydrateCourses = async (queryClient: QueryClient) => { export const hydrateCourses = async (queryClient: QueryClient) => {
await queryClient.prefetchQuery({ await queryClient.prefetchQuery({
queryKey: localCourseKeys.allCourses, queryKey: localCourseKeys.allCourses,
queryFn: async () => await fileStorageService.loadSavedCourses(), queryFn: async () => await fileStorageService.getCourseNames(),
}); });
}; };

21
nextjs/src/hooks/localCoursesHooks.ts
View File

@@ -1,4 +1,4 @@
import { LocalCourse } from "@/models/local/localCourse"; import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse";
import { import {
useMutation, useMutation,
useQueryClient, useQueryClient,
@@ -8,30 +8,29 @@ import axios from "axios";
export const localCourseKeys = { export const localCourseKeys = {
allCourses: ["all courses"] as const, allCourses: ["all courses"] as const,
courseDetail: (courseName: string) => ["course details", courseName] as const, courseSettings: (courseName: string) =>
["course details", courseName, "settings"] as const,
}; };
export const useLocalCourseNamesQuery = () => export const useLocalCourseNamesQuery = () =>
useSuspenseQuery({ useSuspenseQuery({
queryKey: localCourseKeys.allCourses, queryKey: localCourseKeys.allCourses,
queryFn: async (): Promise<LocalCourse[]> => { queryFn: async (): Promise<string[]> => {
const url = `/api/courses`; const url = `/api/courses`;
const response = await axios.get(url); const response = await axios.get(url);
return response.data; return response.data;
}, },
select: (courses) => courses.map((c) => c.settings.name),
}); });
export const useLocalCourseDetailsQuery = (courseName: string) => { export const useLocalCourseSettingsQuery = (courseName: string) =>
return useSuspenseQuery({ useSuspenseQuery({
queryKey: localCourseKeys.courseDetail(courseName), queryKey: localCourseKeys.courseSettings(courseName),
queryFn: async (): Promise<LocalCourse> => { queryFn: async (): Promise<LocalCourseSettings> => {
const url = `/api/courses/${courseName}`; const url = `/api/courses/${courseName}/settings`;
const response = await axios.get(url); const response = await axios.get(url);
return response.data; return response.data;
}, },
}); });
};
export const useUpdateCourseMutation = (courseName: string) => { export const useUpdateCourseMutation = (courseName: string) => {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
@@ -45,7 +44,7 @@ export const useUpdateCourseMutation = (courseName: string) => {
}, },
onSuccess: () => { onSuccess: () => {
queryClient.invalidateQueries({ queryClient.invalidateQueries({
queryKey: localCourseKeys.courseDetail(courseName), queryKey: localCourseKeys.courseSettings(courseName),
}); });
}, },
scope: { scope: {

87
nextjs/src/services/fileStorage/fileStorageService.ts
View File

@@ -1,27 +1,70 @@
import { promises as fs } from "fs"; import { promises as fs } from "fs";
import path from "path"; import path from "path";
import { LocalCourse } from "@/models/local/localCourse"; import {
import { courseMarkdownLoader } from "./utils/couresMarkdownLoader"; LocalCourse,
LocalCourseSettings,
localCourseYamlUtils,
} from "@/models/local/localCourse";
import { courseMarkdownLoader } from "./utils/courseMarkdownLoader";
import { courseMarkdownSaver } from "./utils/courseMarkdownSaver"; import { courseMarkdownSaver } from "./utils/courseMarkdownSaver";
import {
directoryOrFileExists,
hasFileSystemEntries,
} from "./utils/fileSystemUtils";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage"; const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
console.log("base path", basePath); console.log("base path", basePath);
export const fileStorageService = { export const fileStorageService = {
async saveCourseAsync( // async saveCourseAsync(
course: LocalCourse, // course: LocalCourse,
previouslyStoredCourse?: LocalCourse // previouslyStoredCourse?: LocalCourse
) { // ) {
await courseMarkdownSaver.save(course, previouslyStoredCourse); // await courseMarkdownSaver.save(course, previouslyStoredCourse);
}, // },
async loadSavedCourses(): Promise<LocalCourse[]> { // async loadSavedCourses(): Promise<LocalCourse[]> {
console.log("loading pages from file system"); // console.log("loading pages from file system");
return (await courseMarkdownLoader.loadSavedCourses()) || []; // return (await courseMarkdownLoader.loadSavedCourses()) || [];
// },
async getCourseNames() {
console.log("loading course ids");
const courseDirectories = await fs.readdir(basePath, {
withFileTypes: true,
});
const coursePromises = courseDirectories
.filter((dirent) => dirent.isDirectory())
.filter(async (dirent) => {
const coursePath = path.join(basePath, dirent.name);
const settingsPath = path.join(coursePath, "settings.yml");
return await directoryOrFileExists(settingsPath);
});
const courseNamesFromDirectories = (await Promise.all(coursePromises)).map(
(c) => c.name
);
return courseNamesFromDirectories;
},
async getCourseSettings(courseName: string): Promise<LocalCourseSettings> {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
if (!(await directoryOrFileExists(settingsPath))) {
const errorMessage = `Error loading settings for ${courseName}, settings file ${settingsPath}`;
console.log(errorMessage);
throw new Error(errorMessage);
}
const settingsString = await fs.readFile(settingsPath, "utf-8");
const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
const folderName = path.basename(courseDirectory);
return { ...settings, name: folderName };
}, },
async getEmptyDirectories(): Promise<string[]> { async getEmptyDirectories(): Promise<string[]> {
if (!(await this.directoryExists(basePath))) { if (!(await directoryOrFileExists(basePath))) {
throw new Error( throw new Error(
`Cannot get empty directories, ${basePath} does not exist` `Cannot get empty directories, ${basePath} does not exist`
); );
@@ -31,26 +74,8 @@ export const fileStorageService = {
const emptyDirectories = directories const emptyDirectories = directories
.filter((dirent) => dirent.isDirectory()) .filter((dirent) => dirent.isDirectory())
.map((dirent) => path.join(basePath, dirent.name)) .map((dirent) => path.join(basePath, dirent.name))
.filter(async (dir) => !(await this.hasFileSystemEntries(dir))); .filter(async (dir) => !(await hasFileSystemEntries(dir)));
return emptyDirectories; return emptyDirectories;
}, },
async directoryExists(directoryPath: string): Promise<boolean> {
try {
await fs.access(directoryPath);
return true;
} catch {
return false;
}
},
async hasFileSystemEntries(directoryPath: string): Promise<boolean> {
try {
const entries = await fs.readdir(directoryPath);
return entries.length > 0;
} catch {
return false;
}
},
}; };

95
nextjs/src/services/fileStorage/utils/couresMarkdownLoader.ts → nextjs/src/services/fileStorage/utils/courseMarkdownLoader.ts
View File

@@ -18,54 +18,55 @@ import {
} from "@/models/local/quiz/localQuiz"; } from "@/models/local/quiz/localQuiz";
import { promises as fs } from "fs"; import { promises as fs } from "fs";
import path from "path"; import path from "path";
import { directoryOrFileExists } from "./fileSystemUtils";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage"; const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
export const courseMarkdownLoader = { export const courseMarkdownLoader = {
async loadSavedCourses(): Promise<LocalCourse[]> { // async loadSavedCourses(): Promise<LocalCourse[]> {
const courseDirectories = await fs.readdir(basePath, { // const courseDirectories = await fs.readdir(basePath, {
withFileTypes: true, // withFileTypes: true,
}); // });
const coursePromises = courseDirectories // const coursePromises = courseDirectories
.filter((dirent) => dirent.isDirectory()) // .filter((dirent) => dirent.isDirectory())
.map(async (dirent) => { // .map(async (dirent) => {
const coursePath = path.join(basePath, dirent.name); // const coursePath = path.join(basePath, dirent.name);
const settingsPath = path.join(coursePath, "settings.yml"); // const settingsPath = path.join(coursePath, "settings.yml");
if (await this.fileExists(settingsPath)) { // if (await directoryOrFileExists(settingsPath)) {
return this.loadCourseByPath(coursePath); // return this.loadCourseByPath(coursePath);
} // }
return null; // return null;
}); // });
const courses = (await Promise.all(coursePromises)).filter( // const courses = (await Promise.all(coursePromises)).filter(
(course) => course !== null // (course) => course !== null
) as LocalCourse[]; // ) as LocalCourse[];
return courses.sort((a, b) => // return courses.sort((a, b) =>
a.settings.name.localeCompare(b.settings.name) // a.settings.name.localeCompare(b.settings.name)
); // );
}, // },
async loadCourseByPath(courseDirectory: string): Promise<LocalCourse> { // async loadCourseByPath(courseDirectory: string): Promise<LocalCourse> {
if (!(await this.directoryExists(courseDirectory))) { // if (!(await directoryOrFileExists(courseDirectory))) {
const errorMessage = `Error loading course by name, could not find folder ${courseDirectory}`; // const errorMessage = `Error loading course by name, could not find folder ${courseDirectory}`;
console.log(errorMessage); // console.log(errorMessage);
throw new Error(errorMessage); // throw new Error(errorMessage);
} // }
const settings = await this.loadCourseSettings(courseDirectory); // const settings = await this.loadCourseSettings(courseDirectory);
const modules = await this.loadCourseModules(courseDirectory); // const modules = await this.loadCourseModules(courseDirectory);
return { // return {
settings, // settings,
modules, // modules,
}; // };
}, // },
async loadCourseSettings( async loadCourseSettings(
courseDirectory: string courseDirectory: string
): Promise<LocalCourseSettings> { ): Promise<LocalCourseSettings> {
const settingsPath = path.join(courseDirectory, "settings.yml"); const settingsPath = path.join(courseDirectory, "settings.yml");
if (!(await this.fileExists(settingsPath))) { if (!(await directoryOrFileExists(settingsPath))) {
const errorMessage = `Error loading course by name, settings file ${settingsPath}`; const errorMessage = `Error loading course by name, settings file ${settingsPath}`;
console.log(errorMessage); console.log(errorMessage);
throw new Error(errorMessage); throw new Error(errorMessage);
@@ -110,7 +111,7 @@ export const courseMarkdownLoader = {
modulePath: string modulePath: string
): Promise<LocalAssignment[]> { ): Promise<LocalAssignment[]> {
const assignmentsPath = path.join(modulePath, "assignments"); const assignmentsPath = path.join(modulePath, "assignments");
if (!(await this.directoryExists(assignmentsPath))) { if (!(await directoryOrFileExists(assignmentsPath))) {
console.log( console.log(
`Error loading course by name, assignments folder does not exist in ${modulePath}` `Error loading course by name, assignments folder does not exist in ${modulePath}`
); );
@@ -132,7 +133,7 @@ export const courseMarkdownLoader = {
async loadQuizzesFromPath(modulePath: string): Promise<LocalQuiz[]> { async loadQuizzesFromPath(modulePath: string): Promise<LocalQuiz[]> {
const quizzesPath = path.join(modulePath, "quizzes"); const quizzesPath = path.join(modulePath, "quizzes");
if (!(await this.directoryExists(quizzesPath))) { if (!(await directoryOrFileExists(quizzesPath))) {
console.log( console.log(
`Quizzes folder does not exist in ${modulePath}, creating now` `Quizzes folder does not exist in ${modulePath}, creating now`
); );
@@ -156,7 +157,7 @@ export const courseMarkdownLoader = {
modulePath: string modulePath: string
): Promise<LocalCoursePage[]> { ): Promise<LocalCoursePage[]> {
const pagesPath = path.join(modulePath, "pages"); const pagesPath = path.join(modulePath, "pages");
if (!(await this.directoryExists(pagesPath))) { if (!(await directoryOrFileExists(pagesPath))) {
console.log(`Pages folder does not exist in ${modulePath}, creating now`); console.log(`Pages folder does not exist in ${modulePath}, creating now`);
await fs.mkdir(pagesPath); await fs.mkdir(pagesPath);
} }
@@ -173,22 +174,4 @@ export const courseMarkdownLoader = {
return await Promise.all(pagePromises); return await Promise.all(pagePromises);
}, },
async fileExists(filePath: string): Promise<boolean> {
try {
await fs.access(filePath);
return true;
} catch {
return false;
}
},
async directoryExists(directoryPath: string): Promise<boolean> {
try {
await fs.access(directoryPath);
return true;
} catch {
return false;
}
},
}; };

20
nextjs/src/services/fileStorage/utils/fileSystemUtils.ts Normal file
View File

@@ -0,0 +1,20 @@
import { promises as fs } from "fs";
export const hasFileSystemEntries = async (
directoryPath: string
): Promise<boolean> => {
try {
const entries = await fs.readdir(directoryPath);
return entries.length > 0;
} catch {
return false;
}
};
export const directoryOrFileExists = async (directoryPath: string): Promise<boolean> => {
try {
await fs.access(directoryPath);
return true;
} catch {
return false;
}
};