Add initial journal app with library menu on left

app/main.jsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import injectTapEventPlugin from "react-tap-event-plugin"
+injectTapEventPlugin()
+import ThemeManager from 'material-ui/lib/styles/theme-manager'
+import ReactDOM from 'react-dom'
+import LibraryNav from 'LibraryNav'
+import Styles from 'material-ui/lib/styles'
+import Rethink from 'rethinkdbdash'
+import moment from 'moment'
+
+
+const DefaultRawTheme = Styles.LightRawTheme
+
+let r = Rethink({
+        db: 'technote',
+        servers: [
+            {host: '162.243.255.144',
+             port: 28015}
+        ]})
+
+function createTables(){
+    r.tableCreate('notes').run()
+        .then(function(){
+            r.table('notes').indexCreate('account_id').run()
+        })
+        .error(function(){})
+
+    r.tableCreate('accounts').run().error(function(){})
+}
+
+class Main extends React.Component {
+    constructor(props){
+        super(props)
+        createTables()
+        this.state = {entries: []}
+    }
+
+    static get childContextTypes(){
+        return {muiTheme: React.PropTypes.object}
+    }
+
+    getChildContext() {
+        return {
+            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
+        }
+    }
+
+    entriesTapped = () => {
+        r.table('notes').getAll('jyapayne@gmail.com', {index: 'account_id'}).run().then(
+            function(notes){
+                console.log(notes)
+            }
+        )
+    };
+
+    render() {
+    
+        return (
+            <LibraryNav
+                id="library-nav"
+                entriesTapped={this.entriesTapped}
+                className="left inline fill-height"/>
+        )
+    }
+
+}
+
+ReactDOM.render(
+    <Main />,
+    document.getElementById('main')
+);
+

app/modules/EntrySelector.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import mui from 'material-ui'
+import ThemeManager from 'material-ui/lib/styles/theme-manager'
+
+import List from 'material-ui/lib/lists/list'
+import ListItem from 'material-ui/lib/lists/list-item'
+import ActionGrade from 'material-ui/lib/svg-icons/action/grade'
+import History from 'material-ui/lib/svg-icons/action/history'
+import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline'
+import Folder from 'material-ui/lib/svg-icons/file/folder'
+import Delete from 'material-ui/lib/svg-icons/action/delete'
+import Divider from 'material-ui/lib/divider'
+
+
+const {AppBar,
+      AppCanvas,
+      FontIcon,
+      IconButton,
+      EnhancedButton,
+      NavigationClose,
+      Menu,
+      Mixins,
+      RaisedButton,
+      FlatButton,
+      Dialog,
+      Styles,
+      Tab,
+      Tabs,
+      Paper} = mui
+
+const colors = Styles.Colors
+
+const DefaultRawTheme = Styles.LightRawTheme
+
+export default class EntrySelector extends React.Component {
+
+    constructor(props){
+        super(props)
+        this.state = {entries: []}
+    }
+
+    static get childContextTypes(){
+        return {muiTheme: React.PropTypes.object}
+    }
+
+    getChildContext() {
+        return {
+            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
+        }
+    }
+
+    blank(){
+    
+    }
+
+    render(){
+        return (
+            
+        
+        
+        )
+    }
+}
+

app/modules/LibraryNav.jsx

@@ -0,0 +1,134 @@
+import React from 'react'
+
+import mui from 'material-ui'
+import ThemeManager from 'material-ui/lib/styles/theme-manager'
+
+import styles from 'material-ui/lib/styles'
+import List from 'material-ui/lib/lists/list'
+import ListItem from 'material-ui/lib/lists/list-item'
+import ActionGrade from 'material-ui/lib/svg-icons/action/grade'
+import History from 'material-ui/lib/svg-icons/action/history'
+import AddCircleOutline from 'material-ui/lib/svg-icons/content/add-circle-outline'
+import Folder from 'material-ui/lib/svg-icons/file/folder'
+import Delete from 'material-ui/lib/svg-icons/action/delete'
+import Divider from 'material-ui/lib/divider'
+
+const colors = styles.Colors
+
+const {AppBar,
+      AppCanvas,
+      FontIcon,
+      IconButton,
+      EnhancedButton,
+      NavigationClose,
+      Menu,
+      Mixins,
+      RaisedButton,
+      FlatButton,
+      Dialog,
+      Styles,
+      Tab,
+      Tabs,
+      Paper} = mui
+
+const DefaultRawTheme = Styles.LightRawTheme
+
+export default class LibraryNav extends React.Component {
+
+    constructor(props){
+        super(props)
+        this.state = {open: false, items: []}
+    }
+
+    static get childContextTypes(){
+        return {muiTheme: React.PropTypes.object}
+    }
+
+    handleOpen = () => {
+        console.log(this);
+        this.setState({open: true})
+    };
+
+    handleClose = () => {
+        this.setState({open: false})
+    };
+
+    getChildContext() {
+        return {
+            muiTheme: ThemeManager.getMuiTheme(DefaultRawTheme)
+        }
+    }
+
+    displayDialog(){
+        console.log(this)
+    }
+
+    readDir = () => {
+        console.log(fs.readdirSync('.'))
+    };
+
+    entriesTapped = () => {
+        var items = this.state.items
+        items.push({name: 'Stuff '+(items.length+1), id: items.length})
+        this.setState({items: items})
+    };
+
+    blank(){
+    
+    }
+
+    render(){
+        return (
+              <div id={this.props.id} className={this.props.className || ""}>
+                <List subheader="Library">
+                    <ListItem
+                        primaryText="Entries"
+                        onTouchTap={this.props.entriesTapped || this.blank}
+                        leftIcon={<img src="images/note.svg"/>}
+                        className="noselect"/>
+                    <ListItem
+                        primaryText="Starred"
+                        onTouchTap={this.props.starredTapped || this.blank}
+                        leftIcon={<ActionGrade color={colors.amberA700}/>}
+                        className="noselect" />
+                    <ListItem
+                        primaryText="Recents"
+                        onTouchTap={this.props.recentsTapped || this.blank}
+                        leftIcon={<History color="#4BAE4E"/>}
+                        className="noselect" />
+                    <ListItem
+                        primaryText="Trash"
+                        onTouchTap={this.props.trashTapped || this.blank}
+                        leftIcon={<Delete color={colors.grey500}/>}
+                        className="noselect" />
+                    <ListItem
+                        primaryText="All Notes"
+                        onTouchTap={this.props.allNotesTapped || this.blank}
+                        leftIcon={<Folder color="#FFCC5F" />}
+                        className="noselect" />
+                    {this.state.items.map(function(item){
+                        return <ListItem
+                                primaryText={item.name}
+                                key={item.id}
+                                className="noselect"/>;
+                    })}
+                </List>
+                <Divider />
+                <List subheader={<div>
+                                    <div className="inline">NoteBooks</div>
+                                    <IconButton
+                                        touch={true}
+                                        onTouchTap={this.props.addNotebookTapped || this.blank}
+                                        tooltip="Add New Notebook"
+                                        className="right inline">
+                                        <AddCircleOutline
+                                            color={colors.grey500}/>
+                                    </IconButton>
+                                </div>}>
+                </List>
+
+              </div>
+        )
+    }
+}
+

app/modules/MobileTearSheet.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {StylePropable} from 'material-ui/lib/mixins';
+
+const MobileTearSheet = React.createClass({
+
+  propTypes: {
+    children: React.PropTypes.node,
+    height: React.PropTypes.number,
+  },
+
+  contextTypes: {
+    muiTheme: React.PropTypes.object,
+  },
+
+  mixins: [
+    StylePropable,
+  ],
+
+  getDefaultProps() {
+    return {
+      height: 500,
+    };
+  },
+
+  render() {
+    const styles = {
+      root: {
+        float: 'left',
+        marginBottom: 24,
+        marginRight: 24,
+        width: 360,
+        height: "100%",
+      },
+      container: {
+        border: 'solid 1px #d9d9d9',
+        borderBottom: 'none',
+        height: '100%',
+        overflow: 'hidden',
+      },
+      bottomTear: {
+        display: 'block',
+        position: 'relative',
+        marginTop: -10,
+        width: 360,
+      },
+    };
+
+    return (
+      <div style={this.prepareStyles(styles.root)} className="tearsheet">
+        <div style={this.prepareStyles(styles.container)}>
+          {this.props.children}
+        </div>
+        <img style={this.prepareStyles(styles.bottomTear)} src="images/bottom-tear.svg" />
+      </div>
+    );
+  },
+
+});
+
+export default MobileTearSheet;