Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Bugfix/participantlist count out of sync" #135

Merged
merged 1 commit into from
Jul 17, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 24 additions & 18 deletions src/client/actions/ParticipantActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
},
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}

Original file line number Diff line number Diff line change
@@ -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;
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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 || [];
Expand All @@ -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;
Expand Down
18 changes: 4 additions & 14 deletions src/client/stores/ParticipantStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -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) {
Expand All @@ -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 = [''];
Expand Down
Loading