add admin routing

client/src/components/AdminView/AdminBody.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { Switch, Route } from "react-router-dom";
 import ClassIterationsSection from "./ClassIterationsSection/ClassIterationsSection";
 import StudentsSection from "./StudentsSection/StudentsSection";
 import GradesSection from "./GradesSection/GradesSection";
@@ -10,30 +11,30 @@ class AdminBody extends React.Component {
   render() {
     return <div className="adminBody-container">{this.renderContent()}</div>;
   }
+
   renderContent() {
-    switch (this.props.activeTab) {
-      case "iteration":
-        return <ClassIterationsSection setViewedYear={this.props.setViewedYear} />;
-      case "students":
-        return (
+    return (
+      <Switch>
+        <Route exact path="/">
+          <ClassIterationsSection setViewedYear={this.props.setViewedYear} />
+        </Route>
+        <Route exact path="/students">
           <StudentsSection
             showingMilestoneSection={this.props.showingMilestones}
             toggleViewMilestones={this.props.toggleViewMilestones}
           />
-        );
-      case "grade":
-        return (
+        </Route>
+        <Route exact path="/grade">
           <GradesSection
             showingMilestoneSection={this.props.showingMilestones}
             toggleViewMilestones={this.props.toggleViewMilestones}
           />
-        );
-      case "settings":
-        return <SettingsSection year={this.props.year} />;
-      default:
-        console.log("should never get here");
-        return;
-    }
+        </Route>
+        <Route exact path="/settings">
+          <SettingsSection year={this.props.year} />
+        </Route>
+      </Switch>
+    );
   }
 }
 

client/src/components/AdminView/AdminSideBar.css

@@ -20,6 +20,8 @@
 
 .adminSidebar-iconContainer {
   flex-direction: column;
+  color: var(--dark-grey);
+  text-decoration: none;
   width: 100%;
   height: var(--adminSidebar-iconHeight);
 }

client/src/components/AdminView/AdminSideBar.js

@@ -1,69 +1,66 @@
 import React from "react";
+import { Link, withRouter } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import "./AdminSideBar.css";
 
 class AdminTabButton extends React.Component {
   render() {
-    const { activeTab, tabName, tabLabel, icon, onClick, showingMilestones } = this.props;
-    const active = !showingMilestones && activeTab === tabName;
+    const { activeTab, to, tabLabel, icon, showingMilestones } = this.props;
+    const active = !showingMilestones && activeTab === to;
 
     return (
-      <div
-        className={`u-flex u-flexCenter u-pointer adminSidebar-iconContainer ${active &&
+      <Link
+        to={to}
+        className={`u-flex u-flexCenter adminSidebar-iconContainer ${active &&
           "adminSidebar-iconContainer--active"}`}
-        onClick={() => {
-          onClick(tabName);
-        }}
       >
         <FontAwesomeIcon icon={["fas", icon]} size="2x" />
         <span className="adminSidebar-iconLabel">{tabLabel}</span>
-      </div>
+      </Link>
     );
   }
 }
 
 class AdminSideBar extends React.Component {
   render() {
-    const { activeTab, year, setActiveTab, showingMilestones } = this.props;
+    const { year, showingMilestones } = this.props;
 
     return (
       <div className={`u-flex u-flexAlignCenter u-darkGrey adminSidebar-container`}>
         <AdminTabButton
-          activeTab={activeTab}
-          tabName="iteration"
+          activeTab={this.props.location.pathname}
           tabLabel={`${year} Class`}
           icon="calendar-alt"
-          onClick={setActiveTab}
+          to="/"
           showingMilestones={showingMilestones}
         />
         <AdminTabButton
-          activeTab={activeTab}
-          tabName="students"
+          activeTab={this.props.location.pathname}
           tabLabel="Students"
           icon="user"
-          onClick={setActiveTab}
+          to="/students"
           showingMilestones={showingMilestones}
         />
         <AdminTabButton
-          activeTab={activeTab}
-          tabName="grade"
+          activeTab={this.props.location.pathname}
           tabLabel="Grade"
           icon="highlighter"
-          onClick={setActiveTab}
+          to="/grade"
           showingMilestones={showingMilestones}
         />
         <AdminTabButton
-          activeTab={activeTab}
-          tabName="settings"
+          activeTab={this.props.location.pathname}
           tabLabel="Settings"
           icon="cog"
-          onClick={setActiveTab}
+          to="/settings"
           showingMilestones={showingMilestones}
         />
       </div>
     );
   }
 }
 
-export default AdminSideBar;
+const AdminSideBarWithRouter = withRouter((props) => <AdminSideBar {...props} />);
+
+export default AdminSideBarWithRouter;

client/src/components/AdminView/AdminView.js

@@ -1,21 +1,16 @@
 import React from "react";
-import AdminSideBar from "./AdminSideBar";
+import AdminSideBarWithRouter from "./AdminSideBar";
 import AdminBody from "./AdminBody";
 
 class AdminView extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      activeTab: "iteration",
       viewedYear: 2019,
       showingMilestones: false,
     };
   }
 
-  setActiveTab = (tab) => {
-    this.setState({ activeTab: tab, showingMilestones: false });
-  };
-
   setViewedYear = (year) => {
     this.setState({ viewedYear: year });
   };
@@ -27,14 +22,11 @@ class AdminView extends React.Component {
   render() {
     return (
       <div className="u-flex">
-        <AdminSideBar
-          activeTab={this.state.activeTab}
-          setActiveTab={this.setActiveTab}
+        <AdminSideBarWithRouter
           year={this.state.viewedYear}
           showingMilestones={this.state.showingMilestones}
         />
         <AdminBody
-          activeTab={this.state.activeTab}
           year={this.state.viewedYear}
           setViewedYear={this.setViewedYear}
           showingMilestones={this.state.showingMilestones}

client/src/components/App.js

@@ -20,11 +20,11 @@ class App extends React.Component {
     return (
       <>
         <Switch>
-          <Route exact path="/" component={Root} />
           <Route exact path="/register" component={Register} />
           <Route exact path="/team" component={TeamView} />
           <Route exact path="/create-team" component={CreateTeam} />
           <Route exact path="/join-team" component={JoinTeam} />
+          <Route component={Root} />
         </Switch>
       </>
     );

webpack.config.js

@@ -59,6 +59,9 @@ module.exports = {
       "/team": "http://localhost:3000",
       "/create-team": "http://localhost:3000",
       "/join-team": "http://localhost:3000",
+      "/students": "http://localhost:3000",
+      "/grade": "http://localhost:3000",
+      "/settings": "http://localhost:3000",
       "/socket.io/*": {
         target: "http://localhost:3000",
         ws: true,