From 2c66143d39d884eac2efafffe5167ccea0a4f890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 27 Sep 2018 11:44:02 -0300
Subject: [PATCH] Routing, Navigation, Styles

---
 src/core/client/admin/components/App.css      |  4 ++
 src/core/client/admin/components/App.tsx      | 13 +++--
 .../client/admin/components/Community.tsx     |  6 ++-
 .../client/admin/components/Configure.tsx     |  6 ++-
 src/core/client/admin/components/Moderate.tsx |  6 ++-
 .../client/admin/components/Navigation.css    |  7 +++
 .../client/admin/components/Navigation.tsx    | 48 ++++++++++++-------
 src/core/client/admin/components/Stories.tsx  |  6 ++-
 .../admin/containers/NavigationContainer.tsx  | 26 ----------
 9 files changed, 66 insertions(+), 56 deletions(-)
 create mode 100644 src/core/client/admin/components/App.css
 create mode 100644 src/core/client/admin/components/Navigation.css
 delete mode 100644 src/core/client/admin/containers/NavigationContainer.tsx

diff --git a/src/core/client/admin/components/App.css b/src/core/client/admin/components/App.css
new file mode 100644
index 000000000..47d40f6b0
--- /dev/null
+++ b/src/core/client/admin/components/App.css
@@ -0,0 +1,4 @@
+.root {
+  width: 1080px;
+  margin: 0 auto;
+}
diff --git a/src/core/client/admin/components/App.tsx b/src/core/client/admin/components/App.tsx
index c0c061fea..57a3ce8e1 100644
--- a/src/core/client/admin/components/App.tsx
+++ b/src/core/client/admin/components/App.tsx
@@ -1,12 +1,15 @@
 import React, { StatelessComponent } from "react";
 import { HorizontalGutter } from "talk-ui/components";
-import NavigationContainer from "../containers/NavigationContainer";
+import styles from "./App.css";
+import Navigation from "./Navigation";
 
 const App: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>
-    <NavigationContainer />
-    {children}
-  </HorizontalGutter>
+  <div className={styles.root}>
+    <HorizontalGutter>
+      <Navigation />
+      {children}
+    </HorizontalGutter>
+  </div>
 );
 
 export default App;
diff --git a/src/core/client/admin/components/Community.tsx b/src/core/client/admin/components/Community.tsx
index a5cebfc87..73dfddf69 100644
--- a/src/core/client/admin/components/Community.tsx
+++ b/src/core/client/admin/components/Community.tsx
@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Community: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Community</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Community</Typography>
+  </HorizontalGutter>
 );
 
 export default Community;
diff --git a/src/core/client/admin/components/Configure.tsx b/src/core/client/admin/components/Configure.tsx
index cd91a7bfc..264c0a614 100644
--- a/src/core/client/admin/components/Configure.tsx
+++ b/src/core/client/admin/components/Configure.tsx
@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Configure: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Configure</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Configure</Typography>
+  </HorizontalGutter>
 );
 
 export default Configure;
diff --git a/src/core/client/admin/components/Moderate.tsx b/src/core/client/admin/components/Moderate.tsx
index 04eb7dc53..d527ebd27 100644
--- a/src/core/client/admin/components/Moderate.tsx
+++ b/src/core/client/admin/components/Moderate.tsx
@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Moderate: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Moderate</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Moderate</Typography>
+  </HorizontalGutter>
 );
 
 export default Moderate;
diff --git a/src/core/client/admin/components/Navigation.css b/src/core/client/admin/components/Navigation.css
new file mode 100644
index 000000000..c41c8523c
--- /dev/null
+++ b/src/core/client/admin/components/Navigation.css
@@ -0,0 +1,7 @@
+.link {
+  text-decoration: none;
+}
+
+.active {
+  border-bottom: 3px solid var(--palette-primary-main);
+}
diff --git a/src/core/client/admin/components/Navigation.tsx b/src/core/client/admin/components/Navigation.tsx
index ec92665ee..f440ac418 100644
--- a/src/core/client/admin/components/Navigation.tsx
+++ b/src/core/client/admin/components/Navigation.tsx
@@ -1,25 +1,39 @@
+import { Link } from "found";
 import React, { StatelessComponent } from "react";
 import { Button, Flex, Typography } from "talk-ui/components";
+import styles from "./Navigation.css";
 
-export interface AppProps {
-  goToModerate: () => void;
-  goToCommunity: () => void;
-  goToStories: () => void;
-  goToConfigure: () => void;
-}
-
-const Navigation: StatelessComponent<AppProps> = ({
-  goToModerate,
-  goToCommunity,
-  goToStories,
-  goToConfigure,
-}) => (
+const Navigation: StatelessComponent = () => (
   <Flex itemGutter="double">
     <Typography variant="heading1">Talk</Typography>
-    <Button onClick={goToModerate}>Moderate</Button>
-    <Button onClick={goToCommunity}>Community</Button>
-    <Button onClick={goToStories}>Stories</Button>
-    <Button onClick={goToConfigure}>Configure</Button>
+    <Link
+      to="/admin/moderate"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Moderate</Button>
+    </Link>
+    <Link
+      to="/admin/community"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Community</Button>
+    </Link>
+    <Link
+      to="/admin/stories"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Stories</Button>
+    </Link>
+    <Link
+      to="/admin/configure"
+      className={styles.link}
+      activeClassName={styles.active}
+    >
+      <Button>Configure</Button>
+    </Link>
   </Flex>
 );
 
diff --git a/src/core/client/admin/components/Stories.tsx b/src/core/client/admin/components/Stories.tsx
index 3232b8f7b..148848bff 100644
--- a/src/core/client/admin/components/Stories.tsx
+++ b/src/core/client/admin/components/Stories.tsx
@@ -1,8 +1,10 @@
 import React, { StatelessComponent } from "react";
-import { HorizontalGutter } from "talk-ui/components";
+import { HorizontalGutter, Typography } from "talk-ui/components";
 
 const Stories: StatelessComponent = ({ children }) => (
-  <HorizontalGutter>Stories</HorizontalGutter>
+  <HorizontalGutter>
+    <Typography variant="heading3">Stories</Typography>
+  </HorizontalGutter>
 );
 
 export default Stories;
diff --git a/src/core/client/admin/containers/NavigationContainer.tsx b/src/core/client/admin/containers/NavigationContainer.tsx
deleted file mode 100644
index 62cadb39d..000000000
--- a/src/core/client/admin/containers/NavigationContainer.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Router, withRouter } from "found";
-import React, { Component } from "react";
-import Navigation from "../components/Navigation";
-
-interface NavigationContainerProps {
-  router: Router;
-}
-
-class NavigationContainer extends Component<NavigationContainerProps> {
-  private goToModerate = () => this.props.router.replace("/admin/moderate");
-  private goToCommunity = () => this.props.router.replace("/admin/community");
-  private goToStories = () => this.props.router.replace("/admin/stories");
-  private goToConfigure = () => this.props.router.replace("/admin/configures");
-  public render() {
-    return (
-      <Navigation
-        goToModerate={this.goToModerate}
-        goToCommunity={this.goToCommunity}
-        goToStories={this.goToStories}
-        goToConfigure={this.goToConfigure}
-      />
-    );
-  }
-}
-
-export default withRouter(NavigationContainer);