chore: add cache modifiers to mutations

apps/web/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true
+}

apps/web/src/hooks/queries/useActivities/apiCalls.ts

@@ -6,14 +6,7 @@ const basePath = "api/v1/courses";
 export const useActivitiesRequests = (orgId: string) => {
   const activitiesQuery = async (): Promise<Activity[]> => {
     const res = await client.get(`${basePath}/${orgId}/activities/`);
-    return res.data.activities
-      .map((activity: Activity) => ({
-        ...activity,
-        date: new Date(activity.date),
-      }))
-      .sort((a: Activity, b: Activity) => {
-        return b.date.getTime() - a.date.getTime();
-      });
+    return res.data.activities;
   };
 
   const createActivity = async (

apps/web/src/hooks/queries/useActivities/cacheModifiers.ts

@@ -0,0 +1,26 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useQueryKey } from "./queryKey";
+import type { Activity } from "@/types/interfaces";
+
+export const useCacheModifiers = (queryKey: ReturnType<typeof useQueryKey>) => {
+  const queryClient = useQueryClient();
+
+  const addActivitiesToCache = (activities: Activity[]) => {
+    queryClient.setQueryData<Activity[]>(queryKey, (data) => {
+      if (!data) return [...activities];
+      return [...data, ...activities];
+    });
+  };
+
+  const removeMultipleActivitiesFromCache = (slugs: string[]) => {
+    const slugsSet = new Set(slugs);
+    queryClient.setQueryData<Activity[]>(queryKey, (data) => {
+      if (!data) return [];
+      return data.filter((activity) => !slugsSet.has(activity.slug));
+    });
+  };
+  return {
+    addActivitiesToCache,
+    removeMultipleActivitiesFromCache,
+  };
+};

apps/web/src/hooks/queries/useActivities/dataTransforms.ts

@@ -0,0 +1,18 @@
+import type { Activity } from "@/types/interfaces";
+
+export const useDataTransforms = () => {
+  const mapActivities = (activities: Activity[]) => {
+    return activities
+      .map((activity: Activity) => ({
+        ...activity,
+        date: new Date(activity.date),
+      }))
+      .sort((a: Activity, b: Activity) => {
+        return b.date.getTime() - a.date.getTime();
+      });
+  };
+
+  return {
+    mapActivities,
+  };
+};

apps/web/src/hooks/queries/useActivities/index.ts

@@ -1,18 +1,24 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useQueryKey } from "./queryKey";
 import { useActivitiesRequests } from "./apiCalls";
-import { useQueryClient } from "@tanstack/react-query";
+import { useDataTransforms } from "./dataTransforms";
+import { useCacheModifiers } from "./cacheModifiers";
 
 export const useActivitiesQuery = (orgId: string) => {
   const queryKey = useQueryKey(orgId);
+  const { mapActivities } = useDataTransforms();
   const { activitiesQuery } = useActivitiesRequests(orgId);
-  const query = useQuery({ queryKey, queryFn: activitiesQuery });
-  return { ...query };
+  const query = useQuery({
+    queryKey,
+    queryFn: () => activitiesQuery().then(mapActivities),
+  });
+  return query;
 };
 
 export const useActivitiesMutations = (orgId: string) => {
-  const queryClient = useQueryClient();
   const queryKey = useQueryKey(orgId);
+  const { addActivitiesToCache, removeMultipleActivitiesFromCache } =
+    useCacheModifiers(queryKey);
   const {
     createActivity: createActivityRequest,
     deleteActivity: deleteActivityRequest,
@@ -31,17 +37,19 @@ export const useActivitiesMutations = (orgId: string) => {
       description: string;
       date: string;
     }) => createActivityRequest(name, slug, description, date),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (activity) => addActivitiesToCache([activity]),
   });
 
   const deleteActivity = useMutation({
     mutationFn: deleteActivityRequest,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (_, slug) =>
+      removeMultipleActivitiesFromCache([slug]),
   });
 
   const deleteMultipleActivities = useMutation({
     mutationFn: deleteMultipleActivitiesRequest,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (_, slugs) =>
+      removeMultipleActivitiesFromCache(slugs),
   });
 
   return {

apps/web/src/hooks/queries/useAssistants/apiCalls.ts

@@ -27,18 +27,21 @@ export const useAssistantsRequests = (orgId: string) => {
   const addAssistant = async (
     email: string,
     role: UserType = UserType.VIEWER
-  ): Promise<Assistant | undefined> => {
-    const res = await client.post(`${basePath}/${orgId}/user_courses`, {
-      email,
-      role,
-    });
+  ) => {
+    const res = await client.post<Assistant>(
+      `${basePath}/${orgId}/user_courses`,
+      {
+        email,
+        role,
+      }
+    );
     return res.data;
   };
 
   const addMultipleAssistants = async (
     emails: string[],
     role: UserType | undefined
-  ): Promise<Assistant[] | undefined> => {
+  ): Promise<Assistant[]> => {
     if (!role) {
       throw new Error("Role is required");
     }
@@ -56,7 +59,7 @@ export const useAssistantsRequests = (orgId: string) => {
   const removeAssistant = async (
     email: string,
     role: UserType = UserType.VIEWER
-  ): Promise<Assistant | undefined> => {
+  ): Promise<Assistant> => {
     return await client.delete(`/api/v1/courses/${orgId}/user_courses`, {
       data: { email, role },
     });

apps/web/src/hooks/queries/useAssistants/cacheModifiers.ts

@@ -0,0 +1,26 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useQueryKey } from "./queryKey";
+import type { Assistant } from "@/types/interfaces";
+
+export const useCacheModifiers = (queryKey: ReturnType<typeof useQueryKey>) => {
+  const queryClient = useQueryClient();
+
+  const addAssistantsToCache = (assistants: Assistant[]) => {
+    queryClient.setQueryData<Assistant[]>(queryKey, (data) => {
+      if (!data) return [...assistants];
+      return [...data, ...assistants];
+    });
+  };
+
+  const removeMultipleAssistantsFromCache = (emails: string[]) => {
+    const emailsSet = new Set(emails);
+    queryClient.setQueryData<Assistant[]>(queryKey, (data) => {
+      if (!data) return [];
+      return data.filter((assistant) => !emailsSet.has(assistant.email));
+    });
+  };
+  return {
+    addAssistantsToCache,
+    removeMultipleAssistantsFromCache,
+  };
+};

apps/web/src/hooks/queries/useAssistants/index.ts

@@ -1,19 +1,20 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useQueryKey } from "./queryKey";
 import { useAssistantsRequests } from "./apiCalls";
-import { useQueryClient } from "@tanstack/react-query";
 import { UserType } from "@/types/enums";
+import { useCacheModifiers } from "./cacheModifiers";
 
 export const useAssistantsQuery = (orgId: string) => {
   const queryKey = useQueryKey(orgId);
   const { assistantsQuery } = useAssistantsRequests(orgId);
   const query = useQuery({ queryKey, queryFn: assistantsQuery });
-  return { ...query };
+  return query;
 };
 
 export const useAssistantsMutations = (orgId: string) => {
-  const queryClient = useQueryClient();
   const queryKey = useQueryKey(orgId);
+  const { addAssistantsToCache, removeMultipleAssistantsFromCache } =
+    useCacheModifiers(queryKey);
   const {
     addAssistant: addAssistantRequest,
     addMultipleAssistants: addMultipleAssistantsRequest,
@@ -29,7 +30,7 @@ export const useAssistantsMutations = (orgId: string) => {
       email: string;
       role: UserType | undefined;
     }) => addAssistantRequest(email, role),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (assistant) => addAssistantsToCache([assistant]),
   });
 
   const addMultipleAssistants = useMutation({
@@ -40,7 +41,7 @@ export const useAssistantsMutations = (orgId: string) => {
       emails: string[];
       role: UserType | undefined;
     }) => addMultipleAssistantsRequest(emails, role),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (assistants) => addAssistantsToCache(assistants),
   });
 
   const removeAssistant = useMutation({
@@ -51,12 +52,13 @@ export const useAssistantsMutations = (orgId: string) => {
       email: string;
       role: UserType | undefined;
     }) => removeAssistantRequest(email, role),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (_, { email }) => removeMultipleAssistantsFromCache([email]),
   });
 
   const removeMultipleAssistants = useMutation({
     mutationFn: removeMultipleAssistantsRequest,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (_, users) =>
+      removeMultipleAssistantsFromCache(users.map((user) => user.email)),
   });
 
   return {

apps/web/src/hooks/queries/useOrg/index.ts

@@ -6,7 +6,7 @@ export const useOrgQuery = (orgId: string) => {
   const queryKey = useQueryKey(orgId);
   const { orgQuery } = useOrgRequests(orgId);
   const query = useQuery({ queryKey, queryFn: orgQuery });
-  return { ...query };
+  return query;
 };
 
 export const useUserPermissionsOrgQuery = (orgId: string) => {
@@ -16,5 +16,5 @@ export const useUserPermissionsOrgQuery = (orgId: string) => {
     queryKey,
     queryFn: () => userPermissionsOrgQuery(),
   });
-  return { ...query };
+  return query;
 };

apps/web/src/hooks/queries/useOrgs/apiCalls.ts

@@ -1,5 +1,6 @@
 import client from "@/api/client";
 import { UserType } from "@/types/enums";
+import type { Org } from "@/types/interfaces";
 
 const basePath = "api/v1/courses";
 
@@ -16,7 +17,7 @@ export const useOrgsRequests = () => {
   };
 
   const orgsQuery = async () => {
-    const res = await client.get(`${basePath}/`);
+    const res = await client.get<{ courses: Org[] }>(`${basePath}/`);
     return res.data.courses;
   };
 

apps/web/src/hooks/queries/useOrgs/cacheModifiers.ts

@@ -0,0 +1,26 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useQueryKey } from "./queryKey";
+import type { Org } from "@/types/interfaces";
+
+export const useCacheModifiers = (queryKey: ReturnType<typeof useQueryKey>) => {
+  const queryClient = useQueryClient();
+
+  const addOrgToCache = (org: Org) => {
+    queryClient.setQueryData<Org[]>(queryKey, (data) => {
+      if (!data) return [org];
+      return [...data, org];
+    });
+  };
+
+  const removeOrgFromCache = (orgId: string) => {
+    queryClient.setQueryData<Org[]>(queryKey, (data) => {
+      if (!data) return [];
+      return data.filter((org) => org.id !== orgId);
+    });
+  };
+
+  return {
+    addOrgToCache,
+    removeOrgFromCache,
+  };
+};

apps/web/src/hooks/queries/useOrgs/index.ts

@@ -2,29 +2,29 @@ import type { CreateOrg } from "@/types/interfaces";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useQueryKey } from "./queryKey";
 import { useOrgsRequests } from "./apiCalls";
-import { useQueryClient } from "@tanstack/react-query";
+import { useCacheModifiers } from "./cacheModifiers";
 
 export const useOrgsQuery = () => {
   const queryKey = useQueryKey();
   const { orgsQuery } = useOrgsRequests();
   const query = useQuery({ queryKey, queryFn: orgsQuery });
-  return { ...query };
+  return query;
 };
 
 export const useOrgsMutations = () => {
-  const queryClient = useQueryClient();
   const queryKey = useQueryKey();
+  const { addOrgToCache, removeOrgFromCache } = useCacheModifiers(queryKey);
   const { createOrg: createOrgRequest, deleteOrg: deleteOrgRequest } =
     useOrgsRequests();
 
   const createOrg = useMutation({
     mutationFn: (org: CreateOrg) => createOrgRequest(org.name, org.slug),
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (org) => addOrgToCache(org),
   });
 
   const deleteOrg = useMutation({
     mutationFn: deleteOrgRequest,
-    onSuccess: () => queryClient.invalidateQueries({ queryKey }),
+    onSuccess: (_, orgId) => removeOrgFromCache(orgId),
   });
 
   return { createOrg, deleteOrg };

apps/web/src/hooks/queries/useStudents/apiCalls.ts

@@ -13,7 +13,7 @@ export const useStudentsRequests = (orgId: string) => {
   const createStudent = async (
     studentCodes: string[],
     displayName: string | undefined
-  ): Promise<Student> => {
+  ) => {
     const studentIds = await Promise.all(
       studentCodes.map(
         (studentCode: string): Promise<string> => clientHash(studentCode, orgId)
@@ -23,13 +23,14 @@ export const useStudentsRequests = (orgId: string) => {
     if (displayName !== "") {
       body = { ...body, display_name: displayName };
     }
-    const res = await client.post(`${basePath}/${orgId}/students/`, body);
+    const res = await client.post<{ student: Student }>(
+      `${basePath}/${orgId}/students/`,
+      body
+    );
     return res.data.student;
   };
 
-  const createMultipleStudents = async (
-    students: CreateStudent[]
-  ): Promise<Student[]> => {
+  const createMultipleStudents = async (students: CreateStudent[]) => {
     const studentsWithHash = await Promise.all(
       students.map(
         async (student: CreateStudent): Promise<CreateStudent> => ({
@@ -43,7 +44,7 @@ export const useStudentsRequests = (orgId: string) => {
         })
       )
     );
-    const res = await client.post(
+    const res = await client.post<{ students: Student[] }>(
       `${basePath}/${orgId}/students/batch_create`,
       {
         students: studentsWithHash,

apps/web/src/hooks/queries/useStudents/cacheModifiers.ts

@@ -0,0 +1,18 @@
+import { useQueryClient } from "@tanstack/react-query";
+import { useQueryKey } from "./queryKey";
+import type { Student } from "@/types/interfaces";
+
+export const useCacheModifiers = (queryKey: ReturnType<typeof useQueryKey>) => {
+  const queryClient = useQueryClient();
+
+  const addStudentsToCache = (students: Student[]) => {
+    queryClient.setQueryData<Student[]>(queryKey, (data) => {
+      if (!data) return [...students];
+      return [...data, ...students];
+    });
+  };
+
+  return {
+    addStudentsToCache,
+  };
+};