Github issue#1267, Navigation small updates

— Added new project button to the details page as well. Faced interesting issue while implementing it. In the CreateContainer we are validating project.id prop in the next prop to determine if a new project has been created by the wizard. This logic was causing redirecting back to details page when user clicks on the new project button from the details page because it thinks that a new project with id of the current project is created and redirects to its details page. As a fix, now we are checking if current property value for project.id is not defined and next property value is defined to determine that new project is created. Further, we have to clear the project from the redux state when CreateContainer is mounted.

Author: Vikas Agarwal

src/components/TopBar/ProjectToolBar.js

@@ -2,7 +2,7 @@ require('./ProjectToolBar.scss')
 
 import _ from 'lodash'
 import React, {PropTypes} from 'react'
-import { NavLink } from 'react-router-dom'
+import { NavLink, Link } from 'react-router-dom'
 import { connect } from 'react-redux'
 import ReactDOM from 'react-dom'
 import SVGIconImage from '../SVGIconImage'
@@ -75,6 +75,9 @@ class ProjectToolBar extends React.Component {
                 }
               </ul>
             </nav>}
+            <Link to="/new-project" className="new-project-link">
+              <div className="new-project-icon"><SVGIconImage filePath="ui-16px-1_bold-add" /></div>
+            </Link>
             { userMenu }
           </div>
         </div>

src/components/TopBar/ProjectToolBar.scss

@@ -54,6 +54,33 @@
       }
     }
 
+    .new-project-link {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 20px;
+
+      .new-project-icon {
+        width: 20px;
+        height: 20px;
+        background-color: $tc-gray-50;
+        border-radius: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        svg {
+          fill: $tc-black;
+          width: 10px;
+          height: 10px;
+        }
+
+        &:hover {
+          background-color: $tc-orange-30;
+        }
+      }
+    }
+
     .bar-column.project-name {
       span {
         @include roboto;

src/projects/create/containers/CreateContainer.jsx

@@ -4,7 +4,7 @@ import React, { PropTypes } from 'react'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 import { renderComponent, branch, compose, withProps } from 'recompose'
-import { createProject as createProjectAction, fireProjectDirty, fireProjectDirtyUndo } from '../../actions/project'
+import { createProject as createProjectAction, fireProjectDirty, fireProjectDirtyUndo, clearLoadedProject } from '../../actions/project'
 import CoderBot from '../../../components/CoderBot/CoderBot'
 import spinnerWhileLoading from '../../../components/LoadingSpinner'
 import ProjectWizard from '../components/ProjectWizard'
@@ -65,8 +65,9 @@ class CreateConainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    const projectId = _.get(nextProps, 'project.id', null)
-    if (!nextProps.processing && !nextProps.error && projectId) {
+    const projectId = _.get(this.props, 'project.id', null)
+    const nextProjectId = _.get(nextProps, 'project.id', null)
+    if (!nextProps.processing && !nextProps.error && !projectId && nextProjectId) {
       // update state
       this.setState({
         creatingProject: false,
@@ -75,7 +76,7 @@ class CreateConainer extends React.Component {
         // remove incomplete project, and navigate to project dashboard
         console.log('removing incomplete project')
         window.localStorage.removeItem(LS_INCOMPLETE_PROJECT)
-        this.props.history.push('/projects/' + projectId)
+        this.props.history.push('/projects/' + nextProjectId)
       })
 
     } else if (this.state.creatingProject !== nextProps.processing) {
@@ -122,6 +123,9 @@ class CreateConainer extends React.Component {
   componentDidMount() {
     // sets window unload hook save incomplete project
     window.addEventListener('beforeunload', this.onLeave)
+    // dispatches action to clear the project in the redux state to ensure that we never have a project
+    // in context when creating a new project
+    this.props.clearLoadedProject()
   }
 
   componentWillUnmount() {
@@ -263,5 +267,5 @@ const mapStateToProps = ({projectState, loadUser }) => ({
   error: projectState.error,
   project: projectState.project
 })
-const actionCreators = { createProjectAction, fireProjectDirty, fireProjectDirtyUndo  }
+const actionCreators = { createProjectAction, fireProjectDirty, fireProjectDirtyUndo, clearLoadedProject }
 export default withRouter(connect(mapStateToProps, actionCreators)(CreateConainer))