trying to add an assignment

2026-03-25 23:28:33 -06:00 · 2024-09-18 14:15:38 -06:00
parent 3862743e4c
commit de0b1ed719
7 changed files with 248 additions and 104 deletions
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/EditAssignment.tsx
@@ -7,6 +7,17 @@ import {
 import { localAssignmentMarkdown } from "@/models/local/assignment/localAssignment";
 import { useEffect, useState } from "react";
 import AssignmentPreview from "./AssignmentPreview";
+import { getCourseUrl } from "@/services/urlUtils";
+import Link from "next/link";
+import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
+import { useLocalCourseSettingsQuery } from "@/hooks/localCourse/localCoursesHooks";
+import {
+  useAddAssignmentToCanvasMutation,
+  useCanvasAssignmentsQuery,
+  useDeleteAssignmentFromCanvasMutation,
+} from "@/hooks/canvas/canvasAssignmentHooks";
+import { Spinner } from "@/components/Spinner";
+import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils";

 export default function EditAssignment({
  moduleName,
@@ -68,9 +79,71 @@ export default function EditAssignment({
          <AssignmentPreview assignment={assignment} />
        </div>
      </div>
-      <div className="p-5">
-        <button>Add to canvas....</button>
-      </div>
+      <AssignmentButtons
+        moduleName={moduleName}
+        assignmentName={assignmentName}
+      />
+    </div>
+  );
+}
+
+function AssignmentButtons({
+  moduleName,
+  assignmentName,
+}: {
+  assignmentName: string;
+  moduleName: string;
+}) {
+  const { courseName } = useCourseContext();
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
+  const { data: assignment } = useAssignmentQuery(moduleName, assignmentName);
+  const addToCanvas = useAddAssignmentToCanvasMutation();
+  const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation();
+
+  const assignmentInCanvas = canvasAssignments.find(
+    (a) => a.name === assignmentName
+  );
+  return (
+    <div className="p-5 flex flex-row justify-end gap-3">
+      {(addToCanvas.isPending || deleteFromCanvas.isPending) && <Spinner />}
+      {assignmentInCanvas && !assignmentInCanvas.published && (
+        <div className="text-rose-300 my-auto">Not Published</div>
+      )}
+      {!assignmentInCanvas && (
+        <button
+          disabled={addToCanvas.isPending}
+          onClick={() => addToCanvas.mutate(assignment)}
+        >
+          Add to canvas....
+        </button>
+      )}
+      {assignmentInCanvas && (
+        <a
+          className="btn"
+          target="_blank"
+          href={`${baseCanvasUrl}/courses/${settings.canvasId}/assignments/${assignmentInCanvas.id}`}
+        >
+          View in Canvas
+        </a>
+      )}
+      {assignmentInCanvas && (
+        <button
+          className="btn-danger"
+          disabled={deleteFromCanvas.isPending}
+          onClick={() =>
+            deleteFromCanvas.mutate({
+              canvasAssignmentId: assignmentInCanvas.id,
+              assignmentName: assignment.name,
+            })
+          }
+        >
+          Delete from Canvas
+        </button>
+      )}
+      <Link className="btn" href={getCourseUrl(courseName)} shallow={true}>
+        Go Back
+      </Link>
    </div>
  );
 }
--- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
+++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/quiz/[quizName]/EditQuiz.tsx
@@ -135,10 +135,10 @@ function QuizButtons({
  moduleName: string;
  toggleHelp: () => void;
 }) {
+  const { courseName } = useCourseContext();
+  const { data: settings } = useLocalCourseSettingsQuery();
  const { data: canvasQuizzes } = useCanvasQuizzesQuery();
  const { data: quiz } = useQuizQuery(moduleName, quizName);
-  const { data: settings } = useLocalCourseSettingsQuery();
-  const { courseName } = useCourseContext();
  const addToCanvas = useAddQuizToCanvasMutation();
  const deleteFromCanvas = useDeleteQuizFromCanvasMutation();

--- a/nextjs/src/components/editor/InnerMonacoEditor.tsx
+++ b/nextjs/src/components/editor/InnerMonacoEditor.tsx
@@ -46,14 +46,6 @@ export default function InnerMonacoEditor({
    }
  }, [onChange, value]);

-  useEffect(() => {
-    window.addEventListener("resize", () => {
-      if (editorRef.current) {
-        editorRef.current.layout();
-      }
-    });
-  }, []);
-
  return (
    <div
      className="Editor"
--- a/nextjs/src/hooks/canvas/canvasAssignmentHooks.ts
+++ b/nextjs/src/hooks/canvas/canvasAssignmentHooks.ts
@@ -0,0 +1,90 @@
+import { canvasAssignmentService } from "@/services/canvas/canvasAssignmentService";
+import { canvasService } from "@/services/canvas/canvasService";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQueries,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { useLocalCourseSettingsQuery } from "../localCourse/localCoursesHooks";
+import { LocalAssignment } from "@/models/local/assignment/localAssignment";
+
+export const canvasAssignmentKeys = {
+  assignments: (canvasCourseId: number) =>
+    ["canvas", canvasCourseId, "assignments"] as const,
+  assignment: (canvasCourseId: number, assignmentName: string) =>
+    ["canvas", canvasCourseId, "assignment", assignmentName] as const,
+};
+
+export const useCanvasAssignmentsQuery = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+
+  return useSuspenseQuery({
+    queryKey: canvasAssignmentKeys.assignments(settings.canvasId),
+    queryFn: async () => canvasAssignmentService.getAll(settings.canvasId),
+  });
+};
+
+// export const useCanvasAssignmentsQuery = () => {
+//   const { data: settings } = useLocalCourseSettingsQuery();
+//   const { data: allAssignments } = useInnerCanvasAssignmentsQuery();
+
+//   return useSuspenseQueries({
+//     queries: allAssignments.map((a) => ({
+//       queryKey: canvasAssignmentKeys.assignment(settings.canvasId, a.name),
+//       queryFn: () => a,
+//     })),
+//     combine: (results) => ({
+//       data: results.map((r) => r.data),
+//       pending: results.some((r) => r.isPending),
+//     }),
+//   });
+// };
+
+export const useAddAssignmentToCanvasMutation = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (assignmnet: LocalAssignment) => {
+      const assignmentGroup = settings.assignmentGroups.find(
+        (g) => g.name === assignmnet.localAssignmentGroupName
+      );
+      await canvasAssignmentService.create(
+        settings.canvasId,
+        assignmnet,
+        assignmentGroup?.canvasId
+      );
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: canvasAssignmentKeys.assignments(settings.canvasId),
+      });
+    },
+  });
+};
+
+export const useDeleteAssignmentFromCanvasMutation = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({
+      canvasAssignmentId,
+      assignmentName,
+    }: {
+      canvasAssignmentId: number;
+      assignmentName: string;
+    }) => {
+      await canvasAssignmentService.delete(
+        settings.canvasId,
+        canvasAssignmentId,
+        assignmentName
+      );
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: canvasAssignmentKeys.assignments(settings.canvasId),
+      });
+    },
+  });
+};
--- a/nextjs/src/hooks/canvas/canvasQuizHooks.ts
+++ b/nextjs/src/hooks/canvas/canvasQuizHooks.ts
@@ -8,7 +8,8 @@ import { canvasQuizService } from "@/services/canvas/canvasQuizService";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";

 export const canvasQuizKeys = {
-  quizzes: (canvasCourseId: number) => ["canvas", canvasCourseId, "quizzes"],
+  quizzes: (canvasCourseId: number) =>
+    ["canvas", canvasCourseId, "quizzes"] as const,
 };

 export const useCanvasQuizzesQuery = () => {
@@ -29,16 +30,13 @@ export const useAddQuizToCanvasMutation = () => {
      const assignmentGroup = settings.assignmentGroups.find(
        (g) => g.name === quiz.localAssignmentGroupName
      );
-      console.log("starting");
      await canvasQuizService.create(
        settings.canvasId,
        quiz,
        assignmentGroup?.canvasId
      );
-      console.log("ending");
    },
    onSuccess: () => {
-      console.log("invalidating");
      queryClient.invalidateQueries({
        queryKey: canvasQuizKeys.quizzes(settings.canvasId),
      });
--- a/nextjs/src/hooks/localCourse/pageHooks.ts
+++ b/nextjs/src/hooks/localCourse/pageHooks.ts
@@ -6,7 +6,6 @@ import {
  useSuspenseQueries,
  useSuspenseQuery,
 } from "@tanstack/react-query";
-import axios from "axios";
 import { localCourseKeys } from "./localCourseKeys";
 import { useCourseContext } from "@/app/course/[courseName]/context/courseContext";
 import { axiosClient } from "@/services/axiosUtils";
--- a/nextjs/src/services/canvas/canvasAssignmentService.ts
+++ b/nextjs/src/services/canvas/canvasAssignmentService.ts
@@ -6,106 +6,11 @@ import { markdownToHTMLSafe } from "../htmlMarkdownUtils";
 import { CanvasRubricCreationResponse } from "@/models/canvas/assignments/canvasRubricCreationResponse";
 import { assignmentPoints } from "@/models/local/assignment/utils/assignmentPointsUtils";

-export const canvasAssignmentService = {
-  async getAll(courseId: number): Promise<CanvasAssignment[]> {
-    const url = `${canvasApi}/courses/${courseId}/assignments`;
-    const { data: assignments } = await axiosClient.get<CanvasAssignment[]>(
-      url
-    );
-    return assignments.map((a) => ({
-      ...a,
-      due_at: a.due_at ? new Date(a.due_at).toLocaleString() : undefined, // timezones?
-      lock_at: a.lock_at ? new Date(a.lock_at).toLocaleString() : undefined, // timezones?
-    }));
-  },
-
-  async create(
-    canvasCourseId: number,
-    localAssignment: LocalAssignment,
-    canvasAssignmentGroupId?: number
-  ): Promise<number> {
-    console.log(`Creating assignment: ${localAssignment.name}`);
-    const url = `${canvasApi}/courses/${canvasCourseId}/assignments`;
-    const body = {
-      assignment: {
-        name: localAssignment.name,
-        submission_types: localAssignment.submissionTypes.map((t) =>
-          t.toString()
-        ),
-        allowed_extensions: localAssignment.allowedFileUploadExtensions.map(
-          (e) => e.toString()
-        ),
-        description: markdownToHTMLSafe(localAssignment.description),
-        due_at: localAssignment.dueAt,
-        lock_at: localAssignment.lockAt,
-        points_possible: assignmentPoints(localAssignment),
-        assignment_group_id: canvasAssignmentGroupId,
-      },
-    };
-
-    const response = await axiosClient.post<CanvasAssignment>(url, body);
-    const canvasAssignment = response.data;
-
-    if (!canvasAssignment) throw new Error("Created Canvas assignment is null");
-
-    await this.createRubric(
-      canvasCourseId,
-      canvasAssignment.id,
-      localAssignment
-    );
-
-    return canvasAssignment.id;
-  },
-
-  async update(
-    courseId: number,
-    canvasAssignmentId: number,
-    localAssignment: LocalAssignment,
-    canvasAssignmentGroupId?: number
-  ): Promise<void> {
-    console.log(`Updating assignment: ${localAssignment.name}`);
-    const url = `${canvasApi}/courses/${courseId}/assignments/${canvasAssignmentId}`;
-    const body = {
-      assignment: {
-        name: localAssignment.name,
-        submission_types: localAssignment.submissionTypes.map((t) =>
-          t.toString()
-        ),
-        allowed_extensions: localAssignment.allowedFileUploadExtensions.map(
-          (e) => e.toString()
-        ),
-        description: markdownToHTMLSafe(localAssignment.description),
-        due_at: localAssignment.dueAt,
-        lock_at: localAssignment.lockAt,
-        points_possible: assignmentPoints(localAssignment),
-        assignment_group_id: canvasAssignmentGroupId,
-      },
-    };
-
-    await axiosClient.put(url, body);
-    await this.createRubric(courseId, canvasAssignmentId, localAssignment);
-  },
-
-  async delete(
-    courseId: number,
-    assignmentCanvasId: number,
-    assignmentName: string
-  ): Promise<void> {
-    console.log(`Deleting assignment from Canvas: ${assignmentName}`);
-    const url = `${canvasApi}/courses/${courseId}/assignments/${assignmentCanvasId}`;
-    const response = await axiosClient.delete(url);
-
-    if (!response.status.toString().startsWith("2")) {
-      console.error(`Failed to delete assignment: ${assignmentName}`);
-      throw new Error("Failed to delete assignment");
-    }
-  },
-
-  async createRubric(
+const createRubric = async (
  courseId: number,
  assignmentCanvasId: number,
  localAssignment: LocalAssignment
-  ): Promise<void> {
+) => {
  const criterion = localAssignment.rubric.map((rubricItem, i) => ({
    description: rubricItem.label,
    points: rubricItem.points,
@@ -149,5 +54,92 @@ export const canvasAssignmentService = {
    assignmentPointAdjustmentUrl,
    assignmentPointAdjustmentBody
  );
+};
+
+export const canvasAssignmentService = {
+  async getAll(courseId: number): Promise<CanvasAssignment[]> {
+    const url = `${canvasApi}/courses/${courseId}/assignments`;
+    const { data: assignments } = await axiosClient.get<CanvasAssignment[]>(
+      url
+    );
+    return assignments.map((a) => ({
+      ...a,
+      due_at: a.due_at ? new Date(a.due_at).toLocaleString() : undefined, // timezones?
+      lock_at: a.lock_at ? new Date(a.lock_at).toLocaleString() : undefined, // timezones?
+    }));
+  },
+
+  async create(
+    canvasCourseId: number,
+    localAssignment: LocalAssignment,
+    canvasAssignmentGroupId?: number
+  ) {
+    console.log(`Creating assignment: ${localAssignment.name}`);
+    const url = `${canvasApi}/courses/${canvasCourseId}/assignments`;
+    const body = {
+      name: localAssignment.name,
+      submission_types: localAssignment.submissionTypes.map((t) =>
+        t.toString()
+      ),
+      allowed_extensions: localAssignment.allowedFileUploadExtensions.map((e) =>
+        e.toString()
+      ),
+      description: markdownToHTMLSafe(localAssignment.description),
+      due_at: localAssignment.dueAt,
+      lock_at: localAssignment.lockAt,
+      points_possible: assignmentPoints(localAssignment),
+      assignment_group_id: canvasAssignmentGroupId,
+    };
+
+    const response = await axiosClient.post<CanvasAssignment>(url, body);
+    const canvasAssignment = response.data;
+
+    if (!canvasAssignment) throw new Error("Created Canvas assignment is null");
+
+    await createRubric(canvasCourseId, canvasAssignment.id, localAssignment);
+
+    return canvasAssignment.id;
+  },
+
+  async update(
+    courseId: number,
+    canvasAssignmentId: number,
+    localAssignment: LocalAssignment,
+    canvasAssignmentGroupId?: number
+  ) {
+    console.log(`Updating assignment: ${localAssignment.name}`);
+    const url = `${canvasApi}/courses/${courseId}/assignments/${canvasAssignmentId}`;
+    const body = {
+      name: localAssignment.name,
+      submission_types: localAssignment.submissionTypes.map((t) =>
+        t.toString()
+      ),
+      allowed_extensions: localAssignment.allowedFileUploadExtensions.map((e) =>
+        e.toString()
+      ),
+      description: markdownToHTMLSafe(localAssignment.description),
+      due_at: localAssignment.dueAt,
+      lock_at: localAssignment.lockAt,
+      points_possible: assignmentPoints(localAssignment),
+      assignment_group_id: canvasAssignmentGroupId,
+    };
+
+    await axiosClient.put(url, body);
+    await createRubric(courseId, canvasAssignmentId, localAssignment);
+  },
+
+  async delete(
+    courseId: number,
+    assignmentCanvasId: number,
+    assignmentName: string
+  ): Promise<void> {
+    console.log(`Deleting assignment from Canvas: ${assignmentName}`);
+    const url = `${canvasApi}/courses/${courseId}/assignments/${assignmentCanvasId}`;
+    const response = await axiosClient.delete(url);
+
+    if (!response.status.toString().startsWith("2")) {
+      console.error(`Failed to delete assignment: ${assignmentName}`);
+      throw new Error("Failed to delete assignment");
+    }
  },
 };