Github issue#1206, Main page/product select logo to be a link

— Converted logo to be link for non logged in user

Author: Vikas Agarwal

src/projects/create/components/FillProjectDetails.js

@@ -1,5 +1,6 @@
 import _ from 'lodash'
 import React, { PropTypes as PT, Component } from 'react'
+import { Link } from 'react-router'
 import Sticky from 'react-stickynode'
 
 import config from '../../../config/projectWizard'
@@ -34,9 +35,9 @@ class FillProjectDetails extends Component  {
 
   render() {
     const { project, dirtyProject, processing, submitBtnText, userRoles } = this.props
+    const isLoggedIn = userRoles && userRoles.length
+    const logoTargetUrl = isLoggedIn ? '/projects' : '/'
     const product = _.get(project, 'details.products[0]')
-    // const projectName = _.get(project, 'name')
-    // const projectRef = _.get(project, 'details.utm.code', '')
     const projectTypeId = _.get(project, 'type')
     const subConfig = config[_.findKey(config, {id : projectTypeId})]
     const productName = _.findKey(subConfig.subtypes, {id : product})
@@ -48,8 +49,8 @@ class FillProjectDetails extends Component  {
     return (
       <div className="FillProjectDetailsWrapper">
         <div className="header headerFillProjectDetails">
-          { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" className="connectLogo" />}
-          { (!userRoles || !userRoles.length) && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ this.props.onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
+          { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
+          { !isLoggedIn && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ this.props.onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
         </div>
         <div className="FillProjectDetails">
           <div className="header">

src/projects/create/components/IncompleteProjectConfirmation.js

@@ -1,13 +1,15 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import SVGIconImage from '../../../components/SVGIconImage'
 import './IncompleteProjectConfirmation.scss'
 
-function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject }) {
-  
+function IncompleteProjectConfirmation({ loadIncompleteProject, removeIncompleteProject, userRoles }) {
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   return (
     <div className="IncompleteProjectConfirmation">
       <div className="header">
-        <SVGIconImage filePath="connect-logo-mono" />
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
       </div>
       <h3>Welcome back!</h3>
       <h5>You started a project with us recently.</h5>

src/projects/create/components/ProjectWizard.jsx

@@ -324,9 +324,11 @@ class ProjectWizard extends Component {
         <IncompleteProjectConfirmation
           loadIncompleteProject={ this.loadIncompleteProject }
           removeIncompleteProject={ this.removeIncompleteProject }
+          userRoles={ userRoles }
         />
         <SelectProjectType
           onProjectTypeChange={ this.updateProjectType }
+          userRoles={ userRoles }
         />
         <SelectProduct
           onProductChange={ this.updateProducts }

src/projects/create/components/SelectProduct.js

@@ -1,4 +1,5 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import config from '../../../config/projectWizard'
 import ProductCard from './ProductCard'
 import SVGIconImage from '../../../components/SVGIconImage'
@@ -7,6 +8,8 @@ import './SelectProduct.scss'
 
 function SelectProduct(props) {
   const { userRoles, projectType, onChangeProjectType } = props
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   const cards = []
   for (const key in config) {
     const type = config[key]
@@ -33,8 +36,8 @@ function SelectProduct(props) {
   return (
     <div>
       <div className="header headerSelectProduct">
-        { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" />}
-        { (!userRoles || !userRoles.length) && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
+        { !isLoggedIn && <button className="tc-btn tc-btn-default tc-btn-sm" onClick={ onChangeProjectType }><SVGIconImage filePath="arrows-undo" />Change project type</button> }
       </div>
       <div className="SelectProduct">
         <h1> { projectCategory.name } projects </h1>

src/projects/create/components/SelectProjectType.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes as PT } from 'react'
+import { Link } from 'react-router'
 import config from '../../../config/projectWizard'
 import ProjectTypeCard from './ProjectTypeCard'
 import SVGIconImage from '../../../components/SVGIconImage'
@@ -7,6 +8,8 @@ import './SelectProjectType.scss'
 
 function SelectProjectType(props) {
   const { userRoles } = props
+  const isLoggedIn = userRoles && userRoles.length
+  const logoTargetUrl = isLoggedIn ? '/projects' : '/'
   const cards = []
   for (const key in config) {
     const item = config[key]
@@ -26,7 +29,7 @@ function SelectProjectType(props) {
   return (
     <div>
       <div className="header headerSelectProjectType">
-        { (!userRoles || !userRoles.length) && <SVGIconImage filePath="connect-logo-mono" className="connectLogo"/>}
+        { !isLoggedIn && <Link className="logo" to={logoTargetUrl} target="_self"><SVGIconImage filePath="connect-logo-mono" className="connectLogo"/></Link>}
       </div>
       <div className="SelectProjectType">
         <h1>Create a new project</h1>