🔨 fix: #4

Gosrock · Aug 5, 2022 · 1d21ebf · 1d21ebf
1 parent fe4a70e
commit 1d21ebf
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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,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
@@ -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;
   }