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

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

View File

@@ -18,10 +18,7 @@ interface ProfileHeaderProps {
isSettingsPage?: boolean;
}
const ProfileHeader: React.FC<ProfileHeaderProps> = ({
user,
isSettingsPage,
}) => {
const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
const intl = useIntl();
const { user: loggedInUser, hasPermission } = useUser();

View File

@@ -51,7 +51,7 @@ const messages = defineMessages({
validationDiscordId: 'You must provide a valid Discord user ID',
});
const UserGeneralSettings: React.FC = () => {
const UserGeneralSettings = () => {
const intl = useIntl();
const { addToast } = useToasts();
const { locale, setLocale } = useLocale();
@@ -221,9 +221,11 @@ const UserGeneralSettings: React.FC = () => {
}
/>
</div>
{errors.displayName && touched.displayName && (
<div className="error">{errors.displayName}</div>
)}
{errors.displayName &&
touched.displayName &&
typeof errors.displayName === 'string' && (
<div className="error">{errors.displayName}</div>
)}
</div>
</div>
<div className="form-row">
@@ -232,17 +234,15 @@ const UserGeneralSettings: React.FC = () => {
{currentUser?.id === user?.id && (
<span className="label-tip">
{intl.formatMessage(messages.discordIdTip, {
FindDiscordIdLink: function FindDiscordIdLink(msg) {
return (
<a
href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
FindDiscordIdLink: (msg: React.ReactNode) => (
<a
href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
)}
@@ -251,9 +251,11 @@ const UserGeneralSettings: React.FC = () => {
<div className="form-input-field">
<Field id="discordId" name="discordId" type="text" />
</div>
{errors.discordId && touched.discordId && (
<div className="error">{errors.discordId}</div>
)}
{errors.discordId &&
touched.discordId &&
typeof errors.discordId === 'string' && (
<div className="error">{errors.discordId}</div>
)}
</div>
</div>
<div className="form-row">

View File

@@ -23,7 +23,7 @@ const messages = defineMessages({
validationDiscordId: 'You must provide a valid user ID',
});
const UserNotificationsDiscord: React.FC = () => {
const UserNotificationsDiscord = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();
@@ -111,17 +111,15 @@ const UserNotificationsDiscord: React.FC = () => {
{currentUser?.id === user?.id && (
<span className="label-tip">
{intl.formatMessage(messages.discordIdTip, {
FindDiscordIdLink: function FindDiscordIdLink(msg) {
return (
<a
href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
FindDiscordIdLink: (msg: React.ReactNode) => (
<a
href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
})}
</span>
)}
@@ -130,9 +128,11 @@ const UserNotificationsDiscord: React.FC = () => {
<div className="form-input-field">
<Field id="discordId" name="discordId" type="text" />
</div>
{errors.discordId && touched.discordId && (
<div className="error">{errors.discordId}</div>
)}
{errors.discordId &&
touched.discordId &&
typeof errors.discordId === 'string' && (
<div className="error">{errors.discordId}</div>
)}
</div>
</div>
<NotificationTypeSelector

View File

@@ -28,7 +28,7 @@ const messages = defineMessages({
validationPgpPublicKey: 'You must provide a valid PGP public key',
});
const UserEmailSettings: React.FC = () => {
const UserEmailSettings = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();
@@ -126,9 +126,11 @@ const UserEmailSettings: React.FC = () => {
className="font-mono text-xs"
/>
</div>
{errors.pgpKey && touched.pgpKey && (
<div className="error">{errors.pgpKey}</div>
)}
{errors.pgpKey &&
touched.pgpKey &&
typeof errors.pgpKey === 'string' && (
<div className="error">{errors.pgpKey}</div>
)}
</div>
</div>
<NotificationTypeSelector

View File

@@ -24,7 +24,7 @@ const messages = defineMessages({
validationPushbulletAccessToken: 'You must provide an access token',
});
const UserPushbulletSettings: React.FC = () => {
const UserPushbulletSettings = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();
@@ -105,20 +105,16 @@ const UserPushbulletSettings: React.FC = () => {
{data?.pushbulletAccessToken && (
<span className="label-tip">
{intl.formatMessage(messages.pushbulletAccessTokenTip, {
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>
)}

View File

@@ -28,7 +28,7 @@ const messages = defineMessages({
validationPushoverUserKey: 'You must provide a valid user or group key',
});
const UserPushoverSettings: React.FC = () => {
const UserPushoverSettings = () => {
const intl = useIntl();
const settings = useSettings();
const { addToast } = useToasts();
@@ -129,19 +129,16 @@ const UserPushoverSettings: React.FC = () => {
<span className="label-required">*</span>
<span className="label-tip">
{intl.formatMessage(messages.pushoverApplicationTokenTip, {
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>
),
applicationTitle: settings.currentSettings.applicationTitle,
})}
</span>
@@ -167,18 +164,16 @@ const UserPushoverSettings: React.FC = () => {
{intl.formatMessage(messages.pushoverUserKey)}
<span className="label-tip">
{intl.formatMessage(messages.pushoverUserKeyTip, {
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>
@@ -190,9 +185,11 @@ const UserPushoverSettings: React.FC = () => {
type="text"
/>
</div>
{errors.pushoverUserKey && touched.pushoverUserKey && (
<div className="error">{errors.pushoverUserKey}</div>
)}
{errors.pushoverUserKey &&
touched.pushoverUserKey &&
typeof errors.pushoverUserKey === 'string' && (
<div className="error">{errors.pushoverUserKey}</div>
)}
</div>
</div>
<NotificationTypeSelector

View File

@@ -25,7 +25,7 @@ const messages = defineMessages({
validationTelegramChatId: 'You must provide a valid chat ID',
});
const UserTelegramSettings: React.FC = () => {
const UserTelegramSettings = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();
@@ -112,31 +112,25 @@ const UserTelegramSettings: React.FC = () => {
{data?.telegramBotUsername && (
<span className="label-tip">
{intl.formatMessage(messages.telegramChatIdTipLong, {
TelegramBotLink: function TelegramBotLink(msg) {
return (
<a
href={`https://telegram.me/${data.telegramBotUsername}`}
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
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>;
},
TelegramBotLink: (msg: React.ReactNode) => (
<a
href={`https://telegram.me/${data.telegramBotUsername}`}
target="_blank"
rel="noreferrer"
>
{msg}
</a>
),
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>
)}
@@ -149,9 +143,11 @@ const UserTelegramSettings: React.FC = () => {
type="text"
/>
</div>
{errors.telegramChatId && touched.telegramChatId && (
<div className="error">{errors.telegramChatId}</div>
)}
{errors.telegramChatId &&
touched.telegramChatId &&
typeof errors.telegramChatId === 'string' && (
<div className="error">{errors.telegramChatId}</div>
)}
</div>
</div>
<div className="form-row">

View File

@@ -20,7 +20,7 @@ const messages = defineMessages({
webpushsettingsfailed: 'Web push notification settings failed to save.',
});
const UserWebPushSettings: React.FC = () => {
const UserWebPushSettings = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();

View File

@@ -23,7 +23,13 @@ const messages = defineMessages({
webpush: 'Web Push',
});
const UserNotificationSettings: React.FC = ({ children }) => {
type UserNotificationSettingsProps = {
children: React.ReactNode;
};
const UserNotificationSettings = ({
children,
}: UserNotificationSettingsProps) => {
const intl = useIntl();
const router = useRouter();
const { user } = useUser({ id: Number(router.query.userId) });

View File

@@ -39,7 +39,7 @@ const messages = defineMessages({
"You do not have permission to modify this user's password.",
});
const UserPasswordChange: React.FC = () => {
const UserPasswordChange = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();
@@ -176,9 +176,11 @@ const UserPasswordChange: React.FC = () => {
autoComplete="current-password"
/>
</div>
{errors.currentPassword && touched.currentPassword && (
<div className="error">{errors.currentPassword}</div>
)}
{errors.currentPassword &&
touched.currentPassword &&
typeof errors.currentPassword === 'string' && (
<div className="error">{errors.currentPassword}</div>
)}
</div>
</div>
)}
@@ -196,9 +198,11 @@ const UserPasswordChange: React.FC = () => {
autoComplete="new-password"
/>
</div>
{errors.newPassword && touched.newPassword && (
<div className="error">{errors.newPassword}</div>
)}
{errors.newPassword &&
touched.newPassword &&
typeof errors.newPassword === 'string' && (
<div className="error">{errors.newPassword}</div>
)}
</div>
</div>
<div className="form-row">
@@ -215,9 +219,11 @@ const UserPasswordChange: React.FC = () => {
autoComplete="new-password"
/>
</div>
{errors.confirmPassword && touched.confirmPassword && (
<div className="error">{errors.confirmPassword}</div>
)}
{errors.confirmPassword &&
touched.confirmPassword &&
typeof errors.confirmPassword === 'string' && (
<div className="error">{errors.confirmPassword}</div>
)}
</div>
</div>
<div className="actions">

View File

@@ -22,7 +22,7 @@ const messages = defineMessages({
unauthorizedDescription: 'You cannot modify your own permissions.',
});
const UserPermissions: React.FC = () => {
const UserPermissions = () => {
const intl = useIntl();
const { addToast } = useToasts();
const router = useRouter();

View File

@@ -24,7 +24,11 @@ const messages = defineMessages({
"You do not have permission to modify this user's settings.",
});
const UserSettings: React.FC = ({ children }) => {
type UserSettingsProps = {
children: React.ReactNode;
};
const UserSettings = ({ children }: UserSettingsProps) => {
const router = useRouter();
const settings = useSettings();
const { user: currentUser } = useUser();

View File

@@ -37,7 +37,7 @@ const messages = defineMessages({
type MediaTitle = MovieDetails | TvDetails;
const UserProfile: React.FC = () => {
const UserProfile = () => {
const intl = useIntl();
const router = useRouter();
const { user, error } = useUser({