Skip to content

Commit

Permalink
[v0.0.6] 유저 검색기능 추가
Browse files Browse the repository at this point in the history
[v0.0.6] 유저 검색기능 추가
  • Loading branch information
ImNM authored Aug 5, 2022
2 parents 8cf88d0 + 8fbcc90 commit 7560248
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 18 deletions.
11 changes: 8 additions & 3 deletions src/components/Tables/UsersPage/Table.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

// 받을 수 있는 정보 목록
// {
Expand Down
41 changes: 32 additions & 9 deletions src/components/Tables/UsersPage/UserSearch.js
Original file line number Diff line number Diff line change
@@ -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 (
<>
<div className="site-input-group-wrapper">
Expand All @@ -26,13 +48,14 @@ function UserSearch() {
전화번호
</Option>
</Select>
<Input
<Input.Search
style={{
width: 'calc(100% - 200px)'
}}
placeholder={`${searchOption} 입력`}
placeholder="search text"
onSearch={onSearch}
onKeyPress={handleEnter}
/>
<Button type="primary">검색</Button>
</Input.Group>
<br />
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/state/action-types/usersPage.js
Original file line number Diff line number Diff line change
@@ -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';
32 changes: 29 additions & 3 deletions src/state/actions-creators/usersPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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: '업데이트 실패' });
}
};
27 changes: 24 additions & 3 deletions src/state/reducers/usersPage.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -13,7 +15,11 @@ export default function (
userList: []
},
error: null,
pending: false
pending: false,
option: {
searchOption: 'searchName',
searchString: ''
}
},
action
) {
Expand All @@ -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;
}
Expand Down

0 comments on commit 7560248

Please sign in to comment.