From b18104c8d9e0bf819bec210212ca8349729432e6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 8 Nov 2016 16:19:53 -0300
Subject: [PATCH] Layout Container and Route handling

---
 client/coral-admin/package.json               |  2 +-
 client/coral-admin/src/AppRouter.js           | 24 ++++++++++++++++++
 client/coral-admin/src/components/App.js      | 23 +++--------------
 client/coral-admin/src/components/Header.js   |  6 ++---
 .../coral-admin/src/components/ui/Layout.js   |  5 ++++
 .../src/containers/LayoutContainer.js         | 25 +++++++++++++++++++
 6 files changed, 62 insertions(+), 23 deletions(-)
 create mode 100644 client/coral-admin/src/AppRouter.js
 create mode 100644 client/coral-admin/src/components/ui/Layout.js
 create mode 100644 client/coral-admin/src/containers/LayoutContainer.js

diff --git a/client/coral-admin/package.json b/client/coral-admin/package.json
index b8e147c48..3d82facbe 100644
--- a/client/coral-admin/package.json
+++ b/client/coral-admin/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "./node_modules/.bin/webpack --config webpack.config.js",
-    "watch": "./node_modules/.bin/webpack --config webpack.config.js --watch",
+    "watch": "./node_modules/.bin/webpack --config webpack.config.dev.js --watch",
     "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.dev.js --inline --hot --content-base public --port 3142"
   },
   "keywords": [],
diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
new file mode 100644
index 000000000..85bfbd49d
--- /dev/null
+++ b/client/coral-admin/src/AppRouter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Router, Route, Redirect, IndexRoute, IndexRedirect, browserHistory } from 'react-router';
+
+import config from 'services/config'
+
+import ModerationQueue from 'containers/ModerationQueue'
+import CommentStream from 'containers/CommentStream'
+import EmbedLink from 'components/EmbedLink'
+import Configure from 'containers/Configure'
+import CommunityContainer from 'containers/CommunityContainer'
+
+const routes = (
+  <Route path={config.base} component={LayoutContainer}>
+    <IndexRoute component={ModerationQueue} />
+    <Route path="embed" component={CommentStream} />
+    <Route path="embedlink" component={EmbedLink} />
+    <Route path="configure" component={Configure} />
+    <Route path="community" component={CommunityContainer} />
+  </Route>
+);
+
+const AppRouter = () => <Router history={browserHistory} routes={routes} />;
+
+export default AppRouter;
diff --git a/client/coral-admin/src/components/App.js b/client/coral-admin/src/components/App.js
index ff1c8f1d0..4e904257e 100644
--- a/client/coral-admin/src/components/App.js
+++ b/client/coral-admin/src/components/App.js
@@ -1,32 +1,17 @@
-
 import React from 'react'
 import { Provider } from 'react-redux'
-import { Layout } from 'react-mdl'
 import 'material-design-lite'
-import { Router, Route, browserHistory } from 'react-router'
-import ModerationQueue from 'containers/ModerationQueue'
+import { Layout } from 'react-mdl'
 import Header from 'components/Header'
 import store from 'services/store'
-import CommentStream from 'containers/CommentStream'
-import EmbedLink from 'components/EmbedLink'
-import Configure from 'containers/Configure'
-import config from 'services/config'
+
+import AppRouter from '../AppRouter'
 
 export default class App extends React.Component {
   render (props) {
     return (
       <Provider store={store}>
-        <Layout>
-          <Header>
-              <Router history={browserHistory}>
-                <Route path={config.base} component={ModerationQueue}>
-                  <Route path="embed" component={CommentStream} />
-                  <Route path="embedlink" component={EmbedLink} />
-                  <Route path="configure" component={Configure} />
-                </Route>
-              </Router>
-          </Header>
-        </Layout>
+        <AppRouter store={store} />
       </Provider>
     )
   }
diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js
index 88a92c7ef..6aed77913 100644
--- a/client/coral-admin/src/components/Header.js
+++ b/client/coral-admin/src/components/Header.js
@@ -9,9 +9,9 @@ export default (props) => (
   <Layout fixedDrawer>
     <Header title='Talk'>
       <Navigation>
-        <Link className={styles.navLink} to={`/${config.basePath}/`}>Moderate</Link>
-        <Link className={styles.navLink} to={`/${config.basePath}/`}>Community</Link>
-        <Link className={styles.navLink} to={`/${config.basePath}/configure`}>Configure</Link>
+        <Link className={styles.navLink} to="/">Moderate</Link>
+        <Link className={styles.navLink} to="community">Community</Link>
+        <Link className={styles.navLink} to="configure">Configure</Link>
       </Navigation>
     </Header>
     <Drawer>
diff --git a/client/coral-admin/src/components/ui/Layout.js b/client/coral-admin/src/components/ui/Layout.js
new file mode 100644
index 000000000..1daac2d8d
--- /dev/null
+++ b/client/coral-admin/src/components/ui/Layout.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const Layout = () => (
+
+)
\ No newline at end of file
diff --git a/client/coral-admin/src/containers/LayoutContainer.js b/client/coral-admin/src/containers/LayoutContainer.js
new file mode 100644
index 000000000..1d0c0d4f5
--- /dev/null
+++ b/client/coral-admin/src/containers/LayoutContainer.js
@@ -0,0 +1,25 @@
+import React, { Component }from 'react'
+import { connect } from 'react-redux'
+
+import Layout from '../components/ui/Layout'
+
+class LayoutContainer extends Component {
+  render () {
+    return <Layout { ...this.props } />
+  }
+}
+
+LayoutContainer.propTypes = {};
+
+const mapStateToProps = state => {
+  return {
+    data: {}
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+  dispatch
+});
+
+export default connect(mapStateToProps, mapDispatchToProps, null)(LayoutContainer);
+