Added react router and nav bar

app/components/App.tsx

@@ -1,24 +1,42 @@
 import { observer } from "mobx-react";
 // import DevTools from "mobx-react-devtools";
 import * as React from "react";
+import { Redirect, Route } from "react-router";
+import { BrowserRouter as Router } from "react-router-dom";
 import { Container } from "semantic-ui-react";
 
-import { DevicesView, MessagesView } from "@app/components";
-// import MessageTest from "@app/components/MessageTest";
+import { DevicesView, MessagesView, MessageTest, NavBar } from "@app/components";
 
 import "@app/styles/app.css";
 import "font-awesome/css/font-awesome.css";
 import "semantic-ui-css/semantic.css";
 
+function DevicePage() {
+    return (
+        <DevicesView/>
+    );
+}
+
+function MessagesTestPage() {
+    return (
+        <MessageTest/>
+    );
+}
+
 class App extends React.Component {
     render() {
         return (
+            <Router>
                 <Container className="app">
-                {/* <MessageTest /> */}
-                <DevicesView />
+                    <NavBar />
+
+                    <Route path="/devices/grinklers" component={DevicePage}/>
+                    <Route path="/messagesTest" component={MessagesTestPage}/>
+                    <Redirect to="/"/>
+
                     <MessagesView/>
-                {/* <DevTools /> */}
                 </Container>
+            </Router>
         );
     }
 }

app/components/NavBar.tsx

@@ -0,0 +1,25 @@
+import { Location } from "history";
+import * as React from "react";
+import { withRouter } from "react-router";
+import { Link } from "react-router-dom";
+import { Menu } from "semantic-ui-react";
+
+interface NavItemProps {
+    to: string;
+    children: React.ReactNode;
+}
+
+function NavItem({ to, children }: NavItemProps) {
+    return <Menu.Item as={Link} to={to} active={location.pathname.startsWith(to)}>{children}</Menu.Item>;
+}
+
+function NavBar({ location }: { location: Location }) {
+    return (
+        <Menu>
+            <NavItem to="/devices/grinklers">Device grinklers</NavItem>
+            <NavItem to="/messagesTest">Messages test</NavItem>
+        </Menu>
+    );
+}
+
+export default withRouter(NavBar);

app/components/index.ts

@@ -7,3 +7,5 @@ export { default as ProgramTable } from "./ProgramTable";
 export { default as RunSectionForm } from "./RunSectionForm";
 export { default as SectionRunnerView } from "./SectionRunnerView";
 export { default as SectionTable } from "./SectionTable";
+export { default as NavBar } from "./NavBar";
+export { default as MessageTest } from "./MessageTest";

app/webpack.config.js

@@ -220,6 +220,7 @@ const getConfig = module.exports = (env) => {
         },
         devServer: {
             hot: true,
+            historyApiFallback: true,
             port: 8081,
             proxy: [{
                 context: ["/api"], // TODO: update when there is actually an api

package.json

@@ -35,6 +35,7 @@
   },
   "homepage": "https://github.com/amikhalev/sprinklers3#readme",
   "dependencies": {
+    "@types/react-router-dom": "^4.2.7",
     "chalk": "^2.4.1",
     "express": "^4.16.3",
     "express-pino-logger": "^3.0.2",
@@ -44,6 +45,8 @@
     "mqtt": "^2.18.1",
     "pino": "^4.17.3",
     "postcss-cssnext": "^3.1.0",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "serializr": "^1.2.0",
     "uglify-es": "3.3.9",
     "ws": "^5.2.1"

yarn.lock

@@ -54,6 +54,10 @@
     "@types/express-serve-static-core" "*"
     "@types/serve-static" "*"
 
+"@types/history@*":
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.6.2.tgz#12cfaba693ba20f114ed5765467ff25fdf67ddb0"
+
 "@types/lodash@^4.14.110":
   version "4.14.110"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.110.tgz#fb07498f84152947f30ea09d89207ca07123461e"
@@ -99,6 +103,21 @@
     "@types/node" "*"
     "@types/react" "*"
 
+"@types/react-router-dom@^4.2.7":
+  version "4.2.7"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.2.7.tgz#9d36bfe175f916dd8d7b6b0237feed6cce376b4c"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "4.0.27"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-4.0.27.tgz#553f54df7c4b09d6046b0201ce9b91c46b2940e3"
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@16.4.1":
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.1.tgz#c53bbfb4a78933db587da085ac60dbf5fcf73f8f"
@@ -2530,6 +2549,16 @@ help-me@^1.0.1:
     through2 "^2.0.1"
     xtend "^4.0.0"
 
+history@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
+  dependencies:
+    invariant "^2.2.1"
+    loose-envify "^1.2.0"
+    resolve-pathname "^2.2.0"
+    value-equal "^0.4.0"
+    warning "^3.0.0"
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -2798,6 +2827,12 @@ interpret@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
+invariant@^2.2.1, invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
 invert-kv@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
@@ -3375,7 +3410,7 @@ long@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/long/-/long-3.2.0.tgz#d821b7138ca1cb581c172990ef14db200b5c474b"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -4220,6 +4255,12 @@ path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
 
+path-to-regexp@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  dependencies:
+    isarray "0.0.1"
+
 path-type@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -5088,6 +5129,29 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
+react-router-dom@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
+  dependencies:
+    history "^4.7.2"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    prop-types "^15.6.1"
+    react-router "^4.3.1"
+    warning "^4.0.1"
+
+react-router@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
+  dependencies:
+    history "^4.7.2"
+    hoist-non-react-statics "^2.5.0"
+    invariant "^2.2.4"
+    loose-envify "^1.3.1"
+    path-to-regexp "^1.7.0"
+    prop-types "^15.6.1"
+    warning "^4.0.1"
+
 react@16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
@@ -5351,6 +5415,10 @@ resolve-from@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
 
+resolve-pathname@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
+
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -6456,6 +6524,10 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+value-equal@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6482,6 +6554,18 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+warning@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
+  dependencies:
+    loose-envify "^1.0.0"
+
+warning@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745"
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"