Set current page declaratively for People

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

@@ -5,7 +5,7 @@ import {
   FETCH_USERS_SUCCESS,
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
-  COMMENTERS_NEW_PAGE,
+  SET_PAGE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -45,8 +45,9 @@ export const updateSorting = (sort) => ({
   sort
 });
 
-export const newPage = () => ({
-  type: COMMENTERS_NEW_PAGE
+export const setPage = (page) => ({
+  type: SET_PAGE,
+  page,
 });
 
 export const setRole = (id, role) => (dispatch, _, {rest}) => {

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

@@ -1,18 +1,20 @@
-export const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
-export const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
-export const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';
+const prefix = 'COMMUNITY';
 
-export const SORT_UPDATE = 'SORT_UPDATE';
-export const COMMENTERS_NEW_PAGE = 'COMMENTERS_NEW_PAGE';
-export const SET_ROLE = 'SET_ROLE';
-export const SET_COMMENTER_STATUS = 'SET_COMMENTER_STATUS';
+export const FETCH_USERS_REQUEST = `${prefix}_FETCH_USERS_REQUEST`;
+export const FETCH_USERS_SUCCESS = `${prefix}_FETCH_USERS_SUCCESS`;
+export const FETCH_USERS_FAILURE = `${prefix}_FETCH_USERS_FAILURE`;
 
-export const FETCH_FLAGGED_COMMENTERS_REQUEST = 'FETCH_FLAGGED_COMMENTERS_REQUEST';
-export const FETCH_FLAGGED_COMMENTERS_SUCCESS = 'FETCH_FLAGGED_COMMENTERS_SUCCESS';
-export const FETCH_FLAGGED_COMMENTERS_FAILURE = 'FETCH_FLAGGED_COMMENTERS_FAILURE';
+export const SORT_UPDATE = `${prefix}_SORT_UPDATE`;
+export const SET_PAGE = `${prefix}_SET_PAGE`;
+export const SET_ROLE = `${prefix}_SET_ROLE`;
+export const SET_COMMENTER_STATUS = `${prefix}_SET_COMMENTER_STATUS`;
 
-export const SHOW_BANUSER_DIALOG = 'SHOW_BANUSER_DIALOG';
-export const HIDE_BANUSER_DIALOG = 'HIDE_BANUSER_DIALOG';
+export const FETCH_FLAGGED_COMMENTERS_REQUEST = `${prefix}_FETCH_FLAGGED_COMMENTERS_REQUEST`;
+export const FETCH_FLAGGED_COMMENTERS_SUCCESS = `${prefix}_FETCH_FLAGGED_COMMENTERS_SUCCESS`;
+export const FETCH_FLAGGED_COMMENTERS_FAILURE = `${prefix}_FETCH_FLAGGED_COMMENTERS_FAILURE`;
 
-export const SHOW_REJECT_USERNAME_DIALOG = 'SHOW_REJECT_USERNAME_DIALOG';
-export const HIDE_REJECT_USERNAME_DIALOG = 'HIDE_REJECT_USERNAME_DIALOG';
+export const SHOW_BANUSER_DIALOG = `${prefix}_SHOW_BANUSER_DIALOG`;
+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`;

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

@@ -3,6 +3,7 @@ import {
   FETCH_USERS_SUCCESS,
   FETCH_USERS_FAILURE,
   SORT_UPDATE,
+  SET_PAGE,
   SET_ROLE,
   SET_COMMENTER_STATUS,
   SHOW_BANUSER_DIALOG,
@@ -52,6 +53,11 @@ export default function community (state = initialState, action) {
       users, // Sets to normal array
     };
   }
+  case SET_PAGE:
+    return {
+      ...state,
+      pagePeople: action.page,
+    };
   case SET_ROLE : {
     const commenters = state.users;
     const idx = commenters.findIndex((el) => el.id === action.id);

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

@@ -13,7 +13,7 @@ const People = (props) => {
     searchValue,
     onSearchChange,
     onHeaderClickHandler,
-    onNewPageHandler,
+    onPageChange,
     totalPages,
     setRole,
     setCommenterStatus,
@@ -47,7 +47,7 @@ const People = (props) => {
               setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
               pageCount={totalPages}
-              onPageChange={onNewPageHandler}
+              onPageChange={onPageChange}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
         }
@@ -62,7 +62,7 @@ People.propTypes = {
   searchValue: PropTypes.string,
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
-  onNewPageHandler: PropTypes.func,
+  onPageChange: PropTypes.func,
   setCommenterStatus: PropTypes.func.isRequired,
   setRole: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func.isRequired,

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

@@ -9,7 +9,7 @@ import {viewUserDetail} from '../../../actions/userDetail';
 import {
   fetchUsers,
   updateSorting,
-  newPage,
+  setPage,
   hideRejectUsernameDialog,
   setCommenterStatus,
   setRole,
@@ -23,7 +23,7 @@ class PeopleContainer extends React.Component {
 
   fetchUsers = (query = {}) => {
     const {community} = this.props;
-    
+
     this.props.fetchUsers({
       value: this.state.searchValue,
       field: community.fieldPeople,
@@ -62,19 +62,19 @@ class PeopleContainer extends React.Component {
     this.fetchUsers();
   }
 
-  onNewPageHandler = ({selected}) => {
+  onPageChange = ({selected}) => {
     const page = selected + 1;
-    this.props.newPage(page);
+    this.props.setPage(page);
     this.fetchUsers({page});
   }
 
   render() {
-    return <People 
+    return <People
       users={this.props.community.users}
       searchValue={this.state.searchValue}
       onSearchChange={this.onSearchChange}
       onHeaderClickHandler={this.onHeaderClickHandler}
-      onNewPageHandler={this.onNewPageHandler}
+      onPageChange={this.onPageChange}
       totalPages={this.props.community.totalPagesPeople}
       setCommenterStatus={this.props.setCommenterStatus}
       setRole={this.props.setRole}
@@ -84,7 +84,7 @@ class PeopleContainer extends React.Component {
 }
 
 PeopleContainer.propTypes = {
-  newPage: PropTypes.func,
+  setPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
   setRole: PropTypes.func.isRequired,
@@ -95,7 +95,7 @@ PeopleContainer.propTypes = {
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
-    newPage,
+    setPage,
     fetchUsers,
     updateSorting,
     hideRejectUsernameDialog,

client/coral-ui/components/Paginate.js

@@ -4,9 +4,10 @@ import ReactPaginate from 'react-paginate';
 import styles from './Paginate.css';
 import Icon from './Icon';
 
-const Paginate = ({pageCount, onPageChange}) => (
+const Paginate = ({pageCount, page, onPageChange}) => (
   <ReactPaginate
     initialPage={0}
+    forcePage={page}
     pageCount={pageCount}
     pageRangeDisplayed={5}
     marginPagesDisplayed={2}
@@ -26,6 +27,7 @@ const Paginate = ({pageCount, onPageChange}) => (
 );
 
 Paginate.propTypes = {
+  page: PropTypes.number.isRequired,
   pageCount: PropTypes.number.isRequired,
   onPageChange: PropTypes.func.isRequired,
 };