From f74e53fe103914f96f03ea0e81fa096ff335340f Mon Sep 17 00:00:00 2001 From: Alex Mickelson Date: Tue, 29 Oct 2024 12:12:01 -0600 Subject: [PATCH] moving to server actions --- .../assignments/[assignmentName]/route.ts | 1 + nextjs/src/app/api/directories/empty/route.ts | 10 +-- .../[assignmentName]/AssignmentButtons.tsx | 11 ++- nextjs/src/app/newCourse/NewCourseForm.tsx | 2 +- nextjs/src/app/page.tsx | 2 +- .../src/hooks/localCourse/courseItemHooks.ts | 19 ++++- .../localCourse/courseItemServerActions.ts | 70 +++++++++++++++++++ .../localCourse/storageDirectoryHooks.ts | 8 ++- 8 files changed, 110 insertions(+), 13 deletions(-) create mode 100644 nextjs/src/hooks/localCourse/courseItemServerActions.ts diff --git a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts index 37ab919..e74df19 100644 --- a/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts +++ b/nextjs/src/app/api/courses/[courseName]/modules/[moduleName]/assignments/[assignmentName]/route.ts @@ -1,6 +1,7 @@ import { LocalAssignment } from "@/models/local/assignment/localAssignment"; import { fileStorageService } from "@/services/fileStorage/fileStorageService"; import { withErrorHandling } from "@/services/withErrorHandling"; +import { revalidatePath } from "next/cache"; export const GET = async ( _request: Request, diff --git a/nextjs/src/app/api/directories/empty/route.ts b/nextjs/src/app/api/directories/empty/route.ts index 012876f..89c1ace 100644 --- a/nextjs/src/app/api/directories/empty/route.ts +++ b/nextjs/src/app/api/directories/empty/route.ts @@ -1,9 +1,9 @@ import { fileStorageService } from "@/services/fileStorage/fileStorageService"; import { withErrorHandling } from "@/services/withErrorHandling"; -export const GET = async () => - await withErrorHandling(async () => { - const directories = await fileStorageService.getEmptyDirectories(); - return Response.json(directories); - }); +// export const GET = async () => +// await withErrorHandling(async () => { +// const directories = await fileStorageService.getEmptyDirectories(); +// return Response.json(directories); +// }); \ No newline at end of file diff --git a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx index 5aa2180..4c8bcd8 100644 --- a/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx +++ b/nextjs/src/app/course/[courseName]/modules/[moduleName]/assignment/[assignmentName]/AssignmentButtons.tsx @@ -16,6 +16,7 @@ import { baseCanvasUrl } from "@/services/canvas/canvasServiceUtils"; import { getCourseUrl } from "@/services/urlUtils"; import Link from "next/link"; import { useRouter } from "next/navigation"; +import { useState } from "react"; export function AssignmentButtons({ moduleName, @@ -43,6 +44,7 @@ export function AssignmentButtons({ const deleteFromCanvas = useDeleteAssignmentFromCanvasMutation(); const updateAssignment = useUpdateAssignmentInCanvasMutation(); const deleteLocal = useDeleteAssignmentMutation(); + const [isLoading, setIsLoading] = useState(false); const assignmentInCanvas = canvasAssignments.find( (a) => a.name === assignmentName @@ -126,12 +128,16 @@ export function AssignmentButtons({
+ {(deleteLocal.isPending || isLoading) && } )} diff --git a/nextjs/src/app/newCourse/NewCourseForm.tsx b/nextjs/src/app/newCourse/NewCourseForm.tsx index 5265a23..0058486 100644 --- a/nextjs/src/app/newCourse/NewCourseForm.tsx +++ b/nextjs/src/app/newCourse/NewCourseForm.tsx @@ -161,7 +161,7 @@ function OtherSettings({ value={selectedDirectory} setValue={setSelectedDirectory} label={"Storage Folder"} - options={emptyDirectories} + options={emptyDirectories ?? []} getOptionName={(d) => d} emptyOptionText="--- add a new folder to your docker compose to add more folders ---" /> diff --git a/nextjs/src/app/page.tsx b/nextjs/src/app/page.tsx index 958aded..d450f49 100644 --- a/nextjs/src/app/page.tsx +++ b/nextjs/src/app/page.tsx @@ -3,7 +3,7 @@ import AddNewCourse from "./newCourse/AddNewCourse"; export default async function Home() { return ( -
+

diff --git a/nextjs/src/hooks/localCourse/courseItemHooks.ts b/nextjs/src/hooks/localCourse/courseItemHooks.ts index 205861b..d74f20f 100644 --- a/nextjs/src/hooks/localCourse/courseItemHooks.ts +++ b/nextjs/src/hooks/localCourse/courseItemHooks.ts @@ -12,6 +12,11 @@ import { useSuspenseQueries, useSuspenseQuery, } from "@tanstack/react-query"; +import { + getAllItemsFromServer, + getItemFromServer, +} from "./courseItemServerActions"; +import { useRouter } from "next/navigation"; export const getAllItemsQueryConfig = ( courseName: string, @@ -29,6 +34,11 @@ export const getAllItemsQueryConfig = ( typeToFolder[type]; const response = await axiosClient.get(url); return response.data; + // return await getAllItemsFromServer({ + // courseName, + // moduleName, + // type, + // }); }, }); @@ -52,6 +62,12 @@ export const getItemQueryConfig = ( encodeURIComponent(name); const response = await axiosClient.get>(url); return response.data; + // return await getItemFromServer({ + // moduleName, + // courseName, + // itemName: name, + // type, + // }); }, }; }; @@ -223,6 +239,7 @@ export const useCreateItemMutation = (type: T) => { export const useDeleteItemMutation = (type: T) => { const { courseName } = useCourseContext(); + const router = useRouter(); const queryClient = useQueryClient(); return useMutation({ mutationFn: async ({ @@ -246,7 +263,7 @@ export const useDeleteItemMutation = (type: T) => { onSuccess: async (_, { moduleName, itemName }) => { queryClient.invalidateQueries({ queryKey: localCourseKeys.allItemsOfType(courseName, moduleName, type), - refetchType: "all", + // refetchType: "all", }); queryClient.invalidateQueries({ queryKey: localCourseKeys.itemOfType( diff --git a/nextjs/src/hooks/localCourse/courseItemServerActions.ts b/nextjs/src/hooks/localCourse/courseItemServerActions.ts new file mode 100644 index 0000000..2fc0e89 --- /dev/null +++ b/nextjs/src/hooks/localCourse/courseItemServerActions.ts @@ -0,0 +1,70 @@ +"use server"; + +import { ItemInDay } from "@/app/course/[courseName]/calendar/day/ItemInDay"; +import { + CourseItemReturnType, + CourseItemType, +} from "@/models/local/courseItemTypes"; +import { fileStorageService } from "@/services/fileStorage/fileStorageService"; + +export async function getAllItemsFromServer({ + courseName, + moduleName, + type, +}: { + courseName: string; + moduleName: string; + type: T; +}): Promise[]> { + if (type === "Assignment") { + const assignments = await fileStorageService.assignments.getAssignments( + courseName, + moduleName + ); + return assignments as CourseItemReturnType[]; + } + if (type === "Quiz") { + const quizzes = await fileStorageService.quizzes.getQuizzes( + courseName, + moduleName + ); + return quizzes as CourseItemReturnType[]; + } + const pages = await fileStorageService.pages.getPages(courseName, moduleName); + return pages as CourseItemReturnType[]; +} + +export async function getItemFromServer({ + courseName, + moduleName, + type, + itemName, +}: { + courseName: string; + moduleName: string; + type: T; + itemName: string; +}): Promise> { + if (type === "Assignment") { + const assignment = await fileStorageService.assignments.getAssignment( + courseName, + moduleName, + itemName + ); + return assignment as CourseItemReturnType; + } + if (type === "Assignment") { + const quiz = await fileStorageService.quizzes.getQuiz( + courseName, + moduleName, + itemName + ); + return quiz as CourseItemReturnType; + } + const page = await fileStorageService.pages.getPage( + courseName, + moduleName, + itemName + ); + return page as CourseItemReturnType; +} diff --git a/nextjs/src/hooks/localCourse/storageDirectoryHooks.ts b/nextjs/src/hooks/localCourse/storageDirectoryHooks.ts index 533f7ce..339045e 100644 --- a/nextjs/src/hooks/localCourse/storageDirectoryHooks.ts +++ b/nextjs/src/hooks/localCourse/storageDirectoryHooks.ts @@ -1,14 +1,16 @@ import { axiosClient } from "@/services/axiosUtils"; -import { useSuspenseQuery } from "@tanstack/react-query"; +import { useQuery, useSuspenseQuery } from "@tanstack/react-query"; +import { getEmptyDirectories } from "./storageDirectoryServerActions"; export const directoryKeys = { emptyFolders: ["empty folders"] as const, }; export const useEmptyDirectoriesQuery = () => - useSuspenseQuery({ + useQuery({ queryKey: directoryKeys.emptyFolders, - queryFn: getEmptyDirectories + queryFn: async () => await getEmptyDirectories(), + // queryFn: getEmptyDirectories, // async () => { // const url = "/api/directories/empty"; // const { data } = await axiosClient.get(url);