Casey OKeefe

src/App.js

@@ -1,19 +1,47 @@
 import React from "react";
 import TopNav from "./components/TopNav";
 import SideNav from "./components/SideNav";
+import Dashboard from "./components/Dashboard";
+import Charts from "./components/Charts";
+import Fables from "./components/Fables";
+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 {
+  BrowserRouter,
+  Route,
+  Switch
+ } from "react-router-dom";
+
 
 function App() {
   return (
     <div> 
+      <BrowserRouter>
       <div id="wrapper">
         <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
           <TopNav />
           <SideNav />
         </nav>
         <div style={{backgroundColor: "white"}}>
-          {/* PUT YOUR ROUTES HERE */}
+
+            <Switch>
+              <Route path="/profile/:id" component={Profile}/>
+              <Route path="/marquee/:text" component={Marquee}/> 
+              <Route path="/profiles" component={Profiles}/>
+              <Route path="/wall" component={Wall}/>
+              <Route path="/settings" component={Settings}/>
+              <Route path="/fables" component={Fables}/>
+              <Route path="/charts" component={Charts}/>
+              <Route path="/" component={Dashboard}/>
+            </Switch>
+
         </div>
       </div>
+      </BrowserRouter>
     </div>
 
   );

src/components/Charts.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Charts(props) {
+  return (   
+    <div> this is a chart </div>
+  );
+}
+
+export default Charts;

src/components/Fables.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Fables(props) {
+  return (   
+    <div> this is a tablesssssssssssssss </div>
+  );
+}
+
+export default Fables;

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 (   
     <marquee>{message}</marquee>
   );

src/components/Profile.js

@@ -2,7 +2,8 @@ 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 (   
     <div>

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 (
       <div key={i}>
         {user.firstName} - {user.lastName}
-        <a href="#"> View </a>
+        <Link to={"/profile/" + user.id}> View </Link>
       </div>);
   });
   return (   

src/components/Settings.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Settings(props) {
+  return (   
+    <div> these are settings </div>
+  );
+}
+
+export default Settings;

src/components/SideNav.js

@@ -1,27 +1,41 @@
 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 
           </Link>
-          */}
         </li>
         <li>
-          <a href="charts.html">
+          <Link to="/charts">
             <i className="fa fa-fw fa-bar-chart-o" /> Charts
-          </a>
+          </Link>
+        </li>
+        <li>
+          <Link to="/fables">
+            <i className="fa fa-fw fa-table" /> Fables
+          </Link>
+        </li>
+        <li>
+          <Link to="/settings"> Settings </Link>
+        </li>
+        <li>
+          <Link to="/wall"> Wall </Link>
+        </li>
+        <li>
+          <Link to="/profiles"> Profiles </Link>
+        </li>
+        <li>
+          <Link to="/marquee/filessssss"> Marquee </Link>
         </li>
         <li>
-          <a href="tables.html">
-            <i className="fa fa-fw fa-table" /> Tables
-          </a>
+          <Link to="/marquee/wowsoamazing"> Marquee </Link>
         </li>
+
       </ul>
     </div>);  
 }

src/components/Wall.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+function Wall(props) {
+  return (   
+    <div> this is a wallllll </div>
+  );
+}
+
+export default Wall;