From 2b52855024b9990d9672f4e40ccdc08bfead0890 Mon Sep 17 00:00:00 2001 From: Vikas Agarwal Date: Thu, 10 Aug 2017 09:05:31 +0530 Subject: [PATCH] =?UTF-8?q?Github=20issue#1035,=20URL=20does=20not=20chang?= =?UTF-8?q?e=20when=20selecting=20project=20from=20"New=20Project"=20page?= =?UTF-8?q?=20=E2=80=94=20Implemented=20required=20behaviour=20on=20ad=20h?= =?UTF-8?q?oc=20basis=20instead=20of=20enabling=20the=20Wizard=20or=20Proj?= =?UTF-8?q?ectWizard=20component=20for=20being=20URL=20aware.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../create/components/ProjectWizard.jsx | 6 ++-- .../create/containers/CreateContainer.jsx | 36 ++++++++++++++----- src/routes.jsx | 14 ++++++-- 3 files changed, 44 insertions(+), 12 deletions(-) diff --git a/src/projects/create/components/ProjectWizard.jsx b/src/projects/create/components/ProjectWizard.jsx index 9cd6db2ba..671ef3aba 100644 --- a/src/projects/create/components/ProjectWizard.jsx +++ b/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) }) } diff --git a/src/projects/create/containers/CreateContainer.jsx b/src/projects/create/containers/CreateContainer.jsx index 13e4663bf..a042d5cbd 100644 --- a/src/projects/create/containers/CreateContainer.jsx +++ b/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 + }) + } + } /> ) } diff --git a/src/routes.jsx b/src/routes.jsx index a3fdf65ae..756340b31 100644 --- a/src/routes.jsx +++ b/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 = () =>