Merge pull request #135 from partio-scout/revert-134-bugfix/participa…

…ntlist-count-out-of-sync

Revert "Bugfix/participantlist count out of sync"

src/client/actions/ParticipantActions.js

@@ -17,7 +17,7 @@ export function getParticipantActions(alt, participantResource) {
       return err;
     }
 
-    loadParticipantList(offset, limit, order, filter, countParticipants) {
+    loadParticipantList(offset, limit, order, filter) {
       function getLoopbackOrderParameter() {
         if (!order) {
           return undefined;
@@ -38,35 +38,41 @@ export function getParticipantActions(alt, participantResource) {
         skip: offset,
         limit: limit,
         order: getLoopbackOrderParameter(),
-        count: countParticipants,
       };
 
-      const filterString = `filter=${encodeURIComponent(JSON.stringify(filters))}`;
-
       return dispatch => {
-        dispatch(countParticipants);
-        participantResource.findAll(filterString)
-          .then(participantList => {
-            if (countParticipants) {
-              this.participantListUpdated(participantList.result, participantList.count);
-            } else {
-              this.participantListUpdated(participantList);
-            }
-          }, err => this.participantListUpdateFailed(err));
+        dispatch();
+        participantResource.findAll(`filter=${encodeURIComponent(JSON.stringify(filters))}`)
+          .then(participantList => this.participantListUpdated(participantList),
+                err => this.participantListUpdateFailed(err));
       };
     }
 
-    participantListUpdated(participants, newCount) {
-      return {
-        participants: participants,
-        newCount: newCount,
-      };
+    participantListUpdated(participants) {
+      return participants;
     }
 
     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,6 +2,7 @@ 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';
@@ -113,6 +114,7 @@ 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);
@@ -223,6 +225,7 @@ 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>
@@ -260,7 +263,7 @@ export function getParticipantListPage(participantStore, participantActions, sea
                     }
                   </tr>
                 </thead>
-                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } columnCount={ Object.keys(columnPropertyToLabelMapping).length } />
+                <ParticipantRowsContainer isChecked={ this.isChecked } checkboxCallback={ this.handleCheckboxChange } />
                 <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 || 0 };
+              return { store: participantStore, value: participantStore.getState().participantCount };
             },
           }
         }

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import Spinner from 'react-spinner';
+import AltContainer from 'alt-container';
+import { pureShouldComponentUpdate } from '../../../utils';
 
 function Count(props) {
   return (
@@ -13,52 +14,20 @@ 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) {
-  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 }/>
-        );
-      }
-    }
+  function ParticipantCount() {
+    return (
+      <AltContainer
+        stores={
+          {
+            count: () => ({ store: participantStore, value: participantStore.getState().participantCount }),
+          }
+        }
+        shouldComponentUpdate={ pureShouldComponentUpdate }
+      >
+        <Count />
+      </AltContainer>
+    );
   }
 
   return ParticipantCount;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { pureShouldComponentUpdate } from '../../../utils';
+
+export function getParticipantCountUpdater(participantActions) {
+  class ParticipantCountUpdater extends React.Component {
+    shouldComponentUpdate(nextProps, nextState) {
+      return pureShouldComponentUpdate.call(this, nextProps, nextState);
+    }
+
+    render() {
+      participantActions.loadParticipantCount.defer(this.props.filter);
+      return null;
+    }
+  }
+
+  ParticipantCountUpdater.propTypes = {
+    filter: React.PropTypes.object,
+  };
+
+  return ParticipantCountUpdater;
+}
+

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

@@ -1,36 +1,25 @@
 import React from 'react';
-import _ from 'lodash';
+import { pureShouldComponentUpdate } from '../../../utils';
 
 export function getParticipantListUpdater(participantActions) {
   class ParticipantListUpdater extends React.Component {
-    reloadList(nextProps, recount) {
+    reloadList() {
       const {
         offset,
         limit,
         order,
         filter,
-      } = nextProps;
+      } = this.props;
 
-      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);
-      }
+      participantActions.loadParticipantList.defer(offset, limit, order, filter);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
-      return false;
+      return pureShouldComponentUpdate.call(this, nextProps, nextState);
     }
 
     render() {
+      this.reloadList();
       return null;
     }
   }

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import Spinner from 'react-spinner';
+import AltContainer from 'alt-container';
 import { ParticipantRow } from '../../../components';
+import { pureShouldComponentUpdate } from '../../../utils';
 
 function Tbody(props) {
   const elements = props.elements || [];
@@ -17,59 +18,26 @@ Tbody.propTypes = {
 };
 
 export function getParticipantRowsContainer(participantStore) {
-  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 } />
-        );
-    }
+  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>
+    );
   }
 
   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,18 +16,8 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
       this.participantDetails = participant;
     }
 
-    handleLoadParticipantList(countParticipants) {
-      this.participants = undefined;
-      if (countParticipants) {
-        this.participantCount = undefined;
-      }
-    }
-
-    handleParticipantListUpdated({ participants, newCount }) {
+    handleParticipantListUpdated(participants) {
       this.participants = participants;
-      if (newCount !== undefined) {
-        this.participantCount = newCount;
-      }
     }
 
     handleParticipantCountUpdated(newCount) {
@@ -39,9 +29,9 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
     }
 
     resetAllData() {
-      this.participants = undefined;
+      this.participants = [ ];
       this.participantDetails = {};
-      this.participantCount = undefined;
+      this.participantCount = 0;
 
       this.localGroups = [''];
       this.campGroups = [''];