[티켓리스트] 티켓 리스트 기능 추가

Feature/ticket list page

src/components/Tables/TicketsPage/TicketsPage.js

@@ -1,7 +1,174 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+import { Table, Segmented, Select } from 'antd';
+import {
+  ticketPagi,
+  ticketPagination
+} from '../../../state/actions-creators/ticketPagination';
+import { changeState } from '../../../state/actions-creators/ticketPagination';
+
+const { Column } = Table;
+const { Option } = Select;
 
 function TicketsPage() {
-  return <div>티켓 페이지</div>;
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.ticketPagination);
+  const [page, setPage] = useState(1);
+  const [value, setValue] = useState('All');
+
+  const onSelectStateHandler = (e, id) => {
+    console.log(' id값 : ', id);
+    dispatch(changeState({ id, e }));
+  };
+
+  const onPageChange = e => {
+    console.log(e);
+    setPage(e);
+    if (value === 'All') {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: null
+          },
+          { page: e }
+        )
+      );
+    } else {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: value
+          },
+          {
+            page: e
+          }
+        )
+      );
+    }
+  };
+  console.log(data);
+
+  useEffect(() => {
+    dispatch(
+      ticketPagi(
+        {
+          requestVal: null
+        },
+        { page: 1 }
+      )
+    );
+  }, [dispatch]);
+
+  const handlefilt = value => {
+    if (value === 'All') {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: null
+          },
+          { page }
+        )
+      );
+    } else {
+      dispatch(
+        ticketPagi(
+          {
+            requestVal: value
+          },
+          { page }
+        )
+      );
+    }
+  };
+
+  //해결법?처음에 나오는 두번 클릭....ㅠ
+
+  return (
+    <>
+      <Segmented
+        options={['All', 'YB', 'OB']}
+        value={value}
+        onChange={value => {
+          if (value === 'OB') {
+            setValue(value);
+            //handlefilt(value);
+            console.log(value);
+            handlefilt(value);
+          } else if (value === 'YB') {
+            setValue(value);
+            //handlefilt(value);
+            console.log(value);
+            handlefilt(value);
+          } else if (value === 'All') {
+            setValue(value);
+            console.log(value);
+            handlefilt(value);
+          }
+        }}
+      />
+      <div style={{ marginBottom: '20px' }} />
+
+      <Table
+        loading={pending}
+        pagination={{
+          current: page,
+          pageSize: 10,
+          total: data ? data.total : 0,
+          showSizeChanger: false,
+          onChange: onPageChange
+        }}
+        key="id"
+        rowKey="id"
+        // onRow={(record, rowIndex) => {
+        //   return {
+        //     onClick: event => {
+        //       console.log(event, record);
+        //       onStopClickHandler(record);
+        //     } // click row
+        //   };
+        // }}
+        pageSize={10}
+        dataSource={data ? data.ticketList : []}
+      >
+        <Column title="아이디" dataIndex="id" key="id" />
+        <Column title="url" dataIndex="uuid" key="id" />
+        <Column
+          title="입금자명"
+          dataIndex="user"
+          render={user => user.name}
+          key="id"
+        />
+        <Column title="공연 날짜" dataIndex="date" key="id" />
+        <Column title="예매일자" dataIndex="createdAt" key="id" />
+        <Column
+          title="Action"
+          dataIndex=""
+          render={element => {
+            return (
+              <div style={{ justifyContent: 'space-between', margin: '20px' }}>
+                <Select
+                  defaultValue={element.status}
+                  onSelect={e => onSelectStateHandler(e, element.id)}
+                >
+                  <Option value="입금확인">입금확인</Option>
+                  <Option value="입장완료">입장완료</Option>
+                  <Option value="기한만료">기한만료</Option>
+                  <Option value="확인대기">확인대기</Option>
+                </Select>
+              </div>
+            );
+          }}
+        />
+        <Column
+          title="Admin"
+          dataIndex="admin"
+          render={admin => (admin ? admin.name : null)}
+          key="id"
+        />
+      </Table>
+    </>
+  );
 }
 
 export default TicketsPage;

src/index.js

@@ -1,28 +1,28 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { Provider } from "react-redux";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
 // pages
 import {
   Routes,
   Route,
-  unstable_HistoryRouter as HistoryRouter,
-} from "react-router-dom";
-import history from "./history";
-import "antd/dist/antd.min.css";
-import App from "./App";
-import requireAuth from "./hoc/requireAuth";
-import AuthPass from "./hoc/AuthPass";
+  unstable_HistoryRouter as HistoryRouter
+} from 'react-router-dom';
+import history from './history';
+import 'antd/dist/antd.min.css';
+import App from './App';
+import requireAuth from './hoc/requireAuth';
+import AuthPass from './hoc/AuthPass';
 
 // antd css file
-import "antd/dist/antd.less";
-import { store } from "./state/storeSetting";
-import "./config/axiosInstance";
-import Auth from "./components/AuthPage/Auth";
+import 'antd/dist/antd.less';
+import { store } from './state/storeSetting';
+import './config/axiosInstance';
+import Auth from './components/AuthPage/Auth';
 
 const AppWithLogin = requireAuth(App);
 const AuthWithPassHOC = AuthPass(Auth);
 
-const container = document.getElementById("root");
+const container = document.getElementById('root');
 
 // 루트 생성
 const root = ReactDOM.createRoot(container);

src/state/action-types/index.js

@@ -2,4 +2,5 @@ export * from './slackMessage';
 export * from './slackValidation';
 export * from './logout';
 export * from './examplePagination';
+export * from './ticketPagination';
 export * from './usersPage';

src/state/action-types/ticketPagination.js

@@ -0,0 +1,5 @@
+export const TICKET_PAGINATION_PENDING = 'TICKET_PAGINATION_PENDING';
+export const TICKET_PAGINATION_SUCCESS = 'TICKET_PAGINATION_SUCCESS';
+export const TICKET_PAGINATION_ERROR = 'TICKET_PAGINATION_ERROR';
+export const STATE_CHANGE = 'state_change';
+export const STATE_CHANGE_ERROR = 'state_change_error';

src/state/actions-creators/index.js

@@ -1,5 +1,6 @@
-import { slackMessage } from "./slackMessage";
-import { slackValidation } from "./slackValidation";
-import { logout } from "./logout";
+import { slackMessage } from './slackMessage';
+import { slackValidation } from './slackValidation';
+import { logout } from './logout';
+import { ticketPagination } from './ticketPagination';
 
-export { slackMessage, slackValidation, logout };
+export { slackMessage, slackValidation, logout, ticketPagination };

src/state/actions-creators/ticketPagination.js

@@ -0,0 +1,91 @@
+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: '조회 실패' });
+    }
+  };

src/state/reducers/examplePagination.js

@@ -10,7 +10,7 @@ export default function (
     data: {
       totalPage: 0,
       currentPage: 1,
-      userList: []
+      usersList: []
     },
     error: null,
     pending: false

src/state/reducers/index.js

@@ -1,12 +1,14 @@
 import { combineReducers } from 'redux';
 import { auth } from './auth';
 import examplePagination from './examplePagination';
+import ticketPagination from './ticketPagination';
 import slackMessage from './slackMessage';
 import usersPage from './usersPage';
 
 export default combineReducers({
   slackMessage: slackMessage,
   auth: auth,
   examplePagination: examplePagination,
-  usersPage: usersPage
+  usersPage: usersPage,
+  ticketPagination: ticketPagination
 });