can update quiz

This commit is contained in:
2024-08-30 13:15:10 -06:00
parent 51069a856a
commit 09b387c328
12 changed files with 227 additions and 94 deletions

View File

@@ -18,6 +18,7 @@
"yaml": "^2.5.0" "yaml": "^2.5.0"
}, },
"devDependencies": { "devDependencies": {
"@tanstack/react-query-devtools": "^5.53.1",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.0.0", "@testing-library/react": "^16.0.0",
"@types/node": "^22", "@types/node": "^22",
@@ -1531,9 +1532,20 @@
} }
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.52.2", "version": "5.53.1",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.52.2.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.53.1.tgz",
"integrity": "sha512-9vvbFecK4A0nDnrc/ks41e3UHONF1DAnGz8Tgbxkl59QcvKWmc0ewhYuIKRh8NC4ja5LTHT9EH16KHbn2AIYWA==", "integrity": "sha512-mvLG7s4Zy3Yvc2LsKm8BVafbmPrsReKgqwhmp4XKVmRW9us3KbWRqu3qBBfhVavcUUEHfNK7PvpTchvQpVdFpw==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@tanstack/query-devtools": {
"version": "5.52.3",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.52.3.tgz",
"integrity": "sha512-oGX9qJuNpr4vOQyeksqHr+FgLQGs5UooK87R1wTtcsUUdrRKGSgs3cBllZMtWBJxg+yVvg0TlHNGYLMjvqX3GA==",
"dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1541,12 +1553,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.52.2", "version": "5.53.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.52.2.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.53.1.tgz",
"integrity": "sha512-d4OwmobpP+6+SvuAxW1RzAY95Pv87Gu+0GjtErzFOUXo+n0FGcwxKvzhswCsXKxsgnAr3bU2eJ2u+GXQAutkCQ==", "integrity": "sha512-35HU4836Ey1/W74BxmS8p9KHXcDRGPdkw6w3VX0Tc5S9v5acFl80oi/yc6nsmoLhu68wQkWMyX0h7y7cOtY5OA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.52.2" "@tanstack/query-core": "5.53.1"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1556,6 +1568,24 @@
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
"node_modules/@tanstack/react-query-devtools": {
"version": "5.53.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.53.1.tgz",
"integrity": "sha512-AjShRLM3/9Rglgeo0X52M8MKPEvcNnFQvs3yZq8ExQWu8YhZMzqVsFVn4PqOeyEHbnsRS2bmi0jPP/tBrlWU0A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tanstack/query-devtools": "5.52.3"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.53.1",
"react": "^18 || ^19"
}
},
"node_modules/@testing-library/dom": { "node_modules/@testing-library/dom": {
"version": "10.4.0", "version": "10.4.0",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",

View File

@@ -20,6 +20,7 @@
"yaml": "^2.5.0" "yaml": "^2.5.0"
}, },
"devDependencies": { "devDependencies": {
"@tanstack/react-query-devtools": "^5.53.1",
"@testing-library/dom": "^10.4.0", "@testing-library/dom": "^10.4.0",
"@testing-library/react": "^16.0.0", "@testing-library/react": "^16.0.0",
"@types/node": "^22", "@types/node": "^22",

View File

@@ -6,10 +6,26 @@ export async function GET(
params: { courseName, moduleName, quizName }, params: { courseName, moduleName, quizName },
}: { params: { courseName: string; moduleName: string; quizName: string } } }: { params: { courseName: string; moduleName: string; quizName: string } }
) { ) {
const settings = await fileStorageService.getQuiz( const quiz = await fileStorageService.getQuiz(
courseName, courseName,
moduleName, moduleName,
quizName quizName
); );
return Response.json(settings); return Response.json(quiz);
}
export async function PUT(
request: Request,
{
params: { courseName, moduleName, quizName },
}: { params: { courseName: string; moduleName: string; quizName: string } }
) {
const quiz = await request.json()
await fileStorageService.updateQuiz(
courseName,
moduleName,
quizName,
quiz
);
return Response.json({});
} }

View File

@@ -30,7 +30,6 @@ export default function CourseCalendar() {
bg-slate-950 bg-slate-950
" "
> >
Month Goes Here
{months.map((month) => ( {months.map((month) => (
<CalendarMonth key={month.month + "" + month.year} month={month} /> <CalendarMonth key={month.month + "" + month.year} month={month} />
))} ))}

View File

@@ -54,7 +54,13 @@ export default function DayItemsInModule({
key={q.name} key={q.name}
role="button" role="button"
draggable="true" draggable="true"
onDragStart={() => startItemDrag({ type: "quiz", item: q })} onDragStart={() =>
startItemDrag({
type: "quiz",
item: q,
sourceModuleName: moduleName,
})
}
onDragEnd={endItemDrag} onDragEnd={endItemDrag}
> >
{q.name} {q.name}
@@ -65,7 +71,13 @@ export default function DayItemsInModule({
key={p.name} key={p.name}
role="button" role="button"
draggable="true" draggable="true"
onDragStart={() => startItemDrag({ type: "page", item: p })} onDragStart={() =>
startItemDrag({
type: "page",
item: p,
sourceModuleName: moduleName,
})
}
> >
{p.name} {p.name}
</li> </li>

View File

@@ -3,6 +3,7 @@ import { ReactNode, useState } from "react";
import { CourseContext, DraggableItem } from "./courseContext"; import { CourseContext, DraggableItem } from "./courseContext";
import { LocalQuiz } from "@/models/local/quiz/localQuiz"; import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { dateToMarkdownString } from "@/models/local/timeUtils"; import { dateToMarkdownString } from "@/models/local/timeUtils";
import { useUpdateQuizMutation } from "@/hooks/localCourse/quizHooks";
export default function CourseContextProvider({ export default function CourseContextProvider({
localCourseName, localCourseName,
@@ -11,6 +12,7 @@ export default function CourseContextProvider({
children: ReactNode; children: ReactNode;
localCourseName: string; localCourseName: string;
}) { }) {
const updateQuizMutation = useUpdateQuizMutation(localCourseName);
const [itemBeingDragged, setItemBeingDragged] = useState< const [itemBeingDragged, setItemBeingDragged] = useState<
DraggableItem | undefined DraggableItem | undefined
>(); >();
@@ -58,10 +60,17 @@ export default function CourseContextProvider({
setItemBeingDragged(undefined); setItemBeingDragged(undefined);
}, },
itemDrop: (day) => { itemDrop: (day) => {
console.log("dropping");
if (itemBeingDragged && day) { if (itemBeingDragged && day) {
if (itemBeingDragged.type === "quiz") { if (itemBeingDragged.type === "quiz") {
updateQuiz(day); const quiz: LocalQuiz = {
...(itemBeingDragged.item as LocalQuiz),
dueAt: dateToMarkdownString(day),
};
updateQuizMutation.mutate({
quiz: quiz,
quizName: quiz.name,
moduleName: itemBeingDragged.sourceModuleName,
});
} }
} }
setItemBeingDragged(undefined); setItemBeingDragged(undefined);

View File

@@ -4,6 +4,7 @@ import { createContext, useContext } from "react";
export interface DraggableItem { export interface DraggableItem {
item: IModuleItem; item: IModuleItem;
sourceModuleName: string;
type: "quiz" | "assignment" | "page"; type: "quiz" | "assignment" | "page";
} }

View File

@@ -5,6 +5,7 @@ import {
QueryClientProvider, QueryClientProvider,
} from "@tanstack/react-query"; } from "@tanstack/react-query";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
function makeQueryClient() { function makeQueryClient() {
return new QueryClient({ return new QueryClient({
@@ -43,6 +44,9 @@ export default function Providers({ children }: { children: ReactNode }) {
const queryClient = getQueryClient(); const queryClient = getQueryClient();
return ( return (
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider> <QueryClientProvider client={queryClient}>
<ReactQueryDevtools initialIsOpen={false} />
{children}
</QueryClientProvider>
); );
} }

View File

@@ -16,11 +16,26 @@ export const localCourseKeys = {
"modules", "modules",
moduleName, moduleName,
"assignments", "assignments",
{ type: "names" },
] as const, ] as const,
quizNames: (courseName: string, moduleName: string) => quizNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "quizzes"] as const, [
"course details",
courseName,
"modules",
moduleName,
"quizzes",
{ type: "names" },
] as const,
pageNames: (courseName: string, moduleName: string) => pageNames: (courseName: string, moduleName: string) =>
["course details", courseName, "modules", moduleName, "pages"] as const, [
"course details",
courseName,
"modules",
moduleName,
"pages",
{ type: "names" },
] as const,
assignment: ( assignment: (
courseName: string, courseName: string,
moduleName: string, moduleName: string,

View File

@@ -1,5 +1,10 @@
import { LocalQuiz } from "@/models/local/quiz/localQuiz"; import { LocalQuiz } from "@/models/local/quiz/localQuiz";
import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query"; import {
useMutation,
useQueryClient,
useSuspenseQueries,
useSuspenseQuery,
} from "@tanstack/react-query";
import axios from "axios"; import axios from "axios";
import { localCourseKeys } from "./localCourseKeys"; import { localCourseKeys } from "./localCourseKeys";
@@ -48,3 +53,29 @@ function getQuizQueryConfig(
}, },
}; };
} }
export const useUpdateQuizMutation = (courseName: string) => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({
quiz,
moduleName,
quizName,
}: {
quiz: LocalQuiz;
moduleName: string;
quizName: string;
}) => {
const url = `/api/courses/${courseName}/modules/${moduleName}/quizzes/${quizName}`;
await axios.put(url, quiz);
},
onSuccess: (_, { moduleName, quizName }) => {
queryClient.invalidateQueries({
queryKey: localCourseKeys.quiz(courseName, moduleName, quizName),
});
// queryClient.invalidateQueries({
// queryKey: localCourseKeys.quizNames(courseName, moduleName),
// });
},
});
};

View File

@@ -5,15 +5,14 @@ import {
LocalCourseSettings, LocalCourseSettings,
localCourseYamlUtils, localCourseYamlUtils,
} from "@/models/local/localCourse"; } from "@/models/local/localCourse";
import { courseMarkdownLoader } from "./utils/courseMarkdownLoader";
import { courseMarkdownSaver } from "./utils/courseMarkdownSaver";
import { import {
directoryOrFileExists, directoryOrFileExists,
hasFileSystemEntries, hasFileSystemEntries,
} from "./utils/fileSystemUtils"; } from "./utils/fileSystemUtils";
import { localAssignmentMarkdown } from "@/models/local/assignmnet/localAssignment"; import { localAssignmentMarkdown } from "@/models/local/assignmnet/localAssignment";
import { localQuizMarkdownUtils } from "@/models/local/quiz/localQuiz"; import { LocalQuiz, localQuizMarkdownUtils } from "@/models/local/quiz/localQuiz";
import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage"; import { localPageMarkdownUtils } from "@/models/local/page/localCoursePage";
import { quizMarkdownUtils } from "@/models/local/quiz/utils/quizMarkdownUtils";
const basePath = process.env.STORAGE_DIRECTORY ?? "./storage"; const basePath = process.env.STORAGE_DIRECTORY ?? "./storage";
console.log("base path", basePath); console.log("base path", basePath);
@@ -90,8 +89,9 @@ export const fileStorageService = {
} }
const assignmentFiles = await fs.readdir(filePath); const assignmentFiles = await fs.readdir(filePath);
return assignmentFiles; return assignmentFiles.map(f => f.replace(/\.md$/, ''));
}, },
async getQuizNames(courseName: string, moduleName: string) { async getQuizNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "quizzes"); const filePath = path.join(basePath, courseName, moduleName, "quizzes");
if (!(await directoryOrFileExists(filePath))) { if (!(await directoryOrFileExists(filePath))) {
@@ -102,8 +102,9 @@ export const fileStorageService = {
} }
const files = await fs.readdir(filePath); const files = await fs.readdir(filePath);
return files; return files.map(f => f.replace(/\.md$/, ''));
}, },
async getPageNames(courseName: string, moduleName: string) { async getPageNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "pages"); const filePath = path.join(basePath, courseName, moduleName, "pages");
if (!(await directoryOrFileExists(filePath))) { if (!(await directoryOrFileExists(filePath))) {
@@ -114,7 +115,7 @@ export const fileStorageService = {
} }
const files = await fs.readdir(filePath); const files = await fs.readdir(filePath);
return files; return files.map(f => f.replace(/\.md$/, ''));
}, },
async getAssignment( async getAssignment(
@@ -127,7 +128,7 @@ export const fileStorageService = {
courseName, courseName,
moduleName, moduleName,
"assignments", "assignments",
assignmentName assignmentName + ".md"
); );
const rawFile = (await fs.readFile(filePath, "utf-8")).replace( const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, /\r\n/g,
@@ -142,7 +143,7 @@ export const fileStorageService = {
courseName, courseName,
moduleName, moduleName,
"quizzes", "quizzes",
quizName quizName + ".md"
); );
const rawFile = (await fs.readFile(filePath, "utf-8")).replace( const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, /\r\n/g,
@@ -151,13 +152,27 @@ export const fileStorageService = {
return localQuizMarkdownUtils.parseMarkdown(rawFile); return localQuizMarkdownUtils.parseMarkdown(rawFile);
}, },
async updateQuiz(courseName: string, moduleName: string, quizName: string, quiz: LocalQuiz) {
const filePath = path.join(
basePath,
courseName,
moduleName,
"quizzes",
quizName+".md"
);
const quizMarkdown = quizMarkdownUtils.toMarkdown(quiz);
console.log(`Saving quiz ${filePath}`);
await fs.writeFile(filePath, quizMarkdown);
},
async getPage(courseName: string, moduleName: string, pageName: string) { async getPage(courseName: string, moduleName: string, pageName: string) {
const filePath = path.join( const filePath = path.join(
basePath, basePath,
courseName, courseName,
moduleName, moduleName,
"pages", "pages",
pageName pageName + ".md"
); );
const rawFile = (await fs.readFile(filePath, "utf-8")).replace( const rawFile = (await fs.readFile(filePath, "utf-8")).replace(
/\r\n/g, /\r\n/g,

View File

@@ -23,69 +23,69 @@ const saveSettings = async (course: LocalCourse, courseDirectory: string) => {
await fs.writeFile(settingsFilePath, settingsYaml); await fs.writeFile(settingsFilePath, settingsYaml);
}; };
const saveModules = async ( // const saveModules = async (
course: LocalCourse, // course: LocalCourse,
courseDirectory: string, // courseDirectory: string,
previouslyStoredCourse?: LocalCourse // previouslyStoredCourse?: LocalCourse
) => { // ) => {
for (const localModule of course.modules) { // for (const localModule of course.modules) {
const moduleDirectory = path.join(courseDirectory, localModule.name); // const moduleDirectory = path.join(courseDirectory, localModule.name);
if (!(await directoryExists(moduleDirectory))) { // if (!(await directoryExists(moduleDirectory))) {
await fs.mkdir(moduleDirectory, { recursive: true }); // await fs.mkdir(moduleDirectory, { recursive: true });
} // }
await saveQuizzes(course, localModule, previouslyStoredCourse); // await saveQuizzes(course, localModule, previouslyStoredCourse);
await saveAssignments(course, localModule, previouslyStoredCourse); // await saveAssignments(course, localModule, previouslyStoredCourse);
await savePages(course, localModule, previouslyStoredCourse); // await savePages(course, localModule, previouslyStoredCourse);
} // }
const moduleNames = course.modules.map((m) => m.name); // const moduleNames = course.modules.map((m) => m.name);
const moduleDirectories = await fs.readdir(courseDirectory, { // const moduleDirectories = await fs.readdir(courseDirectory, {
withFileTypes: true, // withFileTypes: true,
}); // });
for (const dirent of moduleDirectories) { // for (const dirent of moduleDirectories) {
if (dirent.isDirectory() && !moduleNames.includes(dirent.name)) { // if (dirent.isDirectory() && !moduleNames.includes(dirent.name)) {
const moduleDirPath = path.join(courseDirectory, dirent.name); // const moduleDirPath = path.join(courseDirectory, dirent.name);
console.log( // console.log(
`Deleting extra module directory, it was probably renamed ${moduleDirPath}` // `Deleting extra module directory, it was probably renamed ${moduleDirPath}`
); // );
await fs.rmdir(moduleDirPath, { recursive: true }); // await fs.rmdir(moduleDirPath, { recursive: true });
} // }
} // }
}; // };
const saveQuizzes = async ( // const saveQuizzes = async (
course: LocalCourse, // course: LocalCourse,
module: LocalModule, // module: LocalModule,
previouslyStoredCourse?: LocalCourse // previouslyStoredCourse?: LocalCourse
) => { // ) => {
const quizzesDirectory = path.join( // const quizzesDirectory = path.join(
basePath, // basePath,
course.settings.name, // course.settings.name,
module.name, // module.name,
"quizzes" // "quizzes"
); // );
if (!(await directoryExists(quizzesDirectory))) { // if (!(await directoryExists(quizzesDirectory))) {
await fs.mkdir(quizzesDirectory, { recursive: true }); // await fs.mkdir(quizzesDirectory, { recursive: true });
} // }
for (const quiz of module.quizzes) { // for (const quiz of module.quizzes) {
const previousModule = previouslyStoredCourse?.modules.find( // const previousModule = previouslyStoredCourse?.modules.find(
(m) => m.name === module.name // (m) => m.name === module.name
); // );
const previousQuiz = previousModule?.quizzes.find((q) => q === quiz); // const previousQuiz = previousModule?.quizzes.find((q) => q === quiz);
if (!previousQuiz) { // if (!previousQuiz) {
const markdownPath = path.join(quizzesDirectory, `${quiz.name}.md`); // const markdownPath = path.join(quizzesDirectory, `${quiz.name}.md`);
const quizMarkdown = quizMarkdownUtils.toMarkdown(quiz); // const quizMarkdown = quizMarkdownUtils.toMarkdown(quiz);
console.log(`Saving quiz ${markdownPath}`); // console.log(`Saving quiz ${markdownPath}`);
await fs.writeFile(markdownPath, quizMarkdown); // await fs.writeFile(markdownPath, quizMarkdown);
} // }
} // }
await removeOldQuizzes(quizzesDirectory, module); // await removeOldQuizzes(quizzesDirectory, module);
}; // };
const saveAssignments = async ( const saveAssignments = async (
course: LocalCourse, course: LocalCourse,
@@ -232,14 +232,14 @@ const removeOldPages = async (pagesDirectory: string, module: LocalModule) => {
} }
}; };
export const courseMarkdownSaver = { // export const courseMarkdownSaver = {
async save(course: LocalCourse, previouslyStoredCourse?: LocalCourse) { // async save(course: LocalCourse, previouslyStoredCourse?: LocalCourse) {
const courseDirectory = path.join(basePath, course.settings.name); // const courseDirectory = path.join(basePath, course.settings.name);
if (!(await directoryExists(courseDirectory))) { // if (!(await directoryExists(courseDirectory))) {
await fs.mkdir(courseDirectory, { recursive: true }); // await fs.mkdir(courseDirectory, { recursive: true });
} // }
await saveSettings(course, courseDirectory); // await saveSettings(course, courseDirectory);
await saveModules(course, courseDirectory, previouslyStoredCourse); // await saveModules(course, courseDirectory, previouslyStoredCourse);
}, // },
}; // };