import React, {Component} from 'react'
import AppBar from 'material-ui/AppBar'
import FlatButton from 'material-ui/FlatButton'
import {List, ListItem} from 'material-ui/List'
import ContentInbox from 'material-ui/svg-icons/content/inbox'
import ActionGrade from 'material-ui/svg-icons/action/grade'
import ContentDrafts from 'material-ui/svg-icons/content/drafts'
import FloatingActionButton from 'material-ui/FloatingActionButton'
import ContentAdd from 'material-ui/svg-icons/content/add'
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table'
import firebase from 'firebase'

const styles = {
  main: {
    display: 'flex',
    flexDirection: 'column',
    minHeight: '100vh',
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  content: {
    display: 'flex',
    flexDirection: 'row'
  },
  drawer: {
    minWidth: '200px',
    paddingRight: '20px'
  },
  floatingButton: {
    position: 'fixed',
    bottom: '25px',
    right: '25px'
  }
}

class Dashboard extends Component {
  toggleDrawer = () => this.setState({drawerOpen: !this.state.drawerOpen})

  state = {
    drawerOpen: true
  }

  render () {
    return (
      <div style={styles.main}>
        <AppBar
          title='Dashboard'
          iconElementRight={<FlatButton label='Logout' onClick={() => firebase.auth().signOut()} />}
          onLeftIconButtonTouchTap={this.toggleDrawer}
        />
        <div style={styles.content}>
          {this.state.drawerOpen
            ? <List style={styles.drawer}>
              <ListItem primaryText='Receipts' leftIcon={<ContentInbox />} />
              <ListItem primaryText='Starred' leftIcon={<ActionGrade />} />
              <ListItem primaryText='Drafts' leftIcon={<ContentDrafts />} />
            </List>
            : null
          }
          <Table>
            <TableHeader>
              <TableRow>
                <TableHeaderColumn>ID</TableHeaderColumn>
                <TableHeaderColumn>Category</TableHeaderColumn>
                <TableHeaderColumn>Amount</TableHeaderColumn>
                <TableHeaderColumn>Date</TableHeaderColumn>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow>
                <TableRowColumn>1</TableRowColumn>
                <TableRowColumn>Project A</TableRowColumn>
                <TableRowColumn><b>€2310.10</b></TableRowColumn>
                <TableRowColumn>10/10/2010</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>2</TableRowColumn>
                <TableRowColumn>Project B</TableRowColumn>
                <TableRowColumn><b>$1029</b></TableRowColumn>
                <TableRowColumn>15/10/2010</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>3</TableRowColumn>
                <TableRowColumn>Worker Steven Sanders</TableRowColumn>
                <TableRowColumn><b>€100</b></TableRowColumn>
                <TableRowColumn>18/10/2010</TableRowColumn>
              </TableRow>
              <TableRow>
                <TableRowColumn>4</TableRowColumn>
                <TableRowColumn>Worker John Smith</TableRowColumn>
                <TableRowColumn><b>€1201</b></TableRowColumn>
                <TableRowColumn>28/10/2010</TableRowColumn>
              </TableRow>
            </TableBody>
          </Table>
          <FloatingActionButton style={styles.floatingButton}>
            <ContentAdd />
          </FloatingActionButton>
        </div>
      </div>
    )
  }
}

export default Dashboard

@@ -484,16 +484,56 @@
 nt/add'%0A
+import Dialog from 'material-ui/Dialog'%0A
 import %7B
@@ -1158,60 +1158,400 @@
 n%7D)%0A
-%0A  state = %7B%0A    drawerOpen: true%0A  %7D%0A%0A  render () %7B
+  handleClose = () =%3E this.setState(%7BdialogOpen: false%7D)%0A%0A  state = %7B%0A    drawerOpen: true,%0A    dialogOpen: false%0A  %7D%0A%0A  render () %7B%0A    const actions = %5B%0A      %3CFlatButton%0A        label='Cancel'%0A        primary%0A        onTouchTap=%7Bthis.handleClose%7D%0A      /%3E,%0A      %3CFlatButton%0A        label='Add Receipt'%0A        primary%0A        disabled%0A        onTouchTap=%7Bthis.handleClose%7D%0A      /%3E%0A    %5D%0A
 %0A   
@@ -3847,16 +3847,66 @@
 gButton%7D
+ onClick=%7B() =%3E this.setState(%7BdialogOpen: true%7D)%7D
 %3E%0A      
@@ -3960,16 +3960,239 @@
 Button%3E%0A
+          %3CDialog%0A            title='Add new receipt'%0A            actions=%7Bactions%7D%0A            modal%0A            open=%7Bthis.state.dialogOpen%7D%0A          %3E%0A            Only actions can close this dialog.%0A          %3C/Dialog%3E%0A
         

add example dialog