From 07ae98b43237c4b68df1b4e72919edb772204332 Mon Sep 17 00:00:00 2001 From: Samuel Rowe Date: Fri, 8 Jul 2022 15:30:24 +0530 Subject: [PATCH] refactor: updated `useProject` to use `useLocalStorageJWTKeys` hook --- services/frontend/src/hooks/useProject.ts | 156 +++++++++++----------- 1 file changed, 81 insertions(+), 75 deletions(-) diff --git a/services/frontend/src/hooks/useProject.ts b/services/frontend/src/hooks/useProject.ts index 8961a58..fe5f695 100644 --- a/services/frontend/src/hooks/useProject.ts +++ b/services/frontend/src/hooks/useProject.ts @@ -1,111 +1,109 @@ -import axios from "axios"; -import _ from "lodash"; -import { useQuery, useMutation, useQueryClient } from "react-query"; -import { API_SERVER_URL } from "../constants"; -import { getLocalStorageJWTKeys } from "../utils"; -import { IProject, IProjectPayload } from "../types"; +import axios from "axios" +import _ from "lodash" +import { useQuery, useMutation, useQueryClient } from "react-query" +import { API_SERVER_URL } from "../constants" +import { getLocalStorageJWTKeys } from "../utils" +import { IProject, IProjectPayload } from "../types" +import useLocalStorageJWTKeys from "./useLocalStorageJWTKeys" interface IProjectsReturn { - count: number; - next: string | null; - previous: string | null; - 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; + count: number + next: string | null + previous: string | null + results: IProject[] } 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); - return response.data; + const response = await axios(requestConfig) + 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); - return response.data; + const response = await axios(requestConfig) + 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); - return response.data; + const response = await axios(requestConfig) + 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)); - return data; + const data = await updateProjectByUuid( + 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) => { - queryClient.setQueryData(['projects', uuid], projectData); - }, + onSuccess: 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); - return data; + const data = await deleteProjectByUuid(uuid) + 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'); - const previousProjects = queryClient.getQueryData('projects') as IProjectsReturn; - const filtered = _.filter(previousProjects.results, (project, index) => { - return project.uuid !== uuid - }); - previousProjects.count = filtered.length; - previousProjects.results = filtered; - queryClient.setQueryData('projects', previousProjects); + queryClient.cancelQueries("projects") + const previousProjects = queryClient.getQueryData( + "projects" + ) as IProjectsReturn + const filtered = _.filter( + previousProjects.results, + (project, index) => { + return project.uuid !== uuid + } + ) + previousProjects.count = filtered.length + previousProjects.results = filtered + queryClient.setQueryData("projects", previousProjects) } } )