From ab13c31779de0d5d0cbed86deacebd213f2d37fd Mon Sep 17 00:00:00 2001
From: stephsingler <singlerstephanie@gmail.com>
Date: Wed, 21 Feb 2018 16:47:49 -0600
Subject: [PATCH 1/2] homework completed

---
 src/App.js                 | 41 ++++++++++++++++++++++++++---------
 src/components/Charts.js   | 10 +++++++++
 src/components/Marquee.js  |  4 ++--
 src/components/Profile.js  |  5 ++---
 src/components/Profiles.js | 10 +++++----
 src/components/Settings.js | 10 +++++++++
 src/components/SideNav.js  | 44 +++++++++++++++++++++++++++-----------
 src/components/Tables.js   | 10 +++++++++
 src/components/Wall.js     | 10 +++++++++
 9 files changed, 112 insertions(+), 32 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/src/App.js b/src/App.js
index 15bddc9..9eb9b99 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,42 @@
 import React from "react";
 import TopNav from "./components/TopNav";
 import SideNav from "./components/SideNav";
+//react-router
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+//components
+import Dashboard from "./components/Dashboard";
+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";
 
 function App() {
   return (
-    <div> 
-      <div id="wrapper">
-        <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
-          <TopNav />
-          <SideNav />
-        </nav>
-        <div style={{backgroundColor: "white"}}>
-          {/* PUT YOUR ROUTES HERE */}
+    <Router>
+      <div>
+        <div id="wrapper">
+          <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
+            <TopNav />
+            <SideNav />
+          </nav>
+          <div style={{backgroundColor: "white"}}>
+            <Switch>
+              <Route exact path="/" component={Dashboard} />
+              <Route path="/charts" component={Charts} />
+              <Route path="/tables" component={Tables} />
+              <Route path="/settings" component={Settings} />
+              <Route path="/wall" component={Wall} />
+              <Route path="/profiles" component={Profiles} />
+              <Route path="/marquee/:text" component={Marquee} />
+              <Route path="/profile/:id" component={Profile} />
+            </Switch>
+          </div>
         </div>
       </div>
-    </div>
-
+    </Router>
   );
 }
 
diff --git a/src/components/Charts.js b/src/components/Charts.js
new file mode 100644
index 0000000..7240d25
--- /dev/null
+++ b/src/components/Charts.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Charts = () => {
+  return (
+    <div>
+      Charts Component Here
+    </div>
+  );
+};
+export default Charts;
diff --git a/src/components/Marquee.js b/src/components/Marquee.js
index 820e8c4..cb2d952 100644
--- a/src/components/Marquee.js
+++ b/src/components/Marquee.js
@@ -2,8 +2,8 @@ import React from "react";
 
 function Marquee(props) {
   const message = "hello";
-  return (   
-    <marquee>{message}</marquee>
+  return (
+    <marquee>{props.match.params.text}</marquee>
   );
 }
 
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 (
     <div>
       <h3>{user.firstName} {user.lastName}</h3>
       <h4>{user.occupation}</h4>
@@ -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..e0e3899 100644
--- a/src/components/Profiles.js
+++ b/src/components/Profiles.js
@@ -1,15 +1,19 @@
 import React from "react";
 import {connect} from "react-redux";
+// react-router-dom
+import { Link } from "react-router-dom";
 
 function Profiles(props) {
   const userDivs = props.users.map((user,i) => {
     return (
       <div key={i}>
         {user.firstName} - {user.lastName}
-        <a href="#"> View </a>
+        <Link to={`/user/${user.id}`}>
+          View
+        </Link>
       </div>);
   });
-  return (   
+  return (
     <div>{userDivs}</div>
   );
 }
@@ -17,5 +21,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
new file mode 100644
index 0000000..1bd30e7
--- /dev/null
+++ b/src/components/Settings.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Settings = () => {
+  return (
+    <div>
+      Settings Component Here
+    </div>
+  );
+};
+export default Settings;
diff --git a/src/components/SideNav.js b/src/components/SideNav.js
index 9caaf7c..ca78037 100644
--- a/src/components/SideNav.js
+++ b/src/components/SideNav.js
@@ -1,29 +1,47 @@
 import React from "react";
-// import {Link} from "react-router-dom";
+import {Link} from "react-router-dom";
 
 function SideNav() {
   return (
     <div className="collapse navbar-collapse navbar-ex1-collapse">
       <ul className="nav navbar-nav side-nav">
         <li className="active">
-          {/*
           <Link to="/"> <i className="fa fa-fw fa-dashboard" />
-            Dashboard 
+            Dashboard
           </Link>
-          */}
         </li>
-        <li>
-          <a href="charts.html">
-            <i className="fa fa-fw fa-bar-chart-o" /> Charts
-          </a>
+        <li className="active">
+          <Link to="/charts"> <i className="fa fa-fw fa-bar-chart-o" />
+            Charts
+          </Link>
+        </li>
+        <li className="active">
+          <Link to="/tables"> <i className="fa fa-fw fa-table" />
+            Tables
+          </Link>
+        </li>
+        <li className="active">
+          <Link to="/settings">
+            Settings
+          </Link>
         </li>
-        <li>
-          <a href="tables.html">
-            <i className="fa fa-fw fa-table" /> Tables
-          </a>
+        <li className="active">
+          <Link to="/wall">
+            Wall
+          </Link>
+        </li>
+        <li className="active">
+          <Link to="/profiles">
+            Profiles
+          </Link>
+        </li>
+        <li className="active">
+          <Link to="/marquee/iloveroutes">
+            Marquee
+          </Link>
         </li>
       </ul>
-    </div>);  
+    </div>);
 }
 
 export default SideNav;
diff --git a/src/components/Tables.js b/src/components/Tables.js
new file mode 100644
index 0000000..5c8cafe
--- /dev/null
+++ b/src/components/Tables.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Tables = () => {
+  return (
+    <div>
+      Tables Component Here
+    </div>
+  );
+};
+export default Tables;
diff --git a/src/components/Wall.js b/src/components/Wall.js
new file mode 100644
index 0000000..4603c7f
--- /dev/null
+++ b/src/components/Wall.js
@@ -0,0 +1,10 @@
+import React from "react";
+
+const Wall = () => {
+  return (
+    <div>
+      Wall Component Here
+    </div>
+  );
+};
+export default Wall;

From d14e7d5a2735cd1695725340c88b7602657143bf Mon Sep 17 00:00:00 2001
From: stephsingler <singlerstephanie@gmail.com>
Date: Wed, 21 Feb 2018 19:23:28 -0600
Subject: [PATCH 2/2] homeWork Completed

---
 src/App.js                | 20 ++++++++++----------
 src/components/SideNav.js |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9eb9b99..1c9b31d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -23,16 +23,16 @@ function App() {
             <SideNav />
           </nav>
           <div style={{backgroundColor: "white"}}>
-            <Switch>
-              <Route exact path="/" component={Dashboard} />
-              <Route path="/charts" component={Charts} />
-              <Route path="/tables" component={Tables} />
-              <Route path="/settings" component={Settings} />
-              <Route path="/wall" component={Wall} />
-              <Route path="/profiles" component={Profiles} />
-              <Route path="/marquee/:text" component={Marquee} />
-              <Route path="/profile/:id" component={Profile} />
-            </Switch>
+              <Switch>
+                <Route exact path="/" component={Dashboard} />
+                <Route path="/charts" component={Charts} />
+                <Route path="/tables" component={Tables} />
+                <Route path="/settings" component={Settings} />
+                <Route path="/wall" component={Wall} />
+                <Route path="/profiles" component={Profiles} />
+                <Route path="/marquee/:text" component={Marquee} />
+                <Route path="/profile/:id" component={Profile} />
+              </Switch>
           </div>
         </div>
       </div>
diff --git a/src/components/SideNav.js b/src/components/SideNav.js
index ca78037..6b2e4dd 100644
--- a/src/components/SideNav.js
+++ b/src/components/SideNav.js
@@ -36,7 +36,7 @@ function SideNav() {
           </Link>
         </li>
         <li className="active">
-          <Link to="/marquee/iloveroutes">
+          <Link to="/marquee/Hello Stephanie">
             Marquee
           </Link>
         </li>