Removed classnames and fixed styled-component warnings

jwngr · Jul 7, 2024 · a1f4fbf · a1f4fbf
1 parent 1f16838
commit a1f4fbf
Show file tree

Hide file tree

Showing 33 changed files with 258 additions and 232 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -4,7 +4,6 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "classnames": "^2.5.1",
     "d3": "^4.12.2",
     "d3-geo": "^1.11.1",
     "d3-scale-chromatic": "^1.3.3",

diff --git a/website/src/components/Game.styles.ts b/website/src/components/Game.styles.ts
@@ -1,12 +1,17 @@
 import {darken} from 'polished';
 import {Link} from 'react-router-dom';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 
 import {assertNever} from '../lib/utils';
 import {TVNetwork} from '../models';
 import {TeamLogo} from './TeamLogo';
 
-const GameWrapper = styled(Link)`
+interface GameWrapperProps {
+  readonly $isSelected: boolean;
+  readonly $isHomeGame: boolean;
+}
+
+export const GameWrapper = styled(Link)<GameWrapperProps>`
   height: 52px;
   padding: 0 4px;
 
@@ -32,23 +37,20 @@ const GameWrapper = styled(Link)`
       transform: none;
     }
   }
+
+  ${({$isHomeGame}) => ($isHomeGame ? homeGameWrapperStyles : awayGameWrapperStyles)}
 `;
 
-export const HomeGameWrapper = styled(GameWrapper)`
-  &.selected {
-    background: ${({theme}) => theme.colors.gold}cc;
-  }
+const homeGameWrapperStyles = css<GameWrapperProps>`
+  ${({theme, $isSelected}) => ($isSelected ? `background: ${theme.colors.gold}cc;` : null)}
 
   &:hover {
-    background: ${({theme}) => theme.colors.black}20;
-
-    &.selected {
-      background: ${({theme}) => theme.colors.gold}cc;
-    }
+    background: ${({theme, $isSelected}) =>
+      $isSelected ? `${theme.colors.gold}cc` : `${theme.colors.black}20`};
   }
 `;
 
-export const AwayGameWrapper = styled(GameWrapper)`
+const awayGameWrapperStyles = css<GameWrapperProps>`
   background-size: 4px 4px;
 
   background-image: repeating-linear-gradient(
@@ -220,17 +222,24 @@ export const ScoreResult = styled.p`
   }
 `;
 
-export const ScoreTotals = styled.div`
+interface ScoreTotalsProps {
+  readonly $isOvertimeGame: boolean;
+}
+
+export const ScoreTotals = styled.div<ScoreTotalsProps>`
   flex: 1;
 
-  &.overtime-game {
+  ${({$isOvertimeGame}) =>
+    $isOvertimeGame
+      ? css`
     margin-top: 6px;
     line-height: 14px;
-  }
+  }`
+      : null}
 `;
 
 interface TelevisionCoverageProps {
-  readonly network: TVNetwork;
+  readonly $network: TVNetwork;
 }
 
 export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
@@ -246,8 +255,8 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
   }
 
   img {
-    height: ${({network}) => {
-      switch (network) {
+    height: ${({$network}) => {
+      switch ($network) {
         case TVNetwork.ESPN2:
           return '11px';
         case TVNetwork.ACCN:
@@ -276,7 +285,7 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
         case TVNetwork.Unknown:
           return '32px';
         default:
-          assertNever(network);
+          assertNever($network);
       }
     }};
     margin-left: 10px;
@@ -290,8 +299,8 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
     }
 
     img {
-      height: ${({network}) => {
-        switch (network) {
+      height: ${({$network}) => {
+        switch ($network) {
           case TVNetwork.ESPN:
           case TVNetwork.ESPN2:
           case TVNetwork.Peacock:
@@ -318,7 +327,7 @@ export const TelevisionCoverage = styled.div<TelevisionCoverageProps>`
           case TVNetwork.Unknown:
             return '24px';
           default:
-            assertNever(network);
+            assertNever($network);
         }
       }};
     }

diff --git a/website/src/components/Game.tsx b/website/src/components/Game.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import format from 'date-fns/format';
 import _ from 'lodash';
 import React from 'react';
@@ -9,10 +8,9 @@ import {GameInfo, Team, TeamId, TVNetwork} from '../models';
 import teamsJson from '../resources/teams.json';
 import {
   AwayGamePrefix,
-  AwayGameWrapper,
   DateOpponentDetailsWrapper,
   GameDate,
-  HomeGameWrapper,
+  GameWrapper,
   Location,
   OpponentDetailsWrapper,
   OpponentLogo,
@@ -39,13 +37,13 @@ export const Game: React.FC<{
   let lastColumnContent: React.ReactNode;
   if (game.isCanceled) {
     lastColumnContent = (
-      <TelevisionCoverage network={TVNetwork.Unknown}>
+      <TelevisionCoverage $network={TVNetwork.Unknown}>
         <p>Canceled</p>
       </TelevisionCoverage>
     );
   } else if (game.isPostponed) {
     lastColumnContent = (
-      <TelevisionCoverage network={TVNetwork.Unknown}>
+      <TelevisionCoverage $network={TVNetwork.Unknown}>
         <p>Posponed</p>
       </TelevisionCoverage>
     );
@@ -71,14 +69,10 @@ export const Game: React.FC<{
       );
     }
 
-    const scoreTotalClasses = classNames({
-      'overtime-game': game.numOvertimes,
-    });
-
     lastColumnContent = (
       <Score>
         {scoreResult}
-        <ScoreTotals className={scoreTotalClasses}>
+        <ScoreTotals $isOvertimeGame={(game.numOvertimes ?? 0) > 0}>
           <p>
             {notreDameScore} - {opponentScore}
           </p>
@@ -91,7 +85,7 @@ export const Game: React.FC<{
 
     lastColumnContent = (
       <TelevisionCoverage
-        network={game.coverage === 'TBD' ? TVNetwork.Unknown : game.coverage ?? TVNetwork.Unknown}
+        $network={game.coverage === 'TBD' ? TVNetwork.Unknown : game.coverage ?? TVNetwork.Unknown}
       >
         <p>{time}</p>
         {game.coverage && game.coverage !== 'TBD' ? (
@@ -101,18 +95,12 @@ export const Game: React.FC<{
     );
   } else {
     lastColumnContent = (
-      <TelevisionCoverage network={TVNetwork.Unknown}>
+      <TelevisionCoverage $network={TVNetwork.Unknown}>
         <p>TBD</p>
       </TelevisionCoverage>
     );
   }
 
-  const gameClassNames = classNames({
-    selected: isSelected,
-    homeGame: game.isHomeGame,
-    awayGame: !game.isHomeGame,
-  });
-
   let gameDate: Date | 'TBD' | undefined;
   if (game.fullDate) {
     gameDate = new Date(game.fullDate);
@@ -139,8 +127,6 @@ export const Game: React.FC<{
       _.get(game, 'rankings.home.cfbPlayoff') ||
       _.get(game, 'rankings.home.ap');
 
-  const WrapperComponent = game.isHomeGame ? HomeGameWrapper : AwayGameWrapper;
-
   let shamrockSeriesLogoContent: React.ReactNode = null;
   if (game.isShamrockSeries) {
     shamrockSeriesLogoContent = (
@@ -174,7 +160,11 @@ export const Game: React.FC<{
   }
 
   return (
-    <WrapperComponent className={gameClassNames} to={`/${season}/${index + 1}/`}>
+    <GameWrapper
+      to={`/${season}/${index + 1}/`}
+      $isSelected={isSelected}
+      $isHomeGame={game.isHomeGame}
+    >
       <OpponentWrapper>
         <OpponentLogo teamId={game.opponentId} />
         <DateOpponentDetailsWrapper>
@@ -191,6 +181,6 @@ export const Game: React.FC<{
         {shamrockSeriesLogoContent}
       </Location>
       {lastColumnContent}
-    </WrapperComponent>
+    </GameWrapper>
   );
 };
diff --git a/website/src/components/NavMenu/NavMenuDecade/index.styles.ts b/website/src/components/NavMenu/NavMenuDecade/index.styles.ts
@@ -1,6 +1,6 @@
 import {darken} from 'polished';
 import {Link} from 'react-router-dom';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 
 export const NavMenuDecadeWrapper = styled.div`
   flex: 1;
@@ -62,7 +62,13 @@ export const NavMenuDecadeYearsWrapper = styled.div`
   margin-top: 4px;
 `;
 
-export const NavMenuDecadeYear = styled(Link)`
+interface NavMenuDecadeYearProps {
+  readonly $isCurrentYear: boolean;
+  readonly $isSelectedYear: boolean;
+  readonly $isChampionshipYear: boolean;
+}
+
+export const NavMenuDecadeYear = styled(Link)<NavMenuDecadeYearProps>`
   width: 36px;
   height: 36px;
   display: flex;
@@ -79,36 +85,45 @@ export const NavMenuDecadeYear = styled(Link)`
     background-color: ${({theme}) => theme.colors.black}20;
   }
 
-  &.national-championship-year {
-    background-image: repeating-linear-gradient(
-      135deg,
-      ${({theme}) => darken(0.2, theme.colors.green)}40,
-      ${({theme}) => darken(0.2, theme.colors.green)}40 1px,
-      transparent 2px,
-      transparent 2px,
-      ${({theme}) => darken(0.2, theme.colors.green)}40 3px
-    );
-
-    &:hover {
-      color: ${({theme}) => theme.colors.white};
-    }
-  }
-
-  &.current-year {
-    background-image: repeating-linear-gradient(
-      -135deg,
-      ${({theme}) => darken(0.2, theme.colors.blue)}40,
-      ${({theme}) => darken(0.2, theme.colors.blue)}40 1px,
-      transparent 2px,
-      transparent 2px,
-      ${({theme}) => darken(0.2, theme.colors.blue)}40 3px
-    );
-  }
-
-  &.selected-year {
-    font-weight: bold;
-    background-color: ${({theme}) => theme.colors.gold};
-  }
+  ${({$isChampionshipYear}) =>
+    $isChampionshipYear
+      ? css`
+          background-image: repeating-linear-gradient(
+            135deg,
+            ${({theme}) => darken(0.2, theme.colors.green)}40,
+            ${({theme}) => darken(0.2, theme.colors.green)}40 1px,
+            transparent 2px,
+            transparent 2px,
+            ${({theme}) => darken(0.2, theme.colors.green)}40 3px
+          );
+
+          &:hover {
+            color: ${({theme}) => theme.colors.white};
+          }
+        `
+      : null}
+
+  ${({$isCurrentYear}) =>
+    $isCurrentYear
+      ? css`
+          background-image: repeating-linear-gradient(
+            -135deg,
+            ${({theme}) => darken(0.2, theme.colors.blue)}40,
+            ${({theme}) => darken(0.2, theme.colors.blue)}40 1px,
+            transparent 2px,
+            transparent 2px,
+            ${({theme}) => darken(0.2, theme.colors.blue)}40 3px
+          );
+        `
+      : null}
+
+  ${({$isSelectedYear}) =>
+    $isSelectedYear
+      ? css`
+          font-weight: bold;
+          background-color: ${({theme}) => theme.colors.gold};
+        `
+      : null}
 
   @media (max-width: 480px) {
     width: 44px;

diff --git a/website/src/components/NavMenu/NavMenuDecade/index.tsx b/website/src/components/NavMenu/NavMenuDecade/index.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import _ from 'lodash';
 import React from 'react';
 
@@ -27,19 +26,20 @@ export const NavMenuDecade: React.FC<{
       yearEnding = '0' + yearEnding;
     }
 
-    const yearLinkClasses = classNames({
-      'current-year': year === CURRENT_SEASON,
-      'selected-year': year === selectedSeason,
-      'national-championship-year': _.includes(getNationalChampionshipYears(), year),
-    });
-
     // Notre Dame did not field a team in 1980 or 1981.
     if (year === 1890 || year === 1891 || year > LATEST_YEAR) {
       return <p key={year} />;
     }
 
     return (
-      <NavMenuDecadeYear className={yearLinkClasses} to={`/${year}`} key={year} onClick={onClick}>
+      <NavMenuDecadeYear
+        key={year}
+        to={`/${year}`}
+        $isCurrentYear={year === CURRENT_SEASON}
+        $isSelectedYear={year === selectedSeason}
+        $isChampionshipYear={_.includes(getNationalChampionshipYears(), year)}
+        onClick={onClick}
+      >
         {yearEnding}
       </NavMenuDecadeYear>
     );

diff --git a/website/src/components/NavMenu/index.styles.ts b/website/src/components/NavMenu/index.styles.ts
@@ -1,3 +1,4 @@
+import {Link} from 'react-router-dom';
 import styled from 'styled-components';
 
 import backgroundImage from '../../images/background.png';
@@ -57,7 +58,7 @@ export const NavMenuLinksSectionWrapper = styled.div`
   }
 `;
 
-export const NavMenuLink = styled.a`
+export const NavMenuLink = styled(Link)`
   flex: 1;
   color: ${({theme}) => theme.colors.black};
   font-size: 16px;