From 095ca99f51940c8286719bcde7755755e2b4be7d Mon Sep 17 00:00:00 2001 From: Avi Upadhyayula <69180850+aviupadhyayula@users.noreply.github.com> Date: Sun, 3 Mar 2024 22:57:28 -0500 Subject: [PATCH] Update frontend dependencies (#616) Upgrade from Node 14 to Node 20 and bump frontend dependency versions to current. --------- Co-authored-by: Julian Weng --- .github/workflows/build-and-deploy.yaml | 1 + frontend/.babelrc | 24 +- frontend/.eslintrc.json | 1 + frontend/.prettierrc | 12 +- frontend/.storybook/.babelrc | 10 +- frontend/.storybook/main.js | 8 +- frontend/.storybook/preview-head.html | 4 +- frontend/.vscode/settings.json | 38 +- frontend/Dockerfile | 2 +- frontend/components/Applications.tsx | 49 +- frontend/components/ClubCard.tsx | 73 +- frontend/components/ClubEditPage.tsx | 3 +- .../components/ClubEditPage/AnalyticsCard.tsx | 13 - .../ClubEditPage/ApplicationsCard.tsx | 16 +- .../ClubEditPage/ApplicationsPage.tsx | 28 +- .../components/ClubEditPage/ClubEditCard.tsx | 58 +- .../components/ClubEditPage/ClubFairCard.tsx | 1 + .../ClubEditPage/ClubManagementCard.tsx | 10 +- .../ClubEditPage/FormProgressIndicator.tsx | 10 +- .../components/ClubEditPage/QRCodeCard.tsx | 6 +- .../components/ClubEditPage/RenewCard.tsx | 6 +- frontend/components/ClubList.tsx | 2 +- frontend/components/ClubPage/Actions.tsx | 12 +- frontend/components/ClubPage/AdvisorList.tsx | 2 +- .../ClubPage/ClubApprovalDialog.tsx | 33 +- frontend/components/ClubPage/Events.tsx | 4 +- .../components/ClubPage/ListRenewalDialog.tsx | 10 +- .../components/ClubPage/LiveEventsDialog.tsx | 5 +- frontend/components/ClubPage/MemberCard.tsx | 4 +- .../ClubPage/RenewalRequestDialog.tsx | 6 +- frontend/components/ClubTableRow.tsx | 32 +- frontend/components/DisplayButtons.tsx | 16 +- frontend/components/DropdownFilter.tsx | 6 +- .../components/EventPage/DateInterval.tsx | 4 +- frontend/components/EventPage/EventCard.tsx | 2 +- frontend/components/EventPage/EventModal.tsx | 6 +- frontend/components/FilterSearch.tsx | 22 +- frontend/components/FormComponents.tsx | 86 +- frontend/components/Header/Feedback.tsx | 10 +- frontend/components/Header/Head.tsx | 23 +- frontend/components/Header/Links.tsx | 11 +- frontend/components/Header/index.tsx | 10 +- frontend/components/ModelForm.tsx | 6 +- frontend/components/OrderInput.tsx | 7 +- frontend/components/ResourceCreationPage.tsx | 20 +- frontend/components/RouteProgressBar.tsx | 28 +- frontend/components/SearchBar.tsx | 6 +- frontend/components/Settings/ClubTab.tsx | 5 +- frontend/components/Settings/ClubTabCard.tsx | 8 +- frontend/components/Settings/ClubTabTable.tsx | 12 +- .../components/Settings/FairEventsTab.tsx | 22 +- frontend/components/Settings/FairsTab.tsx | 1 + frontend/components/Settings/FavoritesTab.tsx | 5 +- .../Settings/MembershipRequestsTab.tsx | 6 +- frontend/components/Settings/ProfileForm.tsx | 1 + frontend/components/Settings/QueueTab.tsx | 4 +- frontend/components/Settings/RenewTab.tsx | 4 +- .../components/Settings/RenewTabTable.tsx | 3 +- frontend/components/Settings/ReportsTab.tsx | 7 +- frontend/components/Settings/ScriptsTab.tsx | 4 +- .../Settings/WhartonApplicationStatus.tsx | 6 +- .../Settings/WhartonApplicationTab.tsx | 1 + frontend/components/Submissions.tsx | 6 +- .../components/common/AuthPrompt.stories.tsx | 7 +- frontend/components/common/BookmarkIcon.tsx | 24 +- frontend/components/common/Card.tsx | 16 +- frontend/components/common/Checkbox.tsx | 6 +- frontend/components/common/Container.tsx | 10 +- frontend/components/common/Icon.tsx | 11 +- frontend/components/common/Loading.tsx | 6 +- frontend/components/common/Metadata.tsx | 24 +- frontend/components/common/Modal.tsx | 26 +- frontend/components/common/ProfilePic.tsx | 39 +- frontend/components/common/Shade.tsx | 10 +- frontend/components/common/SubscribeIcon.tsx | 24 +- frontend/components/reports/ReportForm.tsx | 42 +- frontend/cypress/integration/authed_spec.js | 5 +- frontend/cypress/integration/invite_spec.js | 13 +- frontend/cypress/integration/request_spec.js | 23 +- .../cypress/integration/superuser_spec.js | 202 +- frontend/cypress/support/commands.js | 8 +- frontend/cypress/support/console.js | 14 +- frontend/cypress/tsconfig.json | 25 +- frontend/markdown/fileupload.md | 6 +- frontend/markdown/media.md | 8 +- frontend/next-env.d.ts | 5 +- frontend/package.json | 154 +- frontend/pages/_document.tsx | 38 +- frontend/pages/_error.tsx | 4 +- frontend/pages/club/[club]/alumni.tsx | 21 +- .../application/[application]/index.tsx | 4 +- frontend/pages/club/[club]/apply.tsx | 18 +- frontend/pages/club/[club]/fair.tsx | 8 +- frontend/pages/club/[club]/index.tsx | 21 +- frontend/pages/club/[club]/org.tsx | 31 +- frontend/pages/club/[club]/renew.tsx | 18 +- frontend/pages/constitutions.tsx | 6 +- frontend/pages/events.tsx | 31 +- frontend/pages/fair.tsx | 61 +- frontend/pages/faq.tsx | 9 +- frontend/pages/guides.tsx | 2 +- frontend/pages/guides/[page]/index.tsx | 2 +- frontend/pages/index.tsx | 7 +- .../invite/[club]/[invite]/[token]/index.tsx | 2 +- frontend/pages/user/[user]/index.tsx | 7 +- frontend/pages/welcome.tsx | 1 + frontend/pages/zoom.tsx | 16 +- frontend/public/static/css/devices.min.css | 2532 ++- frontend/public/static/maintenance.html | 50 +- frontend/renderPage.tsx | 6 +- frontend/tsconfig.json | 23 +- frontend/utils.tsx | 8 +- frontend/utils/branding.tsx | 508 +- frontend/yarn.lock | 14804 ++++++---------- 114 files changed, 9487 insertions(+), 10300 deletions(-) diff --git a/.github/workflows/build-and-deploy.yaml b/.github/workflows/build-and-deploy.yaml index 83b55762f..278214958 100644 --- a/.github/workflows/build-and-deploy.yaml +++ b/.github/workflows/build-and-deploy.yaml @@ -23,6 +23,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 diff --git a/frontend/.babelrc b/frontend/.babelrc index 8449cba0e..2781700cf 100644 --- a/frontend/.babelrc +++ b/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"] } + } } diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index ef4a729be..7f9a831c3 100644 --- a/frontend/.eslintrc.json +++ b/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 }], diff --git a/frontend/.prettierrc b/frontend/.prettierrc index 786ff459d..d62b1a6c5 100644 --- a/frontend/.prettierrc +++ b/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" } diff --git a/frontend/.storybook/.babelrc b/frontend/.storybook/.babelrc index 93ee888f0..34abf3fff 100644 --- a/frontend/.storybook/.babelrc +++ b/frontend/.storybook/.babelrc @@ -1,8 +1,4 @@ { - "presets": [ - "next/babel" - ], - "plugins": [ - "styled-components" - ] -} \ No newline at end of file + "presets": ["next/babel"], + "plugins": ["styled-components"] +} diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index 6d190590f..70c7380f8 100644 --- a/frontend/.storybook/main.js +++ b/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', + ], } diff --git a/frontend/.storybook/preview-head.html b/frontend/.storybook/preview-head.html index a8ed7e89c..2b01f9601 100644 --- a/frontend/.storybook/preview-head.html +++ b/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" /> \ No newline at end of file + diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json index eb0487fe9..68a18e6a4 100644 --- a/frontend/.vscode/settings.json +++ b/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 + } } diff --git a/frontend/Dockerfile b/frontend/Dockerfile index 6a09d2f60..46b0581b1 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -1,4 +1,4 @@ -FROM node:14.14.0-buster-slim +FROM node:20.11.1-buster-slim LABEL maintainer="Penn Labs" diff --git a/frontend/components/Applications.tsx b/frontend/components/Applications.tsx index 0bc7a4b39..b8d2a79f0 100644 --- a/frontend/components/Applications.tsx +++ b/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` 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) => ( - - - - -
- {application.name} - -
-
- {application.club_image_url != null && - application.club_image_url !== '' && ( - - - - )} -
- - {application.description && application.description.length && ( + + + +
+ {application.name} + +
+
+ {application.club_image_url != null && + application.club_image_url !== '' && ( + + + + )} +
+ + {application.description && + application.description.length && ( )} - - + )) diff --git a/frontend/components/ClubCard.tsx b/frontend/components/ClubCard.tsx index 7734f35c9..85541a845 100644 --- a/frontend/components/ClubCard.tsx +++ b/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` 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 ( - - - -
-
-
- - {name} - -
- {!active && ( - Inactive - )} - {approved === null && ( - - Pending Approval - - )} - {approved === false && ( - Rejected - )} - + + +
+
+
+ + {name} +
- {img && ( - - {`${name} - + {!active && ( + Inactive )} + {approved === null && ( + + Pending Approval + + )} + {approved === false && ( + Rejected + )} +
+ {img && ( + + {`${name} + + )} +
- {textDescription} + {textDescription} - - - + + ) diff --git a/frontend/components/ClubEditPage.tsx b/frontend/components/ClubEditPage.tsx index be79184dc..231fe3cd8 100644 --- a/frontend/components/ClubEditPage.tsx +++ b/frontend/components/ClubEditPage.tsx @@ -386,6 +386,7 @@ const ClubForm = ({ {showInactiveTag && } { @@ -410,7 +411,7 @@ const ClubForm = ({ Before creating your {OBJECT_NAME_SINGULAR}, please check to{' '} see if it already exists on the{' '} - directory page + directory page . If your {OBJECT_NAME_SINGULAR} already exists, please email{' '} to gain access instead of filling out this form. diff --git a/frontend/components/ClubEditPage/AnalyticsCard.tsx b/frontend/components/ClubEditPage/AnalyticsCard.tsx index 2503f774f..f5158159d 100644 --- a/frontend/components/ClubEditPage/AnalyticsCard.tsx +++ b/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 ( <> - - - - Analyze the traffic that your {OBJECT_NAME_SINGULAR} has received on a diff --git a/frontend/components/ClubEditPage/ApplicationsCard.tsx b/frontend/components/ClubEditPage/ApplicationsCard.tsx index 1702c39a5..729ecc911 100644 --- a/frontend/components/ClubEditPage/ApplicationsCard.tsx +++ b/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() - const [multipleChoices, setMultipleChoices] = useState< - [{ label: string; value: string }] - >() - const [committees, setCommittees] = useState< - [{ label: string; value: string }] - >() + const [questionType, setQuestionType] = + useState() + const [multipleChoices, setMultipleChoices] = + useState<[{ label: string; value: string }]>() + const [committees, setCommittees] = + useState<[{ label: string; value: string }]>() const [committeeQuestion, setCommitteeQuestion] = useState() const validateWordCount = (value) => { diff --git a/frontend/components/ClubEditPage/ApplicationsPage.tsx b/frontend/components/ClubEditPage/ApplicationsPage.tsx index af987ab01..3b242cc1b 100644 --- a/frontend/components/ClubEditPage/ApplicationsPage.tsx +++ b/frontend/components/ClubEditPage/ApplicationsPage.tsx @@ -393,20 +393,16 @@ export default function ApplicationsPage({ club: Club }): ReactElement { const [applications, setApplications] = useState>([]) - const [ - currentApplication, - setCurrentApplication, - ] = useState(null) + const [currentApplication, setCurrentApplication] = + useState(null) const [submissions, setSubmissions] = useState<{ [key: number]: Array }>([]) const [showModal, setShowModal] = useState(false) const [showNotifModal, setShowNotifModal] = useState(false) const [showReasonModal, setShowReasonModal] = useState(false) - const [ - currentSubmission, - setCurrentSubmission, - ] = useState(null) + const [currentSubmission, setCurrentSubmission] = + useState(null) const [pageIndex, setPageIndex] = useState(0) const [statusToggle, setStatusToggle] = useState(false) const [categoriesSelectAll, setCategoriesSelectAll] = useState>( @@ -640,9 +636,8 @@ export default function ApplicationsPage({ categoriesSelectAll.includes(statusLabel) if (deselecting) { - const newCategoriesSelectAll = categoriesSelectAll.filter( - (e) => e !== statusLabel, - ) + const newCategoriesSelectAll = + categoriesSelectAll.filter((e) => e !== statusLabel) setCategoriesSelectAll(newCategoriesSelectAll) } else { const newCategoriesSelectAll = categoriesSelectAll @@ -705,12 +700,11 @@ export default function ApplicationsPage({ - item.pk - ? { ...item, id: item.pk } - : { ...item, id: index }, + data={submissions[currentApplication.id].map( + (item, index) => + item.pk + ? { ...item, id: item.pk } + : { ...item, id: index }, )} columns={responseTableFields} searchableColumns={['name']} diff --git a/frontend/components/ClubEditPage/ClubEditCard.tsx b/frontend/components/ClubEditPage/ClubEditCard.tsx index e00607d5a..3b1061226 100644 --- a/frontend/components/ClubEditPage/ClubEditCard.tsx +++ b/frontend/components/ClubEditPage/ClubEditCard.tsx @@ -195,29 +195,25 @@ export default function ClubEditCard({ ), ) - const [ - showSchoolYearProgramming, - setSchoolYearProgramming, - ] = useState( - !!( - club.target_majors?.length || - club.target_schools?.length || - club.target_years?.length || - club.student_types?.length - ), - ) + const [showSchoolYearProgramming, setSchoolYearProgramming] = + useState( + !!( + club.target_majors?.length || + club.target_schools?.length || + club.target_years?.length || + club.student_types?.length + ), + ) - const [ - showStudentTypeProgramming, - setStudentTypeProgramming, - ] = useState( - !!( - club.target_majors?.length || - club.target_schools?.length || - club.target_years?.length || - club.student_types?.length - ), - ) + const [showStudentTypeProgramming, setStudentTypeProgramming] = + useState( + !!( + club.target_majors?.length || + club.target_schools?.length || + club.target_years?.length || + club.student_types?.length + ), + ) const [showSchoolProgramming, setSchoolProgramming] = useState( !!( @@ -243,10 +239,10 @@ export default function ClubEditCard({ ) // sorry ts - const exclusives = (categorizeFilter( + const exclusives = categorizeFilter( exclusiveEntries, ([key]) => key.match(/^exclusive:(.+?):(.+?)$/)?.[1] ?? 'unknown', - ) as unknown) as { + ) as unknown as { year: Array<[string, { checked?: boolean; detail?: string }]> // major: Array<[string, { checked?: boolean; detail?: string }]> student_type: Array<[string, { checked?: boolean; detail?: string }]> @@ -496,8 +492,7 @@ export default function ClubEditCard({ label: 'Location', required: false, type: 'location', - help: - 'Remember, this will be available to the public. Please only include information you feel comfortable sharing.', + help: 'Remember, this will be available to the public. Please only include information you feel comfortable sharing.', }, { name: 'email', @@ -556,11 +551,8 @@ export default function ClubEditCard({ description: SHOW_RANK_ALGORITHM ? ( Some of these fields will be used to adjust {OBJECT_NAME_SINGULAR}{' '} - ordering on the home page. Click{' '} - - here - {' '} - for more details. + ordering on the home page. Click here for + more details. ) : ( @@ -858,6 +850,7 @@ export default function ClubEditCard({ key={i} as={ { + text: TextField, checkbox: CheckboxField, html: RichTextField, multiselect: SelectField, @@ -865,7 +858,8 @@ export default function ClubEditCard({ image: FileField, address: FormikAddressField, checkboxText: CheckboxTextField, - creatableMultiSelect: CreatableMultipleSelectField, + creatableMultiSelect: + CreatableMultipleSelectField, }[props.type] ?? TextField } {...other} diff --git a/frontend/components/ClubEditPage/ClubFairCard.tsx b/frontend/components/ClubEditPage/ClubFairCard.tsx index 9e738429c..c7853d821 100644 --- a/frontend/components/ClubEditPage/ClubFairCard.tsx +++ b/frontend/components/ClubEditPage/ClubFairCard.tsx @@ -228,6 +228,7 @@ const ClubFairCard = ({
{item.club.name} (
{club.name}{' '} - - - - + +
{!isSummer() && ( - - - - Add {OBJECT_NAME_TITLE_SINGULAR} - + + + Add {OBJECT_NAME_TITLE_SINGULAR} )} diff --git a/frontend/components/DropdownFilter.tsx b/frontend/components/DropdownFilter.tsx index 3492a0845..3805f3089 100644 --- a/frontend/components/DropdownFilter.tsx +++ b/frontend/components/DropdownFilter.tsx @@ -38,7 +38,7 @@ const DropdownHeader = styled.div` } ` -const CheckboxRow = styled.div<{ color?: string }>` +const CheckboxRow = styled.div<{ $color?: string }>` padding-top: 3px; & label { @@ -46,7 +46,9 @@ const CheckboxRow = styled.div<{ color?: string }>` } & span { - color: ${({ color }) => color ?? CLUBS_GREY}; + color: ${({ $color }) => + $color ?? + CLUBS_GREY}; // Using the prop with a $ prefix and providing a fallback value } & span[role='checkbox'] { diff --git a/frontend/components/EventPage/DateInterval.tsx b/frontend/components/EventPage/DateInterval.tsx index 9709ad380..38094efb4 100644 --- a/frontend/components/EventPage/DateInterval.tsx +++ b/frontend/components/EventPage/DateInterval.tsx @@ -41,7 +41,9 @@ const DateInterval = ({ end: Date className?: string }): ReactElement => ( -

{dateIntervalString(start, end)}

+

+ {dateIntervalString(start, end)}{' '} +

) export default styled(DateInterval)` diff --git a/frontend/components/EventPage/EventCard.tsx b/frontend/components/EventPage/EventCard.tsx index 8233d8426..d9aa723bd 100644 --- a/frontend/components/EventPage/EventCard.tsx +++ b/frontend/components/EventPage/EventCard.tsx @@ -62,7 +62,7 @@ const EventCard = (props: { return ( - +
{club != null && } - + { diff --git a/frontend/components/FilterSearch.tsx b/frontend/components/FilterSearch.tsx index 93fb56dfe..d48adaaf6 100644 --- a/frontend/components/FilterSearch.tsx +++ b/frontend/components/FilterSearch.tsx @@ -1,6 +1,6 @@ import Fuse from 'fuse.js' import { ReactElement, useEffect, useState } from 'react' -import { OptionsType, Styles } from 'react-select' +import { Options, StylesConfig } from 'react-select' import Select from 'react-select/async' import styled from 'styled-components' @@ -39,7 +39,7 @@ const SubLabel = styled.div` } ` -const ColorPreview = styled.div<{ color: string }>` +const ColorPreview = styled.div<{ $color: string }>` display: inline-block; width: 1em; height: 1em; @@ -93,7 +93,7 @@ const Search = ({ clearTags, }: SearchProps): ReactElement => { // Custom styles for the react-select - const styles: Styles = { + const styles: StylesConfig = { control: ({ background, ...base }, { isFocused }) => { const isEmphasized = isFocused return { @@ -148,10 +148,7 @@ const Search = ({ ) }, MultiValueLabel: ({ data: { label } }) => label, - MultiValueRemove: ({ - data, - innerProps: { onClick, onTouchEnd, onMouseDown }, - }) => { + MultiValueRemove: ({ data, innerProps }) => { const removeGenerator = (func) => { return (e) => { func(e) @@ -160,10 +157,11 @@ const Search = ({ } return (