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; }