From 4175482212ff2a4c9be1c2ac9efa38df3ceab187 Mon Sep 17 00:00:00 2001 From: Alex Mikhalev Date: Mon, 25 Jun 2018 13:37:37 -0600 Subject: [PATCH] Added react router and nav bar --- app/components/App.tsx | 34 ++++++++++++---- app/components/NavBar.tsx | 25 ++++++++++++ app/components/index.ts | 2 + app/webpack.config.js | 1 + package.json | 3 ++ yarn.lock | 86 ++++++++++++++++++++++++++++++++++++++- 6 files changed, 142 insertions(+), 9 deletions(-) create mode 100644 app/components/NavBar.tsx diff --git a/app/components/App.tsx b/app/components/App.tsx index 90a601f..76e31bf 100644 --- a/app/components/App.tsx +++ b/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 ( + + ); +} + +function MessagesTestPage() { + return ( + + ); +} + class App extends React.Component { render() { return ( - - {/* */} - - - {/* */} - + + + + + + + + + + + ); } } diff --git a/app/components/NavBar.tsx b/app/components/NavBar.tsx new file mode 100644 index 0000000..3f5c76b --- /dev/null +++ b/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 {children}; +} + +function NavBar({ location }: { location: Location }) { + return ( + + Device grinklers + Messages test + + ); +} + +export default withRouter(NavBar); diff --git a/app/components/index.ts b/app/components/index.ts index ad43dc4..7d4f5f2 100644 --- a/app/components/index.ts +++ b/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"; diff --git a/app/webpack.config.js b/app/webpack.config.js index c9dbfd4..dbcb87e 100644 --- a/app/webpack.config.js +++ b/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 diff --git a/package.json b/package.json index 4083817..afc328e 100644 --- a/package.json +++ b/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" diff --git a/yarn.lock b/yarn.lock index aa42f01..89d9997 100644 --- a/yarn.lock +++ b/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"