[유저리스트] 유저 조회 기본 기능 추가

[유저리스트] 유저 조회 기본 기능 추가

src/apis/users/UsersApi.js

@@ -0,0 +1,3 @@
+const { default: axios } = require('axios');
+
+const { default: InstanceSetting } = require('../common/instance.api');

src/components/Tables/UsersPage/Table.js

@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+
+import { useSelector, useDispatch } from 'react-redux';
+import { Table } from 'antd';
+import { usersPage } from '../../../state/actions-creators/usersPage';
+import moment from 'moment';
+const { Column } = Table;
+
+function UsersPageTable() {
+  const dispatch = useDispatch();
+  const { data, pending } = useSelector(state => state.usersPage);
+  const [page, setPage] = useState(1);
+
+  const onPageChange = e => {
+    // 페이지네이션 번호 바뀔때 뜸.
+    console.log(e);
+    setPage(e);
+    dispatch(
+      usersPage({
+        requestPage: e
+      })
+    );
+  };
+
+  useEffect(() => {
+    dispatch(
+      usersPage({
+        requestPage: 1
+      })
+    );
+  }, [dispatch]);
+
+  // 받을 수 있는 정보 목록
+  //   {
+  //   "id": 3,
+  //   "name": "강나연",
+  //   "phoneNumber": "01075546670",
+  //   "role": "Admin",
+  //   "ticketNum": 0
+  // },
+
+  return (
+    <>
+      <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.userList : []}
+      >
+        <Column title="유저" dataIndex="id" key="id" />
+        <Column title="입금자명" dataIndex="name" key="id" />
+        <Column title="전화번호" dataIndex="phoneNumber" key="id" />
+        <Column title="구입한 티켓 매수" dataIndex="ticketNum" key="id" />
+        <Column
+          title="가입일"
+          dataIndex="createAt"
+          key="id"
+          render={element => {
+            return moment(new Date(element)).format('MM월 DD일');
+          }}
+        />
+        <Column title="어드민 여부" dataIndex="role" key="id" />
+      </Table>
+    </>
+  );
+}
+
+export default UsersPageTable;

src/components/Tables/UsersPage/UserSearch.js

@@ -0,0 +1,43 @@
+import { Button, Input, Select } from 'antd';
+import React, { useState } from 'react';
+const { Option } = Select;
+
+function UserSearch() {
+  const [searchOption, setSearchOption] = useState('입금자명');
+
+  const onOptionChange = e => {
+    console.log(e);
+    if (e === '1') {
+      setSearchOption('입금자명');
+    } else {
+      setSearchOption('전화번호');
+    }
+  };
+
+  return (
+    <>
+      <div className="site-input-group-wrapper">
+        <Input.Group compact>
+          <Select defaultValue="입금자명" onChange={onOptionChange}>
+            <Option key="1" value="1">
+              입금자명
+            </Option>
+            <Option key="2" value="2">
+              전화번호
+            </Option>
+          </Select>
+          <Input
+            style={{
+              width: 'calc(100% - 200px)'
+            }}
+            placeholder={`${searchOption} 입력`}
+          />
+          <Button type="primary">검색</Button>
+        </Input.Group>
+        <br />
+      </div>
+    </>
+  );
+}
+
+export default UserSearch;

src/components/Tables/UsersPage/UsersPage.js

@@ -1,7 +1,14 @@
 import React from 'react';
+import UsersPageTable from './Table';
+import UserSearch from './UserSearch';
 
 function UsersPage() {
-  return <div>Users Page 파이팅 🙀</div>;
+  return (
+    <div>
+      <UserSearch />
+      <UsersPageTable />
+    </div>
+  );
 }
 
 export default UsersPage;

src/state/action-types/index.js

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

src/state/action-types/usersPage.js

@@ -0,0 +1,3 @@
+export const USER_PAGE_PENDING = 'USER_PAGE_PENDING';
+export const USER_PAGE_SUCCESS = 'USER_PAGE_SUCCESS';
+export const USER_PAGE_ERROR = 'USER_PAGE_ERROR';

src/state/actions-creators/usersPage.js

@@ -0,0 +1,34 @@
+import axios from 'axios';
+import {
+  USER_PAGE_PENDING,
+  USER_PAGE_SUCCESS,
+  USER_PAGE_ERROR
+} from '../action-types';
+
+export const usersPage =
+  ({ requestPage }, callback) =>
+  async dispatch => {
+    try {
+      dispatch({ type: USER_PAGE_PENDING });
+
+      const response = await axios.get(
+        `https://api.gosrock.band/v1/users/all?order=ASC&page=${requestPage}&take=10`
+      );
+
+      console.log('포토 조회액션1', response);
+
+      const data = {
+        total: response.data.data.meta.itemCount,
+        currentPage: requestPage,
+        userList: response.data.data.data
+      };
+
+      dispatch({ type: USER_PAGE_SUCCESS, payload: data });
+
+      // 자동으로 피쳐로 넘어가게끔
+      // callback();
+    } catch (e) {
+      //400 ~
+      dispatch({ type: USER_PAGE_ERROR, payload: '조회 실패' });
+    }
+  };

src/state/reducers/index.js

@@ -2,9 +2,11 @@ import { combineReducers } from 'redux';
 import { auth } from './auth';
 import examplePagination from './examplePagination';
 import slackMessage from './slackMessage';
+import usersPage from './usersPage';
 
 export default combineReducers({
   slackMessage: slackMessage,
   auth: auth,
-  examplePagination: examplePagination
+  examplePagination: examplePagination,
+  usersPage: usersPage
 });

src/state/reducers/usersPage.js

@@ -0,0 +1,39 @@
+import {
+  USER_PAGE_PENDING,
+  USER_PAGE_SUCCESS,
+  USER_PAGE_ERROR
+} from '../action-types';
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default function (
+  state = {
+    data: {
+      totalPage: 0,
+      currentPage: 1,
+      userList: []
+    },
+    error: null,
+    pending: false
+  },
+  action
+) {
+  switch (action.type) {
+    case USER_PAGE_PENDING:
+      return { ...state, data: action.payload, error: null, pending: true };
+    case USER_PAGE_SUCCESS:
+      return { ...state, data: action.payload, error: null, pending: false };
+    case USER_PAGE_ERROR:
+      return {
+        ...state,
+        data: {
+          totalPage: 0,
+          currentPage: 1,
+          userList: []
+        },
+        error: action.payload,
+        pending: false
+      };
+    default:
+      return state;
+  }
+}