Dan Putnam Advaced

README.md

@@ -4,43 +4,43 @@
 * 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
+*x /              -> Dashboard
+*x /charts        -> Charts
+*x /tables        -> Tables
+*x /settings      -> Settings
+*x /wall          -> Wall
+*x /profiles      -> Profiles
+*x /marquee/:text -> Marquee
+*x /profile/:id   -> Profile
 
 ### 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
+*x Profiles.js
     * Import Link from react-router-dom
     * change the `<a>` to be a Link that links to `/profile/ + user.id`
-* Profile.js 
+*x Profile.js 
     * 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
 
 ### 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
     * /marquee/iloveroutes
     * /marquee/reactrouterrules
     * …etc

package.json

@@ -16,7 +16,7 @@
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
     "react-redux": "^5.0.4",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.2.2",
     "redux": "^3.6.0"
   },
   "scripts": {

src/App.js

@@ -1,23 +1,57 @@
 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 Profile from "./components/Profile";
+import Marquee from "./components/Marquee";
+import Dashboard from "./components/Dashboard";
+
+import { BrowserRouter, Route, Switch } from "react-router-dom";
 
 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 */}
+    <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 */}
+
+            <div>
+              <Switch>
+                {/* <Route path="/users" render={(props) => {
+                  return (
+                    <div>
+                      <SearchBoxContainer />
+                      <ListOfUsersContainer />
+                    </div>
+                  );
+                }} /> */}
+                <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>
       </div>
-    </div>
-
+    </BrowserRouter>
   );
 }
 
 
-export default App;
+export default App;

src/components/Charts.js

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

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,7 @@ 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,21 +1,20 @@
 import React from "react";
-import {connect} from "react-redux";
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 
 function Profiles(props) {
-  const userDivs = props.users.map((user,i) => {
+  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>{userDivs}</div>
   );
 }
 
 export default connect(function (state) {
-  return {users: state.users};
-})(Profiles);
-
-
+  return { users: state.users };
+})(Profiles);

src/components/Settings.js

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

src/components/SideNav.js

@@ -1,29 +1,58 @@
 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>
+          <Link to="/tables"> <i className="fa fa-fw fa-bar-chart-o" />
+            Tables
+          </Link>
+        </li>
+        <li>
+          <Link to="/settings"> <i className="fa fa-fw fa-bar-chart-o" />
+            settings
+          </Link>
+        </li>
+        <li>
+          <Link to="/wall"> 
+            <i className="fa fa-fw fa-bar-chart-o" />
+            wall
+          </Link>
+        </li>
+        <li>
+          <Link to="/profiles"> <i className="fa fa-fw fa-bar-chart-o" />
+            profiles
+          </Link>
+        </li>
+        <li>
+          <Link to="/marquee/doesthiswork"> <i className="fa fa-fw fa-bar-chart-o" />
+            marquee/doesthiswork
+          </Link>
+        </li>
+        {/* <li>
           <a href="charts.html">
             <i className="fa fa-fw fa-bar-chart-o" /> Charts
           </a>
-        </li>
-        <li>
+        </li> */}
+        {/* <li>
           <a href="tables.html">
             <i className="fa fa-fw fa-table" /> Tables
           </a>
-        </li>
+        </li> */}
       </ul>
-    </div>);  
+    </div>);
 }
 
-export default SideNav;
+export default SideNav;

src/components/Tables.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+function Tables(props) {
+  return (<div>Tables component</div> );
+}
+
+export default Tables;
+

src/components/Wall.js

@@ -0,0 +1,8 @@
+import React from "react";
+
+function Wall(props) {
+  return (<div>Wall component</div> );
+}
+
+export default Wall;
+