Bugfix/participantlist count out of sync

package.json

@@ -68,6 +68,7 @@
     "react-dom": "^0.14.3",
     "react-router": "^2.0.0",
     "react-router-bootstrap": "^0.20.1",
+    "react-spinner": "^0.2.6",
     "sass-loader": "^3.1.2",
     "serve-favicon": "^2.3.0",
     "style-loader": "^0.13.0",

src/client/actions/ParticipantActions.js

@@ -17,7 +17,7 @@ export function getParticipantActions(alt, participantResource) {
       return err;
     }
 
-    loadParticipantList(offset, limit, order, filter) {
+    loadParticipantList(offset, limit, order, filter, countParticipants) {
       function getLoopbackOrderParameter() {
         if (!order) {
           return undefined;
@@ -38,41 +38,35 @@ export function getParticipantActions(alt, participantResource) {
         skip: offset,
         limit: limit,
         order: getLoopbackOrderParameter(),
+        count: countParticipants,
       };
 
+      const filterString = `filter=${encodeURIComponent(JSON.stringify(filters))}`;
+
       return dispatch => {
-        dispatch();
-        participantResource.findAll(`filter=${encodeURIComponent(JSON.stringify(filters))}`)
-          .then(participantList => this.participantListUpdated(participantList),
-                err => this.participantListUpdateFailed(err));
+        dispatch(countParticipants);
+        participantResource.findAll(filterString)
+          .then(participantList => {
+            if (countParticipants) {
+              this.participantListUpdated(participantList.result, participantList.count);
+            } else {
+              this.participantListUpdated(participantList);
+            }
+          }, err => this.participantListUpdateFailed(err));
       };
     }
 
-    participantListUpdated(participants) {
-      return participants;
+    participantListUpdated(participants, newCount) {
+      return {
+        participants: participants,
+        newCount: newCount,
+      };
     }
 
     participantListUpdateFailed(error) {
       return error;
     }
 
-    loadParticipantCount(filter) {
-      return dispatch => {
-        dispatch();
-        participantResource.raw('get', 'count', { filters: `where=${encodeURIComponent(JSON.stringify(filter))}` })
-          .then(response => this.participantCountUpdated(response.count),
-                err => this.participantCountUpdateFailed(err));
-      };
-    }
-
-    participantCountUpdated(newCount) {
-      return newCount;
-    }
-
-    participantCountUpdateFailed(err) {
-      return err;
-    }
-
     updateParticipantPresences(ids, newValue, offset, limit, order, filter) {
       participantResource.raw('post', 'massAssign', { body: { ids: ids, newValue: newValue, fieldName: 'presence' } })
         .then(response => this.loadParticipantList(offset, limit, order, filter),

src/client/components/ParticipantListPage/ParticipantListPage.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import _ from 'lodash';
 import { Table, Grid, Row, Col, Input, Button } from 'react-bootstrap';
 import { getParticipantListUpdater } from './containers/ParticipantListUpdater';
-import { getParticipantCountUpdater } from './containers/ParticipantCountUpdater';
 import { getSortableHeaderCellContainer } from './containers/SortableHeaderCellContainer';
 import { getListOffsetSelectorContainer } from './containers/ListOffsetSelectorContainer';
 import { getParticipantRowsContainer } from './containers/ParticipantRowsContainer';
@@ -114,7 +113,6 @@ export function getSelectAll() {
 
 export function getParticipantListPage(participantStore, participantActions, searchFilterActions, searchFilterStore) {
   const ParticipantListUpdater = getParticipantListUpdater(participantActions);
-  const ParticipantCountUpdater = getParticipantCountUpdater(participantActions);
   const SortableHeaderCellContainer = getSortableHeaderCellContainer();
   const ListOffsetSelectorContainer = getListOffsetSelectorContainer(participantStore);
   const ParticipantRowsContainer = getParticipantRowsContainer(participantStore);
@@ -225,7 +223,6 @@ export function getParticipantListPage(participantStore, participantActions, sea
       return (
         <Grid fluid>
           <ParticipantListUpdater order={ order } offset={ offset } limit={ limit } filter={ filter } />
-          <ParticipantCountUpdater filter={ filter } />
           <Row>
             <Col md={ 12 }>
               <h1>Leiriläiset</h1>
@@ -263,7 +260,7 @@ export function getParticipantListPage(participantStore, participantActions, sea
                     }
                   </tr>
                 </thead>
-                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } />
+                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } columnCount={ Object.keys(columnPropertyToLabelMapping).length } />
                 <tbody className="tfooter">
                   <tr>
                     <td><SelectAll checked={ this.state.allChecked } onChange={ this.checkAll } /></td>

src/client/components/ParticipantListPage/containers/ListOffsetSelectorContainer.jsx

@@ -10,7 +10,7 @@ export function getListOffsetSelectorContainer(participantStore) {
         stores={
           {
             count: function() {
-              return { store: participantStore, value: participantStore.getState().participantCount };
+              return { store: participantStore, value: participantStore.getState().participantCount || 0 };
             },
           }
         }

src/client/components/ParticipantListPage/containers/ParticipantCount.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import AltContainer from 'alt-container';
-import { pureShouldComponentUpdate } from '../../../utils';
+import Spinner from 'react-spinner';
 
 function Count(props) {
   return (
@@ -14,20 +13,52 @@ Count.propTypes = {
   count: React.PropTypes.number,
 };
 
+function CountSpinner() {
+  return (
+    <div className="participant-count well">
+      Hakutulokset
+      <div className="h2"><Spinner /></div>
+    </div>
+  );
+}
+
 export function getParticipantCount(participantStore) {
-  function ParticipantCount() {
-    return (
-      <AltContainer
-        stores={
-          {
-            count: () => ({ store: participantStore, value: participantStore.getState().participantCount }),
-          }
-        }
-        shouldComponentUpdate={ pureShouldComponentUpdate }
-      >
-        <Count />
-      </AltContainer>
-    );
+  class ParticipantCount extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.state = this.extractState();
+
+      this.onStoreChanged = this.onStoreChanged.bind(this);
+    }
+
+    componentDidMount() {
+      participantStore.listen(this.onStoreChanged);
+    }
+
+    componentWillUnmount() {
+      participantStore.unlisten(this.onStoreChanged);
+    }
+
+    onStoreChanged() {
+      this.setState(this.extractState());
+    }
+
+    extractState() {
+      return { count: participantStore.getState().participantCount };
+    }
+
+    render() {
+      if (this.state.count === undefined) {
+        return (
+          <CountSpinner />
+        );
+      } else {
+        return (
+          <Count count={ this.state.count }/>
+        );
+      }
+    }
   }
 
   return ParticipantCount;

src/client/components/ParticipantListPage/containers/ParticipantListUpdater.jsx

@@ -1,25 +1,36 @@
 import React from 'react';
-import { pureShouldComponentUpdate } from '../../../utils';
+import _ from 'lodash';
 
 export function getParticipantListUpdater(participantActions) {
   class ParticipantListUpdater extends React.Component {
-    reloadList() {
+    reloadList(nextProps, recount) {
       const {
         offset,
         limit,
         order,
         filter,
-      } = this.props;
+      } = nextProps;
 
-      participantActions.loadParticipantList.defer(offset, limit, order, filter);
+      participantActions.loadParticipantList(offset, limit, order, filter, recount);
+    }
+
+    componentWillMount() {
+      this.reloadList(this.props, true);
+    }
+
+    componentWillReceiveProps(nextProps) {
+      if (!_.isEqual(this.props, nextProps)) {
+        const recount = !_.isEqual(this.props.filter, nextProps.filter);
+
+        this.reloadList(nextProps, recount);
+      }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return pureShouldComponentUpdate.call(this, nextProps, nextState);
+      return false;
     }
 
     render() {
-      this.reloadList();
       return null;
     }
   }

src/client/components/ParticipantListPage/containers/ParticipantRowsContainer.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import AltContainer from 'alt-container';
+import Spinner from 'react-spinner';
 import { ParticipantRow } from '../../../components';
-import { pureShouldComponentUpdate } from '../../../utils';
 
 function Tbody(props) {
   const elements = props.elements || [];
@@ -18,26 +17,59 @@ Tbody.propTypes = {
 };
 
 export function getParticipantRowsContainer(participantStore) {
-  function ParticipantRowsContainer({ isChecked, checkboxCallback }) {
-    const rowCreator = element => <ParticipantRow key={ element.participantId } isChecked={ isChecked } checkboxCallback={ checkboxCallback } participant={ element } />;
-
-    return (
-      <AltContainer
-        stores={
-          {
-            elements: () => ({ store: participantStore, value: participantStore.getState().participants }),
-          }
-        }
-        shouldComponentUpdate={ pureShouldComponentUpdate }
-      >
-        <Tbody rowCreator={ rowCreator } />
-      </AltContainer>
-    );
+  class ParticipantRowsContainer extends React.Component {
+    constructor(props) {
+      super(props);
+
+      this.onStoreChange = this.onStoreChange.bind(this);
+
+      this.state = this.extractState();
+    }
+
+    componentDidMount() {
+      participantStore.listen(this.onStoreChange);
+    }
+
+    componentWillUnmount() {
+      participantStore.unlisten(this.onStoreChange);
+    }
+
+    onStoreChange() {
+      this.setState(this.extractState());
+    }
+
+    extractState() {
+      return { participants: participantStore.getState().participants };
+    }
+
+    render() {
+      const {
+        isChecked,
+        checkboxCallback,
+        columnCount,
+      } = this.props;
+
+      const rowCreator = element => <ParticipantRow key={ element.participantId } isChecked={ isChecked } checkboxCallback={ checkboxCallback } participant={ element } />;
+
+      return this.state.participants === undefined
+        ? (
+          <tbody>
+            <tr>
+              <td colSpan={ columnCount }>
+                <Spinner />
+              </td>
+            </tr>
+          </tbody>
+        ) : (
+          <Tbody rowCreator={ rowCreator } elements={ this.state.participants } />
+        );
+    }
   }
 
   ParticipantRowsContainer.propTypes = {
     isChecked: React.PropTypes.func,
     checkboxCallback: React.PropTypes.func,
+    columnCount: React.PropTypes.number,
   };
 
   return ParticipantRowsContainer;

src/client/stores/ParticipantStore.js

@@ -5,8 +5,8 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
 
       this.bindListeners({
         handleUpdateParticipantById: ParticipantActions.UPDATE_PARTICIPANT_BY_ID,
+        handleLoadParticipantList: ParticipantActions.LOAD_PARTICIPANT_LIST,
         handleParticipantListUpdated: ParticipantActions.PARTICIPANT_LIST_UPDATED,
-        handleParticipantCountUpdated: ParticipantActions.PARTICIPANT_COUNT_UPDATED,
         handleParticipantPropertyUpdated: ParticipantActions.PARTICIPANT_PROPERTY_UPDATED,
         resetAllData: RegistryUserActions.RESET_ALL_DATA,
       });
@@ -16,8 +16,18 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
       this.participantDetails = participant;
     }
 
-    handleParticipantListUpdated(participants) {
+    handleLoadParticipantList(countParticipants) {
+      this.participants = undefined;
+      if (countParticipants) {
+        this.participantCount = undefined;
+      }
+    }
+
+    handleParticipantListUpdated({ participants, newCount }) {
       this.participants = participants;
+      if (newCount !== undefined) {
+        this.participantCount = newCount;
+      }
     }
 
     handleParticipantCountUpdated(newCount) {
@@ -29,9 +39,9 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
     }
 
     resetAllData() {
-      this.participants = [ ];
+      this.participants = undefined;
       this.participantDetails = {};
-      this.participantCount = 0;
+      this.participantCount = undefined;
 
       this.localGroups = [''];
       this.campGroups = [''];