From ef642cc593b5df9163a772a09208d9fb4aec5e65 Mon Sep 17 00:00:00 2001 From: stackbaxter Date: Wed, 6 Sep 2017 20:15:30 -0500 Subject: [PATCH] believe it's mostly there --- package.json | 2 +- src/App.js | 58 +++++++++++++++++++++++++++++++------- src/components/Charts.js | 5 ++++ src/components/Marquee.js | 2 +- src/components/Profile.js | 2 +- src/components/Profiles.js | 3 +- src/components/Settings.js | 5 ++++ src/components/SideNav.js | 56 ++++++++++++++++++++++++++++++------ src/components/Tables.js | 5 ++++ src/components/Wall.js | 5 ++++ yarn.lock | 54 +++++++++++++++++++---------------- 11 files changed, 150 insertions(+), 47 deletions(-) create mode 100644 src/components/Charts.js create mode 100644 src/components/Settings.js create mode 100644 src/components/Tables.js create mode 100644 src/components/Wall.js diff --git a/package.json b/package.json index ba2f6ca..84c0e3a 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "react": "^15.3.2", "react-dom": "^15.3.2", "react-redux": "^5.0.4", - "react-router-dom": "^4.1.1", + "react-router-dom": "^4.2.2", "redux": "^3.6.0" }, "scripts": { diff --git a/src/App.js b/src/App.js index 15bddc9..4f913fd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,21 +1,59 @@ import React from "react"; +import Charts from "./components/Charts"; +import Tables from "./components/Tables"; +import Settings from "./components/Settings"; +import Wall from "./components/Wall"; +import Profiles from "./components/Profiles"; +import Marquee from "./components/Marquee"; import TopNav from "./components/TopNav"; import SideNav from "./components/SideNav"; +import Dashboard from "./components/Dashboard"; +import Profile from "./components/Profile"; + + +import { + BrowserRouter, + Route, + Switch + } from "react-router-dom"; function App() { + // ### Routes + // * / -> Dashboard + // * /charts -> Charts + // * /tables -> Tables + // * /settings -> Settings + // * /wall -> Wall + // * /profiles -> Profiles + // * /marquee/:text -> Marquee + // * /profile/:id -> Profile + return ( -
-
- -
- {/* PUT YOUR ROUTES HERE */} + +
+
+ +
+ + + + + + + + + + + + + {/* PUT YOUR ROUTES HERE */} +
-
- + ); } diff --git a/src/components/Charts.js b/src/components/Charts.js new file mode 100644 index 0000000..3da84e3 --- /dev/null +++ b/src/components/Charts.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Charts() { + return
CHARTS!!
; +} diff --git a/src/components/Marquee.js b/src/components/Marquee.js index 820e8c4..21565c7 100644 --- a/src/components/Marquee.js +++ b/src/components/Marquee.js @@ -1,7 +1,7 @@ import React from "react"; function Marquee(props) { - const message = "hello"; + const message = props.match.params.text; return ( {message} ); diff --git a/src/components/Profile.js b/src/components/Profile.js index c4eb646..7cc69ac 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -2,7 +2,7 @@ import React from "react"; import {connect} from "react-redux"; function Profile(props) { - const userId = 0; + const userId = props.match.params.id; const user = props.users.find(u => u.id == userId) || {}; return (
diff --git a/src/components/Profiles.js b/src/components/Profiles.js index 3409812..02770de 100644 --- a/src/components/Profiles.js +++ b/src/components/Profiles.js @@ -1,12 +1,13 @@ import React from "react"; import {connect} from "react-redux"; +import {Link} from "react-router-dom"; function Profiles(props) { const userDivs = props.users.map((user,i) => { return (
{user.firstName} - {user.lastName} - View + View
); }); return ( diff --git a/src/components/Settings.js b/src/components/Settings.js new file mode 100644 index 0000000..064302a --- /dev/null +++ b/src/components/Settings.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Settings() { + return
SETTINGS!!
; +} diff --git a/src/components/SideNav.js b/src/components/SideNav.js index 9caaf7c..fe14ed9 100644 --- a/src/components/SideNav.js +++ b/src/components/SideNav.js @@ -1,26 +1,64 @@ import React from "react"; -// import {Link} from "react-router-dom"; +import {Link} from "react-router-dom"; function SideNav() { return (
  • - {/* + Dashboard - */} +
  • - - Charts - + + + Charts + +
    • +
  • + + + Tables + +
    • +
  • + + + Settings + +
    • +
  • + + + Wall +
  • - - Tables - + + + Profiles + +
    • +
  • + + + Marquee + +
    • +
  • + + + I LOOOOVE Routes! + +
    • +
  • + + + React Router Rules +
); diff --git a/src/components/Tables.js b/src/components/Tables.js new file mode 100644 index 0000000..b05e319 --- /dev/null +++ b/src/components/Tables.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Tables() { + return
TABLES!!
; +} diff --git a/src/components/Wall.js b/src/components/Wall.js new file mode 100644 index 0000000..1e4927e --- /dev/null +++ b/src/components/Wall.js @@ -0,0 +1,5 @@ +import React from "react"; + +export default function Wall() { + return
WALL!!
; +} diff --git a/yarn.lock b/yarn.lock index d0671b2..33ca8a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2606,24 +2606,28 @@ he@1.1.x: version "1.1.0" resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7" -history@^4.5.1, history@^4.6.0: - version "4.6.1" - resolved "https://registry.yarnpkg.com/history/-/history-4.6.1.tgz#911cf8eb65728555a94f2b12780a0c531a14d2fd" +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.0.0" - value-equal "^0.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" warning "^3.0.0" hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0: +hoist-non-react-statics@^1.0.3: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" +hoist-non-react-statics@^2.3.0: + version "2.3.1" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -4194,7 +4198,7 @@ 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.5.3: +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: @@ -4678,24 +4682,26 @@ react-redux@^5.0.4: loose-envify "^1.1.0" prop-types "^15.0.0" -react-router-dom@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025" +react-router-dom@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" dependencies: - history "^4.5.1" + history "^4.7.2" + invariant "^2.2.2" loose-envify "^1.3.1" prop-types "^15.5.4" - react-router "^4.1.1" + react-router "^4.2.0" + warning "^3.0.0" -react-router@^4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.1.1.tgz#d448f3b7c1b429a6fbb03395099949c606b1fe95" +react-router@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986" dependencies: - history "^4.6.0" - hoist-non-react-statics "^1.2.0" + history "^4.7.2" + hoist-non-react-statics "^2.3.0" invariant "^2.2.2" loose-envify "^1.3.1" - path-to-regexp "^1.5.3" + path-to-regexp "^1.7.0" prop-types "^15.5.4" warning "^3.0.0" @@ -5021,9 +5027,9 @@ resolve-from@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-1.0.1.tgz#26cbfe935d1aeeeabb29bc3fe5aeb01e93d44226" -resolve-pathname@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.1.0.tgz#e8358801b86b83b17560d4e3c382d7aef2100944" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" resolve@1.1.7, resolve@1.1.x: version "1.1.7" @@ -5685,9 +5691,9 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" -value-equal@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.2.1.tgz#c220a304361fce6994dbbedaa3c7e1a1b895871d" +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, vary@~1.1.0: version "1.1.0"