adding functionality

app/components/AllCampuses.js

@@ -1,18 +1,20 @@
 
 import React from 'react'
 //dont need this yet
-// import { withRouter, NavLink } from 'react-router-dom';
+import { withRouter, NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
 
 function AllCampuses(props) {
   const campuses = props.campuses
-  console.log(props)
   return (
     <div>
     {
       campuses.map( (campus) => {
-        console.log(campus.name, 'campus name')
-        return <p key={campus.id}>{campus.name}</p>
+        return (
+          <NavLink key={campus.id} to={`/campuses/${campus.id}`}>
+            <img src ={campus.imgUrl} />
+          </NavLink>
+        )
       })
     }
     </div>

app/components/AllStudents.js

@@ -0,0 +1,69 @@
+
+import React from 'react'
+//dont need this yet
+// import { withRouter, NavLink } from 'react-router-dom';
+import { connect } from 'react-redux';
+
+function AllStudents(props) {
+  const students = props.students
+  console.log(students)
+  return (
+    <div>
+      <h3>Wizards</h3>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Wand</th>
+          </tr>
+        </thead>
+          <tbody>
+      {
+        students.map( (student) => {
+          return (
+            <tr key={student.id}>
+              <td>
+                <button type="button" className="close" aria-label="Close">
+                  <span aria-hidden="true">+</span>
+                </button>
+              </td>
+              <td>{student.name}</td>
+              <td>{student.wand}</td>
+              <td><button type="button" className="close" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </td>
+            </tr>
+            )
+        })
+      }
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+const mapStateToProps = function (state) {
+  return {
+    students: state.students
+  };
+};
+
+
+export default connect(mapStateToProps)(AllStudents);
+
+// <table>
+//   <tr>
+//     <th>First name</th>
+//     <th>Last name</th>
+//   </tr>
+//   <tr>
+//     <td>John</td>
+//     <td>Doe</td>
+//   </tr>
+//   <tr>
+//     <td>Jane</td>
+//     <td>Doe</td>
+//   </tr>
+// </table>

app/components/NavBar.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+const NavBar = (props) => {
+  return (
+    <header>
+      <center>
+        <NavLink to="/">
+          <button type="button" className="btn btn-outline-success">Houses</button>
+        </NavLink>
+        <NavLink to="/">
+        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/Hogwarts_coat_of_arms_colored_with_shading.svg/1200px-Hogwarts_coat_of_arms_colored_with_shading.svg.png" id="logo" />
+        </NavLink>
+        <NavLink to="/students">
+          <button type="button" className="btn btn-outline-warning">Wizards</button>
+        </NavLink>
+      </center>
+    </header>
+  )
+}
+
+export default NavBar;

app/components/OneCampus.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+function OneCampus(props) {
+  const campusId = props.match.params.campusId
+  const students = props.students
+  const campuses = props.campuses
+  const findCampus = (campus) =>  campus.id == +campusId
+  const findStudents = students.filter((student) => student.campusId == +campusId);
+  const singleCampus = campuses.find(findCampus)
+  return (
+  <div>
+    <img src={singleCampus && singleCampus.imgUrl} />
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Wand</th>
+        </tr>
+      </thead>
+        <tbody>
+        {
+          findStudents.map( (student) => {
+            return (
+              <tr key={student.id}>
+                <td>
+                  <button type="button" className="close" aria-label="Close">
+                    <span aria-hidden="true">+</span>
+                  </button>
+                </td>
+                <td>{student.name}</td>
+                <td>{student.wand}</td>
+                <td><button type="button" className="close" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </td>
+              </tr>
+              )
+          })
+        }
+      </tbody>
+    </table>
+  </div>
+  )
+
+}
+const mapStateToProps = function (state) {
+  return {
+    campuses: state.campuses,
+    students: state.students
+  };
+};
+
+
+export default connect(mapStateToProps)(OneCampus);

app/components/OneStudent.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+function OneStudent(props) {
+
+    const studentId = props.match.params.studentId
+    const students = props.students
+    const campuses = props.campuses
+    const findStudent = (student) =>  student.id == +studentId
+    const singleStudent = students.find(findStudent)
+
+console.log(singleStudent)
+    return (
+    <div>
+      <img src={'/'} />
+      <h3>Edit Wizard</h3>
+      <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>Name</th>
+            <th>Wand</th>
+            <th>House</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td></td>
+            <td>{singleStudent && singleStudent.name}</td>
+            <td>{singleStudent && singleStudent.wand}</td>
+            <td>
+              <select className="form-control" >
+                {campuses.map( campus => {
+                  {/* if (campus.id === singleStudent.campusId) {
+                    return <option defaultValue>{campus.name}</option>
+                  }
+                  else { */}
+                    return <option>{campus.name}</option>
+                  {/* } */}
+                })}
+              </select>
+            </td>
+            <td><button type="button" className="btn btn-outline-danger">Submit</button></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    )
+}
+const mapStateToProps = function (state) {
+  return {
+    campuses: state.campuses,
+    students: state.students
+  };
+};
+
+
+export default connect(mapStateToProps)(OneStudent);

app/components/Root.jsx

@@ -1,129 +1,38 @@
 import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import AllCampuses from './AllCampuses'
-import store, { fetchCampuses } from '../store'
+import AllStudents from './AllStudents'
+import OneCampus from './OneCampus'
+import OneStudent from './OneStudent'
+import NavBar from './NavBar'
+import SideBar from './SideBar'
+import store, { fetchCampuses, fetchStudents } from '../store'
 
 export default class Main extends Component {
   componentDidMount () {
     const campusesThunk = fetchCampuses();
-    // const studentsThunk = fetchStudents();
+    const studentsThunk = fetchStudents();
     store.dispatch(campusesThunk);
-    // store.dispatch(studentsThunk);
+    store.dispatch(studentsThunk);
   }
   render() {
-    return (<AllCampuses />)
+    return (
+      <Router>
+        <div id="main" className="container-fluid">
+          <div className="col-xs-10">
+            <NavBar />
+            <Switch>
+              <Route exact path="/students" component={AllStudents} />
+              <Route exact path="/" component={AllCampuses} />
+              <Route path="/campuses/:campusId" component={OneCampus} />
+              <Route path="/students/:studentId" component={OneStudent} />
+            </Switch>
+          </div>
+          <div className="col-xs-2">
+            {/* <SideBar /> */}
+          </div>
+        </div>
+      </Router>
+    )
   }
 }
-
-// export default class WinterJokes extends Component {
-//   constructor() {
-//     super()
-//     this.nextJoke = this.nextJoke.bind(this)
-//     this.answer = this.answer.bind(this)
-//   }
-
-//   componentDidMount() {
-//     this.nextJoke()
-//   }
-
-//   nextJoke() {
-//     this.setState({
-//       joke: randomJoke(),
-//       answered: false,
-//     })
-//   }
-
-//   answer() {
-//     this.setState({answered: true})
-//   }
-
-//   render() {
-//     if (!this.state) { return null }
-
-//     const {joke, answered} = this.state
-//     return (
-//       <div>
-//         <h1 onClick={answered ? this.nextJoke : this.answer}>{joke.q}</h1>
-//         {answered && <h2>{joke.a}</h2>}
-//       </div>
-//     )
-//   }
-// }
-
-// function randomJoke() {
-//   return jokes[Math.floor(Math.random() * jokes.length)]
-// }
-
-// const jokes = `Q: What did the Arctic wolf ask in the restaurant?
-// A: Are these lemmings fresh off the tundra?
-// Q: What did the big furry hat say to the warm woolly scarf?
-// A: You hang around while I go on ahead.
-// Q: What's the difference between an iceberg and a clothes brush?
-// A: One crushes boats and the other brushes coats!
-// Q: Why aren't penguins as lucky as Arctic murres?
-// A: The poor old penguins can't go south for the winter. (they live in Antarctica)
-// Q: How do you keep from getting cold feet?
-// A: Don't go around BRRfooted!
-// Q: Why is the slippery ice like music?
-// A: If you don't C sharp - you'll B flat!
-// Q: What's an ig?
-// A: A snow house without a loo!
-// Q: Where do seals go to see movies?
-// A: The dive-in!
-// Q: What kind of math do Snowy Owls like?
-// A: Owlgebra.
-// Q: What did the ocean say to the bergy bits?
-// A: Nothing. It just waved.
-// Q: What sits on the bottom of the cold Arctic Ocean and shakes?
-// A: A nervous wreck.
-// Q: How do you know if there's a snowman in your bed?
-// A: You wake up wet!
-// Q: How do you tell the difference between a walrus and an orange?
-// A: Put your arms around it and squeeze it. If you don't get orange juice, it's a walrus.
-// Q: What do chefs call "Baked Alaska" in Alaska?
-// A: Baked Here
-// Q: Getting a job in the Arctic in the winter is great! Why?
-// A: When the days get short, you only have to work a 30 minute work week.
-// Q: Why do seals swim in salt water?
-// A: Because pepper water makes them sneeze!
-// Q: Where can you find an ocean without any water?
-// A: On a map!
-// Q: What eight letters can you find in water from the Arctic Ocean?
-// A: H to O! (H20)
-// Q: Which side of an Arctic Tern has the most feathers?
-// A: The outside!
-// Q: What vegetable was forbidden on the ships of Arctic explorers?
-// A: Leeks!
-// Q: What happened when all the collected muskox wool was stolen?
-// A: The police combed the area.
-// Q: What did one Greenland Shark say to the other?
-// A: Say, good lookin'... didn't I meet you last night at the feeding frenzy?
-// Q: What's a sign that you have an irrational fear of icebergs?
-// A: You start having water-tight compartments installed in your pants.
-// Q: What did the seal say when it swam into a concrete wall?
-// A: Dam!
-// Q: What do you call a reindeer with no eyes?
-// A: I have no eye deer.
-// Q: What do you get from sitting on the ice too long?
-// A: Polaroids!
-// Q: What did the detective in the Arctic say to the suspect?
-// A: Where were you on the night of September to March?
-// Q: What noise wakes you up at the North Pole around March 18?
-// A: The crack of dawn!
-// Q: If you live in an igloo, what's the worst thing about global warming?
-// A: No privacy!
-// Q: When are your eyes not eyes?
-// A: When the cold Arctic wind makes them water!
-// Q: What did the icy Arctic road say to the truck?
-// A: Want to go for a spin?
-// Q: What do Arctic hares use to keep their fur lookin' spiffy?
-// A: Hare spray!
-// Q: What do you call ten Arctic hares hopping backwards through the snow together?
-// A: A receding hare line.
-// Q: Why are bad school grades like a shipwreck in the Arctic Ocean?
-// A: They're both below C level!`
-//   .split('\n')
-//   .reduce((all, row, i) =>
-//     i % 2 === 0
-//     ? [...all, {q: row}]
-//     : [...all.slice(0, all.length - 1), Object.assign({a: row}, all[all.length - 1])],
-//     [])