Jessica Killeen

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 `<div> whatever </div>`
-* 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 `<a>` 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 `<a>` 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

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 (
-    <div> 
+    <BrowserRouter>
+    <div>
       <div id="wrapper">
         <nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
           <TopNav />
           <SideNav />
         </nav>
         <div style={{backgroundColor: "white"}}>
+          <Switch>
           {/* PUT YOUR ROUTES HERE */}
+          <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,21 @@
+import React from "react";
+
+function Charts() {
+  return (
+      <div className="row">
+                    <div className="col-lg-12">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                <h3 className="panel-title"><i className="fa fa-bar-chart-o fa-fw"></i> Charts</h3>
+                            </div>
+                            <div className="panel-body">
+                                <div id="settings">These are the charts</div>
+                                <img src={'http://3.bp.blogspot.com/-H5dpsZemI4U/TylusNPGTPI/AAAAAAAAMtU/Ts1umRcEYZE/s1600/pac+man+chart.png'} alt="chart image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+             );
+}
+
+export default Charts;

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

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 (
     <div>
       <h3>{user.firstName} {user.lastName}</h3>
       <h4>{user.occupation}</h4>
@@ -18,4 +19,3 @@ function Profile(props) {
 export default connect(function (state) {
   return {users: state.users};
 })(Profile);
-

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 (
       <div key={i}>
         {user.firstName} - {user.lastName}
-        <a href="#"> View </a>
+        <Link to={"/profile/" + user.id}> View </Link>
       </div>);
   });
-  return (   
+  return (
+    <div>
+      Profiles:
     <div>{userDivs}</div>
+    </div>
   );
 }
 
 export default connect(function (state) {
   return {users: state.users};
 })(Profiles);
-
-

src/components/Settings.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+function Settings() {
+  return (
+      <div className="row">
+                    <div className="col-lg-12">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                <h3 className="panel-title"><i className="fa fa-bar-chart-o fa-fw"></i> Settings</h3>
+                            </div>
+                            <div className="panel-body">
+                                <div id="settings">These are the settings</div>
+                                <img src={'http://was.hifisim.com/ASXDocumentation/images/Shot_10.jpg'} alt="chart image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+             );
+}
+
+export default Settings;

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 (
     <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>
+          <Link to="/charts"> <i className="fa fa-fw fa-bar-chart-o" />
+            Charts
           </Link>
-          */}
         </li>
         <li>
-          <a href="charts.html">
-            <i className="fa fa-fw fa-bar-chart-o" /> Charts
-          </a>
+          <Link to="/tables"> <i className="fa fa-fw fa-table" />
+            Tables
+          </Link>
         </li>
+
         <li>
-          <a href="tables.html">
-            <i className="fa fa-fw fa-table" /> Tables
-          </a>
+          <Link to="/settings"> <i className="fa fa-fw fa-settings" />
+            Settings
+          </Link>
         </li>
+
+        <li>
+          <Link to="/wall"> <i className="fa fa-fw fa-wall" />
+            Wall
+          </Link>
+        </li>
+
+        <li>
+          <Link to="/profiles"> <i className="fa fa-fw fa-profiles" />
+            Profiles
+          </Link>
+        </li>
+
+        <li>
+          <Link to="/marquee/iloveroutes"> <i className="fa fa-fw fa-marquee" />
+            Marquee
+          </Link>
+        </li>
+
+        <li>
+          <Link to="/marquee/theworldlovesroutes"> <i className="fa fa-fw fa-marquee" />
+            Marquee 2
+          </Link>
+        </li>
+
+        <li>
+          <Link to="/marquee/happyveteransday!"> <i className="fa fa-fw fa-marquee" />
+            Marquee 3
+          </Link>
+        </li>
+
       </ul>
-    </div>);  
+    </div>);
 }
 
 export default SideNav;

src/components/Tables.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+function Tables() {
+  return (
+      <div className="row">
+                    <div className="col-lg-12">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                <h3 className="panel-title"><i className="fa fa-bar-chart-o fa-fw"></i> Tables</h3>
+                            </div>
+                            <div className="panel-body">
+                                <div id="settings">These are the tables</div>
+                                <img src={'https://i.pinimg.com/736x/66/5b/39/665b39d5317e491638129988ac15e072--printable-periodic-table-of-elements-fun-science.jpg'} alt="chart image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+             );
+}
+
+export default Tables;

src/components/Wall.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+function Wall() {
+  return (
+      <div className="row">
+                    <div className="col-lg-12">
+                        <div className="panel panel-default">
+                            <div className="panel-heading">
+                                <h3 className="panel-title"><i className="fa fa-bar-chart-o fa-fw"></i> Wall</h3>
+                            </div>
+                            <div className="panel-body">
+                                <div id="settings">This is the wall</div>
+                                <img src={'https://t4.ftcdn.net/jpg/01/12/71/71/240_F_112717146_SqGfFN1CEnZ6aHP4eDaP5zGTDKjNWmPp.jpg'} alt="chart image" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+             );
+}
+
+export default Wall;