[IMP] project structure

package.json

@@ -6,6 +6,7 @@
     "material-ui": "^1.0.0-beta.36",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-helmet": "^5.2.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.1",

src/components/App.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
 import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
 import Reboot from 'material-ui/Reboot'
-import Base from './Base'
+import Dashboard from './pages/Dashboard'
+import ContainersList from './pages/ContainersList'
 
 class App extends Component {
     componentDidCatch(error, info) {
@@ -27,10 +29,13 @@ class App extends Component {
         return (
             <MuiThemeProvider theme={theme}>
                 <Reboot />
-                <Base />
+                <Router>
+                    <Route path='/dashboard' component={ContainersList} />
+                    <Route path='/containers' component={ContainersList} />
+                </Router>
             </MuiThemeProvider>
         )
     }
 }
 
-export default App;
+export default App

src/components/Base.js → src/components/common/Base.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Helmet } from 'react-helmet'
 import Topbar from './Topbar'
 import Sidebar from './Sidebar'
 import { withStyles } from 'material-ui/styles'
@@ -11,6 +12,7 @@ const styles = theme => ({
         position: 'relative',
         display: 'flex'
     },
+    toolbar: theme.mixins.toolbar,
     content: {
         flexGrow: 1,
         backgroundColor: theme.palette.background.default,
@@ -23,11 +25,17 @@ class Base extends Component {
     render() {
         const { classes } = this.props
 
+        console.log(this.props)
+
         return (
             <div className={classes.root}>
+                <Helmet>
+                    <title>{this.props.title}</title>
+                </Helmet>
                 <Topbar />
                 <Sidebar />
                 <main className={classes.content}>
+                    <div className={classes.toolbar}></div>
                     {this.props.children}
                 </main>
             </div>

src/components/Sidebar.js → src/components/common/Sidebar.js

@@ -2,12 +2,12 @@ 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 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

src/components/Topbar.js → src/components/common/Topbar.js

@@ -5,7 +5,7 @@ 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 UserIcon from '../icons/UserIcon'
 import { withStyles } from 'material-ui/styles'
 
 const styles = theme => ({

src/components/pages/ContainersList.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+import ContainersTable from '../tables/ContainersTable'
+
+class ContainerList extends Component {
+    render() {
+        return (
+            <Base title="Contenedores">
+                <ContainersTable />
+            </Base>
+        )
+    }
+}
+
+export default ContainerList

src/components/pages/Dashboard.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import Base from '../common/Base'
+import Typography from 'material-ui/Typography'
+
+class Dashboard extends Component {
+    render() {
+        return (
+            <Base title="Dashboard">
+                <Typography>Dashboard</Typography>
+            </Base>
+        )
+    }
+}
+
+export default Dashboard

yarn.lock

@@ -2543,6 +2543,10 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+exenv@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+
 expand-brackets@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
@@ -5776,6 +5780,15 @@ react-event-listener@^0.5.1:
     prop-types "^15.6.0"
     warning "^3.0.0"
 
+react-helmet@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.0.tgz#a81811df21313a6d55c5f058c4aeba5d6f3d97a7"
+  dependencies:
+    deep-equal "^1.0.1"
+    object-assign "^4.1.1"
+    prop-types "^15.5.4"
+    react-side-effect "^1.1.0"
+
 react-jss@^8.1.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-8.3.3.tgz#677a57569d3e4f5099fcdeafeddd8d2c62ab5977"
@@ -5873,6 +5886,13 @@ react-scrollbar-size@^2.0.2:
     react-event-listener "^0.5.1"
     stifle "^1.0.2"
 
+react-side-effect@^1.1.0:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.1.5.tgz#f26059e50ed9c626d91d661b9f3c8bb38cd0ff2d"
+  dependencies:
+    exenv "^1.2.1"
+    shallowequal "^1.0.1"
+
 react-transition-group@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
@@ -6403,6 +6423,10 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+shallowequal@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"