Update frontend dependencies

.github/workflows/build-and-deploy.yaml

@@ -22,6 +22,7 @@ jobs:
     uses: pennlabs/shared-actions/.github/workflows/react-check.yaml@v0.1
     with:
       path: frontend
+      nodeVersion: 20.11.1
 
   build-backend:
     name: Build backend

frontend/.babelrc

@@ -1,18 +1,12 @@
 {
-    "presets": [
-        "next/babel"
-    ],
-    "plugins": [
-        "istanbul"
-    ],
-    "env": {
-        "production": {
-            "plugins": [["styled-components", { "ssr": true }]]
-        },
-        "development": {
-            "plugins": [
-                "babel-plugin-styled-components"
-            ]
-        }
+  "presets": ["next/babel"],
+  "plugins": ["istanbul"],
+  "env": {
+    "production": {
+      "plugins": [["styled-components", { "ssr": true }]]
+    },
+    "development": {
+      "plugins": ["babel-plugin-styled-components"]
     }
+  }
 }

frontend/.eslintrc.json

@@ -33,6 +33,7 @@
       }
     ],
     "no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-unused-vars": "off",
     "unused-imports/no-unused-imports-ts": "error",
     "camelcase": ["warn", { "ignoreDestructuring": true }],

frontend/.prettierrc

@@ -1,8 +1,8 @@
 {
-    "endOfLine": "lf",
-    "semi": false,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "useTabs": false,
-    "trailingComma": "all"
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all"
 }

frontend/.storybook/.babelrc

@@ -1,8 +1,4 @@
 {
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    "styled-components"
-  ]
-}
+  "presets": ["next/babel"],
+  "plugins": ["styled-components"]
+}

frontend/.storybook/main.js

@@ -1,4 +1,8 @@
 module.exports = {
-    stories: ['../components/**/*.stories.@(js|ts|mdx|tsx)'],
-    addons: ['@storybook/addon-actions/register', '@storybook/addon-links/register', '@storybook/addon-docs'],
+  stories: ['../components/**/*.stories.@(js|ts|mdx|tsx)'],
+  addons: [
+    '@storybook/addon-actions/register',
+    '@storybook/addon-links/register',
+    '@storybook/addon-docs',
+  ],
 }

frontend/.storybook/preview-head.html

@@ -2,7 +2,7 @@
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css"
   integrity="sha256-aPeK/N8IHpHsvPBCf49iVKMdusfobKo2oxF8lRruWJg="
-  crossOrigin="anonymous"
+  crossorigin="anonymous"
 />
 <!-- Fonts-->
 <link
@@ -31,4 +31,4 @@
   .prismjs .token.plain-text {
     color: white;
   }
-</style>
+</style>

frontend/.vscode/settings.json

@@ -1,21 +1,21 @@
 {
-    "editor.tabSize": 2,
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
-    },
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/.next": true,
-        "**/.nyc_output": true
-    },
-    "search.exclude": {
-        "**/node_modules": true,
-        "**/bower_components": true,
-        "**/*.code-search": true,
-        "**/coverage": true
-    }
+  "editor.tabSize": 2,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/.next": true,
+    "**/.nyc_output": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "**/coverage": true
+  }
 }

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14.14.0-buster-slim
+FROM node:20.11.1-buster-slim
 
 LABEL maintainer="Penn Labs"
 

frontend/components/Applications.tsx

@@ -53,7 +53,7 @@ const MainInfo = styled.div`
   flex-direction: row;
 `
 type CardProps = {
-  readonly hovering?: boolean
+  readonly $hovering?: boolean
   className?: string
 }
 
@@ -63,7 +63,7 @@ const Card = styled.div<CardProps>`
   transition: all ${ANIMATION_DURATION}ms ease;
   border-radius: ${BORDER_RADIUS};
   box-shadow: 0 0 0 ${WHITE};
-  background-color: ${({ hovering }) => (hovering ? HOVER_GRAY : WHITE)};
+  background-color: ${({ $hovering }) => ($hovering ? HOVER_GRAY : WHITE)};
   border: 1px solid ${ALLBIRDS_GRAY};
   justify-content: space-between;
   height: auto;
@@ -105,35 +105,34 @@ function ApplicationsPage({ whartonapplications }): ReactElement {
         {whartonapplications != null && whartonapplications.length > 0 ? (
           whartonapplications.map((application) => (
             <CardWrapper className={'column is-half-desktop'}>
-              <Link href={application.external_url}>
-                <a target="_blank">
-                  <Card className="card">
-                    <MainInfo>
-                      <div>
-                        <ClubName>{application.name}</ClubName>
-                        <DateInterval
-                          start={application.application_start_time}
-                          end={application.application_end_time}
-                        />
-                      </div>
-                      <div>
-                        {application.club_image_url != null &&
-                          application.club_image_url !== '' && (
-                            <LazyLoad>
-                              <Image src={application.club_image_url} />
-                            </LazyLoad>
-                          )}
-                      </div>
-                    </MainInfo>
-                    {application.description && application.description.length && (
+              <Link href={application.external_url} target="_blank">
+                <Card className="card">
+                  <MainInfo>
+                    <div>
+                      <ClubName>{application.name}</ClubName>
+                      <DateInterval
+                        start={application.application_start_time}
+                        end={application.application_end_time}
+                      />
+                    </div>
+                    <div>
+                      {application.club_image_url != null &&
+                        application.club_image_url !== '' && (
+                          <LazyLoad>
+                            <Image src={application.club_image_url} />
+                          </LazyLoad>
+                        )}
+                    </div>
+                  </MainInfo>
+                  {application.description &&
+                    application.description.length && (
                       <DescriptionWrapper
                         dangerouslySetInnerHTML={{
                           __html: application.description,
                         }}
                       ></DescriptionWrapper>
                     )}
-                  </Card>
-                </a>
+                </Card>
               </Link>
             </CardWrapper>
           ))

frontend/components/ClubCard.tsx

@@ -36,7 +36,7 @@ const Description = styled.p`
 `
 
 type CardProps = {
-  readonly hovering?: boolean
+  readonly $hovering?: boolean
   className?: string
 }
 
@@ -46,7 +46,7 @@ const Card = styled.div<CardProps>`
   transition: all ${ANIMATION_DURATION}ms ease;
   border-radius: ${BORDER_RADIUS};
   box-shadow: 0 0 0 ${WHITE};
-  background-color: ${({ hovering }) => (hovering ? HOVER_GRAY : WHITE)};
+  background-color: ${({ $hovering }) => ($hovering ? HOVER_GRAY : WHITE)};
   border: 1px solid ${ALLBIRDS_GRAY};
   justify-content: space-between;
   height: auto;
@@ -97,55 +97,46 @@ type ClubCardProps = {
 }
 
 const ClubCard = ({ club, fullWidth }: ClubCardProps): ReactElement => {
-  const {
-    name,
-    active,
-    approved,
-    subtitle,
-    tags,
-    enables_subscription,
-    code,
-  } = club
+  const { name, active, approved, subtitle, tags, enables_subscription, code } =
+    club
   const img = club.image_url
   const textDescription = shorten(subtitle || 'This club has no description.')
 
   return (
     <CardWrapper className={fullWidth ? '' : 'column is-half-desktop'}>
-      <Link href={CLUB_ROUTE()} as={CLUB_ROUTE(code)}>
-        <a target="_blank">
-          <Card className="card">
-            <div style={{ display: 'flex' }}>
-              <div style={{ flex: 1 }}>
-                <div>
-                  <CardHeader>
-                    <CardTitle className="is-size-5">{name}</CardTitle>
-                  </CardHeader>
-                </div>
-                {!active && (
-                  <InactiveTag className="tag is-rounded">Inactive</InactiveTag>
-                )}
-                {approved === null && (
-                  <InactiveTag className="tag is-rounded">
-                    Pending Approval
-                  </InactiveTag>
-                )}
-                {approved === false && (
-                  <InactiveTag className="tag is-rounded">Rejected</InactiveTag>
-                )}
-                <TagGroup tags={tags} />
+      <Link href={CLUB_ROUTE()} as={CLUB_ROUTE(code)} target="_blank">
+        <Card className="card">
+          <div style={{ display: 'flex' }}>
+            <div style={{ flex: 1 }}>
+              <div>
+                <CardHeader>
+                  <CardTitle className="is-size-5">{name}</CardTitle>
+                </CardHeader>
               </div>
-              {img && (
-                <LazyLoad height={62} offset={800}>
-                  <Image src={img} alt={`${name} Logo`} />
-                </LazyLoad>
+              {!active && (
+                <InactiveTag className="tag is-rounded">Inactive</InactiveTag>
               )}
+              {approved === null && (
+                <InactiveTag className="tag is-rounded">
+                  Pending Approval
+                </InactiveTag>
+              )}
+              {approved === false && (
+                <InactiveTag className="tag is-rounded">Rejected</InactiveTag>
+              )}
+              <TagGroup tags={tags} />
             </div>
+            {img && (
+              <LazyLoad height={62} offset={800}>
+                <Image src={img} alt={`${name} Logo`} />
+              </LazyLoad>
+            )}
+          </div>
 
-            <Description>{textDescription}</Description>
+          <Description>{textDescription}</Description>
 
-            <ClubDetails club={club} />
-          </Card>
-        </a>
+          <ClubDetails club={club} />
+        </Card>
       </Link>
     </CardWrapper>
   )

frontend/components/ClubEditPage.tsx

@@ -386,6 +386,7 @@ const ClubForm = ({
         {showInactiveTag && <InactiveTag />}
         {
           <Link
+            legacyBehavior
             href={isViewButton ? CLUB_ROUTE() : HOME_ROUTE}
             as={isViewButton && club ? CLUB_ROUTE(club.code) : HOME_ROUTE}
           >
@@ -410,7 +411,7 @@ const ClubForm = ({
             <b>Before creating your {OBJECT_NAME_SINGULAR},</b> please check to{' '}
             see if it already exists on the{' '}
             <Link href={DIRECTORY_ROUTE} as={DIRECTORY_ROUTE}>
-              <a>directory page</a>
+              directory page
             </Link>
             . If your {OBJECT_NAME_SINGULAR} already exists, please email{' '}
             <Contact /> to gain access instead of filling out this form.

frontend/components/ClubEditPage/AnalyticsCard.tsx

@@ -1,5 +1,4 @@
 import moment from 'moment'
-import Head from 'next/head'
 import { ReactElement, useEffect, useState } from 'react'
 import DatePicker from 'react-datepicker'
 import Select from 'react-select'
@@ -242,18 +241,6 @@ export default function AnalyticsCard({
 
   return (
     <>
-      <Head>
-        <link
-          href="/static/css/style-react-vis.css"
-          rel="stylesheet"
-          key="editor-css"
-        />
-        <link
-          href="/static/css/react-datepicker.css"
-          rel="stylesheet"
-          key="datepicker-css"
-        />
-      </Head>
       <BaseCard title="Time Series Analytics">
         <Text>
           Analyze the traffic that your {OBJECT_NAME_SINGULAR} has received on a

frontend/components/ClubEditPage/ApplicationsCard.tsx

@@ -64,16 +64,12 @@ const ApplicationModal = (props: {
     committeeChoices,
   } = props
   // TODO: I'm positive that this is something that Formik should do for me
-  const [
-    questionType,
-    setQuestionType,
-  ] = useState<ApplicationQuestionType | null>()
-  const [multipleChoices, setMultipleChoices] = useState<
-    [{ label: string; value: string }]
-  >()
-  const [committees, setCommittees] = useState<
-    [{ label: string; value: string }]
-  >()
+  const [questionType, setQuestionType] =
+    useState<ApplicationQuestionType | null>()
+  const [multipleChoices, setMultipleChoices] =
+    useState<[{ label: string; value: string }]>()
+  const [committees, setCommittees] =
+    useState<[{ label: string; value: string }]>()
   const [committeeQuestion, setCommitteeQuestion] = useState<boolean>()
 
   const validateWordCount = (value) => {