diff --git a/opentech/static_src/src/app/src/components/Listing/index.js b/opentech/static_src/src/app/src/components/Listing/index.js index dd8550bba31765cb968c9089e3997281148119f0..42a5186f6120d213b9dee27d930fef8204325d1c 100644 --- a/opentech/static_src/src/app/src/components/Listing/index.js +++ b/opentech/static_src/src/app/src/components/Listing/index.js @@ -8,6 +8,12 @@ import './style.scss'; export default class Listing extends React.Component { renderListItems() { + if (this.props.isLoading) { + return <ListingItem title={"Loading..."} />; + } else if (this.props.isError) { + return <ListingItem title={"Something went wrong. Please try again later."} />; + } + const listItems = []; for (const item of this.props.items) { listItems.push( @@ -31,6 +37,7 @@ export default class Listing extends React.Component { } render() { + const { isLoading, isError } = this.props; return ( <div className="listing"> <div className="listing__header"> @@ -43,7 +50,7 @@ export default class Listing extends React.Component { </form> </div> <ul className="listing__list"> - {this.renderListItems()} + {this.renderListItems()} </ul> </div> ); @@ -59,4 +66,6 @@ Listing.propTypes = { id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), })), })), + isLoading: PropTypes.bool, + isError: PropTypes.bool, }; diff --git a/opentech/static_src/src/app/src/containers/ByStatusListing.js b/opentech/static_src/src/app/src/containers/ByStatusListing.js index 6e4c26e6869b9f3dbd37d930de85c1f5739f7852..58aaf392d6d7ee0a3a1ecae152a36ff2d7dd0e4d 100644 --- a/opentech/static_src/src/app/src/containers/ByStatusListing.js +++ b/opentech/static_src/src/app/src/containers/ByStatusListing.js @@ -3,7 +3,12 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux' import Listing from '@components/Listing'; -import { getCurrentRound, getCurrentRoundSubmissionsByStatus } from '@selectors/submissions'; +import { + getCurrentRound, + getCurrentRoundSubmissionsByStatus, + getSubmissionsByRoundErrorState, + getSubmissionsByRoundLoadingState, +} from '@selectors/submissions'; import { setCurrentSubmissionRound, fetchSubmissionsByRound } from '@actions/submissions'; @@ -25,7 +30,8 @@ class ByStatusListing extends React.Component { } render() { - return <Listing items={this.getListingItems()} />; + const { isLoading, isError } = this.props; + return <Listing isLoading={isLoading} isError={isError} items={this.getListingItems()} />; } getListingItems() { @@ -43,6 +49,8 @@ class ByStatusListing extends React.Component { const mapStateToProps = state => ({ items: getCurrentRoundSubmissionsByStatus(state), roundId: getCurrentRound(state), + isError: getSubmissionsByRoundErrorState(state), + isLoading: getSubmissionsByRoundLoadingState(state), }); const mapDispatchToProps = dispatch => ({ diff --git a/opentech/static_src/src/app/src/redux/actions/submissions.js b/opentech/static_src/src/app/src/redux/actions/submissions.js index fc6f8203d9958f8e5810a96605de8fd03e6b3ef4..b2e5ad27a7a73744236274d38d24f6e421ca7f9d 100644 --- a/opentech/static_src/src/app/src/redux/actions/submissions.js +++ b/opentech/static_src/src/app/src/redux/actions/submissions.js @@ -1,28 +1,30 @@ import api from '@api'; +// Submissions by round export const SET_CURRENT_SUBMISSION_ROUND = 'SET_CURRENT_SUBMISSION_ROUND'; - export const UPDATE_SUBMISSIONS_BY_ROUND = 'UPDATE_SUBMISSIONS_BY_ROUND'; +export const START_LOADING_SUBMISSIONS_BY_ROUND = 'START_LOADING_SUBMISSIONS_BY_ROUND'; +export const FAIL_LOADING_SUBMISSIONS_BY_ROUND = 'FAIL_LOADING_SUBMISSIONS_BY_ROUND'; + export const setCurrentSubmissionRound = id => ({ type: SET_CURRENT_SUBMISSION_ROUND, id, }); -export const fetchSubmissionsByRound = id => { +export const fetchSubmissionsByRound = roundId => { return async function(dispatch) { - //dispatch(fetchSubmissionsByRoundBegin()); + dispatch(startLoadingSubmissionsByRound(roundId)); try { - const response = await api.fetchSubmissionsByRound(id); + const response = await api.fetchSubmissionsByRound(roundId); const json = await response.json(); if (!response.ok) { - // handle error + dispatch(failLoadingSubmissionsByRound(roundId)); } - dispatch(updateSubmissionsByRound(id, json)); + dispatch(updateSubmissionsByRound(roundId, json)); } catch (e) { - console.error(e); - // handle error + dispatch(failLoadingSubmissionsByRound(roundId)); } }; }; @@ -33,3 +35,16 @@ export const updateSubmissionsByRound = (roundId, data) => ({ roundId, data, }); + + +const startLoadingSubmissionsByRound = roundId => ({ + type: START_LOADING_SUBMISSIONS_BY_ROUND, + roundId, +}); + + + +const failLoadingSubmissionsByRound = roundId => ({ + type: FAIL_LOADING_SUBMISSIONS_BY_ROUND, + roundId, +}); diff --git a/opentech/static_src/src/app/src/redux/reducers/submissions.js b/opentech/static_src/src/app/src/redux/reducers/submissions.js index 2f82a4ff26dd28e36b9299543ede1e47205f4f24..3497bf910622bb408a5d5255e92d891a187bd1dc 100644 --- a/opentech/static_src/src/app/src/redux/reducers/submissions.js +++ b/opentech/static_src/src/app/src/redux/reducers/submissions.js @@ -1,8 +1,15 @@ -import { SET_CURRENT_SUBMISSION_ROUND, UPDATE_SUBMISSIONS_BY_ROUND } from '@actions/submissions'; +import { + FAIL_LOADING_SUBMISSIONS_BY_ROUND, + SET_CURRENT_SUBMISSION_ROUND, + START_LOADING_SUBMISSIONS_BY_ROUND, + UPDATE_SUBMISSIONS_BY_ROUND, +} from '@actions/submissions'; const initialState = { currentRound: null, - itemsByRound: {} + itemsByRound: {}, + itemsByRoundLoadingError: false, + itemsByRoundLoading: false, }; export default function submissions(state = initialState, action) { @@ -22,6 +29,20 @@ export default function submissions(state = initialState, action) { ...state.itemsByRound, ...newData, }, + itemsByRoundLoading: false, + itemsByRoundLoadingError: false, + }; + case FAIL_LOADING_SUBMISSIONS_BY_ROUND: + return { + ...state, + itemsByRoundLoading: false, + itemsByRoundLoadingError: true, + }; + case START_LOADING_SUBMISSIONS_BY_ROUND: + return { + ...state, + itemsByRoundLoading: true, + itemsByRoundLoadingError: false, }; default: return state; diff --git a/opentech/static_src/src/app/src/redux/selectors/submissions.js b/opentech/static_src/src/app/src/redux/selectors/submissions.js index b5f45db34eca041a6f23f5053970c70675da2216..5a995e997e5af2a542eafdcb0f93da54948f662b 100644 --- a/opentech/static_src/src/app/src/redux/selectors/submissions.js +++ b/opentech/static_src/src/app/src/redux/selectors/submissions.js @@ -31,8 +31,14 @@ const getCurrentRoundSubmissionsByStatus = createSelector( } ); +const getSubmissionsByRoundErrorState = state => state.submissions.itemsByRoundLoadingError; + +const getSubmissionsByRoundLoadingState = state => state.submissions.itemsByRoundLoading; + export { getCurrentRound, getCurrentRoundSubmissions, getCurrentRoundSubmissionsByStatus, + getSubmissionsByRoundErrorState, + getSubmissionsByRoundLoadingState, };