Passing props

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

@@ -48,6 +48,8 @@ class Community extends Component {
 Community.propTypes = {
   route: PropTypes.object,
   community: PropTypes.object,
+  rejectUsername: PropTypes.func.isRequired,
+  hideRejectUsernameDialog: PropTypes.func.isRequired,
   data: PropTypes.object,
   root: PropTypes.object,
 };

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

@@ -15,6 +15,8 @@ const People = (props) => {
     onHeaderClickHandler,
     onNewPageHandler,
     totalPages,
+    setRole,
+    setCommenterStatus,
   } = props;
 
   const hasResults = !!users.length;
@@ -39,6 +41,8 @@ const People = (props) => {
           hasResults
             ? <Table
               users={users}
+              setRole={setRole}
+              setCommenterStatus={setCommenterStatus}
               onHeaderClickHandler={onHeaderClickHandler}
             />
             : <EmptyCard>{t('community.no_results')}</EmptyCard>
@@ -60,6 +64,8 @@ People.propTypes = {
   onSearchChange: PropTypes.func,
   totalPages: PropTypes.number,
   onNewPageHandler: PropTypes.func,
+  setCommenterStatus: PropTypes.func.isRequired,
+  setRole: PropTypes.func.isRequired,
 };
 
 export default People;

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

@@ -24,7 +24,7 @@ const headers = [
   }
 ];
 
-const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
+const Table = ({users, onHeaderClickHandler, setRole, setCommenterStatus, viewUserDetail}) => (
   <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
@@ -53,7 +53,7 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
             <Dropdown 
               value={row.status}
               placeholder={t('community.status')}
-              onChange={(status) => onCommenterStatusChange(row.id, status)}>     
+              onChange={(status) => setCommenterStatus(row.id, status)}>     
               <Option value={'ACTIVE'} label={t('community.active')} />
               <Option value={'BANNED'} label={t('community.banned')} />
             </Dropdown>       
@@ -62,7 +62,7 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
             <Dropdown
               value={row.roles[0] || ''}
               placeholder={t('community.role')}
-              onChange={(role) => onRoleChange(row.id, role)}>
+              onChange={(role) => setRole(row.id, role)}>
               <Option value={''} label={t('community.none')} />
               <Option value={'STAFF'} label={t('community.staff')} />
               <Option value={'MODERATOR'} label={t('community.moderator')} />
@@ -78,8 +78,8 @@ const Table = ({users, onHeaderClickHandler, onRoleChange, onCommenterStatusChan
 Table.propTypes = {
   users: PropTypes.array,
   onHeaderClickHandler: PropTypes.func.isRequired,
-  onRoleChange: PropTypes.func,
-  onCommenterStatusChange: PropTypes.func,
+  setRole: PropTypes.func.isRequired,
+  setCommenterStatus: PropTypes.func.isRequired,
   viewUserDetail: PropTypes.func,
 };
 

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

@@ -75,6 +75,8 @@ class PeopleContainer extends React.Component {
       onHeaderClickHandler={this.onHeaderClickHandler}
       onNewPageHandler={this.onNewPageHandler}
       totalPages={this.props.community.totalPagesPeople}
+      setCommenterStatus={this.props.setCommenterStatus}
+      setRole={this.props.setRole}
     />;
   }
 }
@@ -83,8 +85,8 @@ PeopleContainer.propTypes = {
   newPage: PropTypes.func,
   fetchUsers: PropTypes.func,
   updateSorting: PropTypes.func,
-  setRole: PropTypes.func,
-  setCommenterStatus: PropTypes.func,
+  setRole: PropTypes.func.isRequired,
+  setCommenterStatus: PropTypes.func.isRequired,
   community: PropTypes.object,
 };
 

package.json

@@ -160,6 +160,7 @@
     "react-input-autosize": "^1.1.4",
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",
+    "react-paginate": "^5.0.0",
     "react-recaptcha": "^2.2.6",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",

routes/api/users/index.js

@@ -16,7 +16,7 @@ router.get('/', authorization.needed('ADMIN', 'MODERATOR'), async (req, res, nex
     field = 'created_at',
     page = 1,
     asc = 'false',
-    limit = 50 // Total Per Page
+    limit = 20 // Total Per Page
   } = req.query;
 
   try {

script.sh

@@ -0,0 +1,4 @@
+for i in {1..100}
+do
+  ./bin/cli -c .env users create --email "user-x${i}@coralproject.net" --password "mysecretpassword" --name "userxxx${i}" -f
+done