chore: more general cleanup

Author: tif-calin

package-lock.json

@@ -14,6 +14,7 @@
     "web-vitals": "^1.1.1"
   },
   "devDependencies": {
+    "@types/react-router-dom": "^5.3.3",
     "chokidar": "^3.5.2"
   },
   "scripts": {

package.json

@@ -1,7 +1,7 @@
+import React from 'react';
 import { Component } from 'react';
 import Header from './Header';
 import Footer from './Footer';
-// import Home from '../home/Home';
 import SetupPage from '../pages/setup/SetupPage';
 import BallotPage from '../pages/ballot/BallotPage';
 import AboutPage from '../pages/about/AboutPage';
@@ -13,44 +13,19 @@ import {
 } from 'react-router-dom';
 import './App.css';
 
-
 class App extends Component {
-
   render() {
     return (
       <div className="App">
         <Router>
           <Header />
           <main>
-
             <Switch>
-              <Route path="/" exact={true}
-                render={routerProps => (
-                  // <Home {...routerProps}/>
-                  <Redirect to="/setup" />
-                )}
-              />
-
-              <Route path="/setup" exact={true}
-                render={routerProps => (
-                  <SetupPage {...routerProps} />
-                )}
-              />
-
-              <Route path="/ballot/:id"
-                render={routerProps => (
-                  <BallotPage {...routerProps} />
-                )}
-              />
-
-              <Route path="/about"
-                render={routerProps => (
-                  <AboutPage {...routerProps} />
-                )}
-              />
-
+              <Route path="/" exact render={() => <Redirect to="/setup" />} />
+              <Route path="/setup" exact render={() => <SetupPage />} />
+              <Route path="/ballot/:id" render={(routerProps) => <BallotPage {...routerProps} />} />
+              <Route path="/about" render={() => <AboutPage />} />
               <Redirect to="/" />
-
             </Switch>
           </main>
           <Footer />

src/app/App.js

@@ -6,17 +6,10 @@ import AdminPanel from './AdminPanel';
 import ResultsPanel from './ResultsPanel';
 import './BallotPage.css';
 
-/*
-TODO:
- - [x] login panel
- - [ ] admin panel
- - [x] voting panel
- - [x] result panel
-*/
 
 const BallotPage = props => {
-  const { 
-    loading, ballot, 
+  const {
+    loading, ballot,
     users, signIn, signUp, signOut, currentUser,
     candidates, winners, endVote,
     currentRanking, updateVote, handleRankingChange

src/pages/ballot/BallotPage.js

@@ -1,36 +1,40 @@
 import React from 'react';
-import { getByProperty } from '../../utils/utils';
 import './ResultsPanel.css';
 
 const ResultsPanel = props => {
   const { winners, ballot, candidates } = props;
   // const { users } = props;
-  
+
   // const votes = users.filter(u => u.vote).map(u => u.vote);
 
-  return <div className="ResultsPanel panel">
-    <p>the winner is...</p>
-    {winners.map(winnerId => {
-      if (!ballot.candidateType || ballot.candidateType === 'book') {
-        const book = getByProperty(candidates, Number(winnerId), 'id');
-        return <li key={winnerId}>
-          <img src={book?.info?.image || '/assets/nocover.jpeg'} alt={book?.info?.title}/>
-          <div>
-            <p>{book?.info?.title}{book?.info?.subtitle && <span>: {book.info.subtitle}</span>}</p>
-            <p className="book-author">{book?.info?.authors?.join(', ')}</p>
-            {book?.info?.price && <p>${book.info.price}</p>}
-          </div>
-        </li>;
-      } else {
-        return <li key={winnerId}>{winnerId}</li>;
-      }
-    })}
+  return (
+    <div className="ResultsPanel panel">
+      <p>the winner is...</p>
+      {winners.map(winnerId => {
+        if (!ballot.candidateType || ballot.candidateType === 'book') {
+          const book = candidates.find(c => c.id === Number(winnerId));
+
+          return (
+            <li key={winnerId}>
+              <img src={book?.info?.image || '/assets/nocover.jpeg'} alt={book?.info?.title}/>
+              <div>
+                <p>{book?.info?.title}{book?.info?.subtitle && <span>: {book.info.subtitle}</span>}</p>
+                <p className="book-author">{book?.info?.authors?.join(', ')}</p>
+                {book?.info?.price && <p>${book.info.price}</p>}
+              </div>
+            </li>
+          );
+        } else {
+          return <li key={winnerId}>{winnerId}</li>;
+        }
+      })}
 
-    {/* <p>Based off {votes.length} votes.</p>
-    <ul>
-      {votes.map(vote => <li>{vote}</li>)}
-    </ul> */}
-  </div>;
+      {/* <p>Based off {votes.length} votes.</p>
+      <ul>
+        {votes.map(vote => <li>{vote}</li>)}
+      </ul> */}
+    </div>
+  );
 };
 
 const MemoizedResultsPanel = React.memo(ResultsPanel);

src/pages/ballot/ResultsPanel.js

@@ -6,24 +6,25 @@ const PermissionsPanel = props => {
     enableVoteCodeInput,
     setEnableVoteCodeInput
   } = props;
+  const handleTextChange = e => setVoteCode(e.target.value);
 
   return (
     <fieldset className="panel PermissionsPanel">
       <label>
         <span title="requires users to know the voting code in order to submit a vote">
-          <input 
-            type="checkbox" 
+          <input
+            type="checkbox"
             onClick={e => {
               setEnableVoteCodeInput(!enableVoteCodeInput);
               if (!e.target.checked) setVoteCode(null);
             }}
           />
           voting code:
         </span>
-        <input 
-          type="text" 
-          onChange={setVoteCode} 
-          name="voteCode" 
+        <input
+          type="text"
+          onChange={handleTextChange}
+          name="voteCode"
           disabled={!enableVoteCodeInput}
           placeholder="secret code"
         />

src/pages/setup/PermissionsPanel.js

@@ -18,6 +18,10 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+
+  &:empty {
+    display: none;
+  }
 }
 
 .book-display li {