From 1d21ebf93b25e7389c6783bcb29fabc84d571a36 Mon Sep 17 00:00:00 2001 From: kongnayeon Date: Fri, 5 Aug 2022 14:11:30 +0900 Subject: [PATCH] :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; }