refactor: Update fetching and create mutations with tanstack/query (#233)

Author: PedroChaparro

e2e/courses/EnrollStudent.spec.ts

@@ -93,9 +93,7 @@ test.describe.serial("Enroll student workflow", () => {
     await studentButton.click();
 
     // Assert an alert is shown
-    await expect(
-      page.getByText("Student was enrolled successfully")
-    ).toBeVisible();
+    await expect(page.getByText("Student enrolled successfully")).toBeVisible();
 
     // Close the dialog
     await page.keyboard.press("Escape");

e2e/courses/JoinCourse.spec.ts

@@ -89,7 +89,7 @@ test.describe.serial("Join courses workflow", () => {
 
     // Assert an alert is shown
     await expect(
-      page.getByText("Course was created successfully")
+      page.getByText("The course was created successfully")
     ).toBeVisible();
 
     // Assert the modal is closed

e2e/courses/ToggleCourseVisibility.spec.ts

@@ -74,9 +74,7 @@ test.describe.serial("User can toggle the course visibility", () => {
     await expect(dropdownMenu).not.toBeVisible();
 
     // Assert an alert is shown
-    await expect(
-      page.getByText("Course visibility was updated successfully")
-    ).toBeVisible();
+    await expect(page.getByText("Course hidden successfully")).toBeVisible();
 
     // Assert the course is not listed in the "Your courses" list
     await expect(page.getByText(courseName)).not.toBeVisible();
@@ -117,9 +115,7 @@ test.describe.serial("User can toggle the course visibility", () => {
     await expect(dropdownMenu).not.toBeVisible();
 
     // Assert an alert is shown
-    await expect(
-      page.getByText("Course visibility was updated successfully")
-    ).toBeVisible();
+    await expect(page.getByText("Course shown successfully")).toBeVisible();
 
     // Close the "Hidden courses" list
     await page.getByText("Hidden courses", { exact: true }).click();

e2e/rubrics/EditRubric.spec.ts

@@ -75,7 +75,7 @@ test.describe.serial("Rubrics edition workflow", () => {
 
     // Assert an alert is shown
     await expect(
-      page.getByText("Rubric name has been updated successfully")
+      page.getByText("Rubric renamed successfully")
     ).toBeVisible();
 
     // Reload the page and assert the rubric name was updated
@@ -180,7 +180,7 @@ test.describe.serial("Rubrics edition workflow", () => {
 
     // Assert the changes were saved
     await expect(
-      page.getByText("The objective has been updated successfully")
+      page.getByText("Objective updated successfully")
     ).toBeVisible();
 
     // Reload the page and assert the changes were saved
@@ -232,7 +232,7 @@ test.describe.serial("Rubrics edition workflow", () => {
 
     // Assert the changes were saved
     await expect(
-      page.getByText("The criteria has been updated successfully")
+      page.getByText("Criteria updated successfully")
     ).toBeVisible();
 
     // Reload the page and assert the changes were saved
@@ -290,7 +290,7 @@ test.describe.serial("Rubrics edition workflow", () => {
 
     // Assert an alert is shown
     await expect(
-      page.getByText("The criteria has been deleted successfully")
+      page.getByText("Criteria deleted successfully")
     ).toBeVisible();
   });
 
@@ -331,7 +331,7 @@ test.describe.serial("Rubrics edition workflow", () => {
 
     // Assert an alert is shown
     await expect(
-      page.getByText("The objective has been deleted successfully")
+      page.getByText("Objective deleted successfully")
     ).toBeVisible();
 
     // Assert the objective was deleted

src/components/FoundStudentCard/FoundStudentCard.tsx

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-export const GridContainer = ({ children }: { children: ReactNode[] }) => {
+export const GridContainer = ({ children }: { children?: ReactNode[] }) => {
   return (
     <section className="grid w-full grid-cols-[repeat(auto-fill,minmax(250px,1fr))] items-center gap-8">
       {children}

src/components/GridContainer.tsx

@@ -43,7 +43,7 @@ const useFormField = () => {
   const itemContext = React.useContext(FormItemContext);
   const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldstate = getFieldState(fieldContext.name, formState);
 
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>");
@@ -57,7 +57,7 @@ const useFormField = () => {
     formItemId: `${id}-form-item`,
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
-    ...fieldState
+    ...fieldstate
   };
 };
 

src/components/ui/form.tsx

@@ -1,27 +1,13 @@
-import { CoursesActions } from "@/hooks/courses/coursesReducer";
-import { CoursesState, useCourses } from "@/hooks/courses/useCourses";
 import { Course } from "@/types/entities/general-entities";
 import { ReactNode, createContext, useState } from "react";
 
-interface UserCoursesContext {
-  isLoading: boolean;
-  userCourses: CoursesState;
-  userCoursesDispatcher: React.Dispatch<CoursesActions>;
-
+interface UserCoursesDialogsContext {
   renameCourseDialogState: RenameCourseDialogState;
   openRenameCourseDialog: (course: Course) => void;
   closeRenameCourseDialog: () => void;
 }
 
-const defaultValues: UserCoursesContext = {
-  // Courses state
-  isLoading: false,
-  userCourses: {
-    courses: [],
-    hiddenCourses: []
-  },
-  userCoursesDispatcher: () => {},
-
+const defaultValues: UserCoursesDialogsContext = {
   // Dialogs state
   openRenameCourseDialog: () => {},
   closeRenameCourseDialog: () => {},
@@ -36,12 +22,14 @@ type RenameCourseDialogState = {
   selectedCourse: Course | null;
 };
 
-export const UserCoursesContext =
-  createContext<UserCoursesContext>(defaultValues);
-
-export const UserCoursesProvider = ({ children }: { children: ReactNode }) => {
-  const { loading, courses, coursesDispatcher } = useCourses();
+export const UserCoursesDialogsContext =
+  createContext<UserCoursesDialogsContext>(defaultValues);
 
+export const UserCoursesDialogsProvider = ({
+  children
+}: {
+  children: ReactNode;
+}) => {
   // Dialogs state
   const [renameCourseDialogState, setRenameCourseDialogState] =
     useState<RenameCourseDialogState>({
@@ -63,17 +51,14 @@ export const UserCoursesProvider = ({ children }: { children: ReactNode }) => {
   };
 
   return (
-    <UserCoursesContext.Provider
+    <UserCoursesDialogsContext.Provider
       value={{
-        isLoading: loading,
-        userCourses: courses,
-        userCoursesDispatcher: coursesDispatcher,
         renameCourseDialogState,
         openRenameCourseDialog,
         closeRenameCourseDialog
       }}
     >
       {children}
-    </UserCoursesContext.Provider>
+    </UserCoursesDialogsContext.Provider>
   );
 };