Github issue#1035, URL does not change when selecting project from "New Project" page

— Implemented required behaviour on ad hoc basis instead of enabling the Wizard or ProjectWizard component for being URL aware.

Author: Vikas Agarwal

src/projects/create/components/ProjectWizard.jsx

@@ -105,7 +105,7 @@ class ProjectWizard extends Component {
    * It also moves the wizard to the project details step if there exists an incomplete project.
    */
   loadIncompleteProject() {
-    const { onStepChange } = this.props
+    const { onStepChange, onProjectUpdate } = this.props
     const incompleteProjectStr = window.localStorage.getItem(LS_INCOMPLETE_PROJECT)
     if(incompleteProjectStr) {
       const incompleteProject = JSON.parse(incompleteProjectStr)
@@ -114,6 +114,7 @@ class ProjectWizard extends Component {
         dirtyProject: update(this.state.dirtyProject, { $merge : incompleteProject }),
         wizardStep: WZ_STEP_FILL_PROJ_DETAILS
       }, () => {
+        typeof onProjectUpdate === 'function' && onProjectUpdate(this.state.dirtyProject, false)
         typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
       })
     }
@@ -148,7 +149,7 @@ class ProjectWizard extends Component {
 
   updateProducts(projectType, product) {
     window.scrollTo(0, 0)
-    const { onStepChange } = this.props
+    const { onStepChange, onProjectUpdate } = this.props
     // const products = _.get(this.state.project, 'details.products')
     const updateQuery = { }
     const detailsQuery = { products : [product] }
@@ -163,6 +164,7 @@ class ProjectWizard extends Component {
       dirtyProject: update(this.state.project, updateQuery),
       wizardStep: WZ_STEP_FILL_PROJ_DETAILS
     }, () => {
+      typeof onProjectUpdate === 'function' && onProjectUpdate(this.state.dirtyProject, false)
       typeof onStepChange === 'function' && onStepChange(this.state.wizardStep)
     })
   }

src/projects/create/containers/CreateContainer.jsx

@@ -1,6 +1,6 @@
 import _ from 'lodash'
 import React, { PropTypes } from 'react'
-import { withRouter } from 'react-router'
+import { withRouter, browserHistory } from 'react-router'
 import { connect } from 'react-redux'
 import { renderComponent, branch, compose, withProps } from 'recompose'
 import { createProjectWithStatus as createProjectAction, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
@@ -139,13 +139,33 @@ class CreateConainer extends React.Component {
         {...this.props}
         createProject={ this.createProject }
         processing={ this.state.creatingProject }
-        onStepChange={ (wizardStep) => this.setState({
-          wizardStep
-        })}
-        onProjectUpdate={ (updatedProject) => this.setState({
-          isProjectDirty: true,
-          updatedProject
-        })}
+        onStepChange={ (wizardStep) => {
+            if (wizardStep === ProjectWizard.Steps.WZ_STEP_INCOMP_PROJ_CONF) {
+              browserHistory.push('/new-project/incomplete')
+            }
+            if (wizardStep === ProjectWizard.Steps.WZ_STEP_SELECT_PROD_TYPE) {
+              browserHistory.push('/new-project/')
+            }
+            this.setState({
+              wizardStep
+            })
+          }
+        }
+        onProjectUpdate={ (updatedProject, dirty=true) => {
+            const prevProduct = _.get(this.state.updatedProject, 'details.products[0]', null)
+            const product = _.get(updatedProject, 'details.products[0]', null)
+            // compares updated product with previous product to know if user has updated the product
+            if (prevProduct !== product) {
+              if (product) {
+                browserHistory.push('/new-project/' + product)
+              }
+            }
+            this.setState({
+              isProjectDirty: dirty,
+              updatedProject
+            })
+          }
+        }
       />
     )
   }

src/routes.jsx

@@ -30,6 +30,12 @@ browserHistory.listen(location => {
       window.analytics.page('Project Specification')
     } else if (/^\/$/.test(location.pathname)) {
       window.analytics.page('Connect Home')
+    } else if (/^new-project\/$/.test(location.pathname)) {
+      window.analytics.page('New Project : Select Product')
+    } else if (/^new-project\/incomplete$/.test(location.pathname)) {
+      window.analytics.page('New Project : Incomplete Project')
+    } else if (/^new-project\/[a-zA-Z0-9\_]+$/.test(location.pathname)) {
+      window.analytics.page('New Project : Project Details')
     }
   }
 })
@@ -81,9 +87,13 @@ const validateCreateProjectParams = (nextState, replace, callback) => {
   const product = nextState.params.product
   const productCategory = findProductCategory(product)
   if (product && product.trim().length > 0 && !productCategory) {
-    replace('/404')
+    // workaround to add URL for incomplete project confirmation step
+    // ideally we should have better URL naming which resolves each route with distinct patterns
+    if (product !== 'incomplete') {
+      replace('/404')
+    }
   }
-    callback()
+  callback()
 }
 
 const renderTopBarWithProjectsToolBar = () => <TopBarContainer toolbar={ ProjectsToolBar } />