[ADD] component segments

src/components/App.js

@@ -1,132 +1,36 @@
 import React, { Component } from 'react'
-import { withStyles } from 'material-ui/styles'
-import Drawer from 'material-ui/Drawer'
-import AppBar from 'material-ui/AppBar'
-import Toolbar from 'material-ui/Toolbar'
-import Typography from 'material-ui/Typography'
-import ListSubheader from 'material-ui/List/ListSubheader'
-import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
-import FactoryIcon from './icons/FactoryIcon'
-import TaskIcon from './icons/TaskIcon'
-import DockerIcon from './icons/DockerIcon'
-import UserIcon from './icons/UserIcon'
-import PermissionIcon from './icons/PermissionIcon'
-import AboutIcon from './icons/AboutIcon'
-import ContainersTable from './tables/ContainersTable'
-import Avatar from 'material-ui/Avatar'
-import Button from 'material-ui/Button'
-import Menu, { MenuItem } from 'material-ui/Menu'
+import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
+import Reboot from 'material-ui/Reboot'
+import Base from './Base'
 
-const drawerWidth = 265
-
-const styles = theme => ({
-    root: {
-        flexGrow: 1,
-        zIndex: 1,
-        overflow: 'hidden',
-        position: 'relative',
-        display: 'flex'
-    },
-    appBar: {
-        zIndex: theme.zIndex.drawer + 1,
-    },
-    toolbar: theme.mixins.toolbar,
-    titleBar: {
-        flexGrow: 1
-    },
-    userBar: {
-        display: 'flex',
-    },
-    avatar: {
-        color: '#fff',
-        backgroundColor: '#fff'
-    },
-    drawerPaper: {
-        position: 'relative',
-        width: drawerWidth
-    },
-    content: {
-        flexGrow: 1,
-        backgroundColor: theme.palette.background.default,
-        padding: theme.spacing.unit * 3,
-        minWidth: 0
-    }
-});
-  
 class App extends Component {
+    componentDidCatch(error, info) {
+        console.log(error)
+        console.log(info)
+    }
+
     render() {
-        const { classes } = this.props
+        const theme = createMuiTheme({
+            html: {
+                fontSize: '62.5%'
+            },
+            palette: {
+                primary: { 
+                    main: '#0288d1'
+                },
+            },
+            typography: {
+                fontSize: 12
+            }
+        })
 
         return (
-            <div className={classes.root}>
-                <AppBar position="absolute" className={classes.appBar}>
-                    <Toolbar>
-                        <Typography className={classes.titleBar} variant="title" color="inherit" noWrap>
-                            Eiru Automation
-                        </Typography>
-                        <div className={classes.userBar}>
-                            <Avatar className={classes.avatar}>
-                                <UserIcon />
-                            </Avatar>
-                            <Button color="inherit">Anónimo</Button>
-                            <Menu>
-                                <MenuItem>Mi Perfil</MenuItem>
-                                <MenuItem>Salir</MenuItem>
-                            </Menu>
-                        </div>
-                    </Toolbar>
-                </AppBar>
-                <Drawer variant="permanent" classes={{paper: classes.drawerPaper}}>
-                    <div className={classes.toolbar} />
-                    <List component="nav">
-                        <ListSubheader>Sistemas</ListSubheader>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <DockerIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Contenedores" />
-                        </ListItem>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <TaskIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Mis tareas" />
-                        </ListItem>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <FactoryIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Tareas automatizadas" />
-                        </ListItem>
-                        <ListSubheader>Administración</ListSubheader>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <UserIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Usuarios" />
-                        </ListItem>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <PermissionIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Permisos" />
-                        </ListItem>
-                        <ListSubheader>Ayuda</ListSubheader>
-                        <ListItem button>
-                            <ListItemIcon>
-                                <AboutIcon />
-                            </ListItemIcon>
-                            <ListItemText primary="Acerca" />
-                        </ListItem>
-                    </List>
-                </Drawer>
-                <main className={classes.content}>
-                    <div className={classes.toolbar}></div>
-                    <ContainersTable />
-                </main>
-            </div>
+            <MuiThemeProvider theme={theme}>
+                <Reboot />
+                <Base />
+            </MuiThemeProvider>
         )
     }
 }
 
-export default withStyles(styles)(App);
+export default App;

src/components/Base.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import Topbar from './Topbar'
+import Sidebar from './Sidebar'
+import { withStyles } from 'material-ui/styles'
+
+const styles = theme => ({
+    root: {
+        flexGrow: 1,
+        zIndex: 1,
+        overflow: 'hidden',
+        position: 'relative',
+        display: 'flex'
+    },
+    content: {
+        flexGrow: 1,
+        backgroundColor: theme.palette.background.default,
+        padding: theme.spacing.unit * 3,
+        minWidth: 0
+    }
+})
+
+class Base extends Component {
+    render() {
+        const { classes } = this.props
+
+        return (
+            <div className={classes.root}>
+                <Topbar />
+                <Sidebar />
+                <main className={classes.content}>
+                    {this.props.children}
+                </main>
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(Base)

src/components/Sidebar.js

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import Drawer from 'material-ui/Drawer'
+import ListSubheader from 'material-ui/List/ListSubheader'
+import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'
+import FactoryIcon from './icons/FactoryIcon'
+import TaskIcon from './icons/TaskIcon'
+import DockerIcon from './icons/DockerIcon'
+import UserIcon from './icons/UserIcon'
+import PermissionIcon from './icons/PermissionIcon'
+import AboutIcon from './icons/AboutIcon'
+import { withStyles } from 'material-ui/styles'
+
+const drawerWidth = 265
+
+const styles = theme => ({
+    root: {
+        position: 'relative',
+        width: drawerWidth
+    },
+    toolbar: theme.mixins.toolbar
+})
+
+class Sidebar extends Component {
+    render() {
+        const { classes } = this.props
+
+        return (
+            <Drawer variant="permanent" classes={{paper: classes.root}}>
+                <div className={classes.toolbar} />
+                <List component="nav">
+                    <ListSubheader>Sistemas</ListSubheader>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <DockerIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Contenedores" />
+                    </ListItem>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <TaskIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Mis tareas" />
+                    </ListItem>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <FactoryIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Tareas automatizadas" />
+                    </ListItem>
+                    <ListSubheader>Administración</ListSubheader>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <UserIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Usuarios" />
+                    </ListItem>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <PermissionIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Permisos" />
+                    </ListItem>
+                    <ListSubheader>Ayuda</ListSubheader>
+                    <ListItem button>
+                        <ListItemIcon>
+                            <AboutIcon />
+                        </ListItemIcon>
+                        <ListItemText primary="Acerca" />
+                    </ListItem>
+                </List>
+            </Drawer>
+        )
+    }
+}
+
+export default withStyles(styles)(Sidebar)
+

src/components/Topbar.js

@@ -1,14 +1,53 @@
 import React, { Component } from 'react'
+import AppBar from 'material-ui/AppBar'
+import Toolbar from 'material-ui/Toolbar'
+import Typography from 'material-ui/Typography'
+import Avatar from 'material-ui/Avatar'
+import Button from 'material-ui/Button'
+import Menu, { MenuItem } from 'material-ui/Menu'
+import UserIcon from './icons/UserIcon'
+import { withStyles } from 'material-ui/styles'
 
 const styles = theme => ({
     root: {
-        display: 'flex'
+        zIndex: theme.zIndex.drawer + 1,
+    },
+    titleBar: {
+        flexGrow: 1
+    },
+    userBar: {
+        display: 'flex',
+    },
+    avatar: {
+        color: '#fff',
+        backgroundColor: '#fff'
     }
 })
 
 class Topbar extends Component {
     render() {
-        
+        const { classes } = this.props
+
+        return (
+            <AppBar position="absolute" className={classes.root}>
+                <Toolbar>
+                    <Typography className={classes.titleBar} variant="title" color="inherit" noWrap>
+                        Eiru Automation
+                    </Typography>
+                    <div className={classes.userBar}>
+                        <Avatar className={classes.avatar}>
+                            <UserIcon />
+                        </Avatar>
+                        <Button color="inherit">Anónimo</Button>
+                        <Menu>
+                            <MenuItem>Mi Perfil</MenuItem>
+                            <MenuItem>Salir</MenuItem>
+                        </Menu>
+                    </div>
+                </Toolbar>
+            </AppBar>
+        )
     }
 }
 
+export default withStyles(styles)(Topbar)

src/index.js

@@ -1,30 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import Reboot from 'material-ui/Reboot'
-import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
 import App from './components/App'
 import registerServiceWorker from './registerServiceWorker'
 import 'typeface-roboto'
 
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
-
-const theme = createMuiTheme({
-    palette: {
-        primary: { 
-            main: '#0288d1'
-        },
-    },
-    typography: {
-        fontSize: 12
-    }
-})
-
-const AppTheme = () => (
-    <MuiThemeProvider theme={theme}>
-        <Reboot /> 
-        <App />
-    </MuiThemeProvider>
-)
-
-ReactDOM.render(<AppTheme />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();