From e5d8c93ab8c96464fb6e7b08e80655d816d8b4b4 Mon Sep 17 00:00:00 2001 From: Ryan Cohen Date: Thu, 18 Aug 2022 17:05:58 +0900 Subject: [PATCH] chore(deps): update react to 18 (#2943) --- next.config.js | 3 + package.json | 17 +- src/components/AppDataWarning/index.tsx | 8 +- src/components/CollectionDetails/index.tsx | 4 +- src/components/Common/Accordion/index.tsx | 13 +- src/components/Common/Alert/index.tsx | 3 +- src/components/Common/Badge/index.tsx | 5 +- .../Common/ButtonWithDropdown/index.tsx | 8 +- src/components/Common/CachedImage/index.tsx | 2 +- src/components/Common/ConfirmButton/index.tsx | 5 +- src/components/Common/Header/index.tsx | 7 +- src/components/Common/List/index.tsx | 6 +- src/components/Common/ListView/index.tsx | 4 +- .../Common/LoadingSpinner/index.tsx | 4 +- src/components/Common/Modal/index.tsx | 5 +- src/components/Common/PageTitle/index.tsx | 11 +- src/components/Common/PlayButton/index.tsx | 2 +- .../Common/ProgressCircle/index.tsx | 4 +- .../Common/SensitiveInput/index.tsx | 5 +- src/components/Common/SettingsTabs/index.tsx | 16 +- src/components/Common/SlideOver/index.tsx | 5 +- src/components/Common/Table/index.tsx | 25 ++- src/components/CompanyCard/index.tsx | 2 +- .../Discover/DiscoverMovieGenre/index.tsx | 2 +- .../Discover/DiscoverMovieLanguage/index.tsx | 2 +- src/components/Discover/DiscoverMovies.tsx | 2 +- .../Discover/DiscoverNetwork/index.tsx | 2 +- .../Discover/DiscoverStudio/index.tsx | 2 +- src/components/Discover/DiscoverTv.tsx | 2 +- .../Discover/DiscoverTvGenre/index.tsx | 2 +- .../Discover/DiscoverTvLanguage/index.tsx | 2 +- .../Discover/DiscoverTvUpcoming.tsx | 2 +- .../Discover/MovieGenreList/index.tsx | 2 +- .../Discover/MovieGenreSlider/index.tsx | 2 +- .../Discover/NetworkSlider/index.tsx | 2 +- .../Discover/StudioSlider/index.tsx | 2 +- src/components/Discover/Trending.tsx | 2 +- src/components/Discover/TvGenreList/index.tsx | 2 +- .../Discover/TvGenreSlider/index.tsx | 2 +- src/components/Discover/Upcoming.tsx | 2 +- src/components/Discover/index.tsx | 2 +- src/components/DownloadBlock/index.tsx | 5 +- src/components/ExternalLinkBlock/index.tsx | 4 +- src/components/GenreCard/index.tsx | 9 +- src/components/IssueBlock/index.tsx | 2 +- .../IssueDetails/IssueComment/index.tsx | 12 +- .../IssueDetails/IssueDescription/index.tsx | 4 +- src/components/IssueDetails/index.tsx | 2 +- src/components/IssueList/IssueItem/index.tsx | 2 +- src/components/IssueList/index.tsx | 8 +- .../IssueModal/CreateIssueModal/index.tsx | 16 +- src/components/IssueModal/index.tsx | 7 +- src/components/JSONEditor/index.tsx | 7 +- src/components/LanguageSelector/index.tsx | 4 +- .../Layout/LanguagePicker/index.tsx | 2 +- src/components/Layout/Notifications/index.tsx | 2 +- src/components/Layout/SearchInput/index.tsx | 2 +- src/components/Layout/Sidebar/index.tsx | 2 +- src/components/Layout/UserDropdown/index.tsx | 2 +- src/components/Layout/VersionStatus/index.tsx | 2 +- src/components/Layout/index.tsx | 6 +- src/components/Login/LocalLogin.tsx | 18 +- src/components/Login/index.tsx | 2 +- src/components/ManageSlideOver/index.tsx | 6 +- .../MediaSlider/ShowMoreCard/index.tsx | 2 +- src/components/MediaSlider/index.tsx | 4 +- .../MovieDetails/MovieCast/index.tsx | 2 +- .../MovieDetails/MovieCrew/index.tsx | 2 +- .../MovieDetails/MovieRecommendations.tsx | 2 +- src/components/MovieDetails/MovieSimilar.tsx | 2 +- src/components/MovieDetails/index.tsx | 2 +- .../NotificationType/index.tsx | 4 +- .../NotificationTypeSelector/index.tsx | 4 +- src/components/PWAHeader/index.tsx | 4 +- src/components/PermissionEdit/index.tsx | 4 +- src/components/PermissionOption/index.tsx | 4 +- src/components/PersonCard/index.tsx | 4 +- src/components/PersonDetails/index.tsx | 2 +- src/components/PlexLoginButton/index.tsx | 4 +- src/components/QuotaSelector/index.tsx | 4 +- src/components/RegionSelector/index.tsx | 4 +- src/components/RequestBlock/index.tsx | 2 +- src/components/RequestButton/index.tsx | 4 +- src/components/RequestCard/index.tsx | 6 +- .../RequestList/RequestItem/index.tsx | 9 +- src/components/RequestList/index.tsx | 8 +- .../RequestModal/AdvancedRequester/index.tsx | 4 +- .../RequestModal/CollectionRequestModal.tsx | 8 +- .../RequestModal/MovieRequestModal.tsx | 16 +- .../RequestModal/QuotaDisplay/index.tsx | 38 ++-- .../RequestModal/SearchByNameModal/index.tsx | 4 +- .../RequestModal/TvRequestModal.tsx | 16 +- src/components/RequestModal/index.tsx | 4 +- .../ResetPassword/RequestResetLink.tsx | 10 +- src/components/ResetPassword/index.tsx | 10 +- src/components/Search/index.tsx | 2 +- src/components/ServiceWorkerSetup/index.tsx | 3 +- src/components/Settings/CopyButton.tsx | 2 +- src/components/Settings/LibraryItem.tsx | 6 +- .../Notifications/NotificationsDiscord.tsx | 48 +++-- .../Notifications/NotificationsEmail.tsx | 44 ++-- .../NotificationsGotify/index.tsx | 18 +- .../NotificationsLunaSea/index.tsx | 38 ++-- .../NotificationsPushbullet/index.tsx | 34 ++- .../NotificationsPushover/index.tsx | 63 +++--- .../NotificationsSlack/index.tsx | 32 +-- .../Notifications/NotificationsTelegram.tsx | 100 +++++---- .../NotificationsWebPush/index.tsx | 2 +- .../NotificationsWebhook/index.tsx | 18 +- src/components/Settings/RadarrModal/index.tsx | 70 ++++--- .../Settings/SettingsAbout/Releases/index.tsx | 8 +- .../Settings/SettingsAbout/index.tsx | 8 +- .../Settings/SettingsJobsCache/index.tsx | 2 +- src/components/Settings/SettingsLayout.tsx | 6 +- .../Settings/SettingsLogs/index.tsx | 14 +- src/components/Settings/SettingsMain.tsx | 18 +- .../Settings/SettingsNotifications.tsx | 6 +- src/components/Settings/SettingsPlex.tsx | 100 +++++---- src/components/Settings/SettingsServices.tsx | 30 ++- .../Settings/SettingsUsers/index.tsx | 2 +- src/components/Settings/SonarrModal/index.tsx | 70 ++++--- src/components/Setup/LoginWithPlex.tsx | 2 +- src/components/Setup/SetupSteps.tsx | 4 +- src/components/Setup/index.tsx | 2 +- src/components/Slider/index.tsx | 4 +- src/components/StatusBadge/index.tsx | 4 +- src/components/StatusChecker/index.tsx | 2 +- src/components/TitleCard/Placeholder.tsx | 2 +- src/components/TitleCard/TmdbTitleCard.tsx | 2 +- src/components/TitleCard/index.tsx | 4 +- src/components/Toast/index.tsx | 4 +- src/components/ToastContainer/index.tsx | 5 +- src/components/Transition/index.tsx | 11 +- src/components/TvDetails/TvCast/index.tsx | 2 +- src/components/TvDetails/TvCrew/index.tsx | 2 +- .../TvDetails/TvRecommendations.tsx | 2 +- src/components/TvDetails/TvSimilar.tsx | 2 +- src/components/TvDetails/index.tsx | 2 +- src/components/UserList/BulkEditModal.tsx | 4 +- src/components/UserList/PlexImportModal.tsx | 17 +- src/components/UserList/index.tsx | 36 ++-- .../UserProfile/ProfileHeader/index.tsx | 5 +- .../UserGeneralSettings/index.tsx | 38 ++-- .../UserNotificationsDiscord.tsx | 30 +-- .../UserNotificationsEmail.tsx | 10 +- .../UserNotificationsPushbullet.tsx | 26 +-- .../UserNotificationsPushover.tsx | 55 +++-- .../UserNotificationsTelegram.tsx | 54 +++-- .../UserNotificationsWebPush.tsx | 2 +- .../UserNotificationSettings/index.tsx | 8 +- .../UserSettings/UserPasswordChange/index.tsx | 26 ++- .../UserSettings/UserPermissions/index.tsx | 2 +- .../UserProfile/UserSettings/index.tsx | 6 +- src/components/UserProfile/index.tsx | 2 +- src/context/InteractionContext.tsx | 5 +- src/context/SettingsContext.tsx | 5 +- src/context/UserContext.tsx | 6 +- src/hooks/useIsTouch.ts | 2 +- src/pages/404.tsx | 2 +- src/pages/_app.tsx | 2 + src/pages/login/plex/loading.tsx | 2 +- src/pages/search.tsx | 2 +- src/utils/polyfillIntl.ts | 37 ++++ yarn.lock | 196 +++++++++--------- 164 files changed, 983 insertions(+), 916 deletions(-) create mode 100644 src/utils/polyfillIntl.ts diff --git a/next.config.js b/next.config.js index f0a623d4..fa5f89a6 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,6 @@ +/** + * @type {import('next').NextConfig} + */ module.exports = { env: { commitTag: process.env.COMMIT_TAG || 'local', diff --git a/package.json b/package.json index f537b239..2c7b1386 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,9 @@ }, "license": "MIT", "dependencies": { + "@formatjs/intl-displaynames": "^6.0.3", + "@formatjs/intl-locale": "^3.0.3", + "@formatjs/intl-pluralrules": "^5.0.3", "@headlessui/react": "1.6.6", "@heroicons/react": "1.0.6", "@supercharge/request-ip": "1.2.0", @@ -62,12 +65,12 @@ "openpgp": "5.4.0", "plex-api": "5.3.2", "pug": "3.0.2", - "react": "17.0.2", + "react": "18.2.0", "react-ace": "10.1.0", "react-animate-height": "2.1.2", - "react-dom": "17.0.2", + "react-dom": "18.2.0", "react-intersection-observer": "9.4.0", - "react-intl": "5.25.1", + "react-intl": "6.0.5", "react-markdown": "8.0.3", "react-select": "5.4.0", "react-spring": "9.5.2", @@ -111,8 +114,8 @@ "@types/node": "17.0.36", "@types/node-schedule": "2.1.0", "@types/nodemailer": "6.4.5", - "@types/react": "17.0.45", - "@types/react-dom": "17.0.17", + "@types/react": "18.0.17", + "@types/react-dom": "18.0.6", "@types/react-transition-group": "4.4.5", "@types/secure-random-password": "0.2.1", "@types/semver": "7.3.12", @@ -153,7 +156,9 @@ "typescript": "4.7.4" }, "resolutions": { - "sqlite3/node-gyp": "8.4.1" + "sqlite3/node-gyp": "8.4.1", + "@types/react": "18.0.17", + "@types/react-dom": "18.0.6" }, "config": { "commitizen": { diff --git a/src/components/AppDataWarning/index.tsx b/src/components/AppDataWarning/index.tsx index fce97bd5..1af8ea64 100644 --- a/src/components/AppDataWarning/index.tsx +++ b/src/components/AppDataWarning/index.tsx @@ -8,7 +8,7 @@ const messages = defineMessages({ 'The {appDataPath} volume mount was not configured properly. All data will be cleared when the container is stopped or restarted.', }); -const AppDataWarning: React.FC = () => { +const AppDataWarning = () => { const intl = useIntl(); const { data, error } = useSWR<{ appData: boolean; appDataPath: string }>( '/api/v1/status/appdata' @@ -27,9 +27,9 @@ const AppDataWarning: React.FC = () => { {!data.appData && ( {msg}; - }, + code: (msg: React.ReactNode) => ( + {msg} + ), appDataPath: data.appDataPath, })} /> diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx index 839f019a..d2b72bd5 100644 --- a/src/components/CollectionDetails/index.tsx +++ b/src/components/CollectionDetails/index.tsx @@ -31,9 +31,7 @@ interface CollectionDetailsProps { collection?: Collection; } -const CollectionDetails: React.FC = ({ - collection, -}) => { +const CollectionDetails = ({ collection }: CollectionDetailsProps) => { const intl = useIntl(); const router = useRouter(); const settings = useSettings(); diff --git a/src/components/Common/Accordion/index.tsx b/src/components/Common/Accordion/index.tsx index 67e883fe..9b441527 100644 --- a/src/components/Common/Accordion/index.tsx +++ b/src/components/Common/Accordion/index.tsx @@ -16,19 +16,24 @@ export interface AccordionChildProps { AccordionContent: any; } -export const AccordionContent: React.FC<{ isOpen: boolean }> = ({ +type AccordionContentProps = { + isOpen: boolean; + children: React.ReactNode; +}; + +export const AccordionContent = ({ isOpen, children, -}) => { +}: AccordionContentProps) => { return {children}; }; -const Accordion: React.FC = ({ +const Accordion = ({ single, atLeastOne, initialOpenIndexes, children, -}) => { +}: AccordionProps) => { const initialState = initialOpenIndexes || (atLeastOne && [0]) || []; const [openIndexes, setOpenIndexes] = useState(initialState); diff --git a/src/components/Common/Alert/index.tsx b/src/components/Common/Alert/index.tsx index e9789c70..550b0b3a 100644 --- a/src/components/Common/Alert/index.tsx +++ b/src/components/Common/Alert/index.tsx @@ -8,9 +8,10 @@ import React from 'react'; interface AlertProps { title?: React.ReactNode; type?: 'warning' | 'info' | 'error'; + children?: React.ReactNode; } -const Alert: React.FC = ({ title, children, type }) => { +const Alert = ({ title, children, type }: AlertProps) => { let design = { bgColor: 'bg-yellow-600', titleColor: 'text-yellow-100', diff --git a/src/components/Common/Badge/index.tsx b/src/components/Common/Badge/index.tsx index 33e55ab7..eae0b7df 100644 --- a/src/components/Common/Badge/index.tsx +++ b/src/components/Common/Badge/index.tsx @@ -5,14 +5,15 @@ interface BadgeProps { badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success'; className?: string; href?: string; + children: React.ReactNode; } -const Badge: React.FC = ({ +const Badge = ({ badgeType = 'default', className, href, children, -}) => { +}: BadgeProps) => { const badgeStyle = [ 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap', ]; diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx index d4825fb1..28a7a78f 100644 --- a/src/components/Common/ButtonWithDropdown/index.tsx +++ b/src/components/Common/ButtonWithDropdown/index.tsx @@ -13,11 +13,11 @@ interface DropdownItemProps extends AnchorHTMLAttributes { buttonType?: 'primary' | 'ghost'; } -const DropdownItem: React.FC = ({ +const DropdownItem = ({ children, buttonType = 'primary', ...props -}) => { +}: DropdownItemProps) => { let styleClass = 'button-md text-white'; switch (buttonType) { @@ -46,14 +46,14 @@ interface ButtonWithDropdownProps buttonType?: 'primary' | 'ghost'; } -const ButtonWithDropdown: React.FC = ({ +const ButtonWithDropdown = ({ text, children, dropdownIcon, className, buttonType = 'primary', ...props -}) => { +}: ButtonWithDropdownProps) => { const [isOpen, setIsOpen] = useState(false); const buttonRef = useRef(null); useClickOutside(buttonRef, () => setIsOpen(false)); diff --git a/src/components/Common/CachedImage/index.tsx b/src/components/Common/CachedImage/index.tsx index b52b6301..3c453314 100644 --- a/src/components/Common/CachedImage/index.tsx +++ b/src/components/Common/CachedImage/index.tsx @@ -10,7 +10,7 @@ import useSettings from '../../../hooks/useSettings'; * It uses the `next/image` Image component but overrides * the `unoptimized` prop based on the application setting `cacheImages`. **/ -const CachedImage: React.FC = (props) => { +const CachedImage = (props: ImageProps) => { const { currentSettings } = useSettings(); return ; diff --git a/src/components/Common/ConfirmButton/index.tsx b/src/components/Common/ConfirmButton/index.tsx index df3c6572..95dd3925 100644 --- a/src/components/Common/ConfirmButton/index.tsx +++ b/src/components/Common/ConfirmButton/index.tsx @@ -6,14 +6,15 @@ interface ConfirmButtonProps { onClick: () => void; confirmText: React.ReactNode; className?: string; + children: React.ReactNode; } -const ConfirmButton: React.FC = ({ +const ConfirmButton = ({ onClick, children, confirmText, className, -}) => { +}: ConfirmButtonProps) => { const ref = useRef(null); useClickOutside(ref, () => setIsClicked(false)); const [isClicked, setIsClicked] = useState(false); diff --git a/src/components/Common/Header/index.tsx b/src/components/Common/Header/index.tsx index aa81e45e..c949d4e6 100644 --- a/src/components/Common/Header/index.tsx +++ b/src/components/Common/Header/index.tsx @@ -3,13 +3,10 @@ import React from 'react'; interface HeaderProps { extraMargin?: number; subtext?: React.ReactNode; + children: React.ReactNode; } -const Header: React.FC = ({ - children, - extraMargin = 0, - subtext, -}) => { +const Header = ({ children, extraMargin = 0, subtext }: HeaderProps) => { return (
diff --git a/src/components/Common/List/index.tsx b/src/components/Common/List/index.tsx index a4b91723..f98f0aa7 100644 --- a/src/components/Common/List/index.tsx +++ b/src/components/Common/List/index.tsx @@ -4,9 +4,10 @@ import { withProperties } from '../../../utils/typeHelpers'; interface ListItemProps { title: string; className?: string; + children: React.ReactNode; } -const ListItem: React.FC = ({ title, className, children }) => { +const ListItem = ({ title, className, children }: ListItemProps) => { return (
@@ -22,9 +23,10 @@ const ListItem: React.FC = ({ title, className, children }) => { interface ListProps { title: string; subTitle?: string; + children: React.ReactNode; } -const List: React.FC = ({ title, subTitle, children }) => { +const List = ({ title, subTitle, children }: ListProps) => { return ( <>
diff --git a/src/components/Common/ListView/index.tsx b/src/components/Common/ListView/index.tsx index d373a402..fea7ccf9 100644 --- a/src/components/Common/ListView/index.tsx +++ b/src/components/Common/ListView/index.tsx @@ -18,13 +18,13 @@ interface ListViewProps { onScrollBottom: () => void; } -const ListView: React.FC = ({ +const ListView = ({ items, isEmpty, isLoading, onScrollBottom, isReachingEnd, -}) => { +}: ListViewProps) => { const intl = useIntl(); useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd); return ( diff --git a/src/components/Common/LoadingSpinner/index.tsx b/src/components/Common/LoadingSpinner/index.tsx index be65f009..0a380255 100644 --- a/src/components/Common/LoadingSpinner/index.tsx +++ b/src/components/Common/LoadingSpinner/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -export const SmallLoadingSpinner: React.FC = () => { +export const SmallLoadingSpinner = () => { return (
{ ); }; -const LoadingSpinner: React.FC = () => { +const LoadingSpinner = () => { return (
= ({ +const Modal = ({ title, onCancel, onOk, @@ -58,7 +59,7 @@ const Modal: React.FC = ({ tertiaryText, onTertiary, backdrop, -}) => { +}: ModalProps) => { const intl = useIntl(); const modalRef = useRef(null); useClickOutside(modalRef, () => { diff --git a/src/components/Common/PageTitle/index.tsx b/src/components/Common/PageTitle/index.tsx index a7224b22..45a43e84 100644 --- a/src/components/Common/PageTitle/index.tsx +++ b/src/components/Common/PageTitle/index.tsx @@ -6,15 +6,16 @@ interface PageTitleProps { title: string | (string | undefined)[]; } -const PageTitle: React.FC = ({ title }) => { +const PageTitle = ({ title }: PageTitleProps) => { const settings = useSettings(); + const titleText = `${ + Array.isArray(title) ? title.filter(Boolean).join(' - ') : title + } - ${settings.currentSettings.applicationTitle}`; + return ( - - {Array.isArray(title) ? title.filter(Boolean).join(' - ') : title} -{' '} - {settings.currentSettings.applicationTitle} - + {titleText} ); }; diff --git a/src/components/Common/PlayButton/index.tsx b/src/components/Common/PlayButton/index.tsx index eb87e6c0..8a08461c 100644 --- a/src/components/Common/PlayButton/index.tsx +++ b/src/components/Common/PlayButton/index.tsx @@ -12,7 +12,7 @@ export interface PlayButtonLink { svg: ReactNode; } -const PlayButton: React.FC = ({ links }) => { +const PlayButton = ({ links }: PlayButtonProps) => { if (!links || !links.length) { return null; } diff --git a/src/components/Common/ProgressCircle/index.tsx b/src/components/Common/ProgressCircle/index.tsx index 64ca49c1..af8c2f2d 100644 --- a/src/components/Common/ProgressCircle/index.tsx +++ b/src/components/Common/ProgressCircle/index.tsx @@ -6,11 +6,11 @@ interface ProgressCircleProps { useHeatLevel?: boolean; } -const ProgressCircle: React.FC = ({ +const ProgressCircle = ({ className, progress = 0, useHeatLevel, -}) => { +}: ProgressCircleProps) => { const ref = useRef(null); let color = ''; diff --git a/src/components/Common/SensitiveInput/index.tsx b/src/components/Common/SensitiveInput/index.tsx index 886fd721..8545c353 100644 --- a/src/components/Common/SensitiveInput/index.tsx +++ b/src/components/Common/SensitiveInput/index.tsx @@ -12,10 +12,7 @@ interface CustomFieldProps extends React.ComponentProps { type SensitiveInputProps = CustomInputProps | CustomFieldProps; -const SensitiveInput: React.FC = ({ - as = 'input', - ...props -}) => { +const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => { const [isHidden, setHidden] = useState(true); const Component = as === 'input' ? 'input' : Field; const componentProps = diff --git a/src/components/Common/SettingsTabs/index.tsx b/src/components/Common/SettingsTabs/index.tsx index 4d3522d0..8a68ec37 100644 --- a/src/components/Common/SettingsTabs/index.tsx +++ b/src/components/Common/SettingsTabs/index.tsx @@ -15,14 +15,17 @@ export interface SettingsRoute { hidden?: boolean; } -const SettingsLink: React.FC<{ +type SettingsLinkProps = { tabType: 'default' | 'button'; currentPath: string; route: string; regex: RegExp; hidden?: boolean; isMobile?: boolean; -}> = ({ + children: React.ReactNode; +}; + +const SettingsLink = ({ children, tabType, currentPath, @@ -30,7 +33,7 @@ const SettingsLink: React.FC<{ regex, hidden = false, isMobile = false, -}) => { +}: SettingsLinkProps) => { if (hidden) { return null; } @@ -66,10 +69,13 @@ const SettingsLink: React.FC<{ ); }; -const SettingsTabs: React.FC<{ +const SettingsTabs = ({ + tabType = 'default', + settingsRoutes, +}: { tabType?: 'default' | 'button'; settingsRoutes: SettingsRoute[]; -}> = ({ tabType = 'default', settingsRoutes }) => { +}) => { const router = useRouter(); const { user: currentUser } = useUser(); diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx index 6fadb706..40fd1b19 100644 --- a/src/components/Common/SlideOver/index.tsx +++ b/src/components/Common/SlideOver/index.tsx @@ -10,15 +10,16 @@ interface SlideOverProps { title: React.ReactNode; subText?: string; onClose: () => void; + children: React.ReactNode; } -const SlideOver: React.FC = ({ +const SlideOver = ({ show = false, title, subText, onClose, children, -}) => { +}: SlideOverProps) => { const [isMounted, setIsMounted] = useState(false); const slideoverRef = useRef(null); useLockBodyScroll(show); diff --git a/src/components/Common/Table/index.tsx b/src/components/Common/Table/index.tsx index 6ef0ef79..40ff324c 100644 --- a/src/components/Common/Table/index.tsx +++ b/src/components/Common/Table/index.tsx @@ -1,18 +1,21 @@ -import type { AllHTMLAttributes } from 'react'; import React from 'react'; import { withProperties } from '../../../utils/typeHelpers'; -const TBody: React.FC = ({ children }) => { +type TBodyProps = { + children: React.ReactNode; +}; + +const TBody = ({ children }: TBodyProps) => { return ( {children} ); }; -const TH: React.FC> = ({ +const TH = ({ children, className, ...props -}) => { +}: React.ComponentPropsWithoutRef<'th'>) => { const style = [ 'px-4 py-3 bg-gray-500 text-left text-xs leading-4 font-medium text-gray-200 uppercase tracking-wider truncate', ]; @@ -28,18 +31,18 @@ const TH: React.FC> = ({ ); }; -interface TDProps extends AllHTMLAttributes { +type TDProps = { alignText?: 'left' | 'center' | 'right'; noPadding?: boolean; -} +}; -const TD: React.FC = ({ +const TD = ({ children, alignText = 'left', noPadding, className, ...props -}) => { +}: TDProps & React.ComponentPropsWithoutRef<'td'>) => { const style = ['text-sm leading-5 text-white']; switch (alignText) { @@ -69,7 +72,11 @@ const TD: React.FC = ({ ); }; -const Table: React.FC = ({ children }) => { +type TableProps = { + children: React.ReactNode; +}; + +const Table = ({ children }: TableProps) => { return (
diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx index b6383a77..afd65a55 100644 --- a/src/components/CompanyCard/index.tsx +++ b/src/components/CompanyCard/index.tsx @@ -7,7 +7,7 @@ interface CompanyCardProps { url: string; } -const CompanyCard: React.FC = ({ image, url, name }) => { +const CompanyCard = ({ image, url, name }: CompanyCardProps) => { const [isHovered, setHovered] = useState(false); return ( diff --git a/src/components/Discover/DiscoverMovieGenre/index.tsx b/src/components/Discover/DiscoverMovieGenre/index.tsx index e340f4eb..446d0723 100644 --- a/src/components/Discover/DiscoverMovieGenre/index.tsx +++ b/src/components/Discover/DiscoverMovieGenre/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ genreMovies: '{genre} Movies', }); -const DiscoverMovieGenre: React.FC = () => { +const DiscoverMovieGenre = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverMovieLanguage/index.tsx b/src/components/Discover/DiscoverMovieLanguage/index.tsx index b1e19d05..88473d3b 100644 --- a/src/components/Discover/DiscoverMovieLanguage/index.tsx +++ b/src/components/Discover/DiscoverMovieLanguage/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ languageMovies: '{language} Movies', }); -const DiscoverMovieLanguage: React.FC = () => { +const DiscoverMovieLanguage = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverMovies.tsx b/src/components/Discover/DiscoverMovies.tsx index cef4c623..d8ea5e07 100644 --- a/src/components/Discover/DiscoverMovies.tsx +++ b/src/components/Discover/DiscoverMovies.tsx @@ -11,7 +11,7 @@ const messages = defineMessages({ discovermovies: 'Popular Movies', }); -const DiscoverMovies: React.FC = () => { +const DiscoverMovies = () => { const intl = useIntl(); const { diff --git a/src/components/Discover/DiscoverNetwork/index.tsx b/src/components/Discover/DiscoverNetwork/index.tsx index 9c14f18a..e4b1fe3f 100644 --- a/src/components/Discover/DiscoverNetwork/index.tsx +++ b/src/components/Discover/DiscoverNetwork/index.tsx @@ -14,7 +14,7 @@ const messages = defineMessages({ networkSeries: '{network} Series', }); -const DiscoverTvNetwork: React.FC = () => { +const DiscoverTvNetwork = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverStudio/index.tsx b/src/components/Discover/DiscoverStudio/index.tsx index f6cbe9b6..e762476c 100644 --- a/src/components/Discover/DiscoverStudio/index.tsx +++ b/src/components/Discover/DiscoverStudio/index.tsx @@ -14,7 +14,7 @@ const messages = defineMessages({ studioMovies: '{studio} Movies', }); -const DiscoverMovieStudio: React.FC = () => { +const DiscoverMovieStudio = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverTv.tsx b/src/components/Discover/DiscoverTv.tsx index 60c29225..40224f62 100644 --- a/src/components/Discover/DiscoverTv.tsx +++ b/src/components/Discover/DiscoverTv.tsx @@ -11,7 +11,7 @@ const messages = defineMessages({ discovertv: 'Popular Series', }); -const DiscoverTv: React.FC = () => { +const DiscoverTv = () => { const intl = useIntl(); const { diff --git a/src/components/Discover/DiscoverTvGenre/index.tsx b/src/components/Discover/DiscoverTvGenre/index.tsx index d4b672a5..b95583c0 100644 --- a/src/components/Discover/DiscoverTvGenre/index.tsx +++ b/src/components/Discover/DiscoverTvGenre/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ genreSeries: '{genre} Series', }); -const DiscoverTvGenre: React.FC = () => { +const DiscoverTvGenre = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverTvLanguage/index.tsx b/src/components/Discover/DiscoverTvLanguage/index.tsx index ed0873f9..e21504e2 100644 --- a/src/components/Discover/DiscoverTvLanguage/index.tsx +++ b/src/components/Discover/DiscoverTvLanguage/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ languageSeries: '{language} Series', }); -const DiscoverTvLanguage: React.FC = () => { +const DiscoverTvLanguage = () => { const router = useRouter(); const intl = useIntl(); diff --git a/src/components/Discover/DiscoverTvUpcoming.tsx b/src/components/Discover/DiscoverTvUpcoming.tsx index 5b59f26a..bad8966c 100644 --- a/src/components/Discover/DiscoverTvUpcoming.tsx +++ b/src/components/Discover/DiscoverTvUpcoming.tsx @@ -11,7 +11,7 @@ const messages = defineMessages({ upcomingtv: 'Upcoming Series', }); -const DiscoverTvUpcoming: React.FC = () => { +const DiscoverTvUpcoming = () => { const intl = useIntl(); const { diff --git a/src/components/Discover/MovieGenreList/index.tsx b/src/components/Discover/MovieGenreList/index.tsx index cc9e4c49..ad12fbc3 100644 --- a/src/components/Discover/MovieGenreList/index.tsx +++ b/src/components/Discover/MovieGenreList/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ moviegenres: 'Movie Genres', }); -const MovieGenreList: React.FC = () => { +const MovieGenreList = () => { const intl = useIntl(); const { data, error } = useSWR( `/api/v1/discover/genreslider/movie` diff --git a/src/components/Discover/MovieGenreSlider/index.tsx b/src/components/Discover/MovieGenreSlider/index.tsx index 1b1bcbae..d17b2d37 100644 --- a/src/components/Discover/MovieGenreSlider/index.tsx +++ b/src/components/Discover/MovieGenreSlider/index.tsx @@ -12,7 +12,7 @@ const messages = defineMessages({ moviegenres: 'Movie Genres', }); -const MovieGenreSlider: React.FC = () => { +const MovieGenreSlider = () => { const intl = useIntl(); const { data, error } = useSWR( `/api/v1/discover/genreslider/movie`, diff --git a/src/components/Discover/NetworkSlider/index.tsx b/src/components/Discover/NetworkSlider/index.tsx index 61468a6f..c5f4c14c 100644 --- a/src/components/Discover/NetworkSlider/index.tsx +++ b/src/components/Discover/NetworkSlider/index.tsx @@ -142,7 +142,7 @@ const networks: Network[] = [ }, ]; -const NetworkSlider: React.FC = () => { +const NetworkSlider = () => { const intl = useIntl(); return ( diff --git a/src/components/Discover/StudioSlider/index.tsx b/src/components/Discover/StudioSlider/index.tsx index 3e040643..77797a66 100644 --- a/src/components/Discover/StudioSlider/index.tsx +++ b/src/components/Discover/StudioSlider/index.tsx @@ -76,7 +76,7 @@ const studios: Studio[] = [ }, ]; -const StudioSlider: React.FC = () => { +const StudioSlider = () => { const intl = useIntl(); return ( diff --git a/src/components/Discover/Trending.tsx b/src/components/Discover/Trending.tsx index c0f2e222..69c0b505 100644 --- a/src/components/Discover/Trending.tsx +++ b/src/components/Discover/Trending.tsx @@ -15,7 +15,7 @@ const messages = defineMessages({ trending: 'Trending', }); -const Trending: React.FC = () => { +const Trending = () => { const intl = useIntl(); const { isLoadingInitialData, diff --git a/src/components/Discover/TvGenreList/index.tsx b/src/components/Discover/TvGenreList/index.tsx index e0891079..2409c984 100644 --- a/src/components/Discover/TvGenreList/index.tsx +++ b/src/components/Discover/TvGenreList/index.tsx @@ -13,7 +13,7 @@ const messages = defineMessages({ seriesgenres: 'Series Genres', }); -const TvGenreList: React.FC = () => { +const TvGenreList = () => { const intl = useIntl(); const { data, error } = useSWR( `/api/v1/discover/genreslider/tv` diff --git a/src/components/Discover/TvGenreSlider/index.tsx b/src/components/Discover/TvGenreSlider/index.tsx index acff8299..8398e4c3 100644 --- a/src/components/Discover/TvGenreSlider/index.tsx +++ b/src/components/Discover/TvGenreSlider/index.tsx @@ -12,7 +12,7 @@ const messages = defineMessages({ tvgenres: 'Series Genres', }); -const TvGenreSlider: React.FC = () => { +const TvGenreSlider = () => { const intl = useIntl(); const { data, error } = useSWR( `/api/v1/discover/genreslider/tv`, diff --git a/src/components/Discover/Upcoming.tsx b/src/components/Discover/Upcoming.tsx index 1e14f73d..ede326f8 100644 --- a/src/components/Discover/Upcoming.tsx +++ b/src/components/Discover/Upcoming.tsx @@ -11,7 +11,7 @@ const messages = defineMessages({ upcomingmovies: 'Upcoming Movies', }); -const UpcomingMovies: React.FC = () => { +const UpcomingMovies = () => { const intl = useIntl(); const { diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx index 3ebd6226..1091c7ac 100644 --- a/src/components/Discover/index.tsx +++ b/src/components/Discover/index.tsx @@ -27,7 +27,7 @@ const messages = defineMessages({ trending: 'Trending', }); -const Discover: React.FC = () => { +const Discover = () => { const intl = useIntl(); const { data: media, error: mediaError } = useSWR( diff --git a/src/components/DownloadBlock/index.tsx b/src/components/DownloadBlock/index.tsx index c1d5713f..8224d91c 100644 --- a/src/components/DownloadBlock/index.tsx +++ b/src/components/DownloadBlock/index.tsx @@ -12,10 +12,7 @@ interface DownloadBlockProps { is4k?: boolean; } -const DownloadBlock: React.FC = ({ - downloadItem, - is4k = false, -}) => { +const DownloadBlock = ({ downloadItem, is4k = false }: DownloadBlockProps) => { const intl = useIntl(); return ( diff --git a/src/components/ExternalLinkBlock/index.tsx b/src/components/ExternalLinkBlock/index.tsx index 05f8c3bc..04f167e4 100644 --- a/src/components/ExternalLinkBlock/index.tsx +++ b/src/components/ExternalLinkBlock/index.tsx @@ -17,14 +17,14 @@ interface ExternalLinkBlockProps { plexUrl?: string; } -const ExternalLinkBlock: React.FC = ({ +const ExternalLinkBlock = ({ mediaType, tmdbId, tvdbId, imdbId, rtUrl, plexUrl, -}) => { +}: ExternalLinkBlockProps) => { const { locale } = useLocale(); return ( diff --git a/src/components/GenreCard/index.tsx b/src/components/GenreCard/index.tsx index 85d888a3..241df11c 100644 --- a/src/components/GenreCard/index.tsx +++ b/src/components/GenreCard/index.tsx @@ -10,12 +10,7 @@ interface GenreCardProps { canExpand?: boolean; } -const GenreCard: React.FC = ({ - image, - url, - name, - canExpand = false, -}) => { +const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => { const [isHovered, setHovered] = useState(false); return ( @@ -54,7 +49,7 @@ const GenreCard: React.FC = ({ ); }; -const GenreCardPlaceholder: React.FC = () => { +const GenreCardPlaceholder = () => { return (
= ({ issue }) => { +const IssueBlock = ({ issue }: IssueBlockProps) => { const { user } = useUser(); const intl = useIntl(); const issueOption = issueOptions.find( diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx index 11623f53..25e94eed 100644 --- a/src/components/IssueDetails/IssueComment/index.tsx +++ b/src/components/IssueDetails/IssueComment/index.tsx @@ -30,12 +30,12 @@ interface IssueCommentProps { onUpdate?: () => void; } -const IssueComment: React.FC = ({ +const IssueComment = ({ comment, isReversed = false, isActiveUser = false, onUpdate, -}) => { +}: IssueCommentProps) => { const intl = useIntl(); const [showDeleteModal, setShowDeleteModal] = useState(false); const [isEditing, setIsEditing] = useState(false); @@ -195,9 +195,11 @@ const IssueComment: React.FC = ({ name="newMessage" className="h-24" /> - {errors.newMessage && touched.newMessage && ( -
{errors.newMessage}
- )} + {errors.newMessage && + touched.newMessage && + typeof errors.newMessage === 'string' && ( +
{errors.newMessage}
+ )}
diff --git a/src/components/IssueModal/CreateIssueModal/index.tsx b/src/components/IssueModal/CreateIssueModal/index.tsx index 9ca3d797..93cebc9c 100644 --- a/src/components/IssueModal/CreateIssueModal/index.tsx +++ b/src/components/IssueModal/CreateIssueModal/index.tsx @@ -55,11 +55,11 @@ interface CreateIssueModalProps { onCancel?: () => void; } -const CreateIssueModal: React.FC = ({ +const CreateIssueModal = ({ onCancel, mediaType, tmdbId, -}) => { +}: CreateIssueModalProps) => { const intl = useIntl(); const settings = useSettings(); const { hasPermission } = useUser(); @@ -118,9 +118,7 @@ const CreateIssueModal: React.FC = ({
{intl.formatMessage(messages.toastSuccessCreate, { title: isMovie(data) ? data.title : data.name, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })}
@@ -315,9 +313,11 @@ const CreateIssueModal: React.FC = ({ className="h-28" placeholder={intl.formatMessage(messages.providedetail)} /> - {errors.message && touched.message && ( -
{errors.message}
- )} + {errors.message && + touched.message && + typeof errors.message === 'string' && ( +
{errors.message}
+ )}
); diff --git a/src/components/IssueModal/index.tsx b/src/components/IssueModal/index.tsx index f3f226de..9ac059a0 100644 --- a/src/components/IssueModal/index.tsx +++ b/src/components/IssueModal/index.tsx @@ -10,12 +10,7 @@ interface IssueModalProps { issueId?: never; } -const IssueModal: React.FC = ({ - show, - mediaType, - onCancel, - tmdbId, -}) => ( +const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => ( { onUpdate: (value: string) => void; } -const JSONEditor: React.FC = ({ - name, - value, - onUpdate, - onBlur, -}) => { +const JSONEditor = ({ name, value, onUpdate, onBlur }: JSONEditorProps) => { return (
= ({ +const LanguageSelector = ({ value, setFieldValue, serverValue, isUserSettings = false, -}) => { +}: LanguageSelectorProps) => { const intl = useIntl(); const { data: languages } = useSWR('/api/v1/languages'); diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx index 857b7df5..7a07047b 100644 --- a/src/components/Layout/LanguagePicker/index.tsx +++ b/src/components/Layout/LanguagePicker/index.tsx @@ -11,7 +11,7 @@ const messages = defineMessages({ displaylanguage: 'Display Language', }); -const LanguagePicker: React.FC = () => { +const LanguagePicker = () => { const intl = useIntl(); const dropdownRef = useRef(null); const { locale, setLocale } = useLocale(); diff --git a/src/components/Layout/Notifications/index.tsx b/src/components/Layout/Notifications/index.tsx index 9376b424..9a1e827d 100644 --- a/src/components/Layout/Notifications/index.tsx +++ b/src/components/Layout/Notifications/index.tsx @@ -1,7 +1,7 @@ import { BellIcon } from '@heroicons/react/outline'; import React from 'react'; -const Notifications: React.FC = () => { +const Notifications = () => { return (
- {errors.email && touched.email && ( -
{errors.email}
- )} + {errors.email && + touched.email && + typeof errors.email === 'string' && ( +
{errors.email}
+ )}
- {errors.password && touched.password && ( -
{errors.password}
- )} + {errors.password && + touched.password && + typeof errors.password === 'string' && ( +
{errors.password}
+ )}
{loginError && (
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index d50e84e0..a1fec0d2 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -21,7 +21,7 @@ const messages = defineMessages({ signinwithoverseerr: 'Use your {applicationTitle} account', }); -const Login: React.FC = () => { +const Login = () => { const intl = useIntl(); const [error, setError] = useState(''); const [isProcessing, setProcessing] = useState(false); diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx index 6a6e2af2..3698f959 100644 --- a/src/components/ManageSlideOver/index.tsx +++ b/src/components/ManageSlideOver/index.tsx @@ -115,9 +115,9 @@ const ManageSlideOver: React.FC< <> {intl.formatMessage(messages.plays, { playCount, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => ( + {msg} + ), })} ); diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx index f6bc2ccb..3bc074c1 100644 --- a/src/components/MediaSlider/ShowMoreCard/index.tsx +++ b/src/components/MediaSlider/ShowMoreCard/index.tsx @@ -12,7 +12,7 @@ interface ShowMoreCardProps { posters: (string | undefined)[]; } -const ShowMoreCard: React.FC = ({ url, posters }) => { +const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => { const intl = useIntl(); const [isHovered, setHovered] = useState(false); return ( diff --git a/src/components/MediaSlider/index.tsx b/src/components/MediaSlider/index.tsx index 84c72822..fd43f611 100644 --- a/src/components/MediaSlider/index.tsx +++ b/src/components/MediaSlider/index.tsx @@ -29,13 +29,13 @@ interface MediaSliderProps { hideWhenEmpty?: boolean; } -const MediaSlider: React.FC = ({ +const MediaSlider = ({ title, url, linkUrl, sliderKey, hideWhenEmpty = false, -}) => { +}: MediaSliderProps) => { const settings = useSettings(); const { data, error, setSize, size } = useSWRInfinite( (pageIndex: number, previousPageData: MixedResult | null) => { diff --git a/src/components/MovieDetails/MovieCast/index.tsx b/src/components/MovieDetails/MovieCast/index.tsx index 53f3cf96..d26ec4e5 100644 --- a/src/components/MovieDetails/MovieCast/index.tsx +++ b/src/components/MovieDetails/MovieCast/index.tsx @@ -14,7 +14,7 @@ const messages = defineMessages({ fullcast: 'Full Cast', }); -const MovieCast: React.FC = () => { +const MovieCast = () => { const router = useRouter(); const intl = useIntl(); const { data, error } = useSWR( diff --git a/src/components/MovieDetails/MovieCrew/index.tsx b/src/components/MovieDetails/MovieCrew/index.tsx index 98ab0a2a..eb2ccccf 100644 --- a/src/components/MovieDetails/MovieCrew/index.tsx +++ b/src/components/MovieDetails/MovieCrew/index.tsx @@ -14,7 +14,7 @@ const messages = defineMessages({ fullcrew: 'Full Crew', }); -const MovieCrew: React.FC = () => { +const MovieCrew = () => { const router = useRouter(); const intl = useIntl(); const { data, error } = useSWR( diff --git a/src/components/MovieDetails/MovieRecommendations.tsx b/src/components/MovieDetails/MovieRecommendations.tsx index fc9c2bf2..795dd8d7 100644 --- a/src/components/MovieDetails/MovieRecommendations.tsx +++ b/src/components/MovieDetails/MovieRecommendations.tsx @@ -15,7 +15,7 @@ const messages = defineMessages({ recommendations: 'Recommendations', }); -const MovieRecommendations: React.FC = () => { +const MovieRecommendations = () => { const intl = useIntl(); const router = useRouter(); const { data: movieData } = useSWR( diff --git a/src/components/MovieDetails/MovieSimilar.tsx b/src/components/MovieDetails/MovieSimilar.tsx index 8103f966..e9c37ae3 100644 --- a/src/components/MovieDetails/MovieSimilar.tsx +++ b/src/components/MovieDetails/MovieSimilar.tsx @@ -15,7 +15,7 @@ const messages = defineMessages({ similar: 'Similar Titles', }); -const MovieSimilar: React.FC = () => { +const MovieSimilar = () => { const router = useRouter(); const intl = useIntl(); const { data: movieData } = useSWR( diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index fc211807..65f902a0 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -80,7 +80,7 @@ interface MovieDetailsProps { movie?: MovieDetailsType; } -const MovieDetails: React.FC = ({ movie }) => { +const MovieDetails = ({ movie }: MovieDetailsProps) => { const settings = useSettings(); const { user, hasPermission } = useUser(); const router = useRouter(); diff --git a/src/components/NotificationTypeSelector/NotificationType/index.tsx b/src/components/NotificationTypeSelector/NotificationType/index.tsx index 57a41e0f..4c446e1d 100644 --- a/src/components/NotificationTypeSelector/NotificationType/index.tsx +++ b/src/components/NotificationTypeSelector/NotificationType/index.tsx @@ -9,12 +9,12 @@ interface NotificationTypeProps { onUpdate: (newTypes: number) => void; } -const NotificationType: React.FC = ({ +const NotificationType = ({ option, currentTypes, onUpdate, parent, -}) => { +}: NotificationTypeProps) => { return ( <>
= ({ +const NotificationTypeSelector = ({ user, enabledTypes = ALL_NOTIFICATIONS, currentTypes, onUpdate, error, -}) => { +}: NotificationTypeSelectorProps) => { const intl = useIntl(); const settings = useSettings(); const { hasPermission } = useUser({ id: user?.id }); diff --git a/src/components/PWAHeader/index.tsx b/src/components/PWAHeader/index.tsx index 1c53abfb..25588246 100644 --- a/src/components/PWAHeader/index.tsx +++ b/src/components/PWAHeader/index.tsx @@ -4,9 +4,7 @@ interface PWAHeaderProps { applicationTitle?: string; } -const PWAHeader: React.FC = ({ - applicationTitle = 'Overseerr', -}) => { +const PWAHeader = ({ applicationTitle = 'Overseerr' }: PWAHeaderProps) => { return ( <> void; } -export const PermissionEdit: React.FC = ({ +export const PermissionEdit = ({ actingUser, currentUser, currentPermission, onUpdate, -}) => { +}: PermissionEditProps) => { const intl = useIntl(); const permissionList: PermissionItem[] = [ diff --git a/src/components/PermissionOption/index.tsx b/src/components/PermissionOption/index.tsx index 8aebc949..8ddf8575 100644 --- a/src/components/PermissionOption/index.tsx +++ b/src/components/PermissionOption/index.tsx @@ -27,14 +27,14 @@ interface PermissionOptionProps { onUpdate: (newPermissions: number) => void; } -const PermissionOption: React.FC = ({ +const PermissionOption = ({ option, actingUser, currentUser, currentPermission, onUpdate, parent, -}) => { +}: PermissionOptionProps) => { const settings = useSettings(); const autoApprovePermissions = [ diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx index 47fe56ef..3293516e 100644 --- a/src/components/PersonCard/index.tsx +++ b/src/components/PersonCard/index.tsx @@ -11,13 +11,13 @@ interface PersonCardProps { canExpand?: boolean; } -const PersonCard: React.FC = ({ +const PersonCard = ({ personId, name, subName, profilePath, canExpand = false, -}) => { +}: PersonCardProps) => { const [isHovered, setHovered] = useState(false); return ( diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx index 173fc5da..c62fa54f 100644 --- a/src/components/PersonDetails/index.tsx +++ b/src/components/PersonDetails/index.tsx @@ -24,7 +24,7 @@ const messages = defineMessages({ ascharacter: 'as {character}', }); -const PersonDetails: React.FC = () => { +const PersonDetails = () => { const intl = useIntl(); const router = useRouter(); const { data, error } = useSWR( diff --git a/src/components/PlexLoginButton/index.tsx b/src/components/PlexLoginButton/index.tsx index 55093871..e9f06ec6 100644 --- a/src/components/PlexLoginButton/index.tsx +++ b/src/components/PlexLoginButton/index.tsx @@ -17,11 +17,11 @@ interface PlexLoginButtonProps { onError?: (message: string) => void; } -const PlexLoginButton: React.FC = ({ +const PlexLoginButton = ({ onAuthToken, onError, isProcessing, -}) => { +}: PlexLoginButtonProps) => { const intl = useIntl(); const [loading, setLoading] = useState(false); diff --git a/src/components/QuotaSelector/index.tsx b/src/components/QuotaSelector/index.tsx index 9ad39e22..7240dbc2 100644 --- a/src/components/QuotaSelector/index.tsx +++ b/src/components/QuotaSelector/index.tsx @@ -24,7 +24,7 @@ interface QuotaSelectorProps { onChange: (fieldName: string, value: number) => void; } -const QuotaSelector: React.FC = ({ +const QuotaSelector = ({ mediaType, dayFieldName, limitFieldName, @@ -34,7 +34,7 @@ const QuotaSelector: React.FC = ({ limitOverride, isDisabled = false, onChange, -}) => { +}: QuotaSelectorProps) => { const initialDays = defaultDays ?? 7; const initialLimit = defaultLimit ?? 0; const [quotaDays, setQuotaDays] = useState(initialDays); diff --git a/src/components/RegionSelector/index.tsx b/src/components/RegionSelector/index.tsx index 0c4bb2c6..f72c2c1e 100644 --- a/src/components/RegionSelector/index.tsx +++ b/src/components/RegionSelector/index.tsx @@ -21,12 +21,12 @@ interface RegionSelectorProps { onChange?: (fieldName: string, region: string) => void; } -const RegionSelector: React.FC = ({ +const RegionSelector = ({ name, value, isUserSetting = false, onChange, -}) => { +}: RegionSelectorProps) => { const { currentSettings } = useSettings(); const intl = useIntl(); const { data: regions } = useSWR('/api/v1/regions'); diff --git a/src/components/RequestBlock/index.tsx b/src/components/RequestBlock/index.tsx index d1d4ae8a..c20b8f25 100644 --- a/src/components/RequestBlock/index.tsx +++ b/src/components/RequestBlock/index.tsx @@ -34,7 +34,7 @@ interface RequestBlockProps { onUpdate?: () => void; } -const RequestBlock: React.FC = ({ request, onUpdate }) => { +const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => { const { user } = useUser(); const intl = useIntl(); const [isUpdating, setIsUpdating] = useState(false); diff --git a/src/components/RequestButton/index.tsx b/src/components/RequestButton/index.tsx index 6852d174..8117d7be 100644 --- a/src/components/RequestButton/index.tsx +++ b/src/components/RequestButton/index.tsx @@ -54,14 +54,14 @@ interface RequestButtonProps { is4kShowComplete?: boolean; } -const RequestButton: React.FC = ({ +const RequestButton = ({ tmdbId, onUpdate, media, mediaType, isShowComplete = false, is4kShowComplete = false, -}) => { +}: RequestButtonProps) => { const intl = useIntl(); const settings = useSettings(); const { user, hasPermission } = useUser(); diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx index c95bbf3b..53f7b684 100644 --- a/src/components/RequestCard/index.tsx +++ b/src/components/RequestCard/index.tsx @@ -39,7 +39,7 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => { return (movie as MovieDetails).title !== undefined; }; -const RequestCardPlaceholder: React.FC = () => { +const RequestCardPlaceholder = () => { return (
@@ -53,7 +53,7 @@ interface RequestCardErrorProps { mediaId?: number; } -const RequestCardError: React.FC = ({ mediaId }) => { +const RequestCardError = ({ mediaId }: RequestCardErrorProps) => { const { hasPermission } = useUser(); const intl = useIntl(); @@ -93,7 +93,7 @@ interface RequestCardProps { onTitleData?: (requestId: number, title: MovieDetails | TvDetails) => void; } -const RequestCard: React.FC = ({ request, onTitleData }) => { +const RequestCard = ({ request, onTitleData }: RequestCardProps) => { const { ref, inView } = useInView({ triggerOnce: true, }); diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx index 27f66108..f52279f3 100644 --- a/src/components/RequestList/RequestItem/index.tsx +++ b/src/components/RequestList/RequestItem/index.tsx @@ -50,10 +50,10 @@ interface RequestItemErroProps { revalidateList: () => void; } -const RequestItemError: React.FC = ({ +const RequestItemError = ({ mediaId, revalidateList, -}) => { +}: RequestItemErroProps) => { const intl = useIntl(); const { hasPermission } = useUser(); @@ -88,10 +88,7 @@ interface RequestItemProps { revalidateList: () => void; } -const RequestItem: React.FC = ({ - request, - revalidateList, -}) => { +const RequestItem = ({ request, revalidateList }: RequestItemProps) => { const { ref, inView } = useInView({ triggerOnce: true, }); diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx index a21cbfdf..efef868a 100644 --- a/src/components/RequestList/index.tsx +++ b/src/components/RequestList/index.tsx @@ -37,7 +37,7 @@ enum Filter { type Sort = 'added' | 'modified'; -const RequestList: React.FC = () => { +const RequestList = () => { const router = useRouter(); const intl = useIntl(); const { user } = useUser({ @@ -238,9 +238,9 @@ const RequestList: React.FC = () => { ? pageIndex * currentPageSize + data.results.length : (pageIndex + 1) * currentPageSize, total: data.pageInfo.results, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => ( + {msg} + ), })}

diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx index 2130d4db..1b52c312 100644 --- a/src/components/RequestModal/AdvancedRequester/index.tsx +++ b/src/components/RequestModal/AdvancedRequester/index.tsx @@ -56,14 +56,14 @@ interface AdvancedRequesterProps { onChange: (overrides: RequestOverrides) => void; } -const AdvancedRequester: React.FC = ({ +const AdvancedRequester = ({ type, is4k = false, isAnime = false, defaultOverrides, requestUser, onChange, -}) => { +}: AdvancedRequesterProps) => { const intl = useIntl(); const { user, hasPermission } = useUser(); const { data, error } = useSWR( diff --git a/src/components/RequestModal/CollectionRequestModal.tsx b/src/components/RequestModal/CollectionRequestModal.tsx index 5f5e8806..907ee9ca 100644 --- a/src/components/RequestModal/CollectionRequestModal.tsx +++ b/src/components/RequestModal/CollectionRequestModal.tsx @@ -42,13 +42,13 @@ interface RequestModalProps extends React.HTMLAttributes { onUpdating?: (isUpdating: boolean) => void; } -const CollectionRequestModal: React.FC = ({ +const CollectionRequestModal = ({ onCancel, onComplete, tmdbId, onUpdating, is4k = false, -}) => { +}: RequestModalProps) => { const [isUpdating, setIsUpdating] = useState(false); const [requestOverrides, setRequestOverrides] = useState(null); @@ -221,9 +221,7 @@ const CollectionRequestModal: React.FC = ({ {intl.formatMessage(messages.requestSuccess, { title: data?.name, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })} , { appearance: 'success', autoDismiss: true } diff --git a/src/components/RequestModal/MovieRequestModal.tsx b/src/components/RequestModal/MovieRequestModal.tsx index 73f6b733..c7495415 100644 --- a/src/components/RequestModal/MovieRequestModal.tsx +++ b/src/components/RequestModal/MovieRequestModal.tsx @@ -45,14 +45,14 @@ interface RequestModalProps extends React.HTMLAttributes { onUpdating?: (isUpdating: boolean) => void; } -const MovieRequestModal: React.FC = ({ +const MovieRequestModal = ({ onCancel, onComplete, tmdbId, onUpdating, editRequest, is4k = false, -}) => { +}: RequestModalProps) => { const [isUpdating, setIsUpdating] = useState(false); const [requestOverrides, setRequestOverrides] = useState(null); @@ -115,9 +115,7 @@ const MovieRequestModal: React.FC = ({ {intl.formatMessage(messages.requestSuccess, { title: data?.title, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })} , { appearance: 'success', autoDismiss: true } @@ -149,9 +147,7 @@ const MovieRequestModal: React.FC = ({ {intl.formatMessage(messages.requestCancel, { title: data?.title, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })} , { appearance: 'success', autoDismiss: true } @@ -187,9 +183,7 @@ const MovieRequestModal: React.FC = ({ : messages.requestedited, { title: data?.title, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, } )} , diff --git a/src/components/RequestModal/QuotaDisplay/index.tsx b/src/components/RequestModal/QuotaDisplay/index.tsx index 6438b6ed..c578e858 100644 --- a/src/components/RequestModal/QuotaDisplay/index.tsx +++ b/src/components/RequestModal/QuotaDisplay/index.tsx @@ -35,13 +35,13 @@ interface QuotaDisplayProps { overLimit?: number; } -const QuotaDisplay: React.FC = ({ +const QuotaDisplay = ({ quota, mediaType, userOverride, remaining, overLimit, -}) => { +}: QuotaDisplayProps) => { const intl = useIntl(); const [showDetails, setShowDetails] = useState(false); return ( @@ -79,9 +79,7 @@ const QuotaDisplay: React.FC = ({ type: intl.formatMessage( mediaType === 'movie' ? messages.movie : messages.season ), - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })}
@@ -103,9 +101,7 @@ const QuotaDisplay: React.FC = ({ : messages.requiredquota, { seasons: overLimit, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, } )}
@@ -124,9 +120,7 @@ const QuotaDisplay: React.FC = ({ : messages.seasonlimit, { limit: quota?.limit } ), - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, } )}
@@ -134,19 +128,15 @@ const QuotaDisplay: React.FC = ({ {intl.formatMessage( userOverride ? messages.quotaLinkUser : messages.quotaLink, { - ProfileLink: function ProfileLink(msg) { - return ( - - - {msg} - - - ); - }, + ProfileLink: (msg: React.ReactNode) => ( + + + {msg} + + + ), } )}
diff --git a/src/components/RequestModal/SearchByNameModal/index.tsx b/src/components/RequestModal/SearchByNameModal/index.tsx index 44a60aab..cc8007eb 100644 --- a/src/components/RequestModal/SearchByNameModal/index.tsx +++ b/src/components/RequestModal/SearchByNameModal/index.tsx @@ -24,7 +24,7 @@ interface SearchByNameModalProps { tmdbId: number; } -const SearchByNameModal: React.FC = ({ +const SearchByNameModal = ({ setTvdbId, tvdbId, loading, @@ -32,7 +32,7 @@ const SearchByNameModal: React.FC = ({ closeModal, modalTitle, tmdbId, -}) => { +}: SearchByNameModalProps) => { const intl = useIntl(); const { data, error } = useSWR( `/api/v1/service/sonarr/lookup/${tmdbId}` diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx index fb915e63..a081bd04 100644 --- a/src/components/RequestModal/TvRequestModal.tsx +++ b/src/components/RequestModal/TvRequestModal.tsx @@ -64,14 +64,14 @@ interface RequestModalProps extends React.HTMLAttributes { editRequest?: MediaRequest; } -const TvRequestModal: React.FC = ({ +const TvRequestModal = ({ onCancel, onComplete, tmdbId, onUpdating, editRequest, is4k = false, -}) => { +}: RequestModalProps) => { const settings = useSettings(); const { addToast } = useToasts(); const editingSeasons: number[] = (editRequest?.seasons ?? []).map( @@ -141,16 +141,12 @@ const TvRequestModal: React.FC = ({ : messages.requestedited, { title: data?.name, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, } ) : intl.formatMessage(messages.requestcancelled, { title: data?.name, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })} , { @@ -218,9 +214,7 @@ const TvRequestModal: React.FC = ({ {intl.formatMessage(messages.requestSuccess, { title: data?.name, - strong: function strong(msg) { - return {msg}; - }, + strong: (msg: React.ReactNode) => {msg}, })} , { appearance: 'success', autoDismiss: true } diff --git a/src/components/RequestModal/index.tsx b/src/components/RequestModal/index.tsx index e6dbdb8d..4b6741cc 100644 --- a/src/components/RequestModal/index.tsx +++ b/src/components/RequestModal/index.tsx @@ -17,7 +17,7 @@ interface RequestModalProps { onUpdating?: (isUpdating: boolean) => void; } -const RequestModal: React.FC = ({ +const RequestModal = ({ type, show, tmdbId, @@ -26,7 +26,7 @@ const RequestModal: React.FC = ({ onComplete, onUpdating, onCancel, -}) => { +}: RequestModalProps) => { return ( { +const ResetPassword = () => { const intl = useIntl(); const [hasSubmitted, setSubmitted] = useState(false); @@ -113,9 +113,11 @@ const ResetPassword: React.FC = () => { className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
- {errors.email && touched.email && ( -
{errors.email}
- )} + {errors.email && + touched.email && + typeof errors.email === 'string' && ( +
{errors.email}
+ )}
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx index a7077b54..ad2a3e44 100644 --- a/src/components/ResetPassword/index.tsx +++ b/src/components/ResetPassword/index.tsx @@ -25,7 +25,7 @@ const messages = defineMessages({ resetpasswordsuccessmessage: 'Password reset successfully!', }); -const ResetPassword: React.FC = () => { +const ResetPassword = () => { const intl = useIntl(); const router = useRouter(); const [hasSubmitted, setSubmitted] = useState(false); @@ -129,9 +129,11 @@ const ResetPassword: React.FC = () => { className="form-input-area block w-full min-w-0 flex-1 rounded-md border border-gray-500 bg-gray-700 text-white transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
- {errors.password && touched.password && ( -
{errors.password}
- )} + {errors.password && + touched.password && + typeof errors.password === 'string' && ( +
{errors.password}
+ )}