styling

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

@@ -14,6 +14,12 @@ import { getLectureUrl, getModuleItemUrl } from "@/services/urlUtils";
 import { LocalAssignment } from "@/models/local/assignment/localAssignment";
 import { LocalQuiz } from "@/models/local/quiz/localQuiz";
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
+import { useCanvasAssignmentsQuery } from "@/hooks/canvas/canvasAssignmentHooks";
+import { CanvasAssignment } from "@/models/canvas/assignments/canvasAssignment";
+import { useCanvasQuizzesQuery } from "@/hooks/canvas/canvasQuizHooks";
+import { useCanvasPagesQuery } from "@/hooks/canvas/canvasPageHooks";
+import { CanvasQuiz } from "@/models/canvas/quizzes/canvasQuizModel";
+import { CanvasPage } from "@/models/canvas/pages/canvasPageModel";
 
 export default function Day({ day, month }: { day: string; month: number }) {
   const dayAsDate = getDateFromStringOrThrow(
@@ -22,14 +28,21 @@ export default function Day({ day, month }: { day: string; month: number }) {
   );
 
   const { data: settings } = useLocalCourseSettingsQuery();
+  const { data: canvasAssignments } = useCanvasAssignmentsQuery();
+  const { data: canvasQuizzes } = useCanvasQuizzesQuery();
+  const { data: canvasPages } = useCanvasPagesQuery();
   const itemsContext = useCalendarItemsContext();
   const { itemDrop } = useDraggingContext();
 
   const dateKey = getDateOnlyMarkdownString(dayAsDate);
   const todaysModules = itemsContext[dateKey];
 
-  const { todaysAssignments, todaysQuizzes, todaysPages } =
-    getTodaysItems(todaysModules);
+  const { todaysAssignments, todaysQuizzes, todaysPages } = getTodaysItems(
+    todaysModules,
+    canvasAssignments,
+    canvasQuizzes,
+    canvasPages
+  );
 
   const isInSameMonth = dayAsDate.getMonth() + 1 == month;
 
@@ -46,28 +59,31 @@ export default function Day({ day, month }: { day: string; month: number }) {
     >
       <DayTitle day={day} dayAsDate={dayAsDate} />
       <div>
-        {todaysAssignments.map(({ assignment, moduleName }) => (
+        {todaysAssignments.map(({ assignment, moduleName, status }) => (
           <DraggableListItem
             key={assignment.name}
             type={"assignment"}
             moduleName={moduleName}
             item={assignment}
+            status={status}
           />
         ))}
-        {todaysQuizzes.map(({ quiz, moduleName }) => (
+        {todaysQuizzes.map(({ quiz, moduleName, status }) => (
           <DraggableListItem
             key={quiz.name}
             type={"quiz"}
             moduleName={moduleName}
             item={quiz}
+            status={status}
           />
         ))}
-        {todaysPages.map(({ page, moduleName }) => (
+        {todaysPages.map(({ page, moduleName, status }) => (
           <DraggableListItem
             key={page.name}
             type={"page"}
             moduleName={moduleName}
             item={page}
+            status={status}
           />
         ))}
       </div>
@@ -84,37 +100,80 @@ function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   );
 }
 
-function getTodaysItems(todaysModules: {
-  [moduleName: string]: {
-    assignments: LocalAssignment[];
-    quizzes: LocalQuiz[];
-    pages: LocalCoursePage[];
-  };
-}) {
-  const todaysAssignments = todaysModules
+function getTodaysItems(
+  todaysModules: {
+    [moduleName: string]: {
+      assignments: LocalAssignment[];
+      quizzes: LocalQuiz[];
+      pages: LocalCoursePage[];
+    };
+  },
+  canvasAssignments: CanvasAssignment[],
+  canvasQuizzes: CanvasQuiz[],
+  canvasPages: CanvasPage[]
+) {
+  const todaysAssignments: {
+    moduleName: string;
+    assignment: LocalAssignment;
+    status: "localOnly" | "unPublished" | "published";
+  }[] = todaysModules
     ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].assignments.map((assignment) => ({
-          moduleName,
-          assignment,
-        }))
+        todaysModules[moduleName].assignments.map((assignment) => {
+          const canvasAssignment = canvasAssignments.find(
+            (c) => c.name === assignment.name
+          );
+          return {
+            moduleName,
+            assignment,
+            status: canvasAssignment
+              ? canvasAssignment.published
+                ? "published"
+                : "unPublished"
+              : "localOnly",
+          };
+        })
       )
     : [];
 
-  const todaysQuizzes = todaysModules
+  const todaysQuizzes: {
+    moduleName: string;
+    quiz: LocalQuiz;
+    status: "localOnly" | "unPublished" | "published";
+  }[] = todaysModules
     ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].quizzes.map((quiz) => ({
-          moduleName,
-          quiz,
-        }))
+        todaysModules[moduleName].quizzes.map((quiz) => {
+          const canvasQuiz = canvasQuizzes.find((q) => q.title === quiz.name);
+          return {
+            moduleName,
+            quiz,
+            status: canvasQuiz
+              ? canvasQuiz.published
+                ? "published"
+                : "unPublished"
+              : "localOnly",
+          };
+        })
       )
     : [];
 
-  const todaysPages = todaysModules
+  const todaysPages: {
+    moduleName: string;
+    page: LocalCoursePage;
+    status: "localOnly" | "unPublished" | "published";
+  }[] = todaysModules
     ? Object.keys(todaysModules).flatMap((moduleName) =>
-        todaysModules[moduleName].pages.map((page) => ({
-          moduleName,
-          page,
-        }))
+        todaysModules[moduleName].pages.map((page) => {
+          const canvasPage = canvasPages.find((p) => p.title === page.name);
+          return {
+            moduleName,
+            page,
+            status: canvasPage
+              ? canvasPage.published
+                ? "published"
+                : "unPublished"
+              : "localOnly",
+          };
+        })
       )
     : [];
   return { todaysAssignments, todaysQuizzes, todaysPages };
@@ -123,9 +182,11 @@ function getTodaysItems(todaysModules: {
 function DraggableListItem({
   type,
   moduleName,
+  status,
   item,
 }: {
   type: "assignment" | "page" | "quiz";
+  status: "localOnly" | "unPublished" | "published";
   moduleName: string;
   item: IModuleItem;
 }) {
@@ -136,8 +197,11 @@ function DraggableListItem({
       shallow={true}
       className={
         " border rounded-sm px-1 mx-1 break-all mb-1 " +
-        " border-slate-600 bg-slate-800 " +
-        " block "
+        "  bg-slate-800 " +
+        " block " +
+        (status === "localOnly" && " text-slate-500 border-slate-600 ") +
+        (status === "unPublished" && " border-rose-900 ") +
+        (status === "published" && " border-green-800 ")
       }
       role="button"
       draggable="true"

nextjs/src/hooks/canvas/canvasPageHooks.ts

@@ -1,6 +1,7 @@
 import { LocalCoursePage } from "@/models/local/page/localCoursePage";
 import { canvasPageService } from "@/services/canvas/canvasPageService";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { useLocalCourseSettingsQuery } from "../localCourse/localCoursesHooks";
 
 export const canvasPageKeys = {
   pagesInCourse: (canvasCourseId: number) => [
@@ -10,11 +11,13 @@ export const canvasPageKeys = {
   ],
 };
 
-export const useCanvasPagesQuery = (canvasCourseId: number) =>
-  useQuery({
-    queryKey: canvasPageKeys.pagesInCourse(canvasCourseId),
-    queryFn: async () => await canvasPageService.getAll(canvasCourseId),
+export const useCanvasPagesQuery = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  return useSuspenseQuery({
+    queryKey: canvasPageKeys.pagesInCourse(settings.canvasId),
+    queryFn: async () => await canvasPageService.getAll(settings.canvasId),
   });
+};
 
 export const useCreateCanvasPageMutation = (canvasCourseId: number) => {
   const queryClient = useQueryClient();