Daniela Archibong

src/App.js

@@ -1,21 +1,42 @@
 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, Switch, Route} from 'react-router-dom';
 
 function App() {
   return (
+    <BrowserRouter>
     <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 */}
+        {
+          <Switch>
+            <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} />
+            <Route path='/' component={Dashboard} />
+          </Switch>
+          }
         </div>
       </div>
     </div>
-
+    </BrowserRouter>
   );
 }
 

src/components/Charts.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Charts() {
+    return (
+        <div>
+            Charts
+        </div>
+    )
+} 

src/components/Comments.js

@@ -15,7 +15,7 @@ function Comments(props) {
                   </div>
               </div>
           </div>
-          <a href="#">
+          <a href="#comments">
               <div className="panel-footer">
                   <span className="pull-left">View Details</span>
                   <span className="pull-right"><i className="fa fa-arrow-circle-right"></i></span>

src/components/DonutChart.js

@@ -9,7 +9,7 @@ function DonutChart() {
                             <div className="panel-body">
                                 <div id="morris-donut-chart"></div>
                                 <div className="text-right">
-                                    <a href="#">View Details <i className="fa fa-arrow-circle-right"></i></a>
+                                    <a href="#details">View Details <i className="fa fa-arrow-circle-right"></i></a>
                                 </div>
                             </div>
                         </div>

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/MessagePreview.js

@@ -4,7 +4,7 @@ import DateTime from "./DateTime";
 function MessagePreview(props) {
   return (    
     <li className="message-preview">
-      <a href="#">
+      <a href="#preview">
         <div className="media">
           <span className="pull-left">
             <img className="media-object" src="http://placehold.it/50x50" alt="" />

src/components/Orders.js

@@ -15,7 +15,7 @@ function Orders(props) {
             </div>
           </div>
         </div>
-        <a href="#">
+        <a href="#orders">
           <div className="panel-footer">
             <span className="pull-left">View Details</span>
             <span className="pull-right"><i className="fa fa-arrow-circle-right"></i></span>

src/components/Profile.js

@@ -2,8 +2,8 @@ import React from "react";
 import {connect} from "react-redux";
 
 function Profile(props) {
-  const userId = 0;
-  const user = props.users.find(u => u.id == userId) || {};
+  const userId = props.match.params.id;
+  const user = props.users.find(u => u.id === userId) || {};
   return (   
     <div>
       <h3>{user.firstName} {user.lastName}</h3>

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';
+
+export default function Settings() {
+    return (
+        <div>
+            Settings
+        </div>
+    )
+}