[큐알체크 페이지] 중복요청 방지기능 추가

Feature/CheckPage 기능 구현 완료
Gosrock · Aug 10, 2022 · 7d3322c · 7d3322c
2 parents 6dbb615 + dc75781
commit 7d3322c
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 47 deletions.
diff --git a/src/components/Tables/OrdersPage/OrdersPage.js b/src/components/Tables/OrdersPage/OrdersPage.js
@@ -17,10 +17,12 @@ const { Option } = Select;
 export default function OrdersPage() {
   const dispatch = useDispatch();
   const { data, pending } = useSelector(state => state.orderListPagination);
+  console.log(data);
   const [page, setPage] = useState(1);
   const [day, setDay] = useState('ALL');
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [id, setID] = useState('');
+  const [orderPrice, setOrderPrice] = useState('xx');
 
   const onPageChange = e => {
     // 페이지네이션 번호 바뀔때 뜸.
@@ -60,11 +62,13 @@ export default function OrdersPage() {
     setIsModalVisible(false);
     handleSetFreeSelector(id);
     setID('');
+    setOrderPrice('무료');
   };
 
   const handleCancel = () => {
     setIsModalVisible(false);
     setID('');
+    setOrderPrice('유료');
   };
 
   useEffect(() => {
@@ -113,6 +117,14 @@ export default function OrdersPage() {
             return moment(element).utc(false).format('MM월 DD일 HH:mm');
           }}
         />
+        <Column
+          title="업데이트 일시"
+          dataIndex="updatedAt"
+          align="center"
+          render={element => {
+            return moment(element).utc(false).format('MM월 DD일 HH:mm');
+          }}
+        />
         <Column // 주문 상태 변경 가능
           title="주문 상태"
           dataIndex=""
@@ -140,6 +152,7 @@ export default function OrdersPage() {
             return (
               <Select
                 defaultValue={element.isFree ? '무료' : '유료'}
+                value={element.isFree ? '무료' : '유료'}
                 style={{
                   width: 120
                 }}

diff --git a/src/components/Tickets/CheckPage/CheckEnterPage.js b/src/components/Tickets/CheckPage/CheckEnterPage.js
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
 import history from '../../../history';
 import { Navigate, useNavigate } from 'react-router-dom';
-import { Button, Radio } from 'antd';
+import { Button } from 'antd';
 
 export default function CheckEnterPage() {
   let navigate = useNavigate();
-  const [size, setSize] = useState('large');
 
   const obRearCam = () => {
     // navigate('/tickets/check', {
@@ -52,14 +51,7 @@ export default function CheckEnterPage() {
   };
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        width: '50vw',
-        height: '50vh',
-        justifyContent: 'space-between'
-      }}
-    >
+    <div>
       <Button type="primary" onClick={obRearCam}>
         OB 후방카메라
       </Button>

diff --git a/src/components/Tickets/CheckPage/CheckPage.js b/src/components/Tickets/CheckPage/CheckPage.js
@@ -2,37 +2,40 @@ import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 import { QrReader } from 'react-qr-reader';
-import { checkPage } from '../../../state/actions-creators/CheckPage';
+import {
+  checkCount,
+  checkPage
+} from '../../../state/actions-creators/CheckPage';
 import './video.css';
 import { ReactComponent as Scanner } from './scanner.svg';
 import history from '../../../history';
+import { message } from 'antd';
 
 function CheckPage() {
   const dispatch = useDispatch();
   const location = useLocation();
-  const [isOldOrYoung, setIsOldOrYoung] = useState('');
-  const [isFrontOrRear, setIsFrontOrRear] = useState('');
 
-  const { data, pending } = useSelector(state => state.checkPage);
+  const { data, pending, count } = useSelector(state => state.checkPage);
 
   useEffect(() => {
     if (!history.location.state) {
       history.push('ticket/checkenter');
     }
     // console.log('history.location.state:', history.location.state); //result: '{date: 'OB', cam: 'environment'}'
     // console.log('location:', location); //result: '{pathname: '/tickets/check', search: '', hash: '', state: {…}, key: 'xf82gqmb'}'
-    setIsOldOrYoung(history.location.state.date);
-    setIsFrontOrRear(history.location.state.cam); //정상작동!
   }, [location]);
 
   const handleScan = (result, error) => {
-    if (!!result) {
-      console.log('result:', result);
+    dispatch(
+      checkPage(
+        { uuid: result ? result.text : null },
+        { date: history.location.state.date },
+        message
+      )
+    );
 
-      dispatch(
-        checkPage({ uuid: result.text }, { date: history.location.state.date })
-      );
-    }
+    dispatch(checkCount());
+    // console.log('count:', count);
   };
 
   // const handleClick = () => {
@@ -43,9 +46,9 @@ function CheckPage() {
     <>
       {/* <button onClick={handleClick}>dddd</button> // history.location.state.cam 확인용 버튼 */}
       <QrReader
-        delay={300}
+        delay={500}
         onResult={handleScan}
-        constraints={{ facingMode: `${history.location.state.cam}` }} // 여기 확인좀
+        constraints={{ facingMode: `${history.location.state.cam}` }}
         videoStyle={{}}
         videoContainerStyle={{
           display: 'block',

diff --git a/src/state/action-types/checkPage.js b/src/state/action-types/checkPage.js
@@ -1,4 +1,6 @@
 export const CHECKING_PENDING = 'CHECKING_PENDING';
 export const CHECKING_SUCCESS = 'CHECKING_SUCCESS';
 export const CHECKING_ERROR = 'CHECKING_ERROR';
+export const CHECKING_COUNT = 'CHECKING_COUNT';
+
 //checkPage 대소문자 수정
diff --git a/src/state/actions-creators/CheckPage.js b/src/state/actions-creators/CheckPage.js
@@ -2,31 +2,46 @@ import axios from 'axios';
 import {
   CHECKING_PENDING,
   CHECKING_SUCCESS,
-  CHECKING_ERROR
+  CHECKING_ERROR,
+  CHECKING_COUNT
 } from '../action-types/checkPage.js';
+import { store } from '../storeSetting.js';
 
 export const checkPage =
-  ({ uuid }, { date }, callback) =>
+  ({ uuid }, { date }, message, callback) =>
   async dispatch => {
-    try {
-      dispatch({ type: CHECKING_PENDING });
+    const { checkPage } = store.getState();
+    // console.log();
+    if (uuid && checkPage.count > 4) {
+      try {
+        dispatch({ type: CHECKING_PENDING });
 
-      const response = await axios.post(
-        `https://api.gosrock.band/v1/tickets/${uuid}/enter`,
-        {
-          date: `${date}`
-        }
-      );
-      console.log('서버 응답?', response);
-      console.log('uuid, date: ', uuid, ',,,,', date);
+        const response = await axios.post(
+          `https://api.gosrock.band/v1/tickets/${uuid}/enter`,
+          {
+            date: `${date}`
+          }
+        );
+        console.log('서버 응답?', response);
+        console.log('uuid, date: ', uuid, ',,,,', date);
 
-      dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
+        message.success('조회에 성공했습니다. 입장이 가능합니다.');
+        dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
 
-      // 자동으로 피쳐로 넘어가게끔
-      // callback();
-    } catch (e) {
-      //400 ~
-      dispatch({ type: CHECKING_ERROR, payload: '조회 실패' });
-      console.log(e);
+        // 자동으로 피쳐로 넘어가게끔
+        callback();
+      } catch (e) {
+        //400 ~ 에러 타입에 따라서 경고메세지 다르게 표시
+        // dispatch({ type: CHECKING_ERROR, payload: error });
+        // console.log('ERROR: ', error.response.data.error.message);
+        const ERROR = e.response.data.error.message;
+        console.log('ERROR:', ERROR);
+        message.warn(`${ERROR}`);
+        dispatch({ type: CHECKING_ERROR, payload: e });
+      }
     }
   };
+
+export const checkCount = () => async dispatch => {
+  dispatch({ type: CHECKING_COUNT });
+};
diff --git a/src/state/reducers/CheckPage.js b/src/state/reducers/CheckPage.js
@@ -2,7 +2,8 @@
 import {
   CHECKING_PENDING,
   CHECKING_SUCCESS,
-  CHECKING_ERROR
+  CHECKING_ERROR,
+  CHECKING_COUNT
 } from '../action-types/checkPage.js';
 
 export default function (
@@ -11,17 +12,32 @@ export default function (
       userUuid: ''
     },
     error: null,
-    pending: false
+    pending: false,
+    count: 0
   },
   action
 ) {
   switch (action.type) {
     case CHECKING_PENDING:
       return { ...state, data: action.payload, error: null, pending: true };
     case CHECKING_SUCCESS:
-      return { ...state, data: action.payload, error: null, pending: false };
+      return {
+        ...state,
+        data: action.payload,
+        error: null,
+        count: 0,
+        pending: false
+      };
     case CHECKING_ERROR:
-      return { ...state, data: [], error: action.payload, pending: false };
+      return {
+        ...state,
+        data: [],
+        error: action.payload,
+        count: 0,
+        pending: false
+      };
+    case CHECKING_COUNT:
+      return { ...state, count: state.count + 1 };
     default:
       return state;
   }