From fc51186534ff2ab61db11e6103c920122f16f4e3 Mon Sep 17 00:00:00 2001 From: Craig Copeland Date: Sat, 11 Nov 2017 13:55:58 -0600 Subject: [PATCH 1/2] initial push. Created additional components. Ready to make changes to App.js --- package.json | 2 +- src/App.js | 3 ++- src/components/Charts.js | 11 +++++++++++ src/components/Settings.js | 11 +++++++++++ src/components/Tables.js | 11 +++++++++++ src/components/Wall.js | 11 +++++++++++ 6 files changed, 47 insertions(+), 2 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..1407117 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "start": "nf start", "lint": "eslint src", "react-app": "react-scripts start", - "api": "json-server --id _id --watch --port 4000 db.json", + "api": "json-server --id _id --watch --port 3000 db.json", "build": "react-scripts build", "test": "npm run lint && react-scripts test --env=jsdom", "eject": "react-scripts eject" diff --git a/src/App.js b/src/App.js index 15bddc9..806ade9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,11 @@ import React from "react"; import TopNav from "./components/TopNav"; import SideNav from "./components/SideNav"; +import { BrowserRouter, Switch, Route } from "react-router-dom" function App() { return ( -
+
+ Check out my table! +
+ Check out my wall! +
Date: Sat, 11 Nov 2017 16:37:44 -0600 Subject: [PATCH 2/2] Completed react router practice --- src/App.js | 24 +++++++++++++++++-- src/components/Charts.js | 4 ++-- src/components/Marquee.js | 4 ++-- src/components/Profile.js | 5 ++-- src/components/Profiles.js | 7 +++--- src/components/Settings.js | 2 +- src/components/SideNav.js | 49 ++++++++++++++++++++++++++++++-------- src/components/Tables.js | 2 +- src/components/Wall.js | 2 +- 9 files changed, 73 insertions(+), 26 deletions(-) diff --git a/src/App.js b/src/App.js index 806ade9..8fd45b6 100644 --- a/src/App.js +++ b/src/App.js @@ -2,9 +2,18 @@ import React from "react"; import TopNav from "./components/TopNav"; import SideNav from "./components/SideNav"; import { BrowserRouter, Switch, Route } from "react-router-dom" +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 Profile from "./components/Profile"; +import Dashboard from "./components/Dashboard"; function App() { return ( +
- {/* PUT YOUR ROUTES HERE */} +
+ + + + + + + + + + +
- + ); } diff --git a/src/components/Charts.js b/src/components/Charts.js index 9642a89..28185d3 100644 --- a/src/components/Charts.js +++ b/src/components/Charts.js @@ -3,8 +3,8 @@ import React from "react"; function Charts(props) { return (
- Check out my chart! -
); } diff --git a/src/components/Marquee.js b/src/components/Marquee.js index 820e8c4..1112af2 100644 --- a/src/components/Marquee.js +++ b/src/components/Marquee.js @@ -1,8 +1,8 @@ import React from "react"; function Marquee(props) { - const message = "hello"; - return ( + const message = props.match.params.text; + return ( {message} ); } diff --git a/src/components/Profile.js b/src/components/Profile.js index c4eb646..f131ef2 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -2,9 +2,9 @@ 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 ( + return (

{user.firstName} {user.lastName}

{user.occupation}

@@ -18,4 +18,3 @@ function Profile(props) { export default connect(function (state) { return {users: state.users}; })(Profile); - diff --git a/src/components/Profiles.js b/src/components/Profiles.js index 3409812..7db8892 100644 --- a/src/components/Profiles.js +++ b/src/components/Profiles.js @@ -1,15 +1,16 @@ 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 ( + return (
{userDivs}
); } @@ -17,5 +18,3 @@ function Profiles(props) { export default connect(function (state) { return {users: state.users}; })(Profiles); - - diff --git a/src/components/Settings.js b/src/components/Settings.js index ba15b47..8d3a09e 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -4,7 +4,7 @@ function Settings(props) { return (
Check out my settings! -
); } diff --git a/src/components/SideNav.js b/src/components/SideNav.js index 9caaf7c..5e4c6f0 100644 --- a/src/components/SideNav.js +++ b/src/components/SideNav.js @@ -1,29 +1,58 @@ import React from "react"; -// import {Link} from "react-router-dom"; +import {Link} from "react-router-dom"; function SideNav() { return (
  • - {/* - - Dashboard + { + + Dashboard - */} + }
  • - + Charts - +
  • - + Tables - + +
    • +
  • + + Settings + +
    • +
  • + + Wall + +
    • +
  • + + Profiles + +
    • +
  • + + Marquee "I love routes" + +
    • +
  • + + Marquee "React Router Rules" +
-
); +
); } export default SideNav; + +// +// Charts +// diff --git a/src/components/Tables.js b/src/components/Tables.js index 6d44ddf..132365c 100644 --- a/src/components/Tables.js +++ b/src/components/Tables.js @@ -4,7 +4,7 @@ function Tables(props) { return (
Check out my table! -
); } diff --git a/src/components/Wall.js b/src/components/Wall.js index 6206e45..8cb7359 100644 --- a/src/components/Wall.js +++ b/src/components/Wall.js @@ -4,7 +4,7 @@ function Wall(props) { return (
Check out my wall! -
); }