diff --git a/README.md b/README.md index bc573b6..20db4dc 100644 --- a/README.md +++ b/README.md @@ -3,43 +3,53 @@ * Slight quirk - refreshing doesn't work from any path other than the default one so you will have to go back to the default path to refresh ### App.js -* Import BrowserRouter,Switch and Route from react-router-dom -* Import components needed -* Create the appropriate routes `{/* PUT YOUR ROUTES HERE */}` -* Make sure the default route goes at the bottom -* Make sure BrowserRouter wraps everything -* Make sure you use the component prop, not render. +X Import BrowserRouter,Switch and Route from react-router-dom + +X Import components needed + +X Create the appropriate routes `{/* PUT YOUR ROUTES HERE */}` + +X Make sure the default route goes at the bottom + +X Make sure BrowserRouter wraps everything + +X Make sure you use the component prop, not render. ### Routes -* / -> Dashboard -* /charts -> Charts -* /tables -> Tables -* /settings -> Settings -* /wall -> Wall -* /profiles -> Profiles -* /marquee/:text -> Marquee -* /profile/:id -> Profile +* / -> Dashboard X +* /charts -> Charts X +* /tables -> Tables X +* /settings -> Settings X +* /wall -> Wall X +* /profiles -> Profiles X +* /marquee/:text -> Marquee X +* /profile/:id -> Profile NO + +////// ### Create these components. The content of the components is not important, just put anything `
whatever
` -* Charts.js -* Tables.js -* Settings.js -* Wall.js +X Charts.js +X Tables.js +X Settings.js +X Wall.js ### Existing components * Profiles.js - * Import Link from react-router-dom - * change the `` to be a Link that links to `/profile/ + user.id` -* Profile.js - * Change the hard coded 0 with the value from the parameter id + X Import Link from react-router-dom + X change the `` to be a Link that links to `/profile/ + user.id` + +* Profile.js + X Change the hard coded 0 with the value from the parameter id + * Dashboard.js + * Marquee - * replace the hard coded "hello" with the text parameter from the route + X replace the hard coded "hello" with the text parameter from the route ### SideNav -* Import Link from react-router-dom -* Create links to all the routes except Profile -* Hard code some links to Marquee +X Import Link from react-router-dom +X Create links to all the routes except Profile +X Hard code some links to Marquee // completed all separate links * /marquee/iloveroutes * /marquee/reactrouterrules * …etc diff --git a/src/App.js b/src/App.js index 15bddc9..f3fcce2 100644 --- a/src/App.js +++ b/src/App.js @@ -2,20 +2,46 @@ import React from "react"; import TopNav from "./components/TopNav"; import SideNav from "./components/SideNav"; +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"; + +import { + BrowserRouter, + Route, + Switch +} from "react-router-dom"; + function App() { return ( -
+ +
+ {/* PUT YOUR ROUTES HERE */} + + + + + + + + +
- + ); } diff --git a/src/components/Charts.js b/src/components/Charts.js new file mode 100644 index 0000000..d2bb1fa --- /dev/null +++ b/src/components/Charts.js @@ -0,0 +1,21 @@ +import React from "react"; + +function Charts() { + return ( +
+
+
+
+

Charts

+
+
+
These are the charts
+ chart image +
+
+
+
+ ); +} + +export default Charts; diff --git a/src/components/Marquee.js b/src/components/Marquee.js index 820e8c4..fc4556a 100644 --- a/src/components/Marquee.js +++ b/src/components/Marquee.js @@ -1,8 +1,9 @@ import React from "react"; function Marquee(props) { - const message = "hello"; - return ( + //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..59195ca 100644 --- a/src/components/Profile.js +++ b/src/components/Profile.js @@ -2,9 +2,10 @@ import React from "react"; import {connect} from "react-redux"; function Profile(props) { - const userId = 0; + //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 +19,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..d303a3f 100644 --- a/src/components/Profiles.js +++ b/src/components/Profiles.js @@ -1,21 +1,23 @@ 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 ( +
+ Profiles:
{userDivs}
+
); } export default connect(function (state) { return {users: state.users}; })(Profiles); - - diff --git a/src/components/Settings.js b/src/components/Settings.js new file mode 100644 index 0000000..d7f00c6 --- /dev/null +++ b/src/components/Settings.js @@ -0,0 +1,21 @@ +import React from "react"; + +function Settings() { + return ( +
+
+
+
+

Settings

+
+
+
These are the settings
+ chart image +
+
+
+
+ ); +} + +export default Settings; diff --git a/src/components/SideNav.js b/src/components/SideNav.js index 9caaf7c..a52f954 100644 --- a/src/components/SideNav.js +++ b/src/components/SideNav.js @@ -1,29 +1,67 @@ import React from "react"; // import {Link} from "react-router-dom"; +import {Link} from "react-router-dom"; function SideNav() { return (
  • - {/* + - Dashboard + Dashboard + + +
    • +
  • + + Charts - */}
  • - - Charts - + + Tables +
    • +
  • - - Tables - + + Settings +
    • + +
  • + + Wall + +
    • + +
  • + + Profiles + +
    • + +
  • + + Marquee + +
    • + +
  • + + Marquee 2 + +
    • + +
  • + + Marquee 3 + +
    • +
-
); +
); } export default SideNav; diff --git a/src/components/Tables.js b/src/components/Tables.js new file mode 100644 index 0000000..a52b8b0 --- /dev/null +++ b/src/components/Tables.js @@ -0,0 +1,21 @@ +import React from "react"; + +function Tables() { + return ( +
+
+
+
+

Tables

+
+
+
These are the tables
+ chart image +
+
+
+
+ ); +} + +export default Tables; diff --git a/src/components/Wall.js b/src/components/Wall.js new file mode 100644 index 0000000..2316d5d --- /dev/null +++ b/src/components/Wall.js @@ -0,0 +1,21 @@ +import React from "react"; + +function Wall() { + return ( +
+
+
+
+

Wall

+
+
+
This is the wall
+ chart image +
+
+
+
+ ); +} + +export default Wall;