create breadcrumb component

link breadcrumb back project listing

src/components/MainCointainer.jsx

@@ -153,7 +153,6 @@ class PersistentDrawerLeft extends React.Component {
   render() {
     const { classes, theme, loading, account, enableEthereum, location: { pathname, search } } = this.props
     const { open } = this.state
-    console.log(this.props)
     const isHome = pathname === "/"
     const queryParams = queryString.parse(search)
 

src/components/base/BreadCrumb.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import { Link } from 'react-router-dom'
+import classnames from 'classnames'
+
+const styles = theme => ({
+  theme,
+  main: {
+    color: '#939BA1'
+  },
+  link: {
+    textDecoration: 'none',
+    color: '#939BA1'
+  }
+})
+
+function BreadCrumb({ classes, className, trail }){
+  const trailString = trail ? ` > ${trail.join(' > ')}` : ''
+  return (
+    <div className={classnames(classes.main, className)}>
+      <Link className={classes.link} to={'/'}>
+        All projects
+      </Link>
+      {<span>{trailString}</span>}
+    </div>
+  )
+}
+
+BreadCrumb.propTypes = {
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  trail: PropTypes.array
+}
+
+export default withStyles(styles)(BreadCrumb)

src/components/projects/CreateProject.jsx

@@ -17,6 +17,7 @@ import { convertTokenAmountUsd } from '../../utils/prices'
 import { setMediaType } from '../../utils/project'
 import MediaView from '../base/MediaView'
 import { isVideo } from '../../utils/images'
+import BreadCrumb from '../base/BreadCrumb'
 
 
 const { addProject } = LiquidPledging.methods
@@ -237,9 +238,10 @@ const SubmissionSection = ({ classes, history }) => {
         return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
             <div className={firstHalf}>
-              <div className={classnames(classes.breadCrumb, fullWidth)}>
+              <BreadCrumb
-                {'All projects and delegates > Create new'}
+                className={fullWidth}
-              </div>
+                trail={['Create new']}
+              />
               <StatusTextField
                 className={fullWidth}
                 isRequired={true}

src/components/projects/FundProject.jsx

@@ -20,6 +20,7 @@ import StatusTextField from '../base/TextField'
 import { getProfileById } from './queries'
 import styles from './styles/FundProject'
 import Loading from '../base/Loading'
+import BreadCrumb from '../base/BreadCrumb'
 
 
 const { addGiverAndDonate } = LiquidPledging.methods
@@ -93,9 +94,10 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
         return (
           <form onSubmit={handleSubmit} className={classes.submissionRoot}>
             {manifest && <div className={firstHalf}>
-              <div className={classnames(classes.breadCrumb, fullWidth)}>
+              <BreadCrumb
-                {`All projects > ${manifest.title}`}
+                className={fullWidth}
-              </div>
+                trail={[manifest.title]}
+              />
               <Typography className={classes.projectTitle} component="h2" gutterBottom>
                 {manifest && manifest.title}
               </Typography>