[ 주문, 티켓 확인 ] 주문 목록 조회, 티켓 확인 기능 추가

Feature/order list page

package.json

@@ -13,6 +13,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-qr-reader": "^3.0.0-beta-1",
     "react-redux": "^8.0.2",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,9 +1,14 @@
-import React from "react";
-import MainLayout from "./components/MainLayout/MainLayout";
+import React from 'react';
+import MainLayout from './components/MainLayout/MainLayout';
+import CheckPage from './components/Tickets/CheckPage/CheckPage';
+import { Routes, Route } from 'react-router-dom';
 function App({ match }) {
   return (
     <>
-      <MainLayout />
+      <Routes>
+        <Route path="*" element={<MainLayout />} />
+        <Route exact path="/tickets/check" element={<CheckPage />} />
+      </Routes>
     </>
   );
 }

src/components/MainLayout/MainLayout.js

@@ -154,7 +154,7 @@ class MainLayout extends React.Component {
                 <Route exact path="/table/orders" element={<OrdersPage />} />
                 <Route exact path="/table/tickets" element={<TicketsPage />} />
                 <Route exact path="/tickets/enter" element={<EnterPage />} />
-                <Route exact path="/tickets/check" element={<CheckPage />} />
+
                 <Route exact path="/accounts" element={<AccoutPage />} />
                 <Route exact path="/example" element={<ExamplePage />} />
               </Routes>

src/components/Tables/ExamplePage/Table.js

@@ -60,7 +60,7 @@ function TableExample() {
         //   };
         // }}
         pageSize={10}
-        dataSource={data ? data.photoList : []}
+        dataSource={data ? data.photolist : []}
       >
         <Column
           title="썸네일"

src/components/Tables/OrdersPage/OrdersPage.js

@@ -1,7 +1,76 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-function OrdersPage() {
-  return <div>봉세환의 OrdersPage</div>;
-}
+import { useSelector, useDispatch } from 'react-redux';
+import { Segmented, Table, Select } from 'antd';
+import { orderListPagination } from '../../../state/actions-creators/orderListPagination';
+const { Column } = Table;
+
+export default function OrdersPage() {
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.orderListPagination); // useSelector???? 시발련아 뭐가문제야
+  console.log(data);
+  const [page, setPage] = useState(1);
+  const [day, setDay] = useState('BOTH');
+
+  const onPageChange = e => {
+    // 페이지네이션 번호 바뀔때 뜸.
+    console.log(e);
+    setPage(e);
+    dispatch(
+      orderListPagination({
+        requestPage: e
+      })
+    );
+  };
 
-export default OrdersPage;
+  useEffect(() => {
+    dispatch(
+      orderListPagination({
+        page: 0
+      })
+    );
+  }, [dispatch]);
+
+  return (
+    <>
+      <Segmented
+        options={['BOTH', 'YB', 'OB']}
+        value={day}
+        onChange={day => {
+          if (day === 'OB') {
+            setDay(day);
+          } else if (day === 'YB') {
+            setDay(day);
+          } else if (day === 'BOTH') {
+            setDay(day);
+          }
+        }}
+      />
+
+      <Table
+        loading={pending}
+        pagination={{
+          current: page,
+          pageSize: 10,
+          total: data ? data.total : 0,
+          showSizeChanger: false,
+          onChange: onPageChange
+        }}
+        key="id"
+        rowKey="id"
+        pageSize={10}
+        dataSource={data ? data.orderList : []}
+      >
+        <Column title="아이디" dataIndex="id" />
+        <Column title="입금자명" dataIndex="user" render={user => user.name} />
+        <Column title="주문금액" dataIndex="price" />
+        <Column title="티켓 매수" dataIndex="howMany" />
+        <Column title="선택 날짜" dataIndex="date" />
+        <Column title="주문 일시" dataIndex="createdAt" />
+        <Column title="주문 상태" dataIndex="status" />
+        <Column title="공짜 티켓 여부" dataIndex="isFree" />
+        <Column title="매니저" dataIndex="admin" />
+      </Table>
+    </>
+  );
+}

src/components/Tickets/CheckPage/CheckPage.js

@@ -1,7 +1,31 @@
-import React from "react";
+import React, { useState } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { QrReader } from 'react-qr-reader';
+import { checkPage } from '../../../state/actions-creators/CheckPage';
 
 function CheckPage() {
-  return <div>CheckPage</div>;
+  const dispatch = useDispatch();
+  const [qrScan, setQrScan] = useState('No result');
+  const { data, pending } = useSelector(state => state.checkPage);
+
+  const handleScan = (result, error) => {
+    if (!!result) {
+      setQrScan(result.text);
+      console.log(qrScan);
+
+      dispatch(checkPage({ uuid: result.text }));
+    }
+  };
+
+  return (
+    <>
+      <QrReader
+        delay={300}
+        onResult={handleScan}
+        style={{ width: '100%', height: '100%' }}
+      />
+    </>
+  );
 }
 
 export default CheckPage;

src/state/action-types/CheckPage.js

@@ -0,0 +1,3 @@
+export const CHECKING_PENDING = 'CHECKING_PENDING';
+export const CHECKING_SUCCESS = 'CHECKING_SUCCESS';
+export const CHECKING_ERROR = 'CHECKING_ERROR';

src/state/action-types/index.js

@@ -6,3 +6,5 @@ export * from './ticketPagination';
 export * from './usersPage';
 export * from './enterPage';
 export * from './LandingPage';
+export * from './orderListPagination';
+export * from './CheckPage';

src/state/action-types/orderListPagination.js

@@ -0,0 +1,5 @@
+export const ORDERS_PENDING = 'ORDERS_PENDING';
+export const ORDERS_SUCCESS = 'ORDERS_SUCCESS';
+export const ORDERS_ERROR = 'ORDERS_ERROR';
+export const SET_FREE_TICKET = 'SET_FREE_TICKET';
+export const SET_FREE_TICKET_ERROR = 'SET_FREE_TICKET_ERROR';

src/state/actions-creators/CheckPage.js

@@ -0,0 +1,31 @@
+import axios from 'axios';
+import {
+  CHECKING_PENDING,
+  CHECKING_SUCCESS,
+  CHECKING_ERROR
+} from '../action-types/CheckPage.js';
+
+export const checkPage =
+  ({ uuid }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: CHECKING_PENDING });
+
+      const response = await axios.post(
+        `https://api.gosrock.band/v1/tickets/${uuid}/enter`,
+        {
+          date: 'OB'
+        }
+      );
+      console.log('서버 응답?', response);
+
+      dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: CHECKING_ERROR, payload: '조회 실패' });
+      console.log(e);
+    }
+  };

src/state/actions-creators/examplePagination.js

@@ -1,39 +1,37 @@
 import axios from 'axios';
 import {
-  EXAMPLE_PAGINATION_PENDING,
-  EXAMPLE_PAGINATION_SUCCESS,
-  EXAMPLE_PAGINATION_ERROR
-} from '../action-types';
+  ORDERS_PENDING,
+  ORDERS_SUCCESS,
+  ORDERS_ERROR,
+  STATE_CHANGE,
+  STATE_CHANGE_ERROR,
+  SET_FREE_TICKET,
+  SET_FREE_TICKET_ERROR
+} from '../action-types/orderListPagination';
 
 export const examplePagination =
   ({ requestPage }, callback) =>
   async dispatch => {
     try {
-      dispatch({ type: EXAMPLE_PAGINATION_PENDING });
+      dispatch({ type: ORDERS_PENDING });
 
       const response = await axios.get(
-        'https://jsonplaceholder.typicode.com/photos',
-        {
-          params: {
-            _page: requestPage,
-            _limit: 10
-          }
-        }
+        'https://api.gosrock.band/v1/tickets/find?order=ASC&page=1&take=10'
       );
       console.log('포토 조회액션', response);
 
       const data = {
-        total: 5000,
+        total: response.data.data.meta.itemCount,
         currentPage: requestPage,
-        photoList: response.data
+        orderList: response.data.data
       };
 
-      dispatch({ type: EXAMPLE_PAGINATION_SUCCESS, payload: data });
+      dispatch({ type: ORDERS_SUCCESS, payload: data });
 
       // 자동으로 피쳐로 넘어가게끔
       // callback();
     } catch (e) {
       //400 ~
-      dispatch({ type: EXAMPLE_PAGINATION_ERROR, payload: '조회 실패' });
+      dispatch({ type: ORDERS_ERROR, payload: '조회 실패' });
     }
   };

src/state/actions-creators/orderListPagination.js

@@ -0,0 +1,37 @@
+import axios from 'axios';
+import {
+  ORDERS_PENDING,
+  ORDERS_SUCCESS,
+  ORDERS_ERROR,
+  STATE_CHANGE,
+  STATE_CHANGE_ERROR,
+  SET_FREE_TICKET,
+  SET_FREE_TICKET_ERROR
+} from '../action-types/orderListPagination.js';
+
+export const orderListPagination =
+  ({ requestPage }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: ORDERS_PENDING });
+
+      const response = await axios.get(
+        'https://api.gosrock.band/v1/tickets/find?order=ASC&page=1&take=10'
+      );
+      console.log('티켓 조회', response);
+
+      const data = {
+        total: response.data.data.meta.itemCount,
+        currentPage: requestPage,
+        orderList: response.data.data.data
+      };
+
+      dispatch({ type: ORDERS_SUCCESS, payload: data });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: ORDERS_ERROR, payload: '조회 실패' });
+    }
+  };

src/state/reducers/CheckPage.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-anonymous-default-export */
+import {
+  CHECKING_PENDING,
+  CHECKING_SUCCESS,
+  CHECKING_ERROR
+} from '../action-types/CheckPage.js';
+
+export default function (
+  state = {
+    data: {
+      userUuid: ''
+    },
+    error: null,
+    pending: false
+  },
+  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 };
+    case CHECKING_ERROR:
+      return { ...state, data: [], error: action.payload, pending: false };
+    default:
+      return state;
+  }
+}

src/state/reducers/examplePagination.js

@@ -1,16 +1,20 @@
 import {
-  EXAMPLE_PAGINATION_PENDING,
-  EXAMPLE_PAGINATION_SUCCESS,
-  EXAMPLE_PAGINATION_ERROR
-} from '../action-types';
+  ORDERS_PENDING,
+  ORDERS_SUCCESS,
+  ORDERS_ERROR,
+  STATE_CHANGE,
+  STATE_CHANGE_ERROR,
+  SET_FREE_TICKET,
+  SET_FREE_TICKET_ERROR
+} from '../action-types/orderListPagination';
 
 // eslint-disable-next-line import/no-anonymous-default-export
 export default function (
   state = {
     data: {
       totalPage: 0,
       currentPage: 1,
-      usersList: []
+      orderList: []
     },
     error: null,
     pending: false
@@ -56,11 +60,11 @@ export default function (
     //     },
     //     error: null,
     //   };
-    case EXAMPLE_PAGINATION_PENDING:
+    case ORDERS_PENDING:
       return { ...state, data: action.payload, error: null, pending: true };
-    case EXAMPLE_PAGINATION_SUCCESS:
+    case ORDERS_SUCCESS:
       return { ...state, data: action.payload, error: null, pending: false };
-    case EXAMPLE_PAGINATION_ERROR:
+    case ORDERS_ERROR:
       return { ...state, data: [], error: action.payload, pending: false };
     default:
       return state;

src/state/reducers/index.js

@@ -6,6 +6,8 @@ import LandingPage from './LandingPage';
 import slackMessage from './slackMessage';
 import usersPage from './usersPage';
 import enterPage from './enterPage';
+import orderListPagination from './orderListPagination';
+import CheckPage from './CheckPage';
 
 export default combineReducers({
   slackMessage: slackMessage,
@@ -14,5 +16,7 @@ export default combineReducers({
   usersPage: usersPage,
   ticketPagination: ticketPagination,
   enterPage: enterPage,
-  LandingPage: LandingPage
+  LandingPage: LandingPage,
+  orderListPagination: orderListPagination,
+  checkPage: CheckPage
 });