[유저리스트] 유저 조회 검색기능 추가

🚀 feat: 입금자명, 전화번호로 유저 검색 기능 #4
Gosrock · Aug 5, 2022 · 8fbcc90 · 8fbcc90
2 parents 24aecc2 + 1d21ebf
commit 8fbcc90
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 18 deletions.
diff --git 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
@@ -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">
@@ -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>

diff --git 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
@@ -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
@@ -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;
   }