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

View File

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

View File

@@ -9,14 +9,6 @@ export const metadata: Metadata = {
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({
children,
}: 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 { 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() {
const dehydratedState = await getDehydratedClient();

View File

@@ -12,7 +12,7 @@ function makeQueryClient() {
queries: {
// With SSR, we usually want to set some default staleTime
// 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(),
});
};
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 { LocalModule } from "@/models/local/localModules";
import { LocalCoursePage } from "@/models/local/page/localCoursePage";
import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import {
useMutation,
useQueryClient,
useSuspenseQueries,
useSuspenseQuery,
} from "@tanstack/react-query";
import axios from "axios";
@@ -19,11 +23,48 @@ export const localCourseKeys = {
{ type: "names" } as const,
] as const,
moduleAssignmentNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "assignments"] as const,
[
"course details",
courseName,
"modules",
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 = () =>
@@ -46,7 +87,7 @@ export const useLocalCourseSettingsQuery = (courseName: string) =>
},
});
export const useLocalCourseModuleNamesQuery = (courseName: string) =>
export const useModuleNamesQuery = (courseName: string) =>
useSuspenseQuery({
queryKey: localCourseKeys.moduleNames(courseName),
queryFn: async (): Promise<string[]> => {
@@ -56,24 +97,107 @@ export const useLocalCourseModuleNamesQuery = (courseName: string) =>
},
});
export const useModuleAssignmentNamesQuery = (
courseName: string,
moduleName: string
) =>
useSuspenseQuery({
queryKey: localCourseKeys.moduleAssignmentNames(courseName, moduleName),
queryFn: async (): Promise<string[]> => {
const url = `/api/courses/${courseName}/modules/${moduleName}/assignments`;
const response = await axios.get(url);
return response.data;
},
});
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 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",
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,
hasFileSystemEntries,
} 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";
console.log("base path", basePath);
@@ -71,14 +74,98 @@ export const fileStorageService = {
const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory())
.map((dirent) =>
dirent.name
);
.map((dirent) => dirent.name);
const modules = await Promise.all(modulePromises);
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[]> {
if (!(await directoryOrFileExists(basePath))) {
throw new Error(

View File

@@ -62,116 +62,116 @@ export const courseMarkdownLoader = {
// };
// },
async loadCourseSettings(
courseDirectory: string
): Promise<LocalCourseSettings> {
const settingsPath = path.join(courseDirectory, "settings.yml");
if (!(await directoryOrFileExists(settingsPath))) {
const errorMessage = `Error loading course by name, settings file ${settingsPath}`;
console.log(errorMessage);
throw new Error(errorMessage);
}
// async loadCourseSettings(
// courseDirectory: string
// ): Promise<LocalCourseSettings> {
// const settingsPath = path.join(courseDirectory, "settings.yml");
// if (!(await directoryOrFileExists(settingsPath))) {
// const errorMessage = `Error loading course by name, settings file ${settingsPath}`;
// console.log(errorMessage);
// throw new Error(errorMessage);
// }
const settingsString = await fs.readFile(settingsPath, "utf-8");
const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
// const settingsString = await fs.readFile(settingsPath, "utf-8");
// const settings = localCourseYamlUtils.parseSettingYaml(settingsString);
const folderName = path.basename(courseDirectory);
return { ...settings, name: folderName };
},
// const folderName = path.basename(courseDirectory);
// return { ...settings, name: folderName };
// },
async loadCourseModules(courseDirectory: string): Promise<LocalModule[]> {
const moduleDirectories = await fs.readdir(courseDirectory, {
withFileTypes: true,
});
const modulePromises = moduleDirectories
.filter((dirent) => dirent.isDirectory())
.map((dirent) =>
this.loadModuleFromPath(path.join(courseDirectory, dirent.name))
);
// async loadCourseModules(courseDirectory: string): Promise<LocalModule[]> {
// const moduleDirectories = await fs.readdir(courseDirectory, {
// withFileTypes: true,
// });
// const modulePromises = moduleDirectories
// .filter((dirent) => dirent.isDirectory())
// .map((dirent) =>
// this.loadModuleFromPath(path.join(courseDirectory, dirent.name))
// );
const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.name.localeCompare(b.name));
},
// const modules = await Promise.all(modulePromises);
// return modules.sort((a, b) => a.name.localeCompare(b.name));
// },
async loadModuleFromPath(modulePath: string): Promise<LocalModule> {
const moduleName = path.basename(modulePath);
const assignments = await this.loadAssignmentsFromPath(modulePath);
const quizzes = await this.loadQuizzesFromPath(modulePath);
const pages = await this.loadModulePagesFromPath(modulePath);
// async loadModuleFromPath(modulePath: string): Promise<LocalModule> {
// const moduleName = path.basename(modulePath);
// const assignments = await this.loadAssignmentsFromPath(modulePath);
// const quizzes = await this.loadQuizzesFromPath(modulePath);
// const pages = await this.loadModulePagesFromPath(modulePath);
return {
name: moduleName,
assignments,
quizzes,
pages,
};
},
// return {
// name: moduleName,
// assignments,
// quizzes,
// pages,
// };
// },
async loadAssignmentsFromPath(
modulePath: string
): Promise<LocalAssignment[]> {
const assignmentsPath = path.join(modulePath, "assignments");
if (!(await directoryOrFileExists(assignmentsPath))) {
console.log(
`Error loading course by name, assignments folder does not exist in ${modulePath}`
);
await fs.mkdir(assignmentsPath);
}
// async loadAssignmentsFromPath(
// modulePath: string
// ): Promise<LocalAssignment[]> {
// const assignmentsPath = path.join(modulePath, "assignments");
// if (!(await directoryOrFileExists(assignmentsPath))) {
// console.log(
// `Error loading course by name, assignments folder does not exist in ${modulePath}`
// );
// await fs.mkdir(assignmentsPath);
// }
const assignmentFiles = await fs.readdir(assignmentsPath);
const assignmentPromises = assignmentFiles.map(async (file) => {
const filePath = path.join(assignmentsPath, file);
const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localAssignmentMarkdown.parseMarkdown(rawFile);
});
// const assignmentFiles = await fs.readdir(assignmentsPath);
// const assignmentPromises = assignmentFiles.map(async (file) => {
// const filePath = path.join(assignmentsPath, file);
// const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
// /\r\n/g,
// "\n"
// );
// return localAssignmentMarkdown.parseMarkdown(rawFile);
// });
return await Promise.all(assignmentPromises);
},
// return await Promise.all(assignmentPromises);
// },
async loadQuizzesFromPath(modulePath: string): Promise<LocalQuiz[]> {
const quizzesPath = path.join(modulePath, "quizzes");
if (!(await directoryOrFileExists(quizzesPath))) {
console.log(
`Quizzes folder does not exist in ${modulePath}, creating now`
);
await fs.mkdir(quizzesPath);
}
// async loadQuizzesFromPath(modulePath: string): Promise<LocalQuiz[]> {
// const quizzesPath = path.join(modulePath, "quizzes");
// if (!(await directoryOrFileExists(quizzesPath))) {
// console.log(
// `Quizzes folder does not exist in ${modulePath}, creating now`
// );
// await fs.mkdir(quizzesPath);
// }
const quizFiles = await fs.readdir(quizzesPath);
const quizPromises = quizFiles.map(async (file) => {
const filePath = path.join(quizzesPath, file);
const rawQuiz = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localQuizMarkdownUtils.parseMarkdown(rawQuiz);
});
// const quizFiles = await fs.readdir(quizzesPath);
// const quizPromises = quizFiles.map(async (file) => {
// const filePath = path.join(quizzesPath, file);
// const rawQuiz = (await fs.readFile(filePath, "utf-8")).replace(
// /\r\n/g,
// "\n"
// );
// return localQuizMarkdownUtils.parseMarkdown(rawQuiz);
// });
return await Promise.all(quizPromises);
},
// return await Promise.all(quizPromises);
// },
async loadModulePagesFromPath(
modulePath: string
): Promise<LocalCoursePage[]> {
const pagesPath = path.join(modulePath, "pages");
if (!(await directoryOrFileExists(pagesPath))) {
console.log(`Pages folder does not exist in ${modulePath}, creating now`);
await fs.mkdir(pagesPath);
}
// async loadModulePagesFromPath(
// modulePath: string
// ): Promise<LocalCoursePage[]> {
// const pagesPath = path.join(modulePath, "pages");
// if (!(await directoryOrFileExists(pagesPath))) {
// console.log(`Pages folder does not exist in ${modulePath}, creating now`);
// await fs.mkdir(pagesPath);
// }
const pageFiles = await fs.readdir(pagesPath);
const pagePromises = pageFiles.map(async (file) => {
const filePath = path.join(pagesPath, file);
const rawPage = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g,
"\n"
);
return localPageMarkdownUtils.parseMarkdown(rawPage);
});
// const pageFiles = await fs.readdir(pagesPath);
// const pagePromises = pageFiles.map(async (file) => {
// const filePath = path.join(pagesPath, file);
// const rawPage = (await fs.readFile(filePath, "utf-8")).replace(
// /\r\n/g,
// "\n"
// );
// return localPageMarkdownUtils.parseMarkdown(rawPage);
// });
return await Promise.all(pagePromises);
},
// return await Promise.all(pagePromises);
// },
};