Merge pull request #20 from the-kingdoms/develop

FIX: api 연결 수정 브랜치

public/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta name="description" content="얼루가게 PC입니다." />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a

src/apis/paymentHistory.ts

@@ -23,7 +23,7 @@ export interface OrderHistory {
 type PaymentHistoryStatus = 'WAITING' | 'PROCESS' | 'HISTORY'
 type OrderHistoryStatus = 'APPROVED' | 'PENDING' | 'DISAPPROVED' | 'HISTORY'
 
-async function getPaymentHistory(storeId: string, status?: string, filter: string = 'ALL'): Promise<PaymentHistory[]> {
+async function getPaymentHistory(storeId: string, filter: string, status?: string): Promise<PaymentHistory[]> {
   const statusQuery = status ? `&status=${status}` : ''
   const { data } = await api.get(`/api/v1/stores/${storeId}/payment-histories?filter=${filter}${statusQuery}`)
   return data

src/components/layout.tsx

@@ -5,6 +5,9 @@ import { useAtom } from 'jotai'
 import { currentTabAtom, modalDetailAtom, modalShowAtom, processCountAtom, waitingCountAtom } from 'utils/atom'
 import { ROUTE } from 'constants/path'
 import Modal from './modal'
+import { useEffect } from 'react'
+import useSound from 'use-sound'
+import orderSound from 'assets/sound/newOrder.mp3'
 
 export default function Layout() {
   const navigate = useNavigate()
@@ -39,6 +42,16 @@ export default function Layout() {
     navigate(pathname)
   }
 
+  const [playSound] = useSound(orderSound)
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null
+    if (waitingCount > 0) interval = setInterval(playSound, 5000)
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  }, [waitingCount, playSound])
+
   return (
     <Container>
       {modalShow && (

src/components/orderCard.tsx

@@ -73,6 +73,14 @@ export default function OrderCard({
     setModalShow(true)
   }
 
+  const getOrderCount = () => {
+    const currentOrderCount = orders.reduce((acc, cur) => acc + cur.count, 0)
+    // prettier-ignore
+    const prevOrdersCount = prevOrders?.reduce((acc, cur) => acc + cur.reduce((acc2, cur2) => acc2 + cur2.count, 0), 0) ?? 0
+
+    return currentOrderCount + prevOrdersCount
+  }
+
   return (
     <Container>
       <Top>
@@ -88,7 +96,7 @@ export default function OrderCard({
         </TimeText>
       </Top>
       <OrderSummary>
-        메뉴 {orders.length}개 총 {totalPrice.toLocaleString()}원
+        메뉴 {getOrderCount()}개 총 {totalPrice.toLocaleString()}원
       </OrderSummary>
       <OrderDetail orders={orders} />
       {!(pathname === ROUTE.HISTORY_MAIN && status === 'single') && <Divider />}

src/hooks/apis/paymentHistory.ts

@@ -6,44 +6,42 @@ import { modalDetailAtom, modalShowAtom, processCountAtom, storeIdAtom, waitingC
 import { AxiosError } from 'axios'
 import { useNavigate } from 'react-router-dom'
 import { ROUTE } from 'constants/path'
-import orderSound from 'assets/sound/newOrder.mp3'
-import useSound from 'use-sound'
+import { getProcessCount, getWaitingCount } from 'utils/getAlarmCount'
+
+interface PatchParameterType {
+  orderHistoryId: string
+  paymentHistoryId: string
+  status: string
+}
 
 function useGetWaitingOrder() {
   const [storeId] = useAtom(storeIdAtom)
   const [, setWaitingCount] = useAtom(waitingCountAtom)
   const [, setProcessCount] = useAtom(processCountAtom)
 
-  const [soundPlay] = useSound(orderSound)
-
   const { data, isLoading } = useQuery({
     queryKey: ['getWaitingOrder'],
-    queryFn: () => getPaymentHistory(storeId),
     refetchInterval: 5000,
     refetchIntervalInBackground: true,
+    queryFn: () => getPaymentHistory(storeId, 'ALL'),
   })
 
   useEffect(() => {
     if (data) {
-      // prettier-ignore
-      const waitingCount = data?.reduce((acc, cur) => acc + cur.orderHistoryResponseDtoList.filter(order => order.status === 'PENDING').length, 0) ?? 0
-      if (waitingCount > 0) soundPlay()
-      setWaitingCount(waitingCount)
-
-      setProcessCount(data?.reduce((acc, cur) => acc + (cur.status === 'PROCESS' ? 1 : 0), 0) ?? 0)
+      setWaitingCount(getWaitingCount(data))
+      setProcessCount(getProcessCount(data))
     }
-    // eslint-disable-next-line
-  }, [data])
+  }, [data, setWaitingCount, setProcessCount])
 
   return { data, isLoading }
 }
 
-function useGetPaymentHistory(status: string, filter?: string) {
+function useGetPaymentHistory(status: string, filter: string = 'ALL') {
   const [storeId] = useAtom(storeIdAtom)
 
   const { data, isLoading } = useQuery({
     queryKey: ['getPaymentHistory', status, filter],
-    queryFn: () => getPaymentHistory(storeId, status, filter),
+    queryFn: () => getPaymentHistory(storeId, filter, status),
   })
 
   return { data, isLoading }
@@ -57,19 +55,14 @@ function usePatchPaymentHistory(tableNumber?: number) {
   const [, setModalShow] = useAtom(modalShowAtom)
   const [, setModalDetail] = useAtom(modalDetailAtom)
 
-  interface PatchParameterType {
-    orderHistoryId: string
-    paymentHistoryId: string
-    status: string
-  }
-
   const { mutate } = useMutation({
     mutationKey: ['patchPaymentHistory'],
     mutationFn: ({ orderHistoryId, paymentHistoryId, status }: PatchParameterType) =>
       patchPaymentHistory(storeId, paymentHistoryId, orderHistoryId, status),
     onSuccess: () => {
       setModalShow(false)
-      queryClient.invalidateQueries({ queryKey: ['getPaymentHistory', 'getWaitingOrder'] })
+      queryClient.invalidateQueries({ queryKey: ['getWaitingOrder'] })
+      queryClient.invalidateQueries({ queryKey: ['getPaymentHistory', 'PROCESS', 'ALL'] })
     },
     onError: (error, variables) => {
       const axiosError = error as AxiosError

src/pages/process.tsx

@@ -5,7 +5,7 @@ import { useGetPaymentHistory } from 'hooks/apis/paymentHistory'
 import { useAtom } from 'jotai'
 import { Container, CardContainer, TabTitle, Loading } from 'styles/shared'
 import { processCountAtom } from 'utils/atom'
-import { parseOrder, returnTotalPrice } from 'utils/order'
+import { parseOrder } from 'utils/order'
 import { OrbitProgress } from 'react-loading-indicators'
 
 export default function ProcessMain() {
@@ -53,7 +53,7 @@ export default function ProcessMain() {
                 status={orders.orderHistoryResponseDtoList.length > 1 ? 'multi' : 'single'}
                 tableNumber={orders.tableNumber}
                 time={returnLatestTime(orders)}
-                totalPrice={returnTotalPrice(parseOrder(orders.orderHistoryResponseDtoList[0].orderDetail))}
+                totalPrice={orders.totalPrice}
                 orders={parseOrder(orders.orderHistoryResponseDtoList[0].orderDetail)}
                 prevOrders={returnPrevOrders(orders)}
               />

src/utils/atom.ts

@@ -7,6 +7,7 @@ currentTabAtom.debugLabel = 'currentTabAtom'
 
 export const waitingCountAtom = atom<number>(0)
 export const processCountAtom = atom<number>(0)
+waitingCountAtom.debugLabel = 'waitingCountAtom'
 
 export const storeIdAtom = atomWithStorage('Store ID', '')
 storeIdAtom.debugLabel = 'storeIdAtom'

src/utils/getAlarmCount.ts

@@ -0,0 +1,14 @@
+import { PaymentHistory } from 'apis/paymentHistory'
+
+export function getWaitingCount(data: PaymentHistory[]) {
+  return (
+    data?.reduce(
+      (acc, cur) => acc + cur.orderHistoryResponseDtoList.filter(order => order.status === 'PENDING').length,
+      0,
+    ) ?? 0
+  )
+}
+
+export function getProcessCount(data: PaymentHistory[]) {
+  return data?.reduce((acc, cur) => acc + (cur.status === 'PROCESS' ? 1 : 0), 0) ?? 0
+}