Routes: outsource AppBar component

src/components/AppBar/config.ts

@@ -0,0 +1,33 @@
+export const routes = {
+  dashboard: "Dashboard",
+  calendar: "Calendar",
+  timeline: "Timeline",
+  tokenomics: "Tokenomics",
+  validators: "Validators",
+  "validator-report": "Validator Report",
+  storage: "Storage",
+  spending: "Spending",
+  transactions: "Transfers",
+  burners: "Top Burners",
+  mint: "Mints",
+};
+
+export const css = {
+  appBar: {
+    flexDirection: "row",
+    backgroundColor: "#000",
+    color: "#fff",
+  },
+  appLogo: {
+    display: "block",
+    width: "150px",
+    color: "#4038ff",
+  },
+  navBar: {
+    "&:hover": {
+      backgroundColor: "#4038ff",
+    },
+  },
+  navBarLink: { color: "#fff" },
+  toolBar: { paddingLeft: "12px", backgroundColor: "#000" },
+};

src/components/AppBar/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { AppBar, Button, makeStyles, Toolbar } from "@material-ui/core";
+import joystream from "../../joystream.svg";
+
+import { css, routes } from "./config";
+
+const useStyles = makeStyles(css);
+
+const Bar = () => {
+  const classes = useStyles();
+
+  return (
+    <AppBar position="static" className={classes.appBar}>
+      <Toolbar style={css.toolBar}>
+        <Button color="inherit" component={Link} to="/">
+          <img
+            src={joystream}
+            className={classes.appLogo}
+            alt="Joystream logo"
+          />
+        </Button>
+
+        {Object.keys(routes).map((route) => (
+          <Button
+            key={route}
+            className={classes.navBar}
+            style={css.navBarLink}
+            component={Link}
+            to={"/" + route}
+          >
+            {routes[route]}
+          </Button>
+        ))}
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Bar;

src/components/Routes/index.tsx

@@ -1,5 +1,8 @@
-import { Switch, Route, Link } from "react-router-dom";
+import React from "react";
+import { MemoryRouter } from "react-router";
+import { Switch, Route } from "react-router-dom";
 import {
+  AppBar,
   Calendar,
   Councils,
   Curation,
@@ -20,10 +23,7 @@ import {
   Burners,
   ValidatorReport,
 } from "..";
-import React from "react";
-import { AppBar, Button, makeStyles, Toolbar } from "@material-ui/core";
-import { MemoryRouter } from "react-router";
-import joystream from "../../joystream.svg";
+
 import { IState } from "../../types";
 
 interface IProps extends IState {
@@ -31,132 +31,14 @@ interface IProps extends IState {
   toggleFooter: () => void;
 }
 
-const useStyles = makeStyles({
-  appBar: {
-    flexDirection: "row",
-    backgroundColor: "#000",
-    color: "#fff",
-  },
-  appLogo: {
-    display: "block",
-    width: "150px",
-    color: "#4038ff",
-  },
-  navbar: {
-    "&:hover": {
-      backgroundColor: "#4038ff",
-    },
-  },
-});
-
 const Routes = (props: IProps) => {
-  const classes = useStyles();
-  const navBarLink = { color: "#fff" };
   const { reports, tokenomics } = props;
 
   return (
     <div>
       <MemoryRouter>
         <div style={{ flexGrow: 1 }}>
-          <AppBar position="static" className={classes.appBar}>
-            <Toolbar style={{ paddingLeft: "12px", backgroundColor: "#000" }}>
-              <Button color="inherit" component={Link} to="/">
-                <img
-                  src={joystream}
-                  className={classes.appLogo}
-                  alt="Joystream logo"
-                />
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/dashboard"
-              >
-                Dashboard
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/calendar"
-              >
-                Calendar
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/timeline"
-              >
-                Timeline
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/tokenomics"
-              >
-                Reports
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/validators"
-              >
-                Validators
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/validator-report"
-              >
-                Validator Report
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/storage"
-              >
-                Storage
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/spending"
-              >
-                Spending
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/transactions"
-              >
-                Transfers
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/burners"
-              >
-                Top Burners
-              </Button>
-              <Button
-                className={classes.navbar}
-                style={navBarLink}
-                component={Link}
-                to="/mint"
-              >
-                Toolbox
-              </Button>
-            </Toolbar>
-          </AppBar>
+          <AppBar />
         </div>
         <div>
           <Switch>

src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as AppBar } from "./AppBar";
 export { default as Back } from "./Back";
 export { default as Bounties } from "./Bounties";
 export { default as Calendar } from "./Calendar";