Merge pull request #74 from soma-dalda/feat/#73

Feat/#73
soma-dalda · Oct 29, 2022 · 45566dc · 45566dc
2 parents 29c6419 + f29e35d
commit 45566dc
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 25 deletions.
diff --git a/src/components/hoc/withAuth.tsx b/src/components/hoc/withAuth.tsx
@@ -1,27 +1,44 @@
+import React, { ComponentType, useEffect } from 'react'
 import useGetUser from '@/hooks/useGetUser'
 import useGetCompanyRequest from '@/pages/Domain/hooks/useGetCompanyRequest'
-import React, { ComponentType, useEffect } from 'react'
+import { useToast } from '@jaewoong2/toast'
 import { useNavigate } from 'react-router-dom'
 
 const withAuth = (Component: ComponentType) => {
-  const HOC = <P extends {}>(props: P) => {
+  const Wrapper = <P extends {}>(props: P) => {
     const navigate = useNavigate()
     const { data: user } = useGetUser()
     const { data: company } = useGetCompanyRequest()
+    const { show } = useToast('잘못된 접근 입니다', {
+      color: 'white',
+      backgroundColor: '#354898',
+      borderRadius: 100,
+    })
 
     /* 권한 분기 */
     useEffect(() => {
       if (user?.id && company?.id) {
         if (user?.id !== company?.id) {
+          show()
           navigate('/')
-          window.alert('잘못된 접근')
         }
       }
     }, [user, company])
 
+    useEffect(() => {
+      if (!user?.id) {
+        show()
+        navigate('/')
+      }
+    }, [user])
+
     return <Component {...props} />
   }
 
+  const HOC = <P extends {}>(props: P) => {
+    return <Wrapper {...props} />
+  }
+
   return HOC
 }
 

diff --git a/src/components/hoc/withPassword.tsx b/src/components/hoc/withPassword.tsx
@@ -0,0 +1,75 @@
+import React, { ComponentType, useEffect, useState } from 'react'
+import useGetUser from '@/hooks/useGetUser'
+import { useNavigate } from 'react-router-dom'
+import { ModalProvider, useModal } from '@jaewoong2/modal'
+import withAuth from './withAuth'
+
+type MessageProps = {
+  setStatusCancled: () => void
+  setStatusLoading: () => void
+}
+
+const Message = ({ setStatusCancled, setStatusLoading }: MessageProps) => {
+  useEffect(() => {
+    setStatusLoading()
+    return () => {
+      setStatusCancled()
+    }
+  }, [])
+
+  return <p className="text-[1rem]">휴대전화 번호를 등록 하셔야 합니다.</p>
+}
+
+const withPassword = (Component: ComponentType) => {
+  const Wrapper = <P extends {}>(props: P) => {
+    const navigate = useNavigate()
+    const { data: user } = useGetUser()
+    const [status, setStatus] = useState<'loading' | 'clicked' | 'cancled' | null>(null)
+
+    const { show, hide } = useModal('text', {
+      description: null,
+      header: null,
+      message: (
+        <Message
+          setStatusCancled={() => setStatus('cancled')}
+          setStatusLoading={() => setStatus('loading')}
+        />
+      ),
+      modalWidth: '350px',
+      buttonText: '등록하기',
+      buttonType: 'warn',
+      onClickButton: () => {
+        setStatus('clicked')
+        navigate('/configuration')
+        hide()
+      },
+    })
+
+    /* 권한 분기 */
+    useEffect(() => {
+      if (!user?.userPhone) {
+        show()
+      }
+    }, [user])
+
+    useEffect(() => {
+      if (status === 'cancled') {
+        navigate(-1)
+      }
+    }, [status])
+
+    return <Component {...props} />
+  }
+
+  const HOC = <P extends {}>(props: P) => {
+    return (
+      <ModalProvider>
+        <Wrapper {...props} />
+      </ModalProvider>
+    )
+  }
+
+  return withAuth(HOC)
+}
+
+export default withPassword
diff --git a/src/pages/Configuration/hooks/useConfiguration.ts b/src/pages/Configuration/hooks/useConfiguration.ts
@@ -8,10 +8,18 @@ import usePatchUser from './usePatchUser'
 const useConfiguration = () => {
   const [username, setUsername, onChangeUsername] = useInput()
   const [userPhone, setUserPhone, onChangeUserPhone] = useInput()
-  const { show } = useToast('휴대폰 번호 양식을 지켜주세요 :)', {
-    type: 'error',
+  const { show: successShow } = useToast('변경 완료', {
+    backgroundColor: '#354898',
+    width: 200,
+    color: 'white',
+    borderRadius: 100,
+  })
+
+  const { show: errorShow } = useToast('휴대폰 번호 양식을 지켜주세요 :)', {
+    backgroundColor: '#E56FB4',
     width: 300,
     color: 'white',
+    borderRadius: 100,
   })
 
   const { isLoading: userLoading } = useGetUser({
@@ -33,9 +41,10 @@ const useConfiguration = () => {
       e.preventDefault()
       if (userPhone.length === 11) {
         mutate({ username, userPhone })
-        navigate(-1)
+        navigate('/')
+        successShow()
       } else {
-        show()
+        errorShow()
       }
     },
     [username, userPhone]

diff --git a/src/pages/Edit/index.tsx b/src/pages/Edit/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import withPassword from '@/components/hoc/withPassword'
 import CompanyEditContextProvider from './context/CompanyEditContextProvider'
 import EditRoutes from './components/blocks/EditRoutes'
 
@@ -10,4 +11,4 @@ const EditRoute = () => {
   )
 }
 
-export default EditRoute
+export default withPassword(EditRoute)
diff --git a/src/pages/Order/context/OrderContextProvider.tsx b/src/pages/Order/context/OrderContextProvider.tsx
@@ -1,7 +1,7 @@
 import useGetTemplate from '@/hooks/useGetTemplate'
 import useStatus from '@/hooks/useStatus'
 import { Order } from '@/type'
-import { useToast } from '@jaewoong2/toast'
+import { useModal } from '@jaewoong2/modal'
 import { AxiosError } from 'axios'
 import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams, useNavigate, useLocation } from 'react-router-dom'
@@ -13,7 +13,6 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
   const { id, domain } = useParams()
   const navigate = useNavigate()
   const location = useLocation()
-  const { show } = useToast('주문 요청 되었습니다.', { backgroundColor: '#C6CDEB' })
 
   const { dispatchUpdateError } = useStatus()
   const [current, setCurrent] = useState(+location.hash.replace(/#/g, '0'))
@@ -51,7 +50,6 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
       setCurrent(0)
       setOrder({ ...defaultOrder, templateId: id })
       navigate(`/${domain}`)
-      show()
     },
     onError: (err) => {
       if (err.status === AxiosError.ECONNABORTED) {
@@ -62,6 +60,21 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
     },
   })
 
+  const { show, hide } = useModal('text', {
+    message: '제출 하시겠습니까?',
+    header: null,
+    description: null,
+    modalWidth: '300px',
+    buttonText: '제출',
+    buttonType: 'primary',
+    onClickButton: () => {
+      const { companyId, templateId, image, templateResponses, pickupDate, pickupNoticePhone } =
+        order
+      mutate({ companyId, templateId, image, templateResponses, pickupDate, pickupNoticePhone })
+      hide()
+    },
+  })
+
   const setTemplateResponse = ({
     question,
     answer,
@@ -160,8 +173,7 @@ const OrderContextProvider = ({ children }: PropsWithChildren) => {
   )
 
   const handleSubmit = useCallback(() => {
-    const { companyId, templateId, image, templateResponses, pickupDate, pickupNoticePhone } = order
-    mutate({ companyId, templateId, image, templateResponses, pickupDate, pickupNoticePhone })
+    show()
   }, [order])
 
   useEffect(() => {

diff --git a/src/pages/Order/index.tsx b/src/pages/Order/index.tsx
@@ -1,3 +1,5 @@
+import withPassword from '@/components/hoc/withPassword'
+import { ModalProvider } from '@jaewoong2/modal'
 import React from 'react'
 
 import { Route, Routes } from 'react-router-dom'
@@ -9,14 +11,16 @@ const OrderInit = React.lazy(() => import('./components/blocks/OrderInit'))
 
 const OrderRoute = () => {
   return (
-    <OrderContextProvider>
-      <Routes>
-        <Route path="" element={<OrderInit />} />
-        <Route path="answer" element={<Order />} />
-        <Route path="pickup" element={<Pickup />} />
-      </Routes>
-    </OrderContextProvider>
+    <ModalProvider>
+      <OrderContextProvider>
+        <Routes>
+          <Route path="" element={<OrderInit />} />
+          <Route path="answer" element={<Order />} />
+          <Route path="pickup" element={<Pickup />} />
+        </Routes>
+      </OrderContextProvider>
+    </ModalProvider>
   )
 }
 
-export default OrderRoute
+export default withPassword(OrderRoute)
diff --git a/src/pages/Orders/components/blocks/Orders.tsx b/src/pages/Orders/components/blocks/Orders.tsx
@@ -1,9 +1,9 @@
+import React from 'react'
 import { Layout } from '@/components'
 import { ActiveLink } from '@/components/atoms'
 import { NavigationWithArrow } from '@/components/blocks'
 import useGetUser from '@/hooks/useGetUser'
 import { COMPANY, MEMBER } from '@/type'
-import React from 'react'
 import { Outlet, useNavigate, useParams } from 'react-router-dom'
 import NavigationWithDivider from '../molecules/NavigationWithDivider'
 
@@ -30,10 +30,19 @@ const Orders = () => {
         <NavigationWithDivider
           buttons={[
             <ActiveLink active={params['*'] === 'company'} type="button" to="company">
-              요청
+              내 가게 주문
             </ActiveLink>,
             <ActiveLink active={params['*'] === 'consumer'} type="button" to="consumer">
-              응답
+              요청한 주문
+            </ActiveLink>,
+          ]}
+        />
+      )}
+      {user?.role === MEMBER && (
+        <NavigationWithDivider
+          buttons={[
+            <ActiveLink active={params['*'] === 'consumer'} type="button" to="consumer">
+              요청한 주문
             </ActiveLink>,
           ]}
         />

diff --git a/src/pages/Orders/index.tsx b/src/pages/Orders/index.tsx
@@ -1,3 +1,4 @@
+import withPassword from '@/components/hoc/withPassword'
 import React from 'react'
 import { Route, Routes } from 'react-router-dom'
 
@@ -22,4 +23,4 @@ const OrdersRoute = () => {
   )
 }
 
-export default OrdersRoute
+export default withPassword(OrdersRoute)