GH-991: correctly handle back/forward behaviour

opentech/static_src/src/app/src/SwitcherApp.js

@@ -4,7 +4,11 @@ import { connect } from 'react-redux'
 
 import Switcher from '@components/Switcher';
 import MessagesContainer from '@containers/MessagesContainer'
-import { loadSubmissionFromURL } from '@actions/submissions';
+import {
+    clearCurrentSubmissionParam,
+    loadSubmissionFromURL,
+    setCurrentSubmissionParam,
+} from '@actions/submissions';
 
 
 class SwitcherApp extends React.Component {
@@ -14,6 +18,9 @@ class SwitcherApp extends React.Component {
         switcherSelector: PropTypes.string.isRequired,
         startOpen: PropTypes.bool,
         processParams: PropTypes.func.isRequired,
+        searchParam: PropTypes.string,
+        setParams: PropTypes.func.isRequired,
+        clearParams: PropTypes.func.isRequired,
     };
 
     state = {
@@ -26,15 +33,28 @@ class SwitcherApp extends React.Component {
             mounting: false
         })
 
-        const success = this.props.processParams()
+        console.log(this.props.searchParam)
+        const success = this.props.processParams(this.props.searchParam)
         if (success) {
             this.openDetail()
         }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.searchParam !== this.props.searchParam) {
+            const success = this.props.processParams(this.props.searchParam)
 
+            if (!success) {
+                this.closeDetail()
+            } else {
+                this.openDetail()
+            }
+        }
     }
 
     openDetail = () => {
         document.body.classList.add('app-open');
+        this.props.setParams();
         this.setState(state => ({
             style: { ...state.style, display: 'none' } ,
             detailOpened: true,
@@ -43,6 +63,7 @@ class SwitcherApp extends React.Component {
 
     closeDetail = () => {
         document.body.classList.remove('app-open');
+        this.props.clearParams();
         this.setState(state => {
             const newStyle = { ...state.style };
             delete newStyle.display;
@@ -70,8 +91,14 @@ class SwitcherApp extends React.Component {
     }
 }
 
+const mapStateToProps = (state) => ({
+    searchParam: state.router.location.search
+})
+
 const mapDispatchToProps = dispatch => ({
-    processParams: id => dispatch(loadSubmissionFromURL()),
+    processParams: params => dispatch(loadSubmissionFromURL(params)),
+    clearParams: () => dispatch(clearCurrentSubmissionParam()),
+    setParams: () => dispatch(setCurrentSubmissionParam()),
 });
 
-export default connect(null, mapDispatchToProps)(SwitcherApp);
+export default connect(mapStateToProps, mapDispatchToProps)(SwitcherApp);

opentech/static_src/src/app/src/redux/actions/submissions.js

@@ -69,25 +69,59 @@ export const setCurrentSubmissionRound = id => ({
 });
 
 
-export const loadSubmissionFromURL = () => (dispatch, getState) => {
-    const urlParams = new URLSearchParams(window.location.search);
+export const loadSubmissionFromURL = (params) => (dispatch, getState) => {
+    const urlParams = new URLSearchParams(params);
     if (urlParams.has('submission')) {
         const activeId = Number(urlParams.get('submission'));
-        return dispatch(setCurrentSubmission(activeId));
+        const submissionID = getCurrentSubmissionID(getState());
+
+        if (activeId !== null  && submissionID !== activeId) {
+            dispatch(setCurrentSubmission(activeId));
+        }
+        return true;
     }
-    return null;
-}
+    return false;
+};
 
 
-export const setCurrentSubmission = id => (dispatch, getState) => {
-    const submissionID = getCurrentSubmissionID(getState())
 
-    if (id !== null  && submissionID !== id) {
-        dispatch(push(`?submission=${id}`));
-    } else if (!id) {
-        dispatch(push('?'));
+export const clearCurrentSubmissionParam = () => (dispatch, getState) => {
+    const state = getState();
+    if (state.router.location.search !== '') {
+        return dispatch(push({search: ''}));
+    }
+};
+
+
+const setSubmissionParam = (id) => (dispatch, getState) => {
+    const state = getState();
+    const submissionID = getCurrentSubmissionID(state);
+
+    const urlParams = new URLSearchParams(state.router.location.search);
+    const urlID = Number(urlParams.get('submission'));
+
+    const shouldSet = !urlID && !!id;
+    const shouldUpdate = id !== null  && submissionID !== id && urlID !== id;
+
+    if (shouldSet || shouldUpdate) {
+        dispatch(push({search: `?submission=${id}`}));
+    } else if (id === null) {
+        dispatch(clearCurrentSubmissionParam());
     }
 
+};
+
+
+export const setCurrentSubmissionParam = () => (dispatch, getState) => {
+    const submissionID = getCurrentSubmissionID(getState());
+    return dispatch(setSubmissionParam(submissionID));
+};
+
+
+
+export const setCurrentSubmission = id => (dispatch, getState) => {
+    dispatch(setSubmissionParam(id));
+
     return dispatch({
         type: SET_CURRENT_SUBMISSION,
         id,

opentech/static_src/src/app/src/redux/reducers/index.js

@@ -7,7 +7,7 @@ import notes from '@reducers/notes';
 import messages from '@reducers/messages';
 import statuses from '@reducers/statuses';
 
-export default combineReducers({
+export default (history) => combineReducers({
     router: connectRouter(history),
     notes,
     messages,

opentech/static_src/src/app/src/redux/store.js

@@ -5,10 +5,11 @@ import logger from 'redux-logger'
 import { routerMiddleware } from 'connected-react-router';
 import { createBrowserHistory } from 'history';
 
-import rootReducer from '@reducers';
+import createRootReducer from '@reducers';
 import api from '@middleware/api'
 
-export const history = createBrowserHistory()
+
+export const history = createBrowserHistory();
 
 const MIDDLEWARE = [
     routerMiddleware(history),
@@ -23,7 +24,8 @@ if (process.env.NODE_ENV === 'development') {
 
 export default initialState => {
     const store = createStore(
-        rootReducer,
+        createRootReducer(history),
+        initialState,
         composeWithDevTools(
             applyMiddleware(...MIDDLEWARE)
         )

opentech/static_src/src/app/src/submissionsByStatusIndex.js

@@ -2,9 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Modal from 'react-modal';
 import { Provider } from 'react-redux';
+import { ConnectedRouter } from 'connected-react-router';
 
 import SubmissionsByStatusApp from './SubmissionsByStatusApp';
-import createStore from '@redux/store';
+import createStore, { history } from '@redux/store';
 
 
 const container = document.getElementById('submissions-by-status-react-app');
@@ -15,7 +16,9 @@ Modal.setAppElement(container)
 
 ReactDOM.render(
     <Provider store={store}>
-        <SubmissionsByStatusApp pageContent={container.innerHTML} statuses={container.dataset.statuses.split(',')} />
+        <ConnectedRouter history={history}>
+            <SubmissionsByStatusApp pageContent={container.innerHTML} statuses={container.dataset.statuses.split(',')} />
+        </ConnectedRouter>
     </Provider>,
     container
 );