Commit 5a5067a6 authored by Mattias J Duffy's avatar Mattias J Duffy
Browse files

scaffolding done

parent fbaa10f8
export const TOGGLE_DRAWER = 'TOGGLE_DRAWER'; export const TOGGLE_DRAWER = 'TOGGLE_DRAWER';
export const SET_FACILITIES = 'SET_FACILITIES' export const SET_FACILITIES = 'SET_FACILITIES';
export const GET_FACILITIES = 'GET_FACILITIES' export const GET_FACILITIES = 'GET_FACILITIES';
\ No newline at end of file export const SET_SIDEBAR = 'SET_SIDEBAR';
\ No newline at end of file
import { TOGGLE_DRAWER } from './action-types'; import { TOGGLE_DRAWER,SET_SIDEBAR } from './action-types';
export const toggleDrawer = () => ({ export const toggleDrawer = () => ({
type:TOGGLE_DRAWER, type:TOGGLE_DRAWER,
}); });
export const setSidebar = (facility) => ({
type:SET_SIDEBAR,
facility,
})
\ No newline at end of file
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
...@@ -5,12 +5,22 @@ import Avatar from 'material-ui/Avatar' ...@@ -5,12 +5,22 @@ import Avatar from 'material-ui/Avatar'
import Typography from 'material-ui/Typography' import Typography from 'material-ui/Typography'
import Divider from 'material-ui/Divider'; import Divider from 'material-ui/Divider';
import TextwTitle from '../components/TextwTitle' 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}> return(<Paper className={classes.root}>
<div className={classes.row1}> <div className={classes.row1}>
<Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} /> <Avatar className={classes.avatar} src={require('../images/chipotleLogo.png')} />
<div className={classes.title}> <div className={classes.title}>
<Typography type='display1'>Chipotle</Typography> <Typography type='display1'>{removeBrackets(facility.facility_name)}</Typography>
</div> </div>
</div> </div>
<Divider className={classes.divider}/> <Divider className={classes.divider}/>
......
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
...@@ -7,6 +7,7 @@ import AppBar from '../components/AppBar'; ...@@ -7,6 +7,7 @@ import AppBar from '../components/AppBar';
import Sidebar from '../components/Sidebar'; import Sidebar from '../components/Sidebar';
import {getFacilities, setFacilities} from '../actions/api' import {getFacilities, setFacilities} from '../actions/api'
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
import CardContainer from '../components/CardContainer'
class Layout extends React.Component { class Layout extends React.Component {
constructor(props){ constructor(props){
super(props); super(props);
...@@ -21,17 +22,18 @@ class Layout extends React.Component { ...@@ -21,17 +22,18 @@ class Layout extends React.Component {
} }
render() { render() {
const {classes, isDrawerOpen, toggleDrawer, getFacilities} = this.props; const {classes, isDrawerOpen, toggleDrawer, getFacilities,sidebarFacility} = this.props;
return ( return (
<div className={classes.root}> <div className={classes.root}>
<AppBar isOpen={isDrawerOpen} handleMenuClick={ toggleDrawer }/> <AppBar isOpen={isDrawerOpen} handleMenuClick={ toggleDrawer }/>
<div className={classes.container}> <div className={classes.container}>
<div className={classes.mainContent}> <div className={classes.mainContent}>
<Button raised onClick={getFacilities} className={classes.button}> {/* <Button raised onClick={getFacilities} className={classes.button}>
Default Default
</Button> </Button> */}
<CardContainer facilities={this.props.facilities}/>
</div> </div>
<Sidebar/> <Sidebar facility={sidebarFacility}/>
</div> </div>
</div> </div>
) )
...@@ -53,13 +55,15 @@ const styleSheet = { ...@@ -53,13 +55,15 @@ const styleSheet = {
boxSizing:'border-box', boxSizing:'border-box',
flex:'1 1 100%', flex:'1 1 100%',
height:'100%', height:'100%',
margin:16,
}, },
} }
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
facilities: state.facilities.data, facilities: state.facilities.data,
isLoading: state.facilities.isLoading isLoading: state.facilities.isLoading,
sidebarFacility:state.ui.sidebar,
} }
} }
......
import {TOGGLE_DRAWER } from '../actions/action-types' import {TOGGLE_DRAWER,SET_SIDEBAR } from '../actions/action-types'
function isOpen(state=false,action){ function isOpen(state=false,action){
switch (action.type) { switch (action.type) {
...@@ -11,7 +11,16 @@ function isOpen(state=false,action){ ...@@ -11,7 +11,16 @@ function isOpen(state=false,action){
const drawer = (state={},action) => ({ const drawer = (state={},action) => ({
isOpen:isOpen(state.isOpen,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) =>({ const ui = (state={},action) =>({
drawer:drawer(state.drawer,action), drawer:drawer(state.drawer,action),
sidebar:sidebar(state.sidbar,action),
}) })
export default ui; export default ui;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment