scaffolding done

src/actions/action-types.js

 export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
-export const SET_FACILITIES = 'SET_FACILITIES'
-export const GET_FACILITIES = 'GET_FACILITIES'
\ No newline at end of file
+export const SET_FACILITIES = 'SET_FACILITIES';
+export const GET_FACILITIES = 'GET_FACILITIES';
+export const SET_SIDEBAR = 'SET_SIDEBAR';
\ No newline at end of file

src/actions/ui.js

-import { TOGGLE_DRAWER } from './action-types';
+import { TOGGLE_DRAWER,SET_SIDEBAR } from './action-types';
 
 export const toggleDrawer =  () => ({
     type:TOGGLE_DRAWER,
 });
+
+export const setSidebar = (facility) => ({
+    type:SET_SIDEBAR,
+    facility,
+})
\ No newline at end of file

src/components/CardContainer.js

+import React from 'react'
+import {withStyles} from 'material-ui/styles';
+import FacilityCard from '../containers/FacilityCard'
+
+const CardContainer = ({classes,facilities}) => {
+    return (
+        <div className={classes.root}>
+            {facilities.map((item) =>{
+               return <FacilityCard key={item.slug} facility={item}/>
+            })}
+        </div>
+    )
+}
+const styleSheet  = {
+    root:{
+        width:'100%',
+        height:'100%',
+        display:'flex',
+        flexWrap:'wrap',
+    }
+}
+
+export default withStyles(styleSheet)(CardContainer)
\ No newline at end of file

src/components/Sidebar.js

@@ -5,12 +5,22 @@ import Avatar from 'material-ui/Avatar'
 import Typography from 'material-ui/Typography'
 import Divider from 'material-ui/Divider';
 import TextwTitle from '../components/TextwTitle'
-const Sidebar = ({classes}) => {
+const Sidebar = ({classes,facility}) => {
+    const removeBrackets = (name) => {
+       if(typeof(name) === "undefined"){
+           return ""
+       } 
+       const openBracket = name.indexOf('[')
+        if(openBracket !== -1){
+            return name.substring(0,openBracket)
+        }
+        return name
+    } 
     return(<Paper className={classes.root}>
        <div className={classes.row1}>
            <Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} />
            <div className={classes.title}>
-                <Typography  type='display1'>Chipotle</Typography>
+                <Typography  type='display1'>{removeBrackets(facility.facility_name)}</Typography>
            </div>
         </div> 
            <Divider className={classes.divider}/>   

src/containers/FacilityCard.js

+import React from 'react'
+import {withStyles} from 'material-ui/styles';
+import Paper from 'material-ui/Paper';
+import {compose} from 'redux'
+import {connect} from 'react-redux'
+import {setSidebar} from '../actions/ui'
+
+const FacilityCard = ({classes,facility,setSidebar}) => {
+
+    const handleClick = () => {
+        setSidebar(facility)
+    }
+    const removeBrackets = (name) => {
+        if(typeof(name) === "undefined"){
+            return ""
+        } 
+        const openBracket = name.indexOf('[')
+         if(openBracket !== -1){
+            return name.substring(0,openBracket)
+         }
+         return name
+     } 
+    return(
+        <Paper onClick={handleClick} className={classes.root}>
+            {removeBrackets(facility.facility_name)}
+        </Paper>
+    )
+}
+const styleSheet  = {
+    root:{
+        width:100,
+        height:100,
+    }
+}
+
+export default compose(connect(null,{setSidebar}),withStyles(styleSheet))(FacilityCard)
\ No newline at end of file

src/containers/Layout.js

@@ -7,6 +7,7 @@ import AppBar from '../components/AppBar';
 import Sidebar from '../components/Sidebar';
 import {getFacilities, setFacilities} from '../actions/api'
 import Button from 'material-ui/Button';
+import CardContainer from '../components/CardContainer'
 class Layout extends React.Component {
     constructor(props){
         super(props);
@@ -21,17 +22,18 @@ class Layout extends React.Component {
     }
 
     render() {
-        const {classes, isDrawerOpen, toggleDrawer, getFacilities} = this.props;
+        const {classes, isDrawerOpen, toggleDrawer, getFacilities,sidebarFacility} = this.props;
         return (
             <div className={classes.root}>
                 <AppBar isOpen={isDrawerOpen} handleMenuClick={ toggleDrawer }/>
                 <div className={classes.container}>
                     <div className={classes.mainContent}>
-                        <Button raised onClick={getFacilities} className={classes.button}>
+                        {/* <Button raised onClick={getFacilities} className={classes.button}>
                             Default
-                        </Button>
+                        </Button> */}
+                        <CardContainer facilities={this.props.facilities}/>
                     </div> 
-                    <Sidebar/>
+                    <Sidebar facility={sidebarFacility}/>
                 </div> 
             </div>
         )
@@ -53,13 +55,15 @@ const styleSheet = {
         boxSizing:'border-box',
         flex:'1 1 100%',
         height:'100%',
+        margin:16,
     },
 }
 
 function mapStateToProps(state) {
     return {
         facilities: state.facilities.data,
-        isLoading: state.facilities.isLoading
+        isLoading: state.facilities.isLoading,
+        sidebarFacility:state.ui.sidebar,
     }
 }
 

src/reducers/ui.js

-import {TOGGLE_DRAWER } from '../actions/action-types'
+import {TOGGLE_DRAWER,SET_SIDEBAR } from '../actions/action-types'
 
 function isOpen(state=false,action){
     switch (action.type) {
@@ -11,7 +11,16 @@ function isOpen(state=false,action){
 const drawer = (state={},action) => ({
     isOpen:isOpen(state.isOpen,action)
 })
+const sidebar = (state={},action) => {
+    switch(action.type){
+        case SET_SIDEBAR:
+            return action.facility
+        default:
+            return {}
+    }
+}
 const ui = (state={},action) =>({
     drawer:drawer(state.drawer,action),
+    sidebar:sidebar(state.sidbar,action),
 })
 export default ui;