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

starting to resurect tests

Browse Source
This commit is contained in:
Alex Mickelson
2024-09-13 09:11:30 -06:00
parent 32b59b3975
commit 6b60e8eda6
19 changed files with 550 additions and 638 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
nextjs/src/app/CourseList.tsx
View File

@@ -1,14 +1,19 @@
"use client";
import { useLocalCourseNamesQuery } from "@/hooks/localCourse/localCoursesHooks";
import { useLocalCoursesSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { getCourseUrl } from "@/services/urlUtils";
import Link from "next/link";
export default function CourseList() {
const { data: courses } = useLocalCourseNamesQuery();
const { data: allSettings } = useLocalCoursesSettingsQuery();
return (
<div>
{courses.map((c) => (
<Link href={`/course/${c}`} key={c} shallow={true}>
{c}{" "}
{allSettings.map((settings) => (
<Link
href={getCourseUrl(settings.name)}
key={settings.name}
shallow={true}
>
{settings.name}
</Link>
))}
</div>

90
nextjs/src/app/NewCourseForm.tsx
View File

@@ -1,90 +0,0 @@
import { DayOfWeekInput } from "@/components/form/DayOfWeekInput";
import SelectInput from "@/components/form/SelectInput";
import { useCourseListInTermQuery } from "@/hooks/canvas/canvasCourseHooks";
import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
import { useEmptyDirectoriesQuery } from "@/hooks/localCourse/storageDirectoryHooks";
import { CanvasCourseModel } from "@/models/canvas/courses/canvasCourseModel";
import { CanvasEnrollmentTermModel } from "@/models/canvas/enrollmentTerms/canvasEnrollmentTermModel";
import { DayOfWeek } from "@/models/local/localCourse";
import React, { useMemo, useState } from "react";
const sampleCompose = `
services:
canvas_manager:
image: alexmickelson/canvas_management:2
user: 1000:1000 # userid:groupid that matches file ownership on host system
ports:
- 8080:8080 # hostPort:containerPort - you can change the first one if you like
env_file:
- .env # needs to have your CANVAS_TOKEN set
environment:
- storageDirectory=/app/storage
- TZ=America/Denver
volumes:
- ~/projects/faculty/1430/2024-fall-alex/modules:/app/storage/UX
- ~/projects/faculty/4850_AdvancedFE/2024-fall-alex/modules:/app/storage/advanced_frontend
- ~/projects/faculty/1810/2024-fall-alex/modules:/app/storage/intro_to_web
- ~/projects/faculty/1420/2024-fall/Modules:/app/storage/1420
- ~/projects/faculty/1425/2024-fall/Modules:/app/storage/1425
`
export default function NewCourseForm() {
const today = useMemo(() => new Date(), []);
const { data: canvasTerms } = useCanvasTermsQuery(today);
const { data: emptyDirectories } = useEmptyDirectoriesQuery();
const [selectedTerm, setSelectedTerm] = useState<
CanvasEnrollmentTermModel | undefined
>();
const { data: canvasCourses } = useCourseListInTermQuery(selectedTerm?.id);
const [selectedDaysOfWeek, setSelectedDaysOfWeek] = useState<DayOfWeek[]>([]);
const [selectedCanvasCourse, setSelectedCanvasCourse] = useState<
CanvasCourseModel | undefined
>();
const [selectedDirectory, setSelectedDirectory] = useState<
string | undefined
>();
return (
<div>
<SelectInput
value={selectedTerm}
setValue={setSelectedTerm}
label={"Canvas Term"}
options={canvasTerms}
getOptionName={(t) => t.name}
/>
{selectedTerm && (
<>
<SelectInput
value={selectedCanvasCourse}
setValue={setSelectedCanvasCourse}
label={"Course"}
options={canvasCourses}
getOptionName={(c) => c.name}
/>
<SelectInput
value={selectedDirectory}
setValue={setSelectedDirectory}
label={"Storage Folder"}
options={emptyDirectories}
getOptionName={(d) => d}
/>
<br />
<DayOfWeekInput
selectedDays={selectedDaysOfWeek}
updateSettings={(day) => {
setSelectedDaysOfWeek((oldDays) => {
const hasDay = oldDays.includes(day);
return hasDay
? oldDays.filter((d) => d !== day)
: [day, ...oldDays];
});
}}
/>
</>
)}
</div>
);
}

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

@@ -1,3 +1,4 @@
import { LocalCourse } from "@/models/local/localCourse";
import { fileStorageService } from "@/services/fileStorage/fileStorageService";
import { withErrorHandling } from "@/services/withErrorHandling";
@@ -6,3 +7,13 @@ export const GET = async () =>
const courses = await fileStorageService.getCourseNames();
return Response.json(courses);
});
export const POST = async (request: Request) =>
await withErrorHandling(async () => {
const newCourse: LocalCourse = await request.json();
await fileStorageService.updateCourseSettings(
newCourse.settings.name,
newCourse.settings
);
return Response.json({});
});

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

@@ -0,0 +1,9 @@
import { fileStorageService } from "@/services/fileStorage/fileStorageService";
import { withErrorHandling } from "@/services/withErrorHandling";
export const GET = async () =>
await withErrorHandling(async () => {
const settings = await fileStorageService.getAllCoursesSettings();
return Response.json(settings);
});

12
nextjs/src/app/course/[courseName]/CourseSettingsLink.tsx
View File

@@ -3,22 +3,16 @@
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import Link from "next/link";
import { useCourseContext } from "./context/courseContext";
import { getCourseSettingsUrl } from "@/services/urlUtils";
export default function CourseSettingsLink() {
const {courseName} = useCourseContext();
const { courseName } = useCourseContext();
const { data: settings } = useLocalCourseSettingsQuery();
return (
<div>
{settings.name}
<Link
href={
"/course/" +
encodeURIComponent(courseName) +
"/settings"
}
shallow={true}
>
<Link href={getCourseSettingsUrl(courseName)} shallow={true}>
Course Settings
</Link>
</div>

16
nextjs/src/app/course/[courseName]/calendar/Day.tsx
View File

@@ -10,6 +10,7 @@ import Link from "next/link";
import { IModuleItem } from "@/models/local/IModuleItem";
import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
import { getDayOfWeek } from "@/models/local/localCourse";
import { getModuleItemUrl } from "@/services/urlUtils";
export default function Day({ day, month }: { day: string; month: number }) {
const dayAsDate = getDateFromStringOrThrow(
@@ -32,13 +33,11 @@ export default function Day({ day, month }: { day: string; month: number }) {
const classIsToday = settings.daysOfWeek.includes(getDayOfWeek(dayAsDate));
const todayClass = classIsToday ? " bg-slate-900 " : " ";
const monthClass = isInSameMonth ? " border border-slate-600 " : " "
const monthClass = isInSameMonth ? " border border-slate-600 " : " ";
return (
<div
className={
" rounded-lg p-2 pb-4 m-1 " + todayClass + monthClass
}
className={" rounded-lg p-2 pb-4 m-1 " + todayClass + monthClass}
onDrop={(e) => itemDrop(e, day)}
onDragOver={(e) => e.preventDefault()}
>
@@ -135,14 +134,7 @@ function DraggableListItem({
}}
>
<Link
href={
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
`/${type}/` +
encodeURIComponent(item.name)
}
href={getModuleItemUrl(courseName, moduleName, type, item.name)}
shallow={true}
>
{item.name}

218
nextjs/src/app/course/[courseName]/calendar/DayItemsInModule.tsx
View File

@@ -1,218 +0,0 @@
"use client";
import React, { useMemo } from "react";
import { useCourseContext } from "../context/courseContext";
import { getDateFromStringOrThrow } from "@/models/local/timeUtils";
import Link from "next/link";
import {
usePageNamesQuery,
usePagesQueries,
} from "@/hooks/localCourse/pageHooks";
import {
useQuizNamesQuery,
useQuizzesQueries,
} from "@/hooks/localCourse/quizHooks";
import {
useAssignmentNamesQuery,
useAssignmentsQueries,
} from "@/hooks/localCourse/assignmentHooks";
export default function DayItemsInModule({
day,
moduleName,
}: {
day: string;
moduleName: string;
}) {
return (
<ul className="list-disc ms-4">
<Assignments moduleName={moduleName} day={day} />
<Quizzes moduleName={moduleName} day={day} />
<Pages moduleName={moduleName} day={day} />
</ul>
);
}
function Pages({ moduleName, day }: { moduleName: string; day: string }) {
const { courseName } = useCourseContext();
const { data: pageNames } = usePageNamesQuery(moduleName);
const { data: pages } = usePagesQueries(moduleName, pageNames);
const todaysPages = useMemo(
() =>
pages.filter((p) => {
const dueDate = getDateFromStringOrThrow(
p.dueAt,
"due at for page in day"
);
const dayAsDate = getDateFromStringOrThrow(
day,
"in pages in DayItemsInModule"
);
return (
dueDate.getFullYear() === dayAsDate.getFullYear() &&
dueDate.getMonth() === dayAsDate.getMonth() &&
dueDate.getDate() === dayAsDate.getDate()
);
}),
[day, pages]
);
return (
<>
{todaysPages.map((p) => (
<li
key={p.name}
role="button"
draggable="true"
onDragStart={(e) => {
e.dataTransfer.setData(
"draggableItem",
JSON.stringify({
type: "page",
item: p,
sourceModuleName: moduleName,
})
);
}}
>
<Link
href={
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
"/page/" +
encodeURIComponent(p.name)
}
shallow={true}
>
{p.name}
</Link>
</li>
))}
</>
);
}
function Quizzes({ moduleName, day }: { moduleName: string; day: string }) {
const { data: quizNames } = useQuizNamesQuery(moduleName);
const { data: quizzes } = useQuizzesQueries(moduleName, quizNames);
const { courseName } = useCourseContext();
const todaysQuizzes = useMemo(
() =>
quizzes.filter((q) => {
const dueDate = getDateFromStringOrThrow(
q.dueAt,
"due at for quiz in day"
);
const dayAsDate = getDateFromStringOrThrow(
day,
"in quizzes in DayItemsInModule"
);
return (
dueDate.getFullYear() === dayAsDate.getFullYear() &&
dueDate.getMonth() === dayAsDate.getMonth() &&
dueDate.getDate() === dayAsDate.getDate()
);
}),
[day, quizzes]
);
return (
<>
{todaysQuizzes.map((q) => (
<li
key={q.name}
role="button"
draggable="true"
onDragStart={(e) => {
e.dataTransfer.setData(
"draggableItem",
JSON.stringify({
type: "quiz",
item: q,
sourceModuleName: moduleName,
})
);
}}
onDragEnd={(e) => e.preventDefault()}
>
<Link
href={
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
"/quiz/" +
encodeURIComponent(q.name)
}
shallow={true}
>
{q.name}
</Link>
</li>
))}
</>
);
}
function Assignments({ moduleName, day }: { moduleName: string; day: string }) {
const { data: assignmentNames } = useAssignmentNamesQuery(moduleName);
const { courseName } = useCourseContext();
const { data: assignments } = useAssignmentsQueries(
moduleName,
assignmentNames
);
const todaysAssignments = useMemo(
() =>
assignments.filter((a) => {
const dueDate = getDateFromStringOrThrow(
a.dueAt,
"due at for assignment in day"
);
const dayAsDate = getDateFromStringOrThrow(
day,
"in assignment in DayItemsInModule"
);
return (
dueDate.getFullYear() === dayAsDate.getFullYear() &&
dueDate.getMonth() === dayAsDate.getMonth() &&
dueDate.getDate() === dayAsDate.getDate()
);
}),
[assignments, day]
);
return (
<>
{todaysAssignments.map((a) => (
<li
key={a.name}
role="button"
draggable="true"
onDragStart={(e) => {
e.dataTransfer.setData(
"draggableItem",
JSON.stringify({
type: "assignment",
item: a,
sourceModuleName: moduleName,
})
);
}}
>
<Link
href={
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
"/assignment/" +
encodeURIComponent(a.name)
}
shallow={true}
>
{a.name}
</Link>
</li>
))}
</>
);
}

2
nextjs/src/app/globals.css
View File

@@ -67,7 +67,7 @@ blockquote {
}
code {
@apply font-mono text-sm bg-gray-800 px-1;
@apply font-mono text-sm bg-gray-800 px-1 leading-tight inline-block;
}
p {
@apply mb-3;

5
nextjs/src/app/AddNewCourse.tsx → nextjs/src/app/newCourse/AddNewCourse.tsx
View File

@@ -1,9 +1,7 @@
"use client";
import SelectInput from "@/components/form/SelectInput";
import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
import React, { useState } from "react";
import NewCourseForm from "./NewCourseForm";
import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
import NewCourseForm from "./NewCourseForm";
export default function AddNewCourse() {
const [showForm, setShowForm] = useState(false);
@@ -14,7 +12,6 @@ export default function AddNewCourse() {
<div className={" collapsable " + (showForm && "expand")}>
<div className="border rounded-md p-3 m-3">
<SuspenseAndErrorHandling>
{showForm && <NewCourseForm />}
</SuspenseAndErrorHandling>

182
nextjs/src/app/newCourse/NewCourseForm.tsx Normal file
View File

@@ -0,0 +1,182 @@
"use client";
import { DayOfWeekInput } from "@/components/form/DayOfWeekInput";
import SelectInput from "@/components/form/SelectInput";
import { Spinner } from "@/components/Spinner";
import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
import { useCourseListInTermQuery } from "@/hooks/canvas/canvasCourseHooks";
import { useCanvasTermsQuery } from "@/hooks/canvas/canvasHooks";
import {
useCreateLocalCourseMutation,
useLocalCoursesSettingsQuery,
} from "@/hooks/localCourse/localCoursesHooks";
import { useEmptyDirectoriesQuery } from "@/hooks/localCourse/storageDirectoryHooks";
import { CanvasCourseModel } from "@/models/canvas/courses/canvasCourseModel";
import { CanvasEnrollmentTermModel } from "@/models/canvas/enrollmentTerms/canvasEnrollmentTermModel";
import { DayOfWeek } from "@/models/local/localCourse";
import { getCourseUrl } from "@/services/urlUtils";
import { useRouter } from "next/navigation";
import React, { useMemo, useState } from "react";
const sampleCompose = `services:
canvas_manager:
image: alexmickelson/canvas_management:2 # pull this image regularly
user: 1000:1000 # userid:groupid that matches file ownership on host system
ports:
- 8080:8080 # hostPort:containerPort - you can change the first one if you like
env_file:
- .env # needs to have your CANVAS_TOKEN set
environment:
- TZ=America/Denver # prevents timezone issues for due dates
volumes:
- ~/projects/faculty/1430/2024-fall-alex/modules:/app/storage/UX
- ~/projects/faculty/4850_AdvancedFE/2024-fall-alex/modules:/app/storage/advanced_frontend
`;
export default function NewCourseForm() {
const router = useRouter();
const today = useMemo(() => new Date(), []);
const { data: canvasTerms } = useCanvasTermsQuery(today);
const [selectedTerm, setSelectedTerm] = useState<
CanvasEnrollmentTermModel | undefined
>();
const [selectedDaysOfWeek, setSelectedDaysOfWeek] = useState<DayOfWeek[]>([]);
const [selectedCanvasCourse, setSelectedCanvasCourse] = useState<
CanvasCourseModel | undefined
>();
const [selectedDirectory, setSelectedDirectory] = useState<
string | undefined
>();
const createCourse = useCreateLocalCourseMutation();
const formIsComplete =
selectedTerm && selectedCanvasCourse && selectedDirectory;
return (
<div>
<SelectInput
value={selectedTerm}
setValue={setSelectedTerm}
label={"Canvas Term"}
options={canvasTerms}
getOptionName={(t) => t.name}
/>
<SuspenseAndErrorHandling>
{selectedTerm && (
<OtherSettings
selectedTerm={selectedTerm}
selectedCanvasCourse={selectedCanvasCourse}
setSelectedCanvasCourse={setSelectedCanvasCourse}
selectedDirectory={selectedDirectory}
setSelectedDirectory={setSelectedDirectory}
selectedDaysOfWeek={selectedDaysOfWeek}
setSelectedDaysOfWeek={setSelectedDaysOfWeek}
/>
)}
</SuspenseAndErrorHandling>
<div className="m-3 text-center">
<button
disabled={!formIsComplete || createCourse.isPending}
onClick={() => {
if (formIsComplete) {
createCourse
.mutateAsync({
modules: [],
settings: {
name: selectedDirectory,
assignmentGroups: [],
daysOfWeek: selectedDaysOfWeek,
canvasId: selectedCanvasCourse.id,
startDate: selectedTerm.start_at ?? "",
endDate: selectedTerm.start_at ?? "",
defaultDueTime: { hour: 11, minute: 59 },
},
})
.then(() => {
router.push(getCourseUrl(selectedDirectory), undefined, {
shallow: true,
});
});
}
}}
>
Save New Course Configuration
</button>
</div>
{createCourse.isPending && <Spinner />}
<pre>
<div>Example docker compose</div>
<code className="language-yml">{sampleCompose}</code>
</pre>
</div>
);
}
function OtherSettings({
selectedTerm,
selectedCanvasCourse,
setSelectedCanvasCourse,
selectedDirectory,
setSelectedDirectory,
selectedDaysOfWeek,
setSelectedDaysOfWeek,
}: {
selectedTerm: CanvasEnrollmentTermModel;
selectedCanvasCourse: CanvasCourseModel | undefined;
setSelectedCanvasCourse: React.Dispatch<
React.SetStateAction<CanvasCourseModel | undefined>
>;
selectedDirectory: string | undefined;
setSelectedDirectory: React.Dispatch<
React.SetStateAction<string | undefined>
>;
selectedDaysOfWeek: DayOfWeek[];
setSelectedDaysOfWeek: React.Dispatch<React.SetStateAction<DayOfWeek[]>>;
}) {
const { data: canvasCourses } = useCourseListInTermQuery(selectedTerm.id);
const { data: allSettings } = useLocalCoursesSettingsQuery();
const { data: emptyDirectories } = useEmptyDirectoriesQuery();
const populatedCanvasCourseIds = allSettings.map((s) => s.canvasId);
const availableCourses = canvasCourses.filter(
(canvas) => !populatedCanvasCourseIds.includes(canvas.id)
);
return (
<>
<SelectInput
value={selectedCanvasCourse}
setValue={setSelectedCanvasCourse}
label={"Course"}
options={availableCourses}
getOptionName={(c) => c.name}
/>
<SelectInput
value={selectedDirectory}
setValue={setSelectedDirectory}
label={"Storage Folder"}
options={emptyDirectories}
getOptionName={(d) => d}
/>
<div>
New folders will not be created automatically, you are expected to mount
a docker volume for each coures.
</div>
<br />
<div className="flex justify-center">
<DayOfWeekInput
selectedDays={selectedDaysOfWeek}
updateSettings={(day) => {
setSelectedDaysOfWeek((oldDays) => {
const hasDay = oldDays.includes(day);
return hasDay
? oldDays.filter((d) => d !== day)
: [day, ...oldDays];
});
}}
/>
</div>
</>
);
}

2
nextjs/src/app/page.tsx
View File

@@ -1,5 +1,5 @@
import AddNewCourse from "./AddNewCourse";
import CourseList from "./CourseList";
import AddNewCourse from "./newCourse/AddNewCourse";
export default async function Home() {
return (

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

@@ -1,26 +1,28 @@
import { QueryClient } from "@tanstack/react-query";
import { localCourseKeys } from "./localCourse/localCourseKeys";
import { fileStorageService } from "@/services/fileStorage/fileStorageService";
import { LocalCourseSettings } from "@/models/local/localCourse";
// https://tanstack.com/query/latest/docs/framework/react/guides/ssr
export const hydrateCourses = async (queryClient: QueryClient) => {
const courseNames = await fileStorageService.getCourseNames();
const allSettings = await fileStorageService.getAllCoursesSettings();
const courseNames = allSettings.map((s) => s.name);
await queryClient.prefetchQuery({
queryKey: localCourseKeys.allCourses,
queryFn: () => courseNames,
queryKey: localCourseKeys.allCoursesSettings,
queryFn: () => allSettings,
});
await Promise.all(
courseNames.map(async (courseName) => {
await hydrateCourse(queryClient, courseName);
allSettings.map(async (settings) => {
await hydrateCourse(queryClient, settings);
})
);
};
export const hydrateCourse = async (
queryClient: QueryClient,
courseName: string
courseSettings: LocalCourseSettings
) => {
const settings = await fileStorageService.getCourseSettings(courseName);
const courseName = courseSettings.name
const moduleNames = await fileStorageService.getModuleNames(courseName);
const modulesData = await Promise.all(
moduleNames.map(async (moduleName) => {
@@ -69,7 +71,7 @@ export const hydrateCourse = async (
await queryClient.prefetchQuery({
queryKey: localCourseKeys.settings(courseName),
queryFn: () => settings,
queryFn: () => courseSettings,
});
await queryClient.prefetchQuery({
queryKey: localCourseKeys.moduleNames(courseName),

3
nextjs/src/hooks/localCourse/localCourseKeys.ts
View File

@@ -1,5 +1,6 @@
export const localCourseKeys = {
allCourses: ["all courses"] as const,
allCoursesSettings: ["all courses settings"] as const,
allCoursesNames: ["all courses names"] as const,
settings: (courseName: string) =>
["course details", courseName, "settings"] as const,
moduleNames: (courseName: string) =>

42
nextjs/src/hooks/localCourse/localCoursesHooks.ts
View File

@@ -1,5 +1,5 @@
"use client";
import { LocalCourseSettings } from "@/models/local/localCourse";
import { LocalCourse, LocalCourseSettings } from "@/models/local/localCourse";
import {
useMutation,
useQueries,
@@ -30,24 +30,43 @@ import {
} from "./quizHooks";
import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
export const useLocalCourseNamesQuery = () =>
export const useLocalCoursesSettingsQuery = () =>
useSuspenseQuery({
queryKey: localCourseKeys.allCourses,
queryFn: async (): Promise<string[]> => {
const url = `/api/courses`;
const response = await axiosClient.get(url);
queryKey: localCourseKeys.allCoursesSettings,
queryFn: async () => {
const url = `/api/courses/settings`;
const response = await axiosClient.get<LocalCourseSettings[]>(url);
return response.data;
},
});
export const useLocalCourseSettingsQuery = () => {
const { courseName } = useCourseContext();
const { data: settingsList } = useLocalCoursesSettingsQuery();
return useSuspenseQuery({
queryKey: localCourseKeys.settings(courseName),
queryFn: async (): Promise<LocalCourseSettings> => {
const url = `/api/courses/${courseName}/settings`;
const response = await axiosClient.get(url);
return response.data;
queryFn: () => {
const s = settingsList.find((s) => s.name === courseName);
if (!s) {
console.log(courseName, settingsList);
throw Error("Could not find settings for course " + courseName);
}
return s;
},
});
};
export const useCreateLocalCourseMutation = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: async (newCourse: LocalCourse) => {
const url = `/api/courses`;
await axiosClient.post(url, newCourse);
},
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: localCourseKeys.allCoursesSettings,
});
},
});
};
@@ -68,6 +87,9 @@ export const useUpdateLocalCourseSettingsMutation = () => {
queryClient.invalidateQueries({
queryKey: localCourseKeys.settings(courseName),
});
queryClient.invalidateQueries({
queryKey: localCourseKeys.allCoursesSettings,
});
},
});
};

5
nextjs/src/models/local/tests/timeUtils.test.ts
View File

@@ -17,6 +17,11 @@ describe("Can properly handle expected date formats", () => {
const dateObject = getDateFromString(dateString);
expect(dateObject).not.toBeUndefined();
});
it("can use other ISO format", () => {
const dateString = "2024-08-26T06:00:00Z";
const dateObject = getDateFromString(dateString);
expect(dateObject).not.toBeUndefined();
});
it("can get correct time from format", () => {
const dateString = "08/28/2024 23:59:00";
const dateObject = getDateFromString(dateString);

3
nextjs/src/models/local/timeUtils.ts
View File

@@ -37,10 +37,11 @@ const _getDateFromISO = (value: string): Date | undefined => {
};
export const getDateFromString = (value: string): Date | undefined => {
const ampmDateRegex =
/^\d{1,2}\/\d{1,2}\/\d{4} \d{1,2}:\d{2}:\d{2}\s{1}[APap][Mm]$/; //"M/D/YYYY h:mm:ss AM/PM"
const militaryDateRegex = /^\d{1,2}\/\d{1,2}\/\d{4} \d{1,2}:\d{2}:\d{2}$/; //"MM/DD/YYYY HH:mm:ss"
const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)$/; //"2024-08-26T00:00:00.0000000"
const isoDateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}((.\d+)|(Z))$/; //"2024-08-26T00:00:00.0000000"
if (isoDateRegex.test(value)) {
return _getDateFromISO(value);

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

@@ -4,10 +4,7 @@ import {
LocalCourseSettings,
localCourseYamlUtils,
} from "@/models/local/localCourse";
import {
directoryOrFileExists,
hasFileSystemEntries,
} from "./utils/fileSystemUtils";
import { directoryOrFileExists } from "./utils/fileSystemUtils";
import {
LocalAssignment,
localAssignmentMarkdown,
@@ -53,6 +50,15 @@ export const fileStorageService = {
return courseNamesFromDirectories;
},
async getAllCoursesSettings() {
const courses = await fileStorageService.getCourseNames();
const settings = await Promise.all(
courses.map(async (c) => await fileStorageService.getCourseSettings(c))
);
return settings;
},
async getCourseSettings(courseName: string): Promise<LocalCourseSettings> {
const courseDirectory = path.join(basePath, courseName);
const settingsPath = path.join(courseDirectory, "settings.yml");
@@ -97,6 +103,11 @@ export const fileStorageService = {
const modules = await Promise.all(modulePromises);
return modules.sort((a, b) => a.localeCompare(b));
},
async createModule(courseName: string, moduleName: string) {
const courseDirectory = path.join(basePath, courseName);
await fs.mkdir(courseDirectory + "/" + moduleName, { recursive: true });
},
async getAssignmentNames(courseName: string, moduleName: string) {
const filePath = path.join(basePath, courseName, moduleName, "assignments");
@@ -263,7 +274,6 @@ export const fileStorageService = {
}
const directories = await fs.readdir(basePath, { withFileTypes: true });
console.log(directories);
const emptyDirectories = (
await Promise.all(
directories
@@ -282,4 +292,10 @@ export const fileStorageService = {
return emptyDirectories;
},
async createCourseFolderForTesting(courseName: string) {
const courseDirectory = path.join(basePath, courseName);
await fs.mkdir(courseDirectory, { recursive: true });
},
};

495
nextjs/src/services/tests/fileStorage.test.ts
View File

@@ -1,293 +1,252 @@
// import path from "path";
// import { describe, it, expect, beforeEach } from "vitest";
// import fs from "fs";
// import { DayOfWeek, LocalCourse } from "@/models/local/localCourse";
// import { AssignmentSubmissionType } from "@/models/local/assignmnet/assignmentSubmissionType";
// import { QuestionType } from "@/models/local/quiz/localQuizQuestion";
// import { fileStorageService } from "../fileStorage/fileStorageService";
import path from "path";
import { describe, it, expect, beforeEach } from "vitest";
import fs from "fs";
import {
DayOfWeek,
LocalCourse,
LocalCourseSettings,
} from "@/models/local/localCourse";
import { QuestionType } from "@/models/local/quiz/localQuizQuestion";
import { fileStorageService } from "../fileStorage/fileStorageService";
// describe("FileStorageTests", () => {
// beforeEach(() => {
// const storageDirectory = process.env.STORAGE_DIRECTORY ?? "/tmp/canvasManagerTests";
// if (fs.existsSync(storageDirectory)) {
// fs.rmdirSync(storageDirectory, { recursive: true });
// }
// fs.mkdirSync(storageDirectory, { recursive: true });
// });
describe("FileStorageTests", () => {
beforeEach(() => {
const storageDirectory =
process.env.STORAGE_DIRECTORY ?? "/tmp/canvasManagerTests";
if (fs.existsSync(storageDirectory)) {
fs.rmdirSync(storageDirectory, { recursive: true });
}
fs.mkdirSync(storageDirectory, { recursive: true });
});
// it("empty course can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "test empty course",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [],
// };
it("course settings can be saved and loaded", async () => {
const name = "test empty course";
await fileStorageService.createCourseFolderForTesting(name);
const settings: LocalCourseSettings = {
name,
assignmentGroups: [],
daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
startDate: "07/09/2024 23:59:00",
endDate: "07/09/2024 23:59:00",
defaultDueTime: { hour: 1, minute: 59 },
canvasId: 0,
};
// await fileStorageService.saveCourseAsync(testCourse);
await fileStorageService.updateCourseSettings(name, settings);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
const loadedSettings = await fileStorageService.getCourseSettings(name);
// expect(loadedCourse).toEqual(testCourse);
// });
expect(loadedSettings).toEqual(settings);
});
// it("course settings can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// assignmentGroups: [],
// name: "Test Course with settings",
// daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [],
// };
it("empty course modules can be created", async () => {
const courseName = "test empty course";
const moduleName = "test module 1";
// await fileStorageService.saveCourseAsync(testCourse);
await fileStorageService.createModule(courseName, moduleName);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
const moduleNames = await fileStorageService.getModuleNames(courseName);
// expect(loadedCourse?.settings).toEqual(testCourse.settings);
// });
expect(moduleNames).toContain(moduleName);
});
// it("empty course modules can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with modules",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "test module 1",
// assignments: [],
// quizzes: [],
// pages: [],
// },
// ],
// };
// it("course modules with assignments can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with modules and assignments",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "test module 1 with assignments",
// assignments: [
// {
// name: "test assignment",
// description: "here is the description",
// dueAt: "07/09/2024 23:59:00",
// lockAt: "07/09/2024 23:59:00",
// submissionTypes: [AssignmentSubmissionType.ONLINE_UPLOAD],
// localAssignmentGroupName: "Final Project",
// rubric: [
// { points: 4, label: "do task 1" },
// { points: 2, label: "do task 2" },
// ],
// allowedFileUploadExtensions: [],
// },
// ],
// quizzes: [],
// pages: [],
// },
// ],
// };
// await fileStorageService.saveCourseAsync(testCourse);
// await fileStorageService.saveCourseAsync(testCourse);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// expect(loadedCourse?.modules).toEqual(testCourse.modules);
// });
// expect(loadedCourse?.modules[0].assignments).toEqual(
// testCourse.modules[0].assignments
// );
// });
// it("course modules with assignments can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with modules and assignments",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "test module 1 with assignments",
// assignments: [
// {
// name: "test assignment",
// description: "here is the description",
// dueAt: "07/09/2024 23:59:00",
// lockAt: "07/09/2024 23:59:00",
// submissionTypes: [AssignmentSubmissionType.ONLINE_UPLOAD],
// localAssignmentGroupName: "Final Project",
// rubric: [
// { points: 4, label: "do task 1" },
// { points: 2, label: "do task 2" },
// ],
// allowedFileUploadExtensions: [],
// },
// ],
// quizzes: [],
// pages: [],
// },
// ],
// };
// it("course modules with quizzes can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with modules and quiz",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "test module 1 with quiz",
// assignments: [],
// quizzes: [
// {
// name: "Test Quiz",
// description: "quiz description",
// lockAt: "07/09/2024 12:05:00",
// dueAt: "07/09/2024 12:05:00",
// shuffleAnswers: true,
// oneQuestionAtATime: true,
// localAssignmentGroupName: "Assignments",
// questions: [
// {
// text: "test essay",
// questionType: QuestionType.ESSAY,
// points: 1,
// answers: [],
// matchDistractors: [],
// },
// ],
// showCorrectAnswers: false,
// allowedAttempts: 0,
// },
// ],
// pages: [],
// },
// ],
// };
// await fileStorageService.saveCourseAsync(testCourse);
// await fileStorageService.saveCourseAsync(testCourse);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// expect(loadedCourse?.modules[0].assignments).toEqual(
// testCourse.modules[0].assignments
// );
// });
// expect(loadedCourse?.modules[0].quizzes).toEqual(
// testCourse.modules[0].quizzes
// );
// });
// it("course modules with quizzes can be saved and loaded", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with modules and quiz",
// assignmentGroups: [],
// daysOfWeek: [],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "test module 1 with quiz",
// assignments: [],
// quizzes: [
// {
// name: "Test Quiz",
// description: "quiz description",
// lockAt: "07/09/2024 12:05:00",
// dueAt: "07/09/2024 12:05:00",
// shuffleAnswers: true,
// oneQuestionAtATime: true,
// localAssignmentGroupName: "Assignments",
// questions: [
// {
// text: "test essay",
// questionType: QuestionType.ESSAY,
// points: 1,
// answers: [],
// matchDistractors: [],
// },
// ],
// showCorrectAnswers: false,
// allowedAttempts: 0,
// },
// ],
// pages: [],
// },
// ],
// };
// it("markdown storage fully populated does not lose data", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with lots of data",
// assignmentGroups: [],
// daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "new test module",
// assignments: [
// {
// name: "test assignment",
// description: "here is the description",
// dueAt: "07/09/2024 23:59:00",
// lockAt: "07/09/2024 23:59:00",
// submissionTypes: [AssignmentSubmissionType.ONLINE_UPLOAD],
// localAssignmentGroupName: "Final Project",
// rubric: [
// { points: 4, label: "do task 1" },
// { points: 2, label: "do task 2" },
// ],
// allowedFileUploadExtensions: [],
// },
// ],
// quizzes: [
// {
// name: "Test Quiz",
// description: "quiz description",
// lockAt: "07/09/2024 23:59:00",
// dueAt: "07/09/2024 23:59:00",
// shuffleAnswers: true,
// oneQuestionAtATime: false,
// localAssignmentGroupName: "someId",
// allowedAttempts: -1,
// questions: [
// {
// text: "test short answer",
// questionType: QuestionType.SHORT_ANSWER,
// points: 1,
// answers: [],
// matchDistractors: [],
// },
// ],
// showCorrectAnswers: false,
// },
// ],
// pages: [],
// },
// ],
// };
// await fileStorageService.saveCourseAsync(testCourse);
// await fileStorageService.saveCourseAsync(testCourse);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// expect(loadedCourse?.modules[0].quizzes).toEqual(
// testCourse.modules[0].quizzes
// );
// });
// expect(loadedCourse).toEqual(testCourse);
// });
// it("markdown storage fully populated does not lose data", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with lots of data",
// assignmentGroups: [],
// daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "new test module",
// assignments: [
// {
// name: "test assignment",
// description: "here is the description",
// dueAt: "07/09/2024 23:59:00",
// lockAt: "07/09/2024 23:59:00",
// submissionTypes: [AssignmentSubmissionType.ONLINE_UPLOAD],
// localAssignmentGroupName: "Final Project",
// rubric: [
// { points: 4, label: "do task 1" },
// { points: 2, label: "do task 2" },
// ],
// allowedFileUploadExtensions: [],
// },
// ],
// quizzes: [
// {
// name: "Test Quiz",
// description: "quiz description",
// lockAt: "07/09/2024 23:59:00",
// dueAt: "07/09/2024 23:59:00",
// shuffleAnswers: true,
// oneQuestionAtATime: false,
// localAssignmentGroupName: "someId",
// allowedAttempts: -1,
// questions: [
// {
// text: "test short answer",
// questionType: QuestionType.SHORT_ANSWER,
// points: 1,
// answers: [],
// matchDistractors: [],
// },
// ],
// showCorrectAnswers: false,
// },
// ],
// pages: [],
// },
// ],
// };
// it("markdown storage can persist pages", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with page",
// assignmentGroups: [],
// daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "page test module",
// assignments: [],
// quizzes: [],
// pages: [
// {
// name: "test page persistence",
// dueAt: "07/09/2024 23:59:00",
// text: "this is some\n## markdown\n",
// },
// ],
// },
// ],
// };
// await fileStorageService.saveCourseAsync(testCourse);
// await fileStorageService.saveCourseAsync(testCourse);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// expect(loadedCourse).toEqual(testCourse);
// });
// it("markdown storage can persist pages", async () => {
// const testCourse: LocalCourse = {
// settings: {
// name: "Test Course with page",
// assignmentGroups: [],
// daysOfWeek: [DayOfWeek.Monday, DayOfWeek.Wednesday],
// startDate: "07/09/2024 23:59:00",
// endDate: "07/09/2024 23:59:00",
// defaultDueTime: { hour: 1, minute: 59 },
// },
// modules: [
// {
// name: "page test module",
// assignments: [],
// quizzes: [],
// pages: [
// {
// name: "test page persistence",
// dueAt: "07/09/2024 23:59:00",
// text: "this is some\n## markdown\n",
// },
// ],
// },
// ],
// };
// await fileStorageService.saveCourseAsync(testCourse);
// const loadedCourses = await fileStorageService.loadSavedCourses();
// const loadedCourse = loadedCourses.find(
// (c) => c.settings.name === testCourse.settings.name
// );
// expect(loadedCourse).toEqual(testCourse);
// });
// });
// expect(loadedCourse).toEqual(testCourse);
// });
});

24
nextjs/src/services/urlUtils.ts Normal file
View File

@@ -0,0 +1,24 @@
export function getModuleItemUrl(
courseName: string,
moduleName: string,
type: "assignment" | "page" | "quiz",
itemName: string
) {
return (
"/course/" +
encodeURIComponent(courseName) +
"/modules/" +
encodeURIComponent(moduleName) +
`/${type}/` +
encodeURIComponent(itemName)
);
}
export function getCourseUrl(courseName: string) {
return "/course/" + encodeURIComponent(courseName);
}
export function getCourseSettingsUrl(courseName: string) {
return "/course/" + encodeURIComponent(courseName) + "/settings";
}