starting to resurect tests

nextjs/src/app/CourseList.tsx

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

nextjs/src/app/NewCourseForm.tsx

@@ -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>
-  );
-}

nextjs/src/app/api/courses/route.ts

@@ -1,8 +1,19 @@
+import { LocalCourse } from "@/models/local/localCourse";
 import { fileStorageService } from "@/services/fileStorage/fileStorageService";
 import { withErrorHandling } from "@/services/withErrorHandling";
 
 export const GET = async () =>
- await withErrorHandling(async () => {
+  await withErrorHandling(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({});
+  });

nextjs/src/app/api/courses/settings/route.ts

@@ -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);
+  });

nextjs/src/app/course/[courseName]/CourseSettingsLink.tsx

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

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

@@ -9,7 +9,8 @@ import { useCourseContext } from "../context/courseContext";
 import Link from "next/link";
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
-import {  getDayOfWeek } from "@/models/local/localCourse";
+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}

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

@@ -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>
-      ))}
-    </>
-  );
-}

nextjs/src/app/globals.css

@@ -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;

nextjs/src/app/newCourse/AddNewCourse.tsx

@@ -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,10 +12,9 @@ export default function AddNewCourse() {
 
       <div className={" collapsable " + (showForm && "expand")}>
         <div className="border rounded-md p-3 m-3">
-
-        <SuspenseAndErrorHandling>
-          {showForm && <NewCourseForm />}
-        </SuspenseAndErrorHandling>
+          <SuspenseAndErrorHandling>
+            {showForm && <NewCourseForm />}
+          </SuspenseAndErrorHandling>
         </div>
       </div>
     </div>

nextjs/src/app/newCourse/NewCourseForm.tsx

@@ -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>
+    </>
+  );
+}

nextjs/src/app/page.tsx

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