diff --git a/opentech/static_src/src/app/src/components/SubmissionDisplay/answers.js b/opentech/static_src/src/app/src/components/SubmissionDisplay/answers.js index a3a79823d4ccd89b1021c3b8d7044d361249422e..bee7f2646bd304414b2942928b59a505e7f827c5 100644 --- a/opentech/static_src/src/app/src/components/SubmissionDisplay/answers.js +++ b/opentech/static_src/src/app/src/components/SubmissionDisplay/answers.js @@ -80,6 +80,7 @@ const answerTypes = { 'rich_text': RichTextAnswer, 'address': AddressAnswer, 'category': BasicListAnswer, + // Files 'file': FileAnswer, 'multi_file': MultiFileAnswer, diff --git a/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js b/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js index 8096310088e8734bd42aec703236782fc16fd817..93512489b8920125adff23e367d6c8c10d6b9ef9 100644 --- a/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js +++ b/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js @@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react' import PropTypes from 'prop-types'; import { connect } from 'react-redux' import useInterval from '@rooks/use-interval' -import pick from 'lodash.pick' -import isEqual from 'lodash.isequal' import { loadCurrentSubmission } from '@actions/submissions' import { @@ -16,13 +14,18 @@ const loadData = props => { return props.loadCurrentSubmission(['questions'], { bypassCache: true }) } -const hasSubmissionUpdated = (prevSubmission, submission) => { - const KEYS_MONITORED = ['metaQuestions', 'questions', 'stage'] - const pickKeys = obj => pick(obj, KEYS_MONITORED) - return !isEqual(...[submission, prevSubmission].map(v => pickKeys(v))) +const hasChanged = (prevSubmission, submission, keys) => { + return keys.some(key => { + return JSON.stringify(prevSubmission[key]) !== JSON.stringify(submission[key]) + }) +} + +const hasContentUpdated = (prevSubmission, submission) => { + return hasChanged(prevSubmission, submission, ['metaQuestions', 'questions']) } + const CurrentSubmissionDisplay = props => { const { submission, submissionID } = props @@ -30,12 +33,13 @@ const CurrentSubmissionDisplay = props => { const [initialSubmissionLoaded, setInitialSubmissionLoaded] = useState(false) const [localSubmission, setSubmission] = useState(undefined); - const [submissionUpdated, setSubmissionUpdated] = useState(false); + const [updated, setUpdated] = useState(false); + const [updateMessage, setUpdateMessage] = useState('') // Load newly selected submission. useEffect(() => { setInitialSubmissionLoaded(false) - setSubmissionUpdated(false) + setUpdated(false) setSubmission(undefined) loadData(props) start() @@ -49,18 +53,22 @@ const CurrentSubmissionDisplay = props => { return; } + if (submissionID !== submission.id) { + return + } + if (!initialSubmissionLoaded) { setInitialSubmissionLoaded(true) setSubmission(submission) - setSubmissionUpdated(false) - } else if (hasSubmissionUpdated(localSubmission, submission)) { - setSubmissionUpdated(true) + } else if (hasContentUpdated(localSubmission, submission)) { + setUpdated(true) + setUpdateMessage('The contents of this application have been changed by someone else.') } }, [submission]) const handleUpdateSubmission = () => { setSubmission(submission) - setSubmissionUpdated(false) + setUpdated(false) } if ( !localSubmission ) { @@ -68,20 +76,14 @@ const CurrentSubmissionDisplay = props => { } const renderUpdatedMessage = () =>{ - if (!submissionUpdated) { - return null - } - const msg = ( - 'The contents of this application have been changed by someone ' + - ' else.' - ) return <p> - {msg} <button onClick={handleUpdateSubmission}>Show updated</button> + {updateMessage} + <button onClick={handleUpdateSubmission}>Show updated</button> </p> } return <> - {renderUpdatedMessage()} + {updated && renderUpdatedMessage()} <SubmissionDisplay submission={localSubmission} isLoading={!localSubmission || localSubmission.isFetching} diff --git a/opentech/static_src/src/app/src/redux/reducers/statuses.js b/opentech/static_src/src/app/src/redux/reducers/statuses.js index b0f914d7d054064b4ad5887fd6aed17f487546e6..107f40721ed14563c23f100a83f19e0a9bb989e9 100644 --- a/opentech/static_src/src/app/src/redux/reducers/statuses.js +++ b/opentech/static_src/src/app/src/redux/reducers/statuses.js @@ -5,6 +5,7 @@ import { UPDATE_BY_STATUSES, START_LOADING_BY_STATUSES, FAIL_LOADING_BY_STATUSES, + UPDATE_SUBMISSION, } from '@actions/submissions'; @@ -30,6 +31,16 @@ function submissionsByStatuses(state = {}, action) { return accumulator }, state) }; + case UPDATE_SUBMISSION: + state = Object.entries(state).reduce( + (accumulator, [status, ids]) => { + accumulator[status] = ids.filter(id => id !== action.data.id); + return accumulator; + }, {}); + return { + ...state, + [action.data.status]: [...(state[action.data.status] || []), action.data.id], + }; default: return state }