Merge pull request #94 from cfpb/block-submission-router

Router cleanup and specifically render loader on submission page
cfpb · Dec 27, 2019 · 2e0fca8 · 2e0fca8
2 parents ea7a850 + ce875f8
commit 2e0fca8
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "csv-parse": "4.6.3",
     "detect-browser": "4.7.0",
+    "fast-deep-equal": "2.0.1",
     "file-saver": "2.0.2",
     "filereader-stream": "2.0.0",
     "hmda-file-parser": "1.18.0",

diff --git a/src/filing/modals/confirmationModal/container.jsx b/src/filing/modals/confirmationModal/container.jsx
@@ -46,7 +46,8 @@ export function mapDispatchToProps(dispatch, ownProps) {
     } else {
       return dispatch(fetchNewSubmission(lei, period)).then(() => {
         const pathname = `/filing/${period}/${lei}/upload`
-        ownProps.history.replace(pathname)
+        if(page === 'institutions') ownProps.history.push(pathname)
+        else ownProps.history.replace(pathname)
       })
     }
   }

diff --git a/src/filing/submission/router.jsx b/src/filing/submission/router.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
+import equal from 'fast-deep-equal'
 import SubmissionContainer from './container.jsx'
 import Loading from '../../common/LoadingIcon.jsx'
 import fetchSubmission from '../actions/fetchSubmission.js'
@@ -22,11 +23,20 @@ const editTypes = ['syntacticalvalidity', 'quality', 'macro']
 const submissionRoutes = ['upload', ...editTypes, 'submission']
 
 export class SubmissionRouter extends Component {
+
+  componentDidUpdate(prev) {
+    if(!equal(this.props, prev)) this.guardRouting()
+  }
+
   componentDidMount() {
+    this.guardRouting()
+  }
+
+  guardRouting() {
     this.renderChildren = false
-    const { submission, match: {params}, dispatch } = this.props
+    const { submission, edits, lei, match: {params}, dispatch } = this.props
     const status = submission.status
-    const wrongYear = !submission.id || submission.id.period.year !== params.filingPeriod
+    const wrongYear = !submission.id || +submission.id.period.year !== +params.filingPeriod
 
     if (!params.lei) {
       return this.goToAppHome()
@@ -36,27 +46,24 @@ export class SubmissionRouter extends Component {
       submission.id && submission.id.lei !== params.lei
 
     if (unmatchedId) dispatch(refreshState())
+    if(!lei || lei !== params.lei) return dispatch(setLei(params.lei))
 
-    dispatch(setLei(params.lei))
+    if(submission.isFetching) return
 
     if (unmatchedId || !status || status.code === UNINITIALIZED || wrongYear) {
       return dispatch(fetchSubmission()).then(() => {
-        if (this.editsNeeded()) {
-          dispatch(fetchEdits()).then(() => {
-            this.route()
-          })
+        if(this.editsNeeded()){
+          if(!edits.fetched && !edits.isFetching){
+            dispatch(fetchEdits()).then(() => {
+              this.route()
+            })
+          }
         } else {
           this.route()
         }
       })
     }
 
-    if (this.editsNeeded()) {
-      return dispatch(fetchEdits()).then(() => {
-        this.route()
-      })
-    }
-
     this.route()
   }
 
@@ -97,37 +104,45 @@ export class SubmissionRouter extends Component {
     const splat = this.props.match.params.splat
     const latest = this.getLatestPage()
 
-    this.renderChildren = true
-
     if (!splat) {
       return this.replaceHistory(latest)
     }
 
     if (submissionRoutes.indexOf(splat) === -1) {
-      return this.goToAppHome()
+      return this.replaceHistory(latest)
     }
 
     if (code <= VALIDATING)
-      if (splat === 'upload') return this.forceUpdate()
+      if (splat === 'upload') return this.update()
       else return this.replaceHistory('upload')
 
-    if (code >= VALIDATING && code <= VALIDATED) {
-      if (splat === latest) return this.forceUpdate()
+    if (code > VALIDATING && code <= VALIDATED) {
+      if (splat === latest) return this.update()
       else if (
         submissionRoutes.indexOf(splat) > submissionRoutes.indexOf(latest)
       ) {
         return this.replaceHistory(latest)
       }
     }
 
+    return this.update()
+  }
+
+  update(){
+    this.renderChildren = true
     return this.forceUpdate()
   }
 
   render() {
-    const { submission, match: {params} } = this.props
+    const { submission, lei, match: {params} } = this.props
+    const { code } = submission.status
+
     if (
-      submission.status.code === UNINITIALIZED ||
+      code === UNINITIALIZED ||
+      (code < VALIDATED && code !== NO_MACRO_EDITS && params.splat === 'submission') ||
+      submission.isFetching ||
       submission.id.lei !== params.lei ||
+      lei !== params.lei ||
       !this.renderChildren ||
       !params.splat
     )
@@ -137,15 +152,15 @@ export class SubmissionRouter extends Component {
 }
 
 export function mapStateToProps(state, ownProps) {
-  const { submission } = state.app
-  const { types } = state.app.edits
+  const { submission, lei, edits } = state.app
 
   const { match: {params} } = ownProps
 
   return {
     submission,
-    types,
-    params
+    params,
+    lei,
+    edits
   }
 }
 

diff --git a/yarn.lock b/yarn.lock
@@ -4052,7 +4052,7 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
-fast-deep-equal@^2.0.1:
+fast-deep-equal@2.0.1, fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
   integrity sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=