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(courseName);
await fileStorageService.saveCourseAsync(updatedCourse, previousCourse);
// await fileStorageService.saveCourseAsync(updatedCourse, previousCourse);
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";
export async function GET() {
const courses = await fileStorageService.loadSavedCourses();
const courses = await fileStorageService.getCourseNames();
return Response.json(courses);
}

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: () => {},

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 />

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

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

@@ -1,27 +1,70 @@
import { promises as fs } from "fs";
import path from "path";
import { LocalCourse } from "@/models/local/localCourse";
import { courseMarkdownLoader } from "./utils/couresMarkdownLoader";
import {
LocalCourse,
LocalCourseSettings,
localCourseYamlUtils,
} from "@/models/local/localCourse";
import { courseMarkdownLoader } from "./utils/courseMarkdownLoader";
import { courseMarkdownSaver } from "./utils/courseMarkdownSaver";
import {
directoryOrFileExists,
hasFileSystemEntries,
} from "./utils/fileSystemUtils";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
console.log("base path", basePath);
export const fileStorageService = {
async saveCourseAsync(
course: LocalCourse,
previouslyStoredCourse?: LocalCourse
) {
await courseMarkdownSaver.save(course, previouslyStoredCourse);
// async saveCourseAsync(
// course: LocalCourse,
// previouslyStoredCourse?: LocalCourse
// ) {
// await courseMarkdownSaver.save(course, previouslyStoredCourse);
// },
// async loadSavedCourses(): Promise<LocalCourse[]> {
// console.log("loading pages from file system");
// 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 loadSavedCourses(): Promise<LocalCourse[]> {
console.log("loading pages from file system");
return (await courseMarkdownLoader.loadSavedCourses()) || [];
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[]> {
if (!(await this.directoryExists(basePath))) {
if (!(await directoryOrFileExists(basePath))) {
throw new Error(
`Cannot get empty directories, ${basePath} does not exist`
);
@@ -31,26 +74,8 @@ export const fileStorageService = {
const emptyDirectories = directories
.filter((dirent) => dirent.isDirectory())
.map((dirent) => path.join(basePath, dirent.name))
.filter(async (dir) => !(await this.hasFileSystemEntries(dir)));
.filter(async (dir) => !(await hasFileSystemEntries(dir)));
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";
import { promises as fs } from "fs";
import path from "path";
import { directoryOrFileExists } from "./fileSystemUtils";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
export const courseMarkdownLoader = {
async loadSavedCourses(): Promise<LocalCourse[]> {
const courseDirectories = await fs.readdir(basePath, {
withFileTypes: true,
});
const coursePromises = courseDirectories
.filter((dirent) => dirent.isDirectory())
.map(async (dirent) => {
const coursePath = path.join(basePath, dirent.name);
const settingsPath = path.join(coursePath, "settings.yml");
if (await this.fileExists(settingsPath)) {
return this.loadCourseByPath(coursePath);
}
return null;
});
// async loadSavedCourses(): Promise<LocalCourse[]> {
// const courseDirectories = await fs.readdir(basePath, {
// withFileTypes: true,
// });
// const coursePromises = courseDirectories
// .filter((dirent) => dirent.isDirectory())
// .map(async (dirent) => {
// const coursePath = path.join(basePath, dirent.name);
// const settingsPath = path.join(coursePath, "settings.yml");
// if (await directoryOrFileExists(settingsPath)) {
// return this.loadCourseByPath(coursePath);
// }
// return null;
// });
const courses = (await Promise.all(coursePromises)).filter(
(course) => course !== null
) as LocalCourse[];
return courses.sort((a, b) =>
a.settings.name.localeCompare(b.settings.name)
);
},
// const courses = (await Promise.all(coursePromises)).filter(
// (course) => course !== null
// ) as LocalCourse[];
// return courses.sort((a, b) =>
// a.settings.name.localeCompare(b.settings.name)
// );
// },
async loadCourseByPath(courseDirectory: string): Promise<LocalCourse> {
if (!(await this.directoryExists(courseDirectory))) {
const errorMessage = `Error loading course by name, could not find folder ${courseDirectory}`;
console.log(errorMessage);
throw new Error(errorMessage);
}
// async loadCourseByPath(courseDirectory: string): Promise<LocalCourse> {
// if (!(await directoryOrFileExists(courseDirectory))) {
// const errorMessage = `Error loading course by name, could not find folder ${courseDirectory}`;
// console.log(errorMessage);
// throw new Error(errorMessage);
// }
const settings = await this.loadCourseSettings(courseDirectory);
const modules = await this.loadCourseModules(courseDirectory);
// const settings = await this.loadCourseSettings(courseDirectory);
// const modules = await this.loadCourseModules(courseDirectory);
return {
settings,
modules,
};
},
// return {
// settings,
// modules,
// };
// },
async loadCourseSettings(
courseDirectory: string
): Promise<LocalCourseSettings> {
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}`;
console.log(errorMessage);
throw new Error(errorMessage);
@@ -110,7 +111,7 @@ export const courseMarkdownLoader = {
modulePath: string
): Promise<LocalAssignment[]> {
const assignmentsPath = path.join(modulePath, "assignments");
if (!(await this.directoryExists(assignmentsPath))) {
if (!(await directoryOrFileExists(assignmentsPath))) {
console.log(
`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[]> {
const quizzesPath = path.join(modulePath, "quizzes");
if (!(await this.directoryExists(quizzesPath))) {
if (!(await directoryOrFileExists(quizzesPath))) {
console.log(
`Quizzes folder does not exist in ${modulePath}, creating now`
);
@@ -156,7 +157,7 @@ export const courseMarkdownLoader = {
modulePath: string
): Promise<LocalCoursePage[]> {
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`);
await fs.mkdir(pagesPath);
}
@@ -173,22 +174,4 @@ export const courseMarkdownLoader = {
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;
}
};