diff --git a/nextjs/src/app/course/[courseName]/calendar/Day.tsx b/nextjs/src/app/course/[courseName]/calendar/Day.tsx
index 87d66a6..ea37f20 100644
--- a/nextjs/src/app/course/[courseName]/calendar/Day.tsx
+++ b/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 }) {
>
- {todaysAssignments.map(({ assignment, moduleName }) => (
+ {todaysAssignments.map(({ assignment, moduleName, status }) => (
))}
- {todaysQuizzes.map(({ quiz, moduleName }) => (
+ {todaysQuizzes.map(({ quiz, moduleName, status }) => (
))}
- {todaysPages.map(({ page, moduleName }) => (
+ {todaysPages.map(({ page, moduleName, status }) => (
))}
@@ -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"
diff --git a/nextjs/src/hooks/canvas/canvasPageHooks.ts b/nextjs/src/hooks/canvas/canvasPageHooks.ts
index 81ccc47..df44e9b 100644
--- a/nextjs/src/hooks/canvas/canvasPageHooks.ts
+++ b/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();