mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-02 04:39:14 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(deps): update react to 18 (#2943)

Browse Source
This commit is contained in:
Ryan Cohen
2022-08-18 17:05:58 +09:00
committed by GitHub
parent 72d7a3477f
commit e5d8c93ab8
164 changed files with 982 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Settings/CopyButton.tsx
View File

@@ -8,7 +8,7 @@ const messages = defineMessages({
copied: 'Copied API key to clipboard.',
});
const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
const CopyButton = ({ textToCopy }: { textToCopy: string }) => {
const intl = useIntl();
const [isCopied, setCopied] = useClipboard(textToCopy, {
successDuration: 1000,

6
src/components/Settings/LibraryItem.tsx
View File

@@ -7,11 +7,7 @@ interface LibraryItemProps {
onToggle: () => void;
}
const LibraryItem: React.FC<LibraryItemProps> = ({
isEnabled,
name,
onToggle,
}) => {
const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
return (
<li className="col-span-1 flex rounded-md shadow-sm">
<div className="flex flex-1 items-center justify-between truncate rounded-md border-t border-b border-r border-gray-700 bg-gray-600">

48
src/components/Settings/Notifications/NotificationsDiscord.tsx
View File

@@ -29,7 +29,7 @@ const messages = defineMessages({
enableMentions: 'Enable Mentions',
});
const NotificationsDiscord: React.FC = () => {
const NotificationsDiscord = () => {
const intl = useIntl();
const settings = useSettings();
const { addToast, removeToast } = useToasts();
@@ -168,18 +168,16 @@ const NotificationsDiscord: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.webhookUrlTip, {
DiscordWebhookLink: function DiscordWebhookLink(msg) {
return (
<a
href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
DiscordWebhookLink: (msg: React.ReactNode) => (
<a
href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -192,9 +190,11 @@ const NotificationsDiscord: React.FC = () => {
inputMode="url"
/>
</div>
{errors.webhookUrl && touched.webhookUrl && (
<div className="error">{errors.webhookUrl}</div>
)}
{errors.webhookUrl &&
touched.webhookUrl &&
typeof errors.webhookUrl === 'string' && (
<div className="error">{errors.webhookUrl}</div>
)}
</div>
</div>
<div className="form-row">
@@ -210,9 +210,11 @@ const NotificationsDiscord: React.FC = () => {
placeholder={settings.currentSettings.applicationTitle}
/>
</div>
{errors.botUsername && touched.botUsername && (
<div className="error">{errors.botUsername}</div>
)}
{errors.botUsername &&
touched.botUsername &&
typeof errors.botUsername === 'string' && (
<div className="error">{errors.botUsername}</div>
)}
</div>
</div>
<div className="form-row">
@@ -228,9 +230,11 @@ const NotificationsDiscord: React.FC = () => {
inputMode="url"
/>
</div>
{errors.botAvatarUrl && touched.botAvatarUrl && (
<div className="error">{errors.botAvatarUrl}</div>
)}
{errors.botAvatarUrl &&
touched.botAvatarUrl &&
typeof errors.botAvatarUrl === 'string' && (
<div className="error">{errors.botAvatarUrl}</div>
)}
</div>
</div>
<div className="form-row">

44
src/components/Settings/Notifications/NotificationsEmail.tsx
View File

@@ -46,7 +46,7 @@ const messages = defineMessages({
validationPgpPassword: 'You must provide a PGP password',
});
export function OpenPgpLink(msg: string): JSX.Element {
export function OpenPgpLink(msg: React.ReactNode) {
return (
<a href="https://www.openpgp.org/" target="_blank" rel="noreferrer">
{msg}
@@ -54,7 +54,7 @@ export function OpenPgpLink(msg: string): JSX.Element {
);
}
const NotificationsEmail: React.FC = () => {
const NotificationsEmail = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -265,9 +265,11 @@ const NotificationsEmail: React.FC = () => {
inputMode="email"
/>
</div>
{errors.emailFrom && touched.emailFrom && (
<div className="error">{errors.emailFrom}</div>
)}
{errors.emailFrom &&
touched.emailFrom &&
typeof errors.emailFrom === 'string' && (
<div className="error">{errors.emailFrom}</div>
)}
</div>
</div>
<div className="form-row">
@@ -284,9 +286,11 @@ const NotificationsEmail: React.FC = () => {
inputMode="url"
/>
</div>
{errors.smtpHost && touched.smtpHost && (
<div className="error">{errors.smtpHost}</div>
)}
{errors.smtpHost &&
touched.smtpHost &&
typeof errors.smtpHost === 'string' && (
<div className="error">{errors.smtpHost}</div>
)}
</div>
</div>
<div className="form-row">
@@ -302,9 +306,11 @@ const NotificationsEmail: React.FC = () => {
inputMode="numeric"
className="short"
/>
{errors.smtpPort && touched.smtpPort && (
<div className="error">{errors.smtpPort}</div>
)}
{errors.smtpPort &&
touched.smtpPort &&
typeof errors.smtpPort === 'string' && (
<div className="error">{errors.smtpPort}</div>
)}
</div>
</div>
<div className="form-row">
@@ -396,9 +402,11 @@ const NotificationsEmail: React.FC = () => {
className="font-mono text-xs"
/>
</div>
{errors.pgpPrivateKey && touched.pgpPrivateKey && (
<div className="error">{errors.pgpPrivateKey}</div>
)}
{errors.pgpPrivateKey &&
touched.pgpPrivateKey &&
typeof errors.pgpPrivateKey === 'string' && (
<div className="error">{errors.pgpPrivateKey}</div>
)}
</div>
</div>
<div className="form-row">
@@ -424,9 +432,11 @@ const NotificationsEmail: React.FC = () => {
autoComplete="one-time-code"
/>
</div>
{errors.pgpPassword && touched.pgpPassword && (
<div className="error">{errors.pgpPassword}</div>
)}
{errors.pgpPassword &&
touched.pgpPassword &&
typeof errors.pgpPassword === 'string' && (
<div className="error">{errors.pgpPassword}</div>
)}
</div>
</div>
<div className="actions">

18
src/components/Settings/Notifications/NotificationsGotify/index.tsx
View File

@@ -26,7 +26,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsGotify: React.FC = () => {
const NotificationsGotify = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -173,9 +173,11 @@ const NotificationsGotify: React.FC = () => {
<div className="form-input-field">
<Field id="url" name="url" type="text" />
</div>
{errors.url && touched.url && (
<div className="error">{errors.url}</div>
)}
{errors.url &&
touched.url &&
typeof errors.url === 'string' && (
<div className="error">{errors.url}</div>
)}
</div>
</div>
<div className="form-row">
@@ -187,9 +189,11 @@ const NotificationsGotify: React.FC = () => {
<div className="form-input-field">
<Field id="token" name="token" type="text" />
</div>
{errors.token && touched.token && (
<div className="error">{errors.token}</div>
)}
{errors.token &&
touched.token &&
typeof errors.token === 'string' && (
<div className="error">{errors.token}</div>
)}
</div>
</div>
<NotificationTypeSelector

38
src/components/Settings/Notifications/NotificationsLunaSea/index.tsx
View File

@@ -27,7 +27,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsLunaSea: React.FC = () => {
const NotificationsLunaSea = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -155,18 +155,16 @@ const NotificationsLunaSea: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.webhookUrlTip, {
LunaSeaLink: function LunaSeaLink(msg) {
return (
<a
href="https://docs.lunasea.app/lunasea/notifications/overseerr"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
LunaSeaLink: (msg: React.ReactNode) => (
<a
href="https://docs.lunasea.app/lunasea/notifications/overseerr"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -179,9 +177,11 @@ const NotificationsLunaSea: React.FC = () => {
inputMode="url"
/>
</div>
{errors.webhookUrl && touched.webhookUrl && (
<div className="error">{errors.webhookUrl}</div>
)}
{errors.webhookUrl &&
touched.webhookUrl &&
typeof errors.webhookUrl === 'string' && (
<div className="error">{errors.webhookUrl}</div>
)}
</div>
</div>
<div className="form-row">
@@ -189,9 +189,9 @@ const NotificationsLunaSea: React.FC = () => {
{intl.formatMessage(messages.profileName)}
<span className="label-tip">
{intl.formatMessage(messages.profileNameTip, {
code: function code(msg) {
return <code className="bg-opacity-50">{msg}</code>;
},
code: (msg: React.ReactNode) => (
<code className="bg-opacity-50">{msg}</code>
),
})}
</span>
</label>

34
src/components/Settings/Notifications/NotificationsPushbullet/index.tsx
View File

@@ -28,7 +28,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsPushbullet: React.FC = () => {
const NotificationsPushbullet = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -154,20 +154,16 @@ const NotificationsPushbullet: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.accessTokenTip, {
PushbulletSettingsLink: function PushbulletSettingsLink(
msg
) {
return (
<a
href="https://www.pushbullet.com/#settings/account"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
PushbulletSettingsLink: (msg: React.ReactNode) => (
<a
href="https://www.pushbullet.com/#settings/account"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -180,9 +176,11 @@ const NotificationsPushbullet: React.FC = () => {
autoComplete="one-time-code"
/>
</div>
{errors.accessToken && touched.accessToken && (
<div className="error">{errors.accessToken}</div>
)}
{errors.accessToken &&
touched.accessToken &&
typeof errors.accessToken === 'string' && (
<div className="error">{errors.accessToken}</div>
)}
</div>
</div>
<div className="form-row">

63
src/components/Settings/Notifications/NotificationsPushover/index.tsx
View File

@@ -29,7 +29,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsPushover: React.FC = () => {
const NotificationsPushover = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -172,19 +172,16 @@ const NotificationsPushover: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.accessTokenTip, {
ApplicationRegistrationLink:
function ApplicationRegistrationLink(msg) {
return (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
ApplicationRegistrationLink: (msg: React.ReactNode) => (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -192,9 +189,11 @@ const NotificationsPushover: React.FC = () => {
<div className="form-input-field">
<Field id="accessToken" name="accessToken" type="text" />
</div>
{errors.accessToken && touched.accessToken && (
<div className="error">{errors.accessToken}</div>
)}
{errors.accessToken &&
touched.accessToken &&
typeof errors.accessToken === 'string' && (
<div className="error">{errors.accessToken}</div>
)}
</div>
</div>
<div className="form-row">
@@ -203,18 +202,16 @@ const NotificationsPushover: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.userTokenTip, {
UsersGroupsLink: function UsersGroupsLink(msg) {
return (
<a
href="https://pushover.net/api#identifiers"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
UsersGroupsLink: (msg: React.ReactNode) => (
<a
href="https://pushover.net/api#identifiers"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -222,9 +219,11 @@ const NotificationsPushover: React.FC = () => {
<div className="form-input-field">
<Field id="userToken" name="userToken" type="text" />
</div>
{errors.userToken && touched.userToken && (
<div className="error">{errors.userToken}</div>
)}
{errors.userToken &&
touched.userToken &&
typeof errors.userToken === 'string' && (
<div className="error">{errors.userToken}</div>
)}
</div>
</div>
<NotificationTypeSelector

32
src/components/Settings/Notifications/NotificationsSlack/index.tsx
View File

@@ -25,7 +25,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsSlack: React.FC = () => {
const NotificationsSlack = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -150,18 +150,16 @@ const NotificationsSlack: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.webhookUrlTip, {
WebhookLink: function WebhookLink(msg) {
return (
<a
href="https://my.slack.com/services/new/incoming-webhook/"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
WebhookLink: (msg: React.ReactNode) => (
<a
href="https://my.slack.com/services/new/incoming-webhook/"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
</label>
@@ -174,9 +172,11 @@ const NotificationsSlack: React.FC = () => {
inputMode="url"
/>
</div>
{errors.webhookUrl && touched.webhookUrl && (
<div className="error">{errors.webhookUrl}</div>
)}
{errors.webhookUrl &&
touched.webhookUrl &&
typeof errors.webhookUrl === 'string' && (
<div className="error">{errors.webhookUrl}</div>
)}
</div>
</div>
<NotificationTypeSelector

100
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -34,7 +34,7 @@ const messages = defineMessages({
sendSilentlyTip: 'Send notifications with no sound',
});
const NotificationsTelegram: React.FC = () => {
const NotificationsTelegram = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -179,33 +179,29 @@ const NotificationsTelegram: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.botApiTip, {
CreateBotLink: function CreateBotLink(msg) {
return (
<a
href="https://core.telegram.org/bots#6-botfather"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
GetIdBotLink: function GetIdBotLink(msg) {
return (
<a
href="https://telegram.me/get_id_bot"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
code: function code(msg) {
return <code className="bg-opacity-50">{msg}</code>;
},
CreateBotLink: (msg: React.ReactNode) => (
<a
href="https://core.telegram.org/bots#6-botfather"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
GetIdBotLink: (msg: React.ReactNode) => (
<a
href="https://telegram.me/get_id_bot"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
code: (msg: React.ReactNode) => (
<code className="bg-opacity-50">{msg}</code>
),
})}
</span>
</label>
@@ -218,9 +214,11 @@ const NotificationsTelegram: React.FC = () => {
autoComplete="one-time-code"
/>
</div>
{errors.botAPI && touched.botAPI && (
<div className="error">{errors.botAPI}</div>
)}
{errors.botAPI &&
touched.botAPI &&
typeof errors.botAPI === 'string' && (
<div className="error">{errors.botAPI}</div>
)}
</div>
</div>
<div className="form-row">
@@ -234,9 +232,11 @@ const NotificationsTelegram: React.FC = () => {
<div className="form-input-field">
<Field id="botUsername" name="botUsername" type="text" />
</div>
{errors.botUsername && touched.botUsername && (
<div className="error">{errors.botUsername}</div>
)}
{errors.botUsername &&
touched.botUsername &&
typeof errors.botUsername === 'string' && (
<div className="error">{errors.botUsername}</div>
)}
</div>
</div>
<div className="form-row">
@@ -245,20 +245,16 @@ const NotificationsTelegram: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.chatIdTip, {
GetIdBotLink: function GetIdBotLink(msg) {
return (
<a
href="https://telegram.me/get_id_bot"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
code: function code(msg) {
return <code>{msg}</code>;
},
GetIdBotLink: (msg: React.ReactNode) => (
<a
href="https://telegram.me/get_id_bot"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
code: (msg: React.ReactNode) => <code>{msg}</code>,
})}
</span>
</label>
@@ -266,9 +262,11 @@ const NotificationsTelegram: React.FC = () => {
<div className="form-input-field">
<Field id="chatId" name="chatId" type="text" />
</div>
{errors.chatId && touched.chatId && (
<div className="error">{errors.chatId}</div>
)}
{errors.chatId &&
touched.chatId &&
typeof errors.chatId === 'string' && (
<div className="error">{errors.chatId}</div>
)}
</div>
</div>
<div className="form-row">

2
src/components/Settings/Notifications/NotificationsWebPush/index.tsx
View File

@@ -21,7 +21,7 @@ const messages = defineMessages({
'In order to receive web push notifications, Overseerr must be served over HTTPS.',
});
const NotificationsWebPush: React.FC = () => {
const NotificationsWebPush = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);

18
src/components/Settings/Notifications/NotificationsWebhook/index.tsx
View File

@@ -70,7 +70,7 @@ const messages = defineMessages({
validationTypes: 'You must select at least one notification type',
});
const NotificationsWebhook: React.FC = () => {
const NotificationsWebhook = () => {
const intl = useIntl();
const { addToast, removeToast } = useToasts();
const [isTesting, setIsTesting] = useState(false);
@@ -244,9 +244,11 @@ const NotificationsWebhook: React.FC = () => {
inputMode="url"
/>
</div>
{errors.webhookUrl && touched.webhookUrl && (
<div className="error">{errors.webhookUrl}</div>
)}
{errors.webhookUrl &&
touched.webhookUrl &&
typeof errors.webhookUrl === 'string' && (
<div className="error">{errors.webhookUrl}</div>
)}
</div>
</div>
<div className="form-row">
@@ -273,9 +275,11 @@ const NotificationsWebhook: React.FC = () => {
onBlur={() => setFieldTouched('jsonPayload')}
/>
</div>
{errors.jsonPayload && touched.jsonPayload && (
<div className="error">{errors.jsonPayload}</div>
)}
{errors.jsonPayload &&
touched.jsonPayload &&
typeof errors.jsonPayload === 'string' && (
<div className="error">{errors.jsonPayload}</div>
)}
<div className="mt-2">
<Button
buttonSize="sm"

70
src/components/Settings/RadarrModal/index.tsx
View File

@@ -91,11 +91,7 @@ interface RadarrModalProps {
onSave: () => void;
}
const RadarrModal: React.FC<RadarrModalProps> = ({
onClose,
radarr,
onSave,
}) => {
const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
const intl = useIntl();
const initialLoad = useRef(false);
const { addToast } = useToasts();
@@ -383,9 +379,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
}}
/>
</div>
{errors.name && touched.name && (
<div className="error">{errors.name}</div>
)}
{errors.name &&
touched.name &&
typeof errors.name === 'string' && (
<div className="error">{errors.name}</div>
)}
</div>
</div>
<div className="form-row">
@@ -410,9 +408,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
className="rounded-r-only"
/>
</div>
{errors.hostname && touched.hostname && (
<div className="error">{errors.hostname}</div>
)}
{errors.hostname &&
touched.hostname &&
typeof errors.hostname === 'string' && (
<div className="error">{errors.hostname}</div>
)}
</div>
</div>
<div className="form-row">
@@ -432,9 +432,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
setFieldValue('port', e.target.value);
}}
/>
{errors.port && touched.port && (
<div className="error">{errors.port}</div>
)}
{errors.port &&
touched.port &&
typeof errors.port === 'string' && (
<div className="error">{errors.port}</div>
)}
</div>
</div>
<div className="form-row">
@@ -471,9 +473,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
}}
/>
</div>
{errors.apiKey && touched.apiKey && (
<div className="error">{errors.apiKey}</div>
)}
{errors.apiKey &&
touched.apiKey &&
typeof errors.apiKey === 'string' && (
<div className="error">{errors.apiKey}</div>
)}
</div>
</div>
<div className="form-row">
@@ -493,9 +497,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
}}
/>
</div>
{errors.baseUrl && touched.baseUrl && (
<div className="error">{errors.baseUrl}</div>
)}
{errors.baseUrl &&
touched.baseUrl &&
typeof errors.baseUrl === 'string' && (
<div className="error">{errors.baseUrl}</div>
)}
</div>
</div>
<div className="form-row">
@@ -531,9 +537,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
))}
</Field>
</div>
{errors.activeProfileId && touched.activeProfileId && (
<div className="error">{errors.activeProfileId}</div>
)}
{errors.activeProfileId &&
touched.activeProfileId &&
typeof errors.activeProfileId === 'string' && (
<div className="error">{errors.activeProfileId}</div>
)}
</div>
</div>
<div className="form-row">
@@ -567,9 +575,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
))}
</Field>
</div>
{errors.rootFolder && touched.rootFolder && (
<div className="error">{errors.rootFolder}</div>
)}
{errors.rootFolder &&
touched.rootFolder &&
typeof errors.rootFolder === 'string' && (
<div className="error">{errors.rootFolder}</div>
)}
</div>
</div>
<div className="form-row">
@@ -673,9 +683,11 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
inputMode="url"
/>
</div>
{errors.externalUrl && touched.externalUrl && (
<div className="error">{errors.externalUrl}</div>
)}
{errors.externalUrl &&
touched.externalUrl &&
typeof errors.externalUrl === 'string' && (
<div className="error">{errors.externalUrl}</div>
)}
</div>
</div>
<div className="form-row">

8
src/components/Settings/SettingsAbout/Releases/index.tsx
View File

@@ -48,11 +48,7 @@ interface ReleaseProps {
currentVersion: string;
}
const Release: React.FC<ReleaseProps> = ({
currentVersion,
release,
isLatest,
}) => {
const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
const intl = useIntl();
const [isModalOpen, setModalOpen] = useState(false);
@@ -120,7 +116,7 @@ interface ReleasesProps {
currentVersion: string;
}
const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
const Releases = ({ currentVersion }: ReleasesProps) => {
const intl = useIntl();
const { data, error } = useSWR<GitHubRelease[]>(REPO_RELEASE_API);

8
src/components/Settings/SettingsAbout/index.tsx
View File

@@ -37,7 +37,7 @@ const messages = defineMessages({
'You are running the <code>develop</code> branch of Overseerr, which is only recommended for those contributing to development or assisting with bleeding-edge testing.',
});
const SettingsAbout: React.FC = () => {
const SettingsAbout = () => {
const intl = useIntl();
const { data, error } = useSWR<SettingsAboutResponse>(
'/api/v1/settings/about'
@@ -88,9 +88,9 @@ const SettingsAbout: React.FC = () => {
{data.version.startsWith('develop-') && (
<Alert
title={intl.formatMessage(messages.runningDevelop, {
code: function code(msg) {
return <code className="bg-opacity-50">{msg}</code>;
},
code: (msg: React.ReactNode) => (
<code className="bg-opacity-50">{msg}</code>
),
})}
/>
)}

2
src/components/Settings/SettingsJobsCache/index.tsx
View File

@@ -70,7 +70,7 @@ interface Job {
running: boolean;
}
const SettingsJobs: React.FC = () => {
const SettingsJobs = () => {
const intl = useIntl();
const { addToast } = useToasts();
const {

6
src/components/Settings/SettingsLayout.tsx
View File

@@ -16,7 +16,11 @@ const messages = defineMessages({
menuAbout: 'About',
});
const SettingsLayout: React.FC = ({ children }) => {
type SettingsLayoutProps = {
children: React.ReactNode;
};
const SettingsLayout = ({ children }: SettingsLayoutProps) => {
const intl = useIntl();
const settingsRoutes: SettingsRoute[] = [

14
src/components/Settings/SettingsLogs/index.tsx
View File

@@ -51,7 +51,7 @@ const messages = defineMessages({
type Filter = 'debug' | 'info' | 'warn' | 'error';
const SettingsLogs: React.FC = () => {
const SettingsLogs = () => {
const router = useRouter();
const intl = useIntl();
const { addToast } = useToasts();
@@ -232,9 +232,9 @@ const SettingsLogs: React.FC = () => {
<h3 className="heading">{intl.formatMessage(messages.logs)}</h3>
<p className="description">
{intl.formatMessage(messages.logsDescription, {
code: function code(msg) {
return <code className="bg-opacity-50">{msg}</code>;
},
code: (msg: React.ReactNode) => (
<code className="bg-opacity-50">{msg}</code>
),
appDataPath: appData ? appData.appDataPath : '/app/config',
})}
</p>
@@ -388,9 +388,9 @@ const SettingsLogs: React.FC = () => {
data.results.length
: (pageIndex + 1) * currentPageSize,
total: data.pageInfo.results,
strong: function strong(msg) {
return <span className="font-medium">{msg}</span>;
},
strong: (msg: React.ReactNode) => (
<span className="font-medium">{msg}</span>
),
})}
</p>
</div>

18
src/components/Settings/SettingsMain.tsx
View File

@@ -57,7 +57,7 @@ const messages = defineMessages({
locale: 'Display Language',
});
const SettingsMain: React.FC = () => {
const SettingsMain = () => {
const { addToast } = useToasts();
const { user: currentUser, hasPermission: userHasPermission } = useUser();
const intl = useIntl();
@@ -227,9 +227,11 @@ const SettingsMain: React.FC = () => {
type="text"
/>
</div>
{errors.applicationTitle && touched.applicationTitle && (
<div className="error">{errors.applicationTitle}</div>
)}
{errors.applicationTitle &&
touched.applicationTitle &&
typeof errors.applicationTitle === 'string' && (
<div className="error">{errors.applicationTitle}</div>
)}
</div>
</div>
<div className="form-row">
@@ -245,9 +247,11 @@ const SettingsMain: React.FC = () => {
inputMode="url"
/>
</div>
{errors.applicationUrl && touched.applicationUrl && (
<div className="error">{errors.applicationUrl}</div>
)}
{errors.applicationUrl &&
touched.applicationUrl &&
typeof errors.applicationUrl === 'string' && (
<div className="error">{errors.applicationUrl}</div>
)}
</div>
</div>
<div className="form-row">

6
src/components/Settings/SettingsNotifications.tsx
View File

@@ -23,7 +23,11 @@ const messages = defineMessages({
webpush: 'Web Push',
});
const SettingsNotifications: React.FC = ({ children }) => {
type SettingsNotificationsProps = {
children: React.ReactNode;
};
const SettingsNotifications = ({ children }: SettingsNotificationsProps) => {
const intl = useIntl();
const settingsRoutes: SettingsRoute[] = [

100
src/components/Settings/SettingsPlex.tsx
View File

@@ -107,7 +107,7 @@ interface SettingsPlexProps {
onComplete?: () => void;
}
const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
const SettingsPlex = ({ onComplete }: SettingsPlexProps) => {
const [isSyncing, setIsSyncing] = useState(false);
const [isRefreshingPresets, setIsRefreshingPresets] = useState(false);
const [availableServers, setAvailableServers] = useState<PlexDevice[] | null>(
@@ -344,18 +344,16 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<div className="section">
<Alert
title={intl.formatMessage(messages.settingUpPlexDescription, {
RegisterPlexTVLink: function RegisterPlexTVLink(msg) {
return (
<a
href="https://plex.tv"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
RegisterPlexTVLink: (msg: React.ReactNode) => (
<a
href="https://plex.tv"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
type="info"
/>
@@ -517,9 +515,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
className="rounded-r-only"
/>
</div>
{errors.hostname && touched.hostname && (
<div className="error">{errors.hostname}</div>
)}
{errors.hostname &&
touched.hostname &&
typeof errors.hostname === 'string' && (
<div className="error">{errors.hostname}</div>
)}
</div>
</div>
<div className="form-row">
@@ -535,9 +535,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
name="port"
className="short"
/>
{errors.port && touched.port && (
<div className="error">{errors.port}</div>
)}
{errors.port &&
touched.port &&
typeof errors.port === 'string' && (
<div className="error">{errors.port}</div>
)}
</div>
</div>
<div className="form-row">
@@ -558,17 +560,15 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
<div className="form-row">
<label htmlFor="webAppUrl" className="text-label">
{intl.formatMessage(messages.webAppUrl, {
WebAppLink: function WebAppLink(msg) {
return (
<a
href="https://support.plex.tv/articles/200288666-opening-plex-web-app/"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
WebAppLink: (msg: React.ReactNode) => (
<a
href="https://support.plex.tv/articles/200288666-opening-plex-web-app/"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
<Badge badgeType="danger" className="ml-2">
{intl.formatMessage(globalMessages.advanced)}
@@ -587,9 +587,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
placeholder="https://app.plex.tv/desktop"
/>
</div>
{errors.webAppUrl && touched.webAppUrl && (
<div className="error">{errors.webAppUrl}</div>
)}
{errors.webAppUrl &&
touched.webAppUrl &&
typeof errors.webAppUrl === 'string' && (
<div className="error">{errors.webAppUrl}</div>
)}
</div>
</div>
<div className="actions">
@@ -803,9 +805,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
className="rounded-r-only"
/>
</div>
{errors.tautulliHostname && touched.tautulliHostname && (
<div className="error">{errors.tautulliHostname}</div>
)}
{errors.tautulliHostname &&
touched.tautulliHostname &&
typeof errors.tautulliHostname === 'string' && (
<div className="error">{errors.tautulliHostname}</div>
)}
</div>
</div>
<div className="form-row">
@@ -821,9 +825,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
name="tautulliPort"
className="short"
/>
{errors.tautulliPort && touched.tautulliPort && (
<div className="error">{errors.tautulliPort}</div>
)}
{errors.tautulliPort &&
touched.tautulliPort &&
typeof errors.tautulliPort === 'string' && (
<div className="error">{errors.tautulliPort}</div>
)}
</div>
</div>
<div className="form-row">
@@ -857,9 +863,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
name="tautulliUrlBase"
/>
</div>
{errors.tautulliUrlBase && touched.tautulliUrlBase && (
<div className="error">{errors.tautulliUrlBase}</div>
)}
{errors.tautulliUrlBase &&
touched.tautulliUrlBase &&
typeof errors.tautulliUrlBase === 'string' && (
<div className="error">{errors.tautulliUrlBase}</div>
)}
</div>
</div>
<div className="form-row">
@@ -876,9 +884,11 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
autoComplete="one-time-code"
/>
</div>
{errors.tautulliApiKey && touched.tautulliApiKey && (
<div className="error">{errors.tautulliApiKey}</div>
)}
{errors.tautulliApiKey &&
touched.tautulliApiKey &&
typeof errors.tautulliApiKey === 'string' && (
<div className="error">{errors.tautulliApiKey}</div>
)}
</div>
</div>
<div className="form-row">

30
src/components/Settings/SettingsServices.tsx
View File

@@ -60,7 +60,7 @@ interface ServerInstanceProps {
onDelete: () => void;
}
const ServerInstance: React.FC<ServerInstanceProps> = ({
const ServerInstance = ({
name,
hostname,
port,
@@ -72,7 +72,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
externalUrl,
onEdit,
onDelete,
}) => {
}: ServerInstanceProps) => {
const intl = useIntl();
const internalUrl =
@@ -161,7 +161,7 @@ const ServerInstance: React.FC<ServerInstanceProps> = ({
);
};
const SettingsServices: React.FC = () => {
const SettingsServices = () => {
const intl = useIntl();
const {
data: radarrData,
@@ -294,13 +294,11 @@ const SettingsServices: React.FC = () => {
<Alert
title={intl.formatMessage(messages.noDefaultNon4kServer, {
serverType: 'Radarr',
strong: function strong(msg) {
return (
<strong className="font-semibold text-white">
{msg}
</strong>
);
},
strong: (msg: React.ReactNode) => (
<strong className="font-semibold text-white">
{msg}
</strong>
),
})}
/>
) : (
@@ -384,13 +382,11 @@ const SettingsServices: React.FC = () => {
<Alert
title={intl.formatMessage(messages.noDefaultNon4kServer, {
serverType: 'Sonarr',
strong: function strong(msg) {
return (
<strong className="font-semibold text-white">
{msg}
</strong>
);
},
strong: (msg: React.ReactNode) => (
<strong className="font-semibold text-white">
{msg}
</strong>
),
})}
/>
) : (

2
src/components/Settings/SettingsUsers/index.tsx
View File

@@ -30,7 +30,7 @@ const messages = defineMessages({
defaultPermissionsTip: 'Initial permissions assigned to new users',
});
const SettingsUsers: React.FC = () => {
const SettingsUsers = () => {
const { addToast } = useToasts();
const intl = useIntl();
const {

70
src/components/Settings/SonarrModal/index.tsx
View File

@@ -99,11 +99,7 @@ interface SonarrModalProps {
onSave: () => void;
}
const SonarrModal: React.FC<SonarrModalProps> = ({
onClose,
sonarr,
onSave,
}) => {
const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
const intl = useIntl();
const initialLoad = useRef(false);
const { addToast } = useToasts();
@@ -412,9 +408,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
}}
/>
</div>
{errors.name && touched.name && (
<div className="error">{errors.name}</div>
)}
{errors.name &&
touched.name &&
typeof errors.name === 'string' && (
<div className="error">{errors.name}</div>
)}
</div>
</div>
<div className="form-row">
@@ -439,9 +437,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
className="rounded-r-only"
/>
</div>
{errors.hostname && touched.hostname && (
<div className="error">{errors.hostname}</div>
)}
{errors.hostname &&
touched.hostname &&
typeof errors.hostname === 'string' && (
<div className="error">{errors.hostname}</div>
)}
</div>
</div>
<div className="form-row">
@@ -461,9 +461,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
setFieldValue('port', e.target.value);
}}
/>
{errors.port && touched.port && (
<div className="error">{errors.port}</div>
)}
{errors.port &&
touched.port &&
typeof errors.port === 'string' && (
<div className="error">{errors.port}</div>
)}
</div>
</div>
<div className="form-row">
@@ -500,9 +502,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
}}
/>
</div>
{errors.apiKey && touched.apiKey && (
<div className="error">{errors.apiKey}</div>
)}
{errors.apiKey &&
touched.apiKey &&
typeof errors.apiKey === 'string' && (
<div className="error">{errors.apiKey}</div>
)}
</div>
</div>
<div className="form-row">
@@ -522,9 +526,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
}}
/>
</div>
{errors.baseUrl && touched.baseUrl && (
<div className="error">{errors.baseUrl}</div>
)}
{errors.baseUrl &&
touched.baseUrl &&
typeof errors.baseUrl === 'string' && (
<div className="error">{errors.baseUrl}</div>
)}
</div>
</div>
<div className="form-row">
@@ -560,9 +566,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
))}
</Field>
</div>
{errors.activeProfileId && touched.activeProfileId && (
<div className="error">{errors.activeProfileId}</div>
)}
{errors.activeProfileId &&
touched.activeProfileId &&
typeof errors.activeProfileId === 'string' && (
<div className="error">{errors.activeProfileId}</div>
)}
</div>
</div>
<div className="form-row">
@@ -596,9 +604,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
))}
</Field>
</div>
{errors.rootFolder && touched.rootFolder && (
<div className="error">{errors.rootFolder}</div>
)}
{errors.rootFolder &&
touched.rootFolder &&
typeof errors.rootFolder === 'string' && (
<div className="error">{errors.rootFolder}</div>
)}
</div>
</div>
<div className="form-row">
@@ -920,9 +930,11 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
inputMode="url"
/>
</div>
{errors.externalUrl && touched.externalUrl && (
<div className="error">{errors.externalUrl}</div>
)}
{errors.externalUrl &&
touched.externalUrl &&
typeof errors.externalUrl === 'string' && (
<div className="error">{errors.externalUrl}</div>
)}
</div>
</div>
<div className="form-row">