refactor: updated `useProject` to use `useLocalStorageJWTKeys` hook

services/frontend/src/hooks/useProject.ts

@@ -1,111 +1,109 @@
-import axios from "axios";
+import axios from "axios"
-import _ from "lodash";
+import _ from "lodash"
-import { useQuery, useMutation, useQueryClient } from "react-query";
+import { useQuery, useMutation, useQueryClient } from "react-query"
-import { API_SERVER_URL } from "../constants";
+import { API_SERVER_URL } from "../constants"
-import { getLocalStorageJWTKeys } from "../utils";
+import { getLocalStorageJWTKeys } from "../utils"
-import { IProject, IProjectPayload } from "../types";
+import { IProject, IProjectPayload } from "../types"
+import useLocalStorageJWTKeys from "./useLocalStorageJWTKeys"
 
 interface IProjectsReturn {
-  count: number;
+  count: number
-  next: string | null;
+  next: string | null
-  previous: string | null;
+  previous: string | null
-  results: IProject[];
+  results: IProject[]
-}
-
-const fetchProjectByUuid = async (uuid: string) => {
-  const jwtKeys = getLocalStorageJWTKeys();
-  const requestConfig = {
-    method: 'get',
-    url: `${API_SERVER_URL}/projects/${uuid}/`,
-    headers: {
-      "Content-Type": "application/json"
-    }
-  };
-
-  if (jwtKeys) {
-    requestConfig.headers = {
-      ...requestConfig.headers,
-      ...{"Authorization": `Bearer ${jwtKeys.access_token}`}
-    }
-  }
-
-  const response = await axios(requestConfig);
-  return response.data;
 }
 
 export const createProject = async (project: IProjectPayload) => {
-  const jwtKeys = getLocalStorageJWTKeys();
+  const jwtKeys = getLocalStorageJWTKeys()
   const requestConfig = {
-    method: 'post',
+    method: "post",
     url: `${API_SERVER_URL}/projects/`,
     headers: {
       "Content-Type": "application/json"
     },
     data: project
-  };
+  }
 
   if (jwtKeys) {
     requestConfig.headers = {
       ...requestConfig.headers,
-      ...{ "Authorization": `Bearer ${jwtKeys.access_token}` }
+      ...{ Authorization: `Bearer ${jwtKeys.access_token}` }
     }
   }
 
-  const response = await axios(requestConfig);
+  const response = await axios(requestConfig)
-  return response.data;
+  return response.data
 }
 
 const deleteProjectByUuid = async (uuid: string) => {
-  const jwtKeys = getLocalStorageJWTKeys();
+  const jwtKeys = getLocalStorageJWTKeys()
   const requestConfig = {
-    method: 'delete',
+    method: "delete",
     url: `${API_SERVER_URL}/projects/${uuid}/`,
     headers: {
       "Content-Type": "application/json"
     }
-  };
+  }
 
   if (jwtKeys) {
     requestConfig.headers = {
       ...requestConfig.headers,
-      ...{ "Authorization": `Bearer ${jwtKeys.access_token}` }
+      ...{ Authorization: `Bearer ${jwtKeys.access_token}` }
     }
   }
 
-  const response = await axios(requestConfig);
+  const response = await axios(requestConfig)
-  return response.data;
+  return response.data
 }
 
 const updateProjectByUuid = async (uuid: string, data: string) => {
-  const jwtKeys = getLocalStorageJWTKeys();
+  const jwtKeys = getLocalStorageJWTKeys()
   const requestConfig = {
-    method: 'put',
+    method: "put",
     url: `${API_SERVER_URL}/projects/${uuid}/`,
     headers: {
       "Content-Type": "application/json"
     },
     data: data
-  };
+  }
 
   if (jwtKeys) {
     requestConfig.headers = {
       ...requestConfig.headers,
-      ...{ "Authorization": `Bearer ${jwtKeys.access_token}` }
+      ...{ Authorization: `Bearer ${jwtKeys.access_token}` }
     }
   }
 
-  const response = await axios(requestConfig);
+  const response = await axios(requestConfig)
-  return response.data;
+  return response.data
 }
 
 export const useProject = (uuid: string | undefined) => {
+  const jwtKeys = useLocalStorageJWTKeys()
+
   return useQuery(
     ["projects", uuid],
     async () => {
       if (!uuid) {
-        return;
+        return
+      }
+
+      const requestConfig = {
+        method: "get",
+        url: `${API_SERVER_URL}/projects/${uuid}/`,
+        headers: {
+          "Content-Type": "application/json"
+        }
       }
-      return await fetchProjectByUuid(uuid);
+
+      if (jwtKeys) {
+        requestConfig.headers = {
+          ...requestConfig.headers,
+          ...{ Authorization: `Bearer ${jwtKeys.access_token}` }
+        }
+      }
+
+      return (await axios(requestConfig)).data
     },
     {
       staleTime: Infinity
@@ -114,50 +112,53 @@ export const useProject = (uuid: string | undefined) => {
 }
 
 export const useUpdateProject = (uuid: string | undefined) => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation(
     async (projectData: IProjectPayload) => {
       if (!uuid) {
-        return;
+        return
       }
-      
+
       try {
-        const data = await updateProjectByUuid(uuid, JSON.stringify(projectData));
+        const data = await updateProjectByUuid(
-        return data;
+          uuid,
+          JSON.stringify(projectData)
+        )
+        return data
       } catch (err: any) {
         if (err.response.status === 404) {
-          console.error('Resource could not be found!');
+          console.error("Resource could not be found!")
         } else {
-          console.error(err.message);
+          console.error(err.message)
         }
       }
     },
     {
-      onSuccess: (projectData) => {
+      onSuccess: projectData => {
-        queryClient.setQueryData(['projects', uuid], projectData);
+        queryClient.setQueryData(["projects", uuid], projectData)
-      },
+      }
     }
   )
 }
 
 export const useDeleteProject = (uuid: string | undefined) => {
-  const queryClient = useQueryClient();
+  const queryClient = useQueryClient()
 
   return useMutation(
     async () => {
       if (!uuid) {
-        return;
+        return
       }
 
       try {
-        const data = await deleteProjectByUuid(uuid);
+        const data = await deleteProjectByUuid(uuid)
-        return data;
+        return data
       } catch (err: any) {
         if (err.response.status === 404) {
-          console.error('Resource could not be found!');
+          console.error("Resource could not be found!")
         } else {
-          console.error(err.message);
+          console.error(err.message)
         }
       }
     },
@@ -166,14 +167,19 @@ export const useDeleteProject = (uuid: string | undefined) => {
         // could just invalidate the query here and refetch everything
         // queryClient.invalidateQueries(['projects']);
 
-        queryClient.cancelQueries('projects');
+        queryClient.cancelQueries("projects")
-        const previousProjects = queryClient.getQueryData('projects') as IProjectsReturn;
+        const previousProjects = queryClient.getQueryData(
-        const filtered = _.filter(previousProjects.results, (project, index) => {
+          "projects"
-          return project.uuid !== uuid
+        ) as IProjectsReturn
-        });
+        const filtered = _.filter(
-        previousProjects.count = filtered.length;
+          previousProjects.results,
-        previousProjects.results = filtered;
+          (project, index) => {
-        queryClient.setQueryData('projects', previousProjects);
+            return project.uuid !== uuid
+          }
+        )
+        previousProjects.count = filtered.length
+        previousProjects.results = filtered
+        queryClient.setQueryData("projects", previousProjects)
       }
     }
   )