Use router

TravisL12 · Oct 24, 2020 · 7bd4e92 · 7bd4e92
1 parent 9258a36
commit 7bd4e92
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "papaparse": "^5.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "styled-components": "^5.2.0"
   },

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import Papa from 'papaparse';
 import { partition, sortBy, values } from 'lodash';
+import { Switch, Route } from 'react-router-dom';
 
 import smbCsvData from './smb_data.csv';
 import smbLogo from './smb_logo.png';
@@ -9,7 +10,7 @@ import PlayerCard from './PlayerCard';
 import PlayerTable from './tables/PlayerTable';
 import PitcherTable from './tables/PitcherTable';
 import TeamTable from './tables/TeamTable';
-import PlayerTypeForm from './PlayerTypeForm';
+import Header from './Header';
 import Filters from './Filters';
 
 import { buildTeams, compileOptions, createPlayer } from './buildPlayer';
@@ -20,11 +21,7 @@ import {
   filterPlayers,
 } from './helper';
 
-import {
-  AppContainer,
-  HeaderContainer,
-  DisplayedTableContainer,
-} from './styles';
+import { AppContainer, DisplayedTableContainer } from './styles';
 
 const loadPlayers = (cb) => {
   Papa.parse(smbCsvData, {
@@ -75,43 +72,16 @@ function App() {
     ({ isPitcher }) => isPitcher
   );
 
-  const getTable = () => {
-    switch (selectedOption) {
-      case 'Pitchers':
-        return (
-          <PitcherTable setModalPlayer={setModalPlayer} players={pitchers} />
-        );
-      case 'Positions':
-        return (
-          <PlayerTable
-            setModalPlayer={setModalPlayer}
-            players={positionPlayers}
-          />
-        );
-      case 'Teams':
-        return <TeamTable teams={teams} />;
-      default:
-    }
-  };
-
   return (
     <AppContainer>
       <div className="title-logo">
         <img alt="Super Mega Baseball Logo" src={smbLogo} />
       </div>
 
-      <HeaderContainer>
-        <PlayerTypeForm
-          playerCounts={{ pitchers, positionPlayers }}
-          selectedOption={selectedOption}
-          onChange={handlePlayerTableChange}
-        />
-        <input
-          type="text"
-          placeholder="Search Players by name"
-          onChange={searchNames}
-        />
-      </HeaderContainer>
+      <Header
+        playerCounts={{ pitchers, positionPlayers }}
+        searchNames={searchNames}
+      />
 
       <Filters filters={filters} setFilters={setFilters} />
 
@@ -121,7 +91,20 @@ function App() {
           isOpen={!!modalPlayer}
           close={() => setModalPlayer(null)}
         />
-        {getTable()}
+        <Switch>
+          <Route path="/pitchers">
+            <PitcherTable setModalPlayer={setModalPlayer} players={pitchers} />
+          </Route>
+          <Route path="/teams">
+            <TeamTable teams={teams} />
+          </Route>
+          <Route path="/">
+            <PlayerTable
+              setModalPlayer={setModalPlayer}
+              players={positionPlayers}
+            />
+          </Route>
+        </Switch>
       </DisplayedTableContainer>
     </AppContainer>
   );

diff --git a/src/Header.js b/src/Header.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { HeaderContainer } from './styles';
+
+const Header = ({ playerCounts, searchNames }) => {
+  return (
+    <HeaderContainer>
+      <div className="player-type-nav">
+        <NavLink className="player-type" exact activeClassName="active" to="/">
+          Positions ({playerCounts.positionPlayers.length})
+        </NavLink>
+
+        <NavLink
+          className="player-type"
+          activeClassName="active"
+          to="/pitchers"
+        >
+          Pitchers ({playerCounts.pitchers.length})
+        </NavLink>
+
+        <NavLink className="player-type" activeClassName="active" to="/teams">
+          Teams
+        </NavLink>
+      </div>
+      <input
+        type="text"
+        placeholder="Search Players by name"
+        onChange={searchNames}
+      />
+    </HeaderContainer>
+  );
+};
+
+export default Header;
diff --git a/src/PlayerTypeForm.js b/src/PlayerTypeForm.js
diff --git a/src/index.js b/src/index.js
@@ -1,12 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Router>
+      <App />
+    </Router>
   </React.StrictMode>,
   document.getElementById('root')
 );

diff --git a/src/styles.js b/src/styles.js
@@ -57,21 +57,19 @@ export const HeaderContainer = styled.div`
     padding: 8px 10px;
   }
 
-  .player-type-form {
+  .player-type-nav {
     display: flex;
     justify-content: space-between;
     align-self: flex-end;
     height: 50px;
     min-width: 500px;
 
-    input[type='radio'] {
-      display: none;
-    }
-
-    input[type='radio'] + label {
+    .player-type {
       display: flex;
       align-items: center;
       min-width: 150px;
+      color: white;
+      text-decoration: none;
       height: 100%;
       justify-content: center;
       border-top-left-radius: 20px;
@@ -85,10 +83,11 @@ export const HeaderContainer = styled.div`
       );
       cursor: pointer;
       padding: 4px 10px;
-    }
 
-    input[type='radio']:checked + label {
-      background: ${backgroundColor};
+      &.active {
+        background: ${backgroundColor};
+        font-weight: 800;
+      }
     }
   }
 `;