Upgraded styled-components and improved some types

jwngr · Jul 7, 2024 · c102764 · c102764
1 parent d04d3df
commit c102764
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 165 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": {
-    "babel-plugin-macros": "^2.8.0",
     "classnames": "^2.5.1",
     "d3": "^4.12.2",
     "d3-geo": "^1.11.1",
@@ -21,7 +20,7 @@
     "react-media": "^1.8.0",
     "react-router-dom": "^5.1.2",
     "react-tweet-embed": "^1.1.0",
-    "styled-components": "^5.0.1",
+    "styled-components": "^6.1.11",
     "topojson-client": "^3.0.0",
     "typeface-bungee": "1.1.13",
     "weathericons": "^2.1.0"
@@ -35,7 +34,6 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-react": "^4.3.1",

diff --git a/website/src/components/common/FootballShape/index.tsx b/website/src/components/common/FootballShape/index.tsx
@@ -49,7 +49,7 @@ export const FootballShape: React.FC<{
           fill={`url(#fill-pattern-${uniqueFillPatternId})`}
           d="M24.3585167,0.063430208 C35.1119935,-0.6284714 46.6072293,4.36977614 52.597914,13.6040857 C54.7297115,16.8900946 47.7985071,22.2410883 45.5381744,23.9389606 C40.8288076,27.476048 35.0715102,29.4979341 29.2104611,29.9219608 C18.5877272,30.6905583 5.76969773,25.7610451 0.275655548,16.0523187 C-1.54345102,12.8377005 6.1544002,7.27463607 8.34504921,5.68440188 C13.0321845,2.281693 18.5929238,0.434412586 24.3585166,0.0634300975"
         ></path>
-        {type === 'future' && (
+        {type === 'future' ? (
           <g className="laces" transform="translate(14, 11)">
             <line x1="-6.9388939e-16" y1="4" x2="26" y2="4"></line>
             <line x1="3" y1="8" x2="3" y2="4.4408921e-16"></line>
@@ -58,7 +58,7 @@ export const FootballShape: React.FC<{
             <line x1="18" y1="8" x2="18" y2="4.4408921e-16"></line>
             <line x1="23" y1="8" x2="23" y2="4.4408921e-16"></line>
           </g>
-        )}
+        ) : null}
         <defs>
           <pattern
             id={`fill-pattern-${uniqueFillPatternId}`}
@@ -73,11 +73,11 @@ export const FootballShape: React.FC<{
           </pattern>
         </defs>
       </FootballShapeSvg>
-      {text && (
+      {text ? (
         <Text gameResult={gameResult} isSelected={isSelected}>
           {text}
         </Text>
-      )}
+      ) : null}
       {leftLeg}
       {rightLeg}
     </>

diff --git a/website/src/components/gameSummary/CompletedGameSummary/Linescore/index.tsx b/website/src/components/gameSummary/CompletedGameSummary/Linescore/index.tsx
@@ -77,9 +77,9 @@ export const Linescore: React.FC<{
         <p style={awayTeamColorStyles}>{totalScores.away}</p>
         <p style={homeTeamColorStyles}>{totalScores.home}</p>
       </ScoreColumn>
-      {highlightsYouTubeVideoId && (
+      {highlightsYouTubeVideoId ? (
         <YouTubeIcon title="Video highlights" highlightsYouTubeVideoId={highlightsYouTubeVideoId} />
-      )}
+      ) : null}
     </LinescoreWrapper>
   );
 };
diff --git a/website/src/components/gameSummary/CompletedGameSummary/TotalScore/index.tsx b/website/src/components/gameSummary/CompletedGameSummary/TotalScore/index.tsx
@@ -29,11 +29,11 @@ const TeamInfo: React.FC<{
       <TeamImage teamId={teamId} className={homeOrAway} />
       <TeamDetailsWrapper className={homeOrAway}>
         <TeamName>
-          {ranking && <TeamRanking>#{ranking}</TeamRanking>}
+          {ranking ? <TeamRanking>#{ranking}</TeamRanking> : null}
           {team.name}
         </TeamName>
         <TeamNickname>{team.nickname}</TeamNickname>
-        {record && <TeamRecord>{record}</TeamRecord>}
+        {record ? <TeamRecord>{record}</TeamRecord> : null}
       </TeamDetailsWrapper>
     </TeamWrapper>
   );
@@ -85,19 +85,19 @@ export const TotalScore: React.FC<{
           <TotalScoreWrapper>
             <TeamDetailsWrapper className="away">
               <TeamName>
-                {awayApRanking && <TeamRanking>#{awayApRanking}</TeamRanking>}
+                {awayApRanking ? <TeamRanking>#{awayApRanking}</TeamRanking> : null}
                 {awayTeam.name}
               </TeamName>
               <TeamNickname>{awayTeam.nickname}</TeamNickname>
-              {awayRecord && <TeamRecord>{awayRecord}</TeamRecord>}
+              {awayRecord ? <TeamRecord>{awayRecord}</TeamRecord> : null}
             </TeamDetailsWrapper>
             <TeamDetailsWrapper className="home">
               <TeamName>
-                {homeApRanking && <TeamRanking>#{homeApRanking}</TeamRanking>}
+                {homeApRanking ? <TeamRanking>#{homeApRanking}</TeamRanking> : null}
                 {homeTeam.name}
               </TeamName>
               <TeamNickname>{homeTeam.nickname}</TeamNickname>
-              {homeRecord && <TeamRecord>{homeRecord}</TeamRecord>}
+              {homeRecord ? <TeamRecord>{homeRecord}</TeamRecord> : null}
             </TeamDetailsWrapper>
             <TeamImage className="away" teamId={awayTeamId} />
             <TeamImage className="home" teamId={homeTeamId} />

diff --git a/website/src/components/gameSummary/FutureGameSummary/index.tsx b/website/src/components/gameSummary/FutureGameSummary/index.tsx
@@ -36,11 +36,11 @@ const TeamInfo: React.FC<{
       <TeamImage teamId={teamId} className={homeOrAway} />
       <TeamDetailsWrapper className={homeOrAway}>
         <TeamName>
-          {ranking && <TeamRanking>#{ranking}</TeamRanking>}
+          {ranking ? <TeamRanking>#{ranking}</TeamRanking> : null}
           {team.name}
         </TeamName>
         <TeamNickname>{team.nickname}</TeamNickname>
-        {record && <TeamRecord>{record}</TeamRecord>}
+        {record ? <TeamRecord>{record}</TeamRecord> : null}
       </TeamDetailsWrapper>
     </TeamWrapper>
   );
@@ -93,19 +93,19 @@ export const FutureGameSummary: React.FC<{
             <TeamsWrapper>
               <TeamDetailsWrapper className="away">
                 <TeamName>
-                  {awayApRanking && <TeamRanking>#{awayApRanking}</TeamRanking>}
+                  {awayApRanking ? <TeamRanking>#{awayApRanking}</TeamRanking> : null}
                   {awayTeam.name}
                 </TeamName>
                 <TeamNickname>{awayTeam.nickname}</TeamNickname>
-                {awayRecord && <TeamRecord>{awayRecord}</TeamRecord>}
+                {awayRecord ? <TeamRecord>{awayRecord}</TeamRecord> : null}
               </TeamDetailsWrapper>
               <TeamDetailsWrapper className="home">
                 <TeamName>
-                  {homeApRanking && <TeamRanking>#{homeApRanking}</TeamRanking>}
+                  {homeApRanking ? <TeamRanking>#{homeApRanking}</TeamRanking> : null}
                   {homeTeam.name}
                 </TeamName>
                 <TeamNickname>{homeTeam.nickname}</TeamNickname>
-                {homeRecord && <TeamRecord>{homeRecord}</TeamRecord>}
+                {homeRecord ? <TeamRecord>{homeRecord}</TeamRecord> : null}
               </TeamDetailsWrapper>
               <TeamImage className="away" teamId={awayTeamId} />
               <TeamImage className="home" teamId={homeTeamId} />

diff --git a/website/src/components/gameSummary/GameCoverage/index.tsx b/website/src/components/gameSummary/GameCoverage/index.tsx
@@ -10,30 +10,28 @@ import {CanceledText, ChannelLogo, CoverageInnerWrapper, DateAndTimeWrapper} fro
 export const GameCoverage: React.FC<{
   readonly game: GameInfo;
 }> = ({game}) => {
-  const isGameOver = typeof game.result !== 'undefined';
+  const isGameOver = !!game.result;
 
-  let mainContent;
+  let mainContent: React.ReactNode;
   if (game.date === 'TBD') {
     mainContent = <p>Date and time to be determined</p>;
   } else if (game.isCanceled) {
     mainContent = <CanceledText>Canceled</CanceledText>;
   } else if (game.isPostponed) {
     mainContent = <p>Postponed</p>;
   } else {
-    let date;
-    let time;
+    let date: string;
+    let time: string | null;
     const dateFormatString = 'E, MMMM d, yyyy';
     if (game.fullDate) {
       const d = new Date(game.fullDate);
       date = format(d, dateFormatString);
       time = `${format(d, 'h:mm a')} ${getTimeZoneString(d)}`;
     } else if (game.date) {
       // TODO(cleanup): Convert all dates to fullDate and be done with this nonesense.
-      // No year that is in this format has any time information, so we can ignore the time here.
       date = format(new Date(game.date), dateFormatString);
-      if (!game.result) {
-        time = 'Time to be determined';
-      }
+      // No year that is in this format has any time information, so we can ignore the time here.
+      time = game.result ? null : 'Time to be determined';
     } else {
       date = 'No date';
       time = 'No time';
@@ -73,16 +71,16 @@ export const GameCoverage: React.FC<{
     mainContent = (
       <>
         {tvCoverageContent}
-        <DateAndTimeWrapper center={typeof tvCoverageContent === 'undefined'}>
+        <DateAndTimeWrapper center={!!tvCoverageContent}>
           <p>{date}</p>
-          {time && <p>{time}</p>}
+          {time ? <p>{time}</p> : null}
         </DateAndTimeWrapper>
       </>
     );
   }
 
   return (
-    <StatsSection title={game.coverage || typeof game.result === 'undefined' ? 'Coverage' : 'Date'}>
+    <StatsSection title={game.coverage || !game.result ? 'Coverage' : 'Date'}>
       <CoverageInnerWrapper>{mainContent}</CoverageInnerWrapper>
     </StatsSection>
   );

diff --git a/website/src/components/gameSummary/Location/index.tsx b/website/src/components/gameSummary/Location/index.tsx
@@ -76,12 +76,12 @@ export const Location: React.FC<{readonly game: GameInfo}> = ({game}) => {
       const {icon, text} = weatherInfo;
       weatherContent = (
         <WeatherWrapper>
-          {icon && (
+          {icon ? (
             <WeatherIcon
               className={`wi ${icon}`}
               title={`Weather forecast at kickoff: ${text}`}
             ></WeatherIcon>
-          )}
+          ) : null}
           <Temperature isWeatherIconPresent={!!icon}>{game.weather.temperature}&deg;F</Temperature>
         </WeatherWrapper>
       );

diff --git a/website/src/components/gameSummary/MatchupHistory/HistoricalMatchup/index.tsx b/website/src/components/gameSummary/MatchupHistory/HistoricalMatchup/index.tsx
@@ -61,7 +61,7 @@ export const HistoricalMatchup: React.FC<{
 
   return (
     <HistoricalMatchupWrapper isSeasonOnTop={isSeasonOnTop}>
-      {isSeasonOnTop && seasonContent}
+      {isSeasonOnTop ? seasonContent : null}
       <FootballScoreWrapper>
         <Link to={`/${season}/${weekIndex + 1}`}>
           <FootballShape
@@ -83,7 +83,7 @@ export const HistoricalMatchup: React.FC<{
           />
         </Link>
       </FootballScoreWrapper>
-      {!isSeasonOnTop && seasonContent}
+      {!isSeasonOnTop ? seasonContent : null}
     </HistoricalMatchupWrapper>
   );
 };
diff --git a/website/src/lib/urls.ts b/website/src/lib/urls.ts
@@ -13,7 +13,7 @@ const DEFAULT_SELECTED_GAME_INDEX = 0;
 export const getYearFromUrl = (url = ''): number => {
   const tokens = url.split('/').filter((val) => val !== '');
 
-  let year;
+  let year: number | undefined;
   if (tokens.length > 0 && tokens[0].length === 4) {
     year = Number(tokens[0]);
   }
@@ -30,7 +30,7 @@ export const getSelectedGameIndexFromUrl = (url = ''): number => {
 
   const tokens = url.split('/').filter((val) => val !== '');
 
-  let selectedGameIndex;
+  let selectedGameIndex: number | undefined;
   if (tokens.length > 1) {
     selectedGameIndex = Number(tokens[1]);
   }