From 7a2d12bdd91b35317bb9c99141f71b58ebe2b1d3 Mon Sep 17 00:00:00 2001 From: bongsh0112 Date: Sun, 7 Aug 2022 21:40:21 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A4=91=EA=B0=84=EC=BB=A4=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 38 ++++++++ package.json | 1 + src/components/Tables/ExamplePage/Table.js | 2 +- .../Tables/OrdersPage/OrdersPage.js | 79 +++++++++++++++- src/components/Tickets/CheckPage/CheckPage.js | 48 +++++++++- src/state/action-types/CheckPage.js | 3 + src/state/action-types/orderListPagination.js | 7 ++ src/state/actions-creators/CheckPage.js | 27 ++++++ .../actions-creators/examplePagination.js | 30 +++--- .../actions-creators/orderListPagination.js | 37 ++++++++ .../actions-creators/ticketPagination.js | 92 +++++++++++++++++++ src/state/reducers/CheckPage.js | 28 ++++++ src/state/reducers/examplePagination.js | 20 ++-- src/state/reducers/orderListPagination.js | 72 +++++++++++++++ 14 files changed, 452 insertions(+), 32 deletions(-) create mode 100644 src/state/action-types/CheckPage.js create mode 100644 src/state/action-types/orderListPagination.js create mode 100644 src/state/actions-creators/CheckPage.js create mode 100644 src/state/actions-creators/orderListPagination.js create mode 100644 src/state/actions-creators/ticketPagination.js create mode 100644 src/state/reducers/CheckPage.js create mode 100644 src/state/reducers/orderListPagination.js diff --git a/package-lock.json b/package-lock.json index b766c58..18e29e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3086,6 +3086,29 @@ "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz", "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, + "@zxing/browser": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/@zxing/browser/-/browser-0.0.7.tgz", + "integrity": "sha512-AepzMgDnD6EjxewqmXpHJsi4S3Gw9ilZJLIbTf6fWuWySEcHBodnGu3p7FWlgq1Sd5QyfPhTum5z3CBkkhMVng==", + "requires": { + "@zxing/text-encoding": "^0.9.0" + } + }, + "@zxing/library": { + "version": "0.18.6", + "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz", + "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==", + "requires": { + "@zxing/text-encoding": "~0.9.0", + "ts-custom-error": "^3.0.0" + } + }, + "@zxing/text-encoding": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz", + "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==", + "optional": true + }, "abab": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz", @@ -10676,6 +10699,16 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-qr-reader": { + "version": "3.0.0-beta-1", + "resolved": "https://registry.npmjs.org/react-qr-reader/-/react-qr-reader-3.0.0-beta-1.tgz", + "integrity": "sha512-5HeFH9x/BlziRYQYGK2AeWS9WiKYZtGGMs9DXy3bcySTX3C9UJL9EwcPnWw8vlf7JP4FcrAlr1SnZ5nsWLQGyw==", + "requires": { + "@zxing/browser": "0.0.7", + "@zxing/library": "^0.18.3", + "rollup": "^2.67.2" + } + }, "react-redux": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz", @@ -11988,6 +12021,11 @@ "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz", "integrity": "sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==" }, + "ts-custom-error": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.2.0.tgz", + "integrity": "sha512-cBvC2QjtvJ9JfWLvstVnI45Y46Y5dMxIaG1TDMGAD/R87hpvqFL+7LhvUDhnRCfOnx/xitollFWWvUKKKhbN0A==" + }, "tsconfig-paths": { "version": "3.14.1", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz", diff --git a/package.json b/package.json index 9451883..0a54b4b 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,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", diff --git a/src/components/Tables/ExamplePage/Table.js b/src/components/Tables/ExamplePage/Table.js index 9db4410..b0c2db0 100644 --- a/src/components/Tables/ExamplePage/Table.js +++ b/src/components/Tables/ExamplePage/Table.js @@ -60,7 +60,7 @@ function TableExample() { // }; // }} pageSize={10} - dataSource={data ? data.photoList : []} + dataSource={data ? data.photolist : []} > 봉세환의 OrdersPage; -} +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 ( + <> + { + if (day === 'OB') { + setDay(day); + } else if (day === 'YB') { + setDay(day); + } else if (day === 'BOTH') { + setDay(day); + } + }} + /> + + + + user.name} /> + + + + + + + +
+ + ); +} diff --git a/src/components/Tickets/CheckPage/CheckPage.js b/src/components/Tickets/CheckPage/CheckPage.js index 9ce11a6..c3bafff 100644 --- a/src/components/Tickets/CheckPage/CheckPage.js +++ b/src/components/Tickets/CheckPage/CheckPage.js @@ -1,7 +1,51 @@ -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'; +import { Card } from 'antd'; function CheckPage() { - return
CheckPage
; + const [qrScan, setQrScan] = useState('No result'); + const [uuid, setUuid] = useState([]); + // const { data, pending } = useSelector(state => state.checkPage); ??? useSelector 씨발 + const arr = []; + + const handleScan = (result, error) => { + if (!!result) { + setQrScan(result.text); + console.log('result.rawBytes', result.rawBytes); + result.rawBytes.forEach(x => { + arr.push(x); + }); + console.log('arr', arr); + } + if (!!error) { + console.log('ERROR!', error); + } + }; + + return ( + <> + + + +

Scanned QR Code Here: {qrScan}

+ + + + + + ); } export default CheckPage; diff --git a/src/state/action-types/CheckPage.js b/src/state/action-types/CheckPage.js new file mode 100644 index 0000000..b6489f3 --- /dev/null +++ b/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'; diff --git a/src/state/action-types/orderListPagination.js b/src/state/action-types/orderListPagination.js new file mode 100644 index 0000000..1969937 --- /dev/null +++ b/src/state/action-types/orderListPagination.js @@ -0,0 +1,7 @@ +export const ORDERS_PENDING = 'ORDERS_PENDING'; +export const ORDERS_SUCCESS = 'ORDERS_SUCCESS'; +export const ORDERS_ERROR = 'ORDERS_ERROR'; +export const STATE_CHANGE = 'STATE_CHANGE'; +export const STATE_CHANGE_ERROR = 'STATE_CHANGE_ERROR'; +export const SET_FREE_TICKET = 'SET_FREE_TICKET'; +export const SET_FREE_TICKET_ERROR = 'SET_FREE_TICKET_ERROR'; diff --git a/src/state/actions-creators/CheckPage.js b/src/state/actions-creators/CheckPage.js new file mode 100644 index 0000000..36aa75b --- /dev/null +++ b/src/state/actions-creators/CheckPage.js @@ -0,0 +1,27 @@ +import axios from 'axios'; +import { + CHECKING_PENDING, + CHECKING_SUCCESS, + CHECKING_ERROR +} from '../action-types/CheckPage.js'; + +export const checkPage = + ({ requestPage }, { uuid }, callback) => + async dispatch => { + try { + dispatch({ type: CHECKING_PENDING }); + + const response = await axios.post( + `https://api.gosrock.band/v1/tickets/${uuid}/enter` + ); + console.log('서버 응답?', response); + + dispatch({ type: CHECKING_SUCCESS, payload: '조회 성공' }); + + // 자동으로 피쳐로 넘어가게끔 + // callback(); + } catch (e) { + //400 ~ + dispatch({ type: CHECKING_ERROR, payload: '조회 실패' }); + } + }; diff --git a/src/state/actions-creators/examplePagination.js b/src/state/actions-creators/examplePagination.js index 57a5f20..2fec126 100644 --- a/src/state/actions-creators/examplePagination.js +++ b/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: '조회 실패' }); } }; diff --git a/src/state/actions-creators/orderListPagination.js b/src/state/actions-creators/orderListPagination.js new file mode 100644 index 0000000..814ee82 --- /dev/null +++ b/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, + photoList: response.data.data.data + }; + + dispatch({ type: ORDERS_SUCCESS, payload: data }); + + // 자동으로 피쳐로 넘어가게끔 + // callback(); + } catch (e) { + //400 ~ + dispatch({ type: ORDERS_ERROR, payload: '조회 실패' }); + } + }; diff --git a/src/state/actions-creators/ticketPagination.js b/src/state/actions-creators/ticketPagination.js new file mode 100644 index 0000000..2279e32 --- /dev/null +++ b/src/state/actions-creators/ticketPagination.js @@ -0,0 +1,92 @@ +import axios from 'axios'; +import { + TICKET_PAGINATION_PENDING, + TICKET_PAGINATION_SUCCESS, + TICKET_PAGINATION_ERROR, + STATE_CHANGE, + STATE_CHANGE_ERROR +} from '../action-types'; + +export const ticketPagination = + ({ requestPage }, callback) => + async dispatch => { + try { + dispatch({ type: TICKET_PAGINATION_PENDING }); + + const response = await axios.get( + `https://api.gosrock.band/v1/tickets/find?&order=DESC&page=${requestPage}&take=10` + ); + console.log(response.data); + + const data = { + total: response.data.data.meta.itemCount, + currentPage: requestPage, + ticketList: response.data.data.data + }; + + dispatch({ type: TICKET_PAGINATION_SUCCESS, payload: data }); + + // 자동으로 피쳐로 넘어가게끔 + // callback(); + } catch (e) { + //400 ~ + dispatch({ type: TICKET_PAGINATION_ERROR, payload: '조회 실패' }); + } + }; + +export const changeState = + ({ id, e }) => + async dispatch => { + try { + console.log('ticketId:', id); + console.log('status:', e); + + const response = await axios.patch( + `https://api.gosrock.band/v1/tickets/status`, + { ticketId: id, status: e } + ); + console.log(response.data); + dispatch({ type: STATE_CHANGE, payload: response.data.data }); + } catch (e) { + console.log(e); + dispatch({ + type: STATE_CHANGE_ERROR, + payload: e.response.data + }); + } + }; + +export const ticketPagi = + ({ requestVal }, { page }, callback) => + async dispatch => { + try { + dispatch({ type: TICKET_PAGINATION_PENDING }); + + const response = await axios.get( + `https://api.gosrock.band/v1/tickets/find`, + { + params: { + date: requestVal, + order: 'DESC', + page: page, + take: 10 + } + } + ); + console.log(response.data); + + const data = { + total: response.data.data.meta.itemCount, + currentPage: page, + ticketList: response.data.data.data + }; + + dispatch({ type: TICKET_PAGINATION_SUCCESS, payload: data }); + + // 자동으로 피쳐로 넘어가게끔 + // callback(); + } catch (e) { + //400 ~ + dispatch({ type: TICKET_PAGINATION_ERROR, payload: '조회 실패' }); + } + }; diff --git a/src/state/reducers/CheckPage.js b/src/state/reducers/CheckPage.js new file mode 100644 index 0000000..531e6cb --- /dev/null +++ b/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; + } +} diff --git a/src/state/reducers/examplePagination.js b/src/state/reducers/examplePagination.js index 14d7673..f4fa532 100644 --- a/src/state/reducers/examplePagination.js +++ b/src/state/reducers/examplePagination.js @@ -1,8 +1,12 @@ 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 ( @@ -10,7 +14,7 @@ export default function ( data: { totalPage: 0, currentPage: 1, - userList: [] + 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; diff --git a/src/state/reducers/orderListPagination.js b/src/state/reducers/orderListPagination.js new file mode 100644 index 0000000..f45549a --- /dev/null +++ b/src/state/reducers/orderListPagination.js @@ -0,0 +1,72 @@ +import { + ORDERS_PENDING, + ORDERS_SUCCESS, + ORDERS_ERROR, + STATE_CHANGE, + STATE_CHANGE_ERROR, + SET_FREE_TICKET, + SET_FREE_TICKET_ERROR +} from '../action-types'; + +// eslint-disable-next-line import/no-anonymous-default-export +export default function ( + state = { + data: { + totalPage: 0, + currentPage: 1, + orderList: [] + }, + error: null, + pending: false + }, + action +) { + switch (action.type) { + // case USER_STATE_TO_STOP_SUCCESS: + // // 해당 변경된 아이디를 찾아서 정보를 변경합니다. + // console.log("asdfasdfadsfas", action.payload); + // const newUserList = state.data.userList.map((element) => { + // if (element._id === action.payload._id) { + // console.log("find", element._id); + // return action.payload; + // } + // return element; + // }); + // return { + // ...state, + // data: { + // userCount: state.data.userCount, + // totalPage: state.data.totalPage, + // currentPage: state.data.currentPage, + // userList: newUserList, + // }, + // error: null, + // }; + // case USER_STATE_TO_NORMAL_SUCCESS: + // const newNORMALUserList = state.data.userList.map((element) => { + // if (element._id === action.payload._id) { + // console.log("find", element._id); + // return action.payload; + // } + // return element; + // }); + // return { + // ...state, + // data: { + // userCount: state.data.userCount, + // totalPage: state.data.totalPage, + // currentPage: state.data.currentPage, + // userList: newNORMALUserList, + // }, + // error: null, + // }; + case ORDERS_PENDING: + return { ...state, data: action.payload, error: null, pending: true }; + case ORDERS_SUCCESS: + return { ...state, data: action.payload, error: null, pending: false }; + case ORDERS_ERROR: + return { ...state, data: [], error: action.payload, pending: false }; + default: + return state; + } +}