Merge pull request #1168 from appirio-tech/feature/new-project-wizard-unsaved-content

Added unsaved content alert to new project modal

Author: vikasrohit

src/components/TopBar/ProjectsToolBar.js

@@ -28,7 +28,6 @@ class ProjectsToolBar extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      isCreatingProject: false,
       isCreateProjectModalVisible : false,
       errorCreatingProject: false,
       isFilterVisible: false
@@ -41,6 +40,7 @@ class ProjectsToolBar extends Component {
     this.handleSearch = this.handleSearch.bind(this)
     this.handleMyProjectsFilter = this.handleMyProjectsFilter.bind(this)
     this.createProject = this.createProject.bind(this)
+    this.onLeave = this.onLeave.bind(this)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -49,7 +49,7 @@ class ProjectsToolBar extends Component {
       if (!nextProps.projectCreationError
         && nextProps.project && nextProps.project.id) {
         this.hideCreateProjectDialog()
-        this.context.router.push('/projects/' + nextProps.project.id)
+        this.props.router.push('/projects/' + nextProps.project.id)
       } else {
         this.setState({
           errorCreatingProject: true
@@ -58,11 +58,32 @@ class ProjectsToolBar extends Component {
     }
   }
 
+  componentDidMount() {
+    const { router, route } = this.props
+    // sets route leave hook to show unsaved changes alert and persist incomplete project
+    this.routeLeaveHook = router.setRouteLeaveHook(route, this.onLeave)
+
+    // sets window unload hook to show unsaved changes alert and persist incomplete project
+    window.addEventListener('beforeunload', this.onLeave)
+  }
+
   componentWillUnmount() {
+    window.removeEventListener('beforeunload', this.onLeave)
+    if (this.routeLeaveHook) {
+      this.routeLeaveHook()
+    }
     const contentDiv = document.getElementById('wrapper-main')
     contentDiv.classList.remove('with-filters')
   }
 
+  onLeave(e) {
+    const { isProjectDirty } = this.state
+    const { creatingProject } = this.props
+    if (isProjectDirty && !creatingProject) {
+      return e.returnValue = 'You have unsaved changes. Are you sure you want to leave?'
+    }
+  }
+
   /*eslint-disable no-unused-vars */
   handleTermChange(oldTerm, searchTerm, reqNo, callback) {
     this.props.projectSuggestions(searchTerm)
@@ -85,10 +106,17 @@ class ProjectsToolBar extends Component {
   }
 
   hideCreateProjectDialog() {
-    this.setState({
-      isCreateProjectModalVisible : false,
-      errorCreatingProject: false
-    })
+    let confirm = true
+    if (this.state.isProjectDirty) {
+      confirm = window.confirm('You have unsaved changes. Are you sure you want to leave?')
+    }
+    if (confirm === true) {
+      this.setState({
+        isProjectDirty: false,
+        isCreateProjectModalVisible : false,
+        errorCreatingProject: false
+      })
+    }
   }
 
   applyFilters(filter) {
@@ -116,7 +144,7 @@ class ProjectsToolBar extends Component {
   routeWithParams(criteria, page) {
     // remove any null values
     criteria = _.pickBy(criteria, _.identity)
-    this.context.router.push({
+    this.props.router.push({
       pathname: '/projects/',
       query: _.assign({}, criteria, { page })
     })
@@ -156,6 +184,12 @@ class ProjectsToolBar extends Component {
               createProject={ this.createProject }
               closeModal={ this.hideCreateProjectDialog }
               userRoles={ userRoles }
+              onProjectUpdate={ (updatedProject, dirty=true) => {
+                  this.setState({
+                    isProjectDirty: dirty
+                  })
+                }
+              }
             />
           }
           { errorCreatingProject && <CoderBot code={ 500 } message="Unable to create project" />}
@@ -216,10 +250,6 @@ ProjectsToolBar.propTypes = {
 ProjectsToolBar.defaultProps = {
 }
 
-ProjectsToolBar.contextTypes = {
-  router: PropTypes.object.isRequired
-}
-
 // export default ProjectsToolBar
 
 const mapStateToProps = ({ projectSearchSuggestions, searchTerm, projectSearch, projectState, loadUser }) => {

src/components/TopBar/TopBarContainer.js

@@ -1,6 +1,6 @@
-import React, {PropTypes} from 'react'
+import React from 'react'
 import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import { Link, withRouter } from 'react-router'
 import _ from 'lodash'
 import { UserDropdown, Icons } from 'appirio-tech-react-components'
 const { ConnectLogo } = Icons
@@ -40,7 +40,7 @@ class TopBarContainer extends React.Component {
     const logoutLink = `https://accounts.${DOMAIN}/#!/logout?retUrl=${homePageUrl}`
     const isLoggedIn = userRoles && userRoles.length
     const logoTargetUrl = isLoggedIn ? '/projects' : '/'
-    const isHomePage = this.context.router.isActive('/', true)
+    const isHomePage = this.props.router.isActive('/', true)
     // NOTE: hardcoding to connectv2, once connect v1
     window.host
     const loginUrl = `${ACCOUNTS_APP_LOGIN_URL}?retUrl=${window.location.protocol}//${window.location.host}/`
@@ -108,10 +108,6 @@ class TopBarContainer extends React.Component {
   }
 }
 
-TopBarContainer.contextTypes = {
-  router: PropTypes.object.isRequired
-}
-
 const mapStateToProps = ({ loadUser }) => {
   return {
     userRoles              : _.get(loadUser, 'user.roles', []),
@@ -121,4 +117,4 @@ const mapStateToProps = ({ loadUser }) => {
 
 const actionsToBind = { }
 
-export default connect(mapStateToProps, actionsToBind)(TopBarContainer)
+export default withRouter(connect(mapStateToProps, actionsToBind)(TopBarContainer))

src/projects/routes.jsx

@@ -14,7 +14,7 @@ import { requiresAuthentication } from '../components/AuthenticatedComponent'
 
 
 const projectRoutes = (
-  <Route path="/projects" components={ { topbar: (props) => <TopBarContainer toolbar={ props.toolbar } shortUserMenu={ props.shortUserMenu } />, content: requiresAuthentication(ProjectLayout)}}>
+  <Route path="/projects" components={ { topbar: (props) => <TopBarContainer route={ props.route } toolbar={ props.toolbar } shortUserMenu={ props.shortUserMenu } />, content: requiresAuthentication(ProjectLayout)}}>
     // TODO add project topbar
     <IndexRoute components={{toolbar: ProjectsToolBar, main: Projects }} />
     <Route path=":projectId" components={{toolbar: ProjectToolBar, main: ProjectDetail }} >

src/routes.jsx

@@ -96,7 +96,7 @@ const validateCreateProjectParams = (nextState, replace, callback) => {
   callback()
 }
 
-const renderTopBarWithProjectsToolBar = () => <TopBarContainer toolbar={ ProjectsToolBar } />
+const renderTopBarWithProjectsToolBar = (props) => <TopBarContainer toolbar={ ProjectsToolBar } route={props.route} />
 
 export default (
   <Route path="/" onUpdate={() => window.scrollTo(0, 0)} component={ App } onEnter={ redirectToConnect }>