diff --git a/src/components/Tables/UsersPage/Table.js b/src/components/Tables/UsersPage/Table.js
index ba8daca..022023f 100644
--- a/src/components/Tables/UsersPage/Table.js
+++ b/src/components/Tables/UsersPage/Table.js
@@ -8,27 +8,32 @@ const { Column } = Table;
function UsersPageTable() {
const dispatch = useDispatch();
- const { data, pending } = useSelector(state => state.usersPage);
+ const { data, pending, option } = useSelector(state => state.usersPage);
const [page, setPage] = useState(1);
const onPageChange = e => {
+ console.log('page', { data });
// 페이지네이션 번호 바뀔때 뜸.
- console.log(e);
setPage(e);
dispatch(
usersPage({
+ searchOption: option ? option.searchOption : '',
+ searchString: option ? option.searchString : '',
requestPage: e
})
);
};
useEffect(() => {
+ console.log('search option: ', option.searchOption, option.searchString);
dispatch(
usersPage({
+ searchOption: option ? option.searchOption : '',
+ searchString: option ? option.searchString : '',
requestPage: 1
})
);
- }, [dispatch]);
+ }, [option]);
// 받을 수 있는 정보 목록
// {
diff --git a/src/components/Tables/UsersPage/UserSearch.js b/src/components/Tables/UsersPage/UserSearch.js
index 58976d0..6239808 100644
--- a/src/components/Tables/UsersPage/UserSearch.js
+++ b/src/components/Tables/UsersPage/UserSearch.js
@@ -1,19 +1,41 @@
-import { Button, Input, Select } from 'antd';
-import React, { useState } from 'react';
+import { Input, Select } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { updateOption } from '../../../state/actions-creators/usersPage';
const { Option } = Select;
function UserSearch() {
- const [searchOption, setSearchOption] = useState('입금자명');
+ const dispatch = useDispatch();
+ const [searchOption, setSearchOption] = useState('searchName');
+ const [searchString, setSearchString] = useState('');
const onOptionChange = e => {
- console.log(e);
if (e === '1') {
- setSearchOption('입금자명');
+ setSearchOption('searchName');
} else {
- setSearchOption('전화번호');
+ setSearchOption('phoneNumber');
}
};
+ const onSearch = e => {
+ setSearchString(e);
+ };
+
+ const handleEnter = e => {
+ if (e.key === 'Enter') {
+ onSearch(e.target.value);
+ }
+ };
+
+ useEffect(() => {
+ dispatch(
+ updateOption({
+ searchOption: searchOption,
+ searchString: searchString
+ })
+ );
+ }, [searchString]);
+
return (
<>
@@ -26,13 +48,14 @@ function UserSearch() {
전화번호
-
-
diff --git a/src/state/action-types/usersPage.js b/src/state/action-types/usersPage.js
index d5a8bb9..25dd75e 100644
--- a/src/state/action-types/usersPage.js
+++ b/src/state/action-types/usersPage.js
@@ -1,3 +1,5 @@
export const USER_PAGE_PENDING = 'USER_PAGE_PENDING';
export const USER_PAGE_SUCCESS = 'USER_PAGE_SUCCESS';
export const USER_PAGE_ERROR = 'USER_PAGE_ERROR';
+export const SEARCH_OPTION_UPDATE = 'SEARCH_OPTION_UPDATE';
+export const SEARCH_OPTION_UPDATE_ERROR = 'SEARCH_OPTION_UPDATE_ERROR';
diff --git a/src/state/actions-creators/usersPage.js b/src/state/actions-creators/usersPage.js
index 58b0a79..0a81d9b 100644
--- a/src/state/actions-creators/usersPage.js
+++ b/src/state/actions-creators/usersPage.js
@@ -2,17 +2,28 @@ import axios from 'axios';
import {
USER_PAGE_PENDING,
USER_PAGE_SUCCESS,
- USER_PAGE_ERROR
+ USER_PAGE_ERROR,
+ SEARCH_OPTION_UPDATE,
+ SEARCH_OPTION_UPDATE_ERROR
} from '../action-types';
export const usersPage =
- ({ requestPage }, callback) =>
+ ({ searchOption, searchString, 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`
+ `https://api.gosrock.band/v1/users/all`,
+ {
+ params: {
+ order: 'ASC',
+ page: requestPage,
+ take: 10,
+ phoneNumber: searchOption === 'phoneNumber' ? searchString : '',
+ searchName: searchOption === 'searchName' ? searchString : ''
+ }
+ }
);
console.log('포토 조회액션1', response);
@@ -32,3 +43,18 @@ export const usersPage =
dispatch({ type: USER_PAGE_ERROR, payload: '조회 실패' });
}
};
+
+export const updateOption =
+ ({ searchOption, searchString }, callback) =>
+ async dispatch => {
+ try {
+ const option = {
+ searchOption: searchOption,
+ searchString: searchString
+ };
+
+ dispatch({ type: SEARCH_OPTION_UPDATE, payload: option });
+ } catch (e) {
+ dispatch({ type: SEARCH_OPTION_UPDATE_ERROR, payload: '업데이트 실패' });
+ }
+ };
diff --git a/src/state/reducers/usersPage.js b/src/state/reducers/usersPage.js
index ef973c3..6c3cab8 100644
--- a/src/state/reducers/usersPage.js
+++ b/src/state/reducers/usersPage.js
@@ -1,7 +1,9 @@
import {
USER_PAGE_PENDING,
USER_PAGE_SUCCESS,
- USER_PAGE_ERROR
+ USER_PAGE_ERROR,
+ SEARCH_OPTION_UPDATE,
+ SEARCH_OPTION_UPDATE_ERROR
} from '../action-types';
// eslint-disable-next-line import/no-anonymous-default-export
@@ -13,7 +15,11 @@ export default function (
userList: []
},
error: null,
- pending: false
+ pending: false,
+ option: {
+ searchOption: 'searchName',
+ searchString: ''
+ }
},
action
) {
@@ -28,11 +34,26 @@ export default function (
data: {
totalPage: 0,
currentPage: 1,
- userList: []
+ userList: [],
+ searchOption: '',
+ searchString: ''
},
error: action.payload,
pending: false
};
+ case SEARCH_OPTION_UPDATE:
+ return {
+ ...state,
+ option: action.payload,
+ error: null,
+ pending: false
+ };
+ case SEARCH_OPTION_UPDATE_ERROR:
+ return {
+ ...state,
+ error: action.payload,
+ pending: false
+ };
default:
return state;
}