From fe4a70e556c16e822d170de45fde7a1fd32c1e21 Mon Sep 17 00:00:00 2001 From: kongnayeon Date: Wed, 3 Aug 2022 22:48:00 +0900 Subject: [PATCH 1/2] =?UTF-8?q?:rocket:=20feat:=20=EC=9E=85=EA=B8=88?= =?UTF-8?q?=EC=9E=90=EB=AA=85,=20=EC=A0=84=ED=99=94=EB=B2=88=ED=98=B8?= =?UTF-8?q?=EB=A1=9C=20=EC=9C=A0=EC=A0=80=20=EA=B2=80=EC=83=89=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20#4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Tables/UsersPage/Table.js | 5 ++- src/components/Tables/UsersPage/UserSearch.js | 42 +++++++++++++++---- src/state/actions-creators/usersPage.js | 7 +++- 3 files changed, 42 insertions(+), 12 deletions(-) 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 = { From 1d21ebf93b25e7389c6783bcb29fabc84d571a36 Mon Sep 17 00:00:00 2001 From: kongnayeon Date: Fri, 5 Aug 2022 14:11:30 +0900 Subject: [PATCH 2/2] :hammer: fix: #4 --- src/components/Tables/UsersPage/Table.js | 14 ++++---- src/components/Tables/UsersPage/UserSearch.js | 11 +++---- src/state/action-types/usersPage.js | 2 ++ src/state/actions-creators/usersPage.js | 33 ++++++++++++++++--- src/state/reducers/usersPage.js | 27 +++++++++++++-- 5 files changed, 67 insertions(+), 20 deletions(-) diff --git a/src/components/Tables/UsersPage/Table.js b/src/components/Tables/UsersPage/Table.js index 7361f99..022023f 100644 --- a/src/components/Tables/UsersPage/Table.js +++ b/src/components/Tables/UsersPage/Table.js @@ -8,30 +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 }); // 페이지네이션 번호 바뀔때 뜸. setPage(e); dispatch( usersPage({ - searchOption: '', - searchString: '', + searchOption: option ? option.searchOption : '', + searchString: option ? option.searchString : '', requestPage: e }) ); }; useEffect(() => { + console.log('search option: ', option.searchOption, option.searchString); dispatch( usersPage({ - searchOption: '', - searchString: '', + 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 888c9b5..6239808 100644 --- a/src/components/Tables/UsersPage/UserSearch.js +++ b/src/components/Tables/UsersPage/UserSearch.js @@ -1,7 +1,7 @@ import { Input, Select } from 'antd'; import React, { useEffect, useState } from 'react'; import { useDispatch } from 'react-redux'; -import { usersPage } from '../../../state/actions-creators/usersPage'; +import { updateOption } from '../../../state/actions-creators/usersPage'; const { Option } = Select; function UserSearch() { @@ -29,13 +29,12 @@ function UserSearch() { useEffect(() => { dispatch( - usersPage({ - searchOption: `${searchOption}=`, - searchString: `${encodeURI(searchString)}&`, - requestPage: 1 + updateOption({ + searchOption: searchOption, + searchString: searchString }) ); - }, [searchOption, searchString]); + }, [searchString]); return ( <> 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 34b7ee6..0a81d9b 100644 --- a/src/state/actions-creators/usersPage.js +++ b/src/state/actions-creators/usersPage.js @@ -2,7 +2,9 @@ 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 = @@ -12,12 +14,18 @@ export const usersPage = dispatch({ type: USER_PAGE_PENDING }); const response = await axios.get( - `https://api.gosrock.band/v1/users/all?${searchOption}${searchString}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( - `https://api.gosrock.band/v1/users/all?${searchOption}${searchString}order=ASC&page=${requestPage}&take=10` - ); console.log('포토 조회액션1', response); const data = { @@ -35,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; }