diff --git a/src/components/Tables/UsersPage/Table.js b/src/components/Tables/UsersPage/Table.js index ba8daca..7361f99 100644 --- a/src/components/Tables/UsersPage/Table.js +++ b/src/components/Tables/UsersPage/Table.js @@ -13,10 +13,11 @@ function UsersPageTable() { const onPageChange = e => { // 페이지네이션 번호 바뀔때 뜸. - console.log(e); setPage(e); dispatch( usersPage({ + searchOption: '', + searchString: '', requestPage: e }) ); @@ -25,6 +26,8 @@ function UsersPageTable() { useEffect(() => { dispatch( usersPage({ + searchOption: '', + searchString: '', requestPage: 1 }) ); diff --git a/src/components/Tables/UsersPage/UserSearch.js b/src/components/Tables/UsersPage/UserSearch.js index 58976d0..888c9b5 100644 --- a/src/components/Tables/UsersPage/UserSearch.js +++ b/src/components/Tables/UsersPage/UserSearch.js @@ -1,19 +1,42 @@ -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 { usersPage } 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( + usersPage({ + searchOption: `${searchOption}=`, + searchString: `${encodeURI(searchString)}&`, + requestPage: 1 + }) + ); + }, [searchOption, searchString]); + return ( <>
@@ -26,13 +49,14 @@ function UserSearch() { 전화번호 - -
diff --git a/src/state/actions-creators/usersPage.js b/src/state/actions-creators/usersPage.js index 58b0a79..34b7ee6 100644 --- a/src/state/actions-creators/usersPage.js +++ b/src/state/actions-creators/usersPage.js @@ -6,15 +6,18 @@ import { } 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?${searchOption}${searchString}order=ASC&page=${requestPage}&take=10` ); + console.log( + `https://api.gosrock.band/v1/users/all?${searchOption}${searchString}order=ASC&page=${requestPage}&take=10` + ); console.log('포토 조회액션1', response); const data = {