moving data management to lots of queries

This commit is contained in:
2024-08-30 11:06:19 -06:00
parent 2b11c65bc8
commit d975add636
15 changed files with 462 additions and 147 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,12 +1,7 @@
"use client"; "use client";
import { ReactNode, useState } from "react"; import { ReactNode, useState } from "react";
import { CourseContext, DraggableItem } from "./courseContext"; import { CourseContext, DraggableItem } from "./courseContext";
import {
useLocalCourseSettingsQuery,
useUpdateCourseMutation,
} from "@/hooks/localCoursesHooks";
import { LocalQuiz } from "@/models/local/quiz/localQuiz"; import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { LocalCourse } from "@/models/local/localCourse";
import { dateToMarkdownString } from "@/models/local/timeUtils"; import { dateToMarkdownString } from "@/models/local/timeUtils";
export default function CourseContextProvider({ export default function CourseContextProvider({
@@ -16,8 +11,6 @@ export default function CourseContextProvider({
children: ReactNode; children: ReactNode;
localCourseName: string; localCourseName: string;
}) { }) {
const { data: settings } = useLocalCourseSettingsQuery(localCourseName);
const updateCourseMutation = useUpdateCourseMutation(localCourseName);
const [itemBeingDragged, setItemBeingDragged] = useState< const [itemBeingDragged, setItemBeingDragged] = useState<
DraggableItem | undefined DraggableItem | undefined
>(); >();

View File

@@ -1,16 +1,21 @@
import { getDehydratedClient } from "@/app/layout";
import CourseContextProvider from "./context/CourseContextProvider"; import CourseContextProvider from "./context/CourseContextProvider";
import CourseCalendar from "./calendar/CourseCalendar"; import CourseCalendar from "./calendar/CourseCalendar";
import { HydrationBoundary } from "@tanstack/react-query"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import CourseSettings from "./CourseSettings"; import CourseSettings from "./CourseSettings";
import ModuleList from "./modules/ModuleList"; import ModuleList from "./modules/ModuleList";
import { createQueryClientForServer } from "@/services/utils/queryClientServer";
import { hydrateCourse } from "@/hooks/hookHydration";
export default async function CoursePage({ export default async function CoursePage({
params: { courseName }, params: { courseName },
}: { }: {
params: { courseName: string }; params: { courseName: string };
}) { }) {
const dehydratedState = await getDehydratedClient(); const queryClient = createQueryClientForServer();
await hydrateCourse(queryClient, courseName);
const dehydratedState = dehydrate(queryClient);
return ( return (
<HydrationBoundary state={dehydratedState}> <HydrationBoundary state={dehydratedState}>
<CourseContextProvider localCourseName={courseName}> <CourseContextProvider localCourseName={courseName}>

View File

@@ -9,14 +9,6 @@ export const metadata: Metadata = {
title: "Canvas Manager 2.0", title: "Canvas Manager 2.0",
}; };
export async function getDehydratedClient() {
const queryClient = createQueryClientForServer();
await hydrateCourses(queryClient);
const dehydratedState = dehydrate(queryClient);
return dehydratedState;
}
export default function RootLayout({ export default function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{

View File

@@ -1,6 +1,15 @@
import { HydrationBoundary } from "@tanstack/react-query"; import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
import CourseList from "./CourseList"; import CourseList from "./CourseList";
import { getDehydratedClient } from "./layout"; import { createQueryClientForServer } from "@/services/utils/queryClientServer";
import { hydrateCourses } from "@/hooks/hookHydration";
async function getDehydratedClient() {
const queryClient = createQueryClientForServer();
await hydrateCourses(queryClient);
const dehydratedState = dehydrate(queryClient);
return dehydratedState;
}
export default async function Home() { export default async function Home() {
const dehydratedState = await getDehydratedClient(); const dehydratedState = await getDehydratedClient();

View File

@@ -12,7 +12,7 @@ function makeQueryClient() {
queries: { queries: {
// With SSR, we usually want to set some default staleTime // With SSR, we usually want to set some default staleTime
// above 0 to avoid refetching immediately on the client // above 0 to avoid refetching immediately on the client
staleTime: 60 * 1000, // staleTime: 1000,
}, },
}, },
}); });

View File

@@ -8,3 +8,19 @@ export const hydrateCourses = async (queryClient: QueryClient) => {
queryFn: async () => await fileStorageService.getCourseNames(), queryFn: async () => await fileStorageService.getCourseNames(),
}); });
}; };
export const hydrateCourse = async (
queryClient: QueryClient,
courseName: string
) => {
const settings = await fileStorageService.getCourseSettings(courseName);
const moduleNames = await fileStorageService.getModuleNames(courseName)
await queryClient.prefetchQuery({
queryKey: localCourseKeys.settings(courseName),
queryFn: () => settings,
});
await queryClient.prefetchQuery({
queryKey: localCourseKeys.moduleNames(courseName),
queryFn: () => moduleNames,
});
};

View File

@@ -1,8 +1,12 @@
import { LocalAssignment } from "@/models/local/assignmnet/localAssignment";
import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse"; import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse";
import { LocalModule } from "@/models/local/localModules"; import { LocalModule } from "@/models/local/localModules";
import { LocalCoursePage } from "@/models/local/page/localCoursePage";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { import {
useMutation, useMutation,
useQueryClient, useQueryClient,
useSuspenseQueries,
useSuspenseQuery, useSuspenseQuery,
} from "@tanstack/react-query"; } from "@tanstack/react-query";
import axios from "axios"; import axios from "axios";
@@ -18,12 +22,49 @@ export const localCourseKeys = {
"modules", "modules",
{ type: "names" } as const, { type: "names" } as const,
] as const, ] as const,
moduleAssignmentNames: (courseName: string, moduleName: string) => moduleAssignmentNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "assignments"] as const, [
moduleQuizzeNames: (courseName: string, moduleName: string) => "course details",
["course details", courseName, "modules", moduleName, "quizzes"] as const, courseName,
modulePageNames: (courseName: string, moduleName: string) => "modules",
["course details", courseName, "modules", moduleName, "pages"] as const, moduleName,
"assignments",
] as const,
moduleQuizzeNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "quizzes"] as const,
modulePageNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "pages"] as const,
assignment: (
courseName: string,
moduleName: string,
assignmentName: string
) =>
[
"course details",
courseName,
"modules",
moduleName,
"assignments",
assignmentName,
] as const,
quiz: (courseName: string, moduleName: string, quizName: string) =>
[
"course details",
courseName,
"modules",
moduleName,
"quizzes",
quizName,
] as const,
page: (courseName: string, moduleName: string, pageName: string) =>
[
"course details",
courseName,
"modules",
moduleName,
"pages",
pageName,
] as const,
}; };
export const useLocalCourseNamesQuery = () => export const useLocalCourseNamesQuery = () =>
@@ -46,7 +87,7 @@ export const useLocalCourseSettingsQuery = (courseName: string) =>
}, },
}); });
export const useLocalCourseModuleNamesQuery = (courseName: string) => export const useModuleNamesQuery = (courseName: string) =>
useSuspenseQuery({ useSuspenseQuery({
queryKey: localCourseKeys.moduleNames(courseName), queryKey: localCourseKeys.moduleNames(courseName),
queryFn: async (): Promise<string[]> => { queryFn: async (): Promise<string[]> => {
@@ -56,24 +97,107 @@ export const useLocalCourseModuleNamesQuery = (courseName: string) =>
}, },
}); });
export const useModuleAssignmentNamesQuery = (
export const useUpdateCourseMutation = (courseName: string) => { courseName: string,
const queryClient = useQueryClient(); moduleName: string
return useMutation({ ) =>
mutationFn: async (body: { useSuspenseQuery({
updatedCourse: LocalCourse; queryKey: localCourseKeys.moduleAssignmentNames(courseName, moduleName),
previousCourse: LocalCourse; queryFn: async (): Promise<string[]> => {
}) => { const url = `/api/courses/${courseName}/modules/${moduleName}/assignments`;
const url = `/api/courses/${courseName}`; const response = await axios.get(url);
await axios.put(url, body); return response.data;
},
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: localCourseKeys.settings(courseName),
});
},
scope: {
id: "all courses",
}, },
}); });
}; export const useModuleQuizNamesQuery = (
courseName: string,
moduleName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.moduleQuizzeNames(courseName, moduleName),
queryFn: async (): Promise<string[]> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/quizzes`;
const response = await axios.get(url);
return response.data;
},
});
export const useModulePageNamesQuery = (
courseName: string,
moduleName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.modulePageNames(courseName, moduleName),
queryFn: async (): Promise<string[]> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/pages`;
const response = await axios.get(url);
return response.data;
},
});
export const useAssignmentQuery = (
courseName: string,
moduleName: string,
assignmentName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.assignment(
courseName,
moduleName,
assignmentName
),
queryFn: async (): Promise<LocalAssignment> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/assignments/${assignmentName}`;
const response = await axios.get(url);
return response.data;
},
});
export const useQuizQuery = (
courseName: string,
moduleName: string,
quizName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.quiz(courseName, moduleName, quizName),
queryFn: async (): Promise<LocalQuiz> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/quizzes/${quizName}`;
const response = await axios.get(url);
return response.data;
},
});
export const usePageQuery = (
courseName: string,
moduleName: string,
pageName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.quiz(courseName, moduleName, pageName),
queryFn: async (): Promise<LocalCoursePage> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/pages/${pageName}`;
const response = await axios.get(url);
return response.data;
},
});
// export const useUpdateCourseMutation = (courseName: string) => {
// const queryClient = useQueryClient();
// return useMutation({
// mutationFn: async (body: {
// updatedCourse: LocalCourse;
// previousCourse: LocalCourse;
// }) => {
// const url = `/api/courses/${courseName}`;
// await axios.put(url, body);
// },
// onSuccess: () => {
// queryClient.invalidateQueries({
// queryKey: localCourseKeys.settings(courseName),
// });
// },
// scope: {
// id: "all courses",
// },
// });
// };

View File

@@ -11,6 +11,9 @@ import {
directoryOrFileExists, directoryOrFileExists,
hasFileSystemEntries, hasFileSystemEntries,
} from "./utils/fileSystemUtils"; } from "./utils/fileSystemUtils";
import { localAssignmentMarkdown } from "@/models/local/assignmnet/localAssignment";
import { localQuizMarkdownUtils } from "@/models/local/quiz/localQuiz";
import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage"; const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
console.log("base path", basePath); console.log("base path", basePath);
@@ -71,14 +74,98 @@ export const fileStorageService = {
const modulePromises = moduleDirectories const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory()) .filter((dirent) => dirent.isDirectory())
.map((dirent) => .map((dirent) => dirent.name);
dirent.name
);
const modules = await Promise.all(modulePromises); const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.localeCompare(b)); return modules.sort((a, b) => a.localeCompare(b));
}, },
async getAssignmentNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "assignments");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, assignments folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const assignmentFiles = await fs.readdir(filePath);
return assignmentFiles;
},
async getQuizNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "quizzes");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, quiz folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files;
},
async getPageNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "pages");
if (!(await directoryOrFileExists(filePath))) {
console.log(
`Error loading course by name, pages folder does not exist in ${filePath}`
);
await fs.mkdir(filePath);
}
const files = await fs.readdir(filePath);
return files;
},
async getAssignment(
courseName: string,
moduleName: string,
assignmentName: string
) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"assignments",
assignmentName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localAssignmentMarkdown.parseMarkdown(rawFile);
},
async getQuiz(courseName: string, moduleName: string, quizName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localQuizMarkdownUtils.parseMarkdown(rawFile);
},
async getPage(courseName: string, moduleName: string, pageName: string) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"pages",
pageName + ".md"
);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localPageMarkdownUtils.parseMarkdown(rawFile);
},
async getEmptyDirectories(): Promise<string[]> { async getEmptyDirectories(): Promise<string[]> {
if (!(await directoryOrFileExists(basePath))) { if (!(await directoryOrFileExists(basePath))) {
throw new Error( throw new Error(

View File

@@ -62,116 +62,116 @@ export const courseMarkdownLoader = {
// }; // };
// }, // },
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 directoryOrFileExists(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);
} // }
const settingsString = await fs.readFile(settingsPath, "utf-8"); // const settingsString = await fs.readFile(settingsPath, "utf-8");
const settings = localCourseYamlUtils.parseSettingYaml(settingsString); // const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
const folderName = path.basename(courseDirectory); // const folderName = path.basename(courseDirectory);
return { ...settings, name: folderName }; // return { ...settings, name: folderName };
}, // },
async loadCourseModules(courseDirectory: string): Promise<LocalModule[]> { // async loadCourseModules(courseDirectory: string): Promise<LocalModule[]> {
const moduleDirectories = await fs.readdir(courseDirectory, { // const moduleDirectories = await fs.readdir(courseDirectory, {
withFileTypes: true, // withFileTypes: true,
}); // });
const modulePromises = moduleDirectories // const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory()) // .filter((dirent) => dirent.isDirectory())
.map((dirent) => // .map((dirent) =>
this.loadModuleFromPath(path.join(courseDirectory, dirent.name)) // this.loadModuleFromPath(path.join(courseDirectory, dirent.name))
); // );
const modules = await Promise.all(modulePromises); // const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.name.localeCompare(b.name)); // return modules.sort((a, b) => a.name.localeCompare(b.name));
}, // },
async loadModuleFromPath(modulePath: string): Promise<LocalModule> { // async loadModuleFromPath(modulePath: string): Promise<LocalModule> {
const moduleName = path.basename(modulePath); // const moduleName = path.basename(modulePath);
const assignments = await this.loadAssignmentsFromPath(modulePath); // const assignments = await this.loadAssignmentsFromPath(modulePath);
const quizzes = await this.loadQuizzesFromPath(modulePath); // const quizzes = await this.loadQuizzesFromPath(modulePath);
const pages = await this.loadModulePagesFromPath(modulePath); // const pages = await this.loadModulePagesFromPath(modulePath);
return { // return {
name: moduleName, // name: moduleName,
assignments, // assignments,
quizzes, // quizzes,
pages, // pages,
}; // };
}, // },
async loadAssignmentsFromPath( // async loadAssignmentsFromPath(
modulePath: string // modulePath: string
): Promise<LocalAssignment[]> { // ): Promise<LocalAssignment[]> {
const assignmentsPath = path.join(modulePath, "assignments"); // const assignmentsPath = path.join(modulePath, "assignments");
if (!(await directoryOrFileExists(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}`
); // );
await fs.mkdir(assignmentsPath); // await fs.mkdir(assignmentsPath);
} // }
const assignmentFiles = await fs.readdir(assignmentsPath); // const assignmentFiles = await fs.readdir(assignmentsPath);
const assignmentPromises = assignmentFiles.map(async (file) => { // const assignmentPromises = assignmentFiles.map(async (file) => {
const filePath = path.join(assignmentsPath, file); // const filePath = path.join(assignmentsPath, file);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace( // const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, // /\r\n/g,
"\n" // "\n"
); // );
return localAssignmentMarkdown.parseMarkdown(rawFile); // return localAssignmentMarkdown.parseMarkdown(rawFile);
}); // });
return await Promise.all(assignmentPromises); // return await Promise.all(assignmentPromises);
}, // },
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 directoryOrFileExists(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`
); // );
await fs.mkdir(quizzesPath); // await fs.mkdir(quizzesPath);
} // }
const quizFiles = await fs.readdir(quizzesPath); // const quizFiles = await fs.readdir(quizzesPath);
const quizPromises = quizFiles.map(async (file) => { // const quizPromises = quizFiles.map(async (file) => {
const filePath = path.join(quizzesPath, file); // const filePath = path.join(quizzesPath, file);
const rawQuiz = (await fs.readFile(filePath, "utf-8")).replace( // const rawQuiz = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, // /\r\n/g,
"\n" // "\n"
); // );
return localQuizMarkdownUtils.parseMarkdown(rawQuiz); // return localQuizMarkdownUtils.parseMarkdown(rawQuiz);
}); // });
return await Promise.all(quizPromises); // return await Promise.all(quizPromises);
}, // },
async loadModulePagesFromPath( // async loadModulePagesFromPath(
modulePath: string // modulePath: string
): Promise<LocalCoursePage[]> { // ): Promise<LocalCoursePage[]> {
const pagesPath = path.join(modulePath, "pages"); // const pagesPath = path.join(modulePath, "pages");
if (!(await directoryOrFileExists(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);
} // }
const pageFiles = await fs.readdir(pagesPath); // const pageFiles = await fs.readdir(pagesPath);
const pagePromises = pageFiles.map(async (file) => { // const pagePromises = pageFiles.map(async (file) => {
const filePath = path.join(pagesPath, file); // const filePath = path.join(pagesPath, file);
const rawPage = (await fs.readFile(filePath, "utf-8")).replace( // const rawPage = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, // /\r\n/g,
"\n" // "\n"
); // );
return localPageMarkdownUtils.parseMarkdown(rawPage); // return localPageMarkdownUtils.parseMarkdown(rawPage);
}); // });
return await Promise.all(pagePromises); // return await Promise.all(pagePromises);
}, // },
}; };