Move searchValue to Redux

client/coral-admin/src/actions/community.js

@@ -6,6 +6,7 @@ import {
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
   SET_PAGE,
+  SET_SEARCH_VALUE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -50,6 +51,11 @@ export const setPage = (page) => ({
   page,
 });
 
+export const setSearchValue = (value) => ({
+  type: SET_SEARCH_VALUE,
+  value,
+});
+
 export const setRole = (id, role) => (dispatch, _, {rest}) => {
   return rest(`/users/${id}/role`, {method: 'POST', body: {role}})
     .then(() => {

client/coral-admin/src/constants/community.js

@@ -18,3 +18,5 @@ export const HIDE_BANUSER_DIALOG = `${prefix}_HIDE_BANUSER_DIALOG`;
 
 export const SHOW_REJECT_USERNAME_DIALOG = `${prefix}_SHOW_REJECT_USERNAME_DIALOG`;
 export const HIDE_REJECT_USERNAME_DIALOG = `${prefix}_HIDE_REJECT_USERNAME_DIALOG`;
+
+export const SET_SEARCH_VALUE = `${prefix}_SET_SEARCH_VALUE`;

client/coral-admin/src/reducers/community.js

@@ -4,6 +4,7 @@ import {
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
   SET_PAGE,
+  SET_SEARCH_VALUE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -17,6 +18,7 @@ const initialState = {
   isFetchingPeople: false,
   errorPeople: '',
   users: [],
+  searchValue: '',
   fieldPeople: 'created_at',
   ascPeople: false,
   totalPagesPeople: 0,
@@ -107,6 +109,11 @@ export default function community (state = initialState, action) {
       user: action.user,
       rejectUsernameDialog: true
     };
+  case SET_SEARCH_VALUE:
+    return {
+      ...state,
+      searchValue: action.value,
+    };
   default :
     return state;
   }

client/coral-admin/src/routes/Community/containers/People.js

@@ -13,19 +13,17 @@ import {
   hideRejectUsernameDialog,
   setCommenterStatus,
   setRole,
+  setSearchValue,
 } from '../../../actions/community';
 
 class PeopleContainer extends React.Component {
-  state = {
-    searchValue: '',
-    timer: null
-  };
+  timer=null;
 
   fetchUsers = (query = {}) => {
     const {community} = this.props;
 
     this.props.fetchUsers({
-      value: this.state.searchValue,
+      value: community.searchValue,
       field: community.fieldPeople,
       asc: community.ascPeople,
       ...query
@@ -46,15 +44,11 @@ class PeopleContainer extends React.Component {
   onSearchChange = (e) => {
     const value = e.target.value;
 
-    this.setState((prevState) => {
-      prevState.searchValue = value;
-      clearTimeout(prevState.timer);
-
-      prevState.timer = setTimeout(() => {
-        this.fetchUsers({value});
-      }, 350);
-      return prevState;
-    });
+    this.props.setSearchValue(value);
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.fetchUsers({value});
+    }, 350);
   }
 
   onHeaderClickHandler = (sort) => {
@@ -71,7 +65,7 @@ class PeopleContainer extends React.Component {
   render() {
     return <People
       users={this.props.community.users}
-      searchValue={this.state.searchValue}
+      searchValue={this.props.community.searchValue}
       onSearchChange={this.onSearchChange}
       onHeaderClickHandler={this.onHeaderClickHandler}
       onPageChange={this.onPageChange}
@@ -90,6 +84,7 @@ PeopleContainer.propTypes = {
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
   setCommenterStatus: PropTypes.func.isRequired,
+  setSearchValue: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
@@ -103,6 +98,7 @@ const mapDispatchToProps = (dispatch) =>
     setCommenterStatus,
     setRole,
     viewUserDetail,
+    setSearchValue,
   }, dispatch);
 
 export default connect(null, mapDispatchToProps)(PeopleContainer);