Feature/#154826346 - User sees the causes for each project (#168)

* chore(data): update project seed data

* feature(client): add causes as Chips to projects

Author: timdavish

.setup/db/seedData/projects.json

@@ -17,7 +17,7 @@
 		"name": "Example Project #2",
 		"role": "Mary Org Role 2",
 		"email": "[email protected]",
-		"causes": ["Environment"],
+		"causes": ["Environment", "Animal", "International NGO", "Health"],
 		"applications": [
 			{ "$oid": "5a1658a0327c0286c39a1aaa" }
 		],

client/components/ListOfProjects/ListOfProjects.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import GridList, { GridListTile } from 'material-ui/GridList'
+import Chip from 'material-ui/Chip'
 
 import UserActionCreator from '../../actions/user'
 import Project from '../Project/Project'
@@ -15,13 +16,23 @@ class ListOfProjects extends Component {
   }
 
   renderListOfProjects () {
-    return this.props.projects.map((project, index) => {
+    return this.props.projects.map((project, projectIndex) => {
       return (
-        <GridListTile key={index}>
+        <GridListTile key={projectIndex}>
           <Project
             project={project}
             authenticated={this.props.authenticated}
             applyForProject={this.props.applyForProject} />
+
+          <div className={styles.causesContainer}>
+            { project.causes.map((cause, chipIndex) => {
+              return (
+                <Chip key={`${projectIndex}${chipIndex}`}
+                  className={styles.cause}
+                  label={cause} />
+              )
+            })}
+          </div>
         </GridListTile>
       )
     })

client/components/ListOfProjects/ListOfProjects.scss

@@ -20,3 +20,15 @@
 .list {
   width: 100% !important;
 }
+
+.causesContainer {
+  display: inline-flex;
+  width: 100%;
+  overflow-x: scroll;
+  margin-bottom: -17px;
+}
+
+.cause {
+  margin-bottom: 70px;
+  margin-right: 5px;
+}