Merge pull request #78 from soma-dalda/feat/#77

[#77] ♻️ , 🐛 : 이슈 수정 및 리팩토링
soma-dalda · Nov 3, 2022 · 6ee26bb · 6ee26bb
2 parents 303906a + 6ad7243
commit 6ee26bb
Show file tree

Hide file tree

Showing 11 changed files with 104 additions and 57 deletions.
diff --git a/src/hooks/useGetCompany.ts b/src/hooks/useGetCompany.ts
@@ -16,7 +16,7 @@ const useGetCompany = (options?: UseQueryOption) => {
     () => getCompany({ companyDomain: domain }),
     {
       ...options,
-      enabled: Boolean(domain) && options?.enabled,
+      enabled: domain ? options?.enabled : false,
     }
   )
 

diff --git a/src/hooks/useGetOrderByOrderId.ts b/src/hooks/useGetOrderByOrderId.ts
@@ -16,7 +16,7 @@ const useGetOrderByOrderId = (options?: UseQueryOption) => {
     () => getOrderByOrderId({ orderId: id }),
     {
       ...options,
-      enabled: options?.enabled && Boolean(id),
+      enabled: id ? options?.enabled : false,
     }
   )
 }

diff --git a/src/hooks/useGetOrders.ts b/src/hooks/useGetOrders.ts
@@ -28,7 +28,7 @@ const useGetOrders = (type: 'company' | 'consumer', options?: UseQueryOption) =>
     () => getConsumerOrdersByUserId(),
     {
       ...options,
-      enabled: options?.enabled && Boolean(user?.id),
+      enabled: user?.id ? options?.enabled : false,
     }
   )
 }

diff --git a/src/hooks/useGetUser.ts b/src/hooks/useGetUser.ts
@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios'
 import { useQuery, UseQueryOptions, QueryKey } from 'react-query'
 import { getUser } from '@/apis/service'
 import { RequestError, User } from '@/type'
@@ -10,21 +11,39 @@ type UseQueryOption = Omit<
 >
 
 const useGetUser = (options?: UseQueryOption) => {
-  const [value] = useLocalStorage('accessToken')
+  const [value, setValue, refetch] = useLocalStorage('accessToken')
 
-  return useQuery<User, RequestError>('getUser', getUser, {
-    ...options,
-    enabled: options?.enabled && Boolean(value),
-    onError: async (error) => {
-      if (typeof options?.onError === 'function') {
-        options?.onError(error)
-      }
-      if (error.response?.status === 401) {
-        const res = await http.post<string>('/api/user-auth/refresh')
-        window.localStorage.setItem('accessToken', res.data)
-      }
+  const query = useQuery<User, RequestError>(
+    'getUser',
+    async () => {
+      refetch()
+      return getUser()
     },
-  })
+    {
+      ...options,
+      enabled: value ? options?.enabled : false,
+      onError: async (error) => {
+        if (typeof options?.onError === 'function') {
+          options?.onError(error)
+        }
+        if (error.response?.status === 401) {
+          try {
+            const res = await http.post<string>('/api/user-auth/refresh')
+            setValue(res.data)
+          } catch (err) {
+            setValue('')
+            throw new AxiosError()
+          }
+        } else {
+          setValue('')
+        }
+        query.remove()
+      },
+      retry: 0,
+    }
+  )
+
+  return query
 }
 
 export default useGetUser
diff --git a/src/hooks/useLocalStorage.ts b/src/hooks/useLocalStorage.ts
@@ -1,25 +1,9 @@
 import { useEffect, useState } from 'react'
 
-const useLocalStorage = <T = string>(key: string, initialValue?: T) => {
-  const [storeValue, setStoreValue] = useState<T>()
+const useLocalStorage = <T = string>(key: string, initialValue: T | string = '') => {
+  const [storeValue, setStoreValue] = useState<T | string>()
 
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      setStoreValue(initialValue)
-    }
-    try {
-      const prevValue = window.localStorage.getItem(key)
-      if (prevValue) {
-        setStoreValue(JSON.parse(prevValue))
-      } else {
-        setStoreValue(initialValue)
-      }
-    } catch (err) {
-      setStoreValue(initialValue)
-    }
-  }, [])
-
-  const setValue = (data: T | ((val?: T) => T)) => {
+  const setValue = (data: string | T | ((val?: T | string) => T)) => {
     const value = data instanceof Function ? data(storeValue) : data
 
     setStoreValue(value)
@@ -33,7 +17,31 @@ const useLocalStorage = <T = string>(key: string, initialValue?: T) => {
     }
   }
 
-  return [storeValue, setValue] as const
+  const refetch = () => {
+    if (typeof window === 'undefined') {
+      setValue(initialValue)
+    }
+    try {
+      const prevValue = window.localStorage.getItem(key)
+      if (prevValue) {
+        if (typeof prevValue === 'string') {
+          setValue(prevValue)
+        } else {
+          setValue(JSON.parse(prevValue))
+        }
+      } else {
+        setValue(initialValue)
+      }
+    } catch (err) {
+      setValue(initialValue)
+    }
+  }
+
+  useEffect(() => {
+    refetch()
+  }, [window.localStorage])
+
+  return [storeValue, setValue, refetch] as const
 }
 
 export default useLocalStorage
diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts
@@ -0,0 +1,26 @@
+import { ToastOptionType, useToast as usePreviousToast } from '@jaewoong2/toast'
+
+const useToast = (message: string, options?: ToastOptionType) => {
+  const suceess = usePreviousToast(message, {
+    backgroundColor: '#354898',
+    width: 200,
+    color: 'white',
+    borderRadius: 100,
+    ...options,
+  })
+
+  const error = usePreviousToast(message, {
+    backgroundColor: '#E56FB4',
+    width: 200,
+    color: 'white',
+    borderRadius: 100,
+    ...options,
+  })
+
+  return {
+    suceess,
+    error,
+  }
+}
+
+export default useToast
diff --git a/src/pages/Configuration/hooks/useConfiguration.ts b/src/pages/Configuration/hooks/useConfiguration.ts
@@ -1,25 +1,17 @@
 import useInput from '@/components/compounds/Form/hooks/useInput'
 import useGetUser from '@/hooks/useGetUser'
-import { useToast } from '@jaewoong2/toast'
+import useToast from '@/hooks/useToast'
+// import { useToast } from '@jaewoong2/toast'
 import React, { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import usePatchUser from './usePatchUser'
 
 const useConfiguration = () => {
   const [username, setUsername, onChangeUsername] = useInput()
   const [userPhone, setUserPhone, onChangeUserPhone] = useInput()
-  const { show: successShow } = useToast('변경 완료', {
-    backgroundColor: '#354898',
-    width: 200,
-    color: 'white',
-    borderRadius: 100,
-  })
-
-  const { show: errorShow } = useToast('휴대폰 번호 양식을 지켜주세요 :)', {
-    backgroundColor: '#E56FB4',
+  const { suceess } = useToast('변경 완료')
+  const { error } = useToast('휴대폰 번호 양식을 지켜주세요 :)', {
     width: 300,
-    color: 'white',
-    borderRadius: 100,
   })
 
   const { isLoading: userLoading } = useGetUser({
@@ -42,9 +34,9 @@ const useConfiguration = () => {
       if (userPhone.length === 11) {
         mutate({ username, userPhone })
         navigate('/')
-        successShow()
+        suceess.show()
       } else {
-        errorShow()
+        error.show()
       }
     },
     [username, userPhone]

diff --git a/src/pages/Domain/hooks/useGetCompanyRequest.ts b/src/pages/Domain/hooks/useGetCompanyRequest.ts
@@ -13,7 +13,7 @@ const useGetCompanyRequest = (options?: UseQueryOption) => {
 
   return useQuery<Company, RequestError>(`${domain}`, () => getCompany({ companyDomain: domain }), {
     ...options,
-    enabled: Boolean(domain) && options?.enabled,
+    enabled: domain ? options?.enabled : false,
   })
 }
 

diff --git a/src/pages/Edit/hooks/useEditMount.ts b/src/pages/Edit/hooks/useEditMount.ts
@@ -1,15 +1,14 @@
 import useGetUser from '@/hooks/useGetUser'
-import { useToast } from '@jaewoong2/toast'
+import useToast from '@/hooks/useToast'
 import { useNavigate } from 'react-router-dom'
 import useCompanyEditAction from './useCompanyEditAction'
 
 const useEditMount = () => {
   const navigate = useNavigate()
-  const { show } = useToast('로그인 후 이용하세요', {
-    type: 'warn',
+
+  const { error } = useToast('로그인 후 이용하세요', {
     position: 'top',
     subPosition: 'right',
-    color: 'white',
   })
 
   const { hanldeComapny } = useCompanyEditAction()
@@ -23,7 +22,7 @@ const useEditMount = () => {
       hanldeComapny({ ...data })
     },
     onError: () => {
-      show()
+      error.show()
       navigate(-1)
     },
   })

diff --git a/src/pages/Home/components/blocks/RecommandCards.tsx b/src/pages/Home/components/blocks/RecommandCards.tsx
@@ -15,7 +15,7 @@ const RecommandCards = ({ title }: Props) => {
       <div className="flex w-full gap-4 overflow-y-scroll pb-5">
         {companies?.map((company) => (
           <Card
-            key={company.id}
+            key={company.companyName}
             companyDomain={encodeURIComponent(company.companyDomain ?? '')}
             companyName={company.companyName}
             profileImage={company.profileImage}

diff --git a/src/pages/Order/context/OrderContextProvider.tsx b/src/pages/Order/context/OrderContextProvider.tsx
@@ -1,5 +1,6 @@
 import useGetTemplate from '@/hooks/useGetTemplate'
 import useStatus from '@/hooks/useStatus'
+import useToast from '@/hooks/useToast'
 import { Order } from '@/type'
 import { useModal } from '@jaewoong2/modal'
 import { AxiosError } from 'axios'
@@ -20,6 +21,7 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
     ...defaultOrder,
     templateId: id,
   })
+  const { suceess } = useToast('제출 완료')
 
   useGetTemplate(id ?? '', {
     onSuccess: (data) => {
@@ -53,6 +55,7 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
       setCurrent(0)
       setOrder({ ...defaultOrder, templateId: id })
       navigate(`/${domain}`)
+      suceess.show()
     },
     onError: (err) => {
       if (err.status === AxiosError.ECONNABORTED) {