import axios from 'axios'; import { Field, Form, Formik } from 'formik'; import { useRouter } from 'next/router'; import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import { Language } from '../../../../../server/lib/settings'; import useSettings from '../../../../hooks/useSettings'; import { UserType, useUser, Permission } from '../../../../hooks/useUser'; import Error from '../../../../pages/_error'; import Badge from '../../../Common/Badge'; import Button from '../../../Common/Button'; import LoadingSpinner from '../../../Common/LoadingSpinner'; import RegionSelector from '../../../RegionSelector'; const messages = defineMessages({ generalsettings: 'General Settings', displayName: 'Display Name', save: 'Save Changes', saving: 'Saving…', accounttype: 'Account Type', plexuser: 'Plex User', localuser: 'Local User', role: 'Role', owner: 'Owner', admin: 'Admin', user: 'User', toastSettingsSuccess: 'Settings successfully saved!', toastSettingsFailure: 'Something went wrong while saving settings.', region: 'Discover Region', regionTip: 'Filter content by region (only applies to the "Popular" and "Upcoming" categories)', originallanguage: 'Discover Language', originallanguageTip: 'Filter content by original language (only applies to the "Popular" and "Upcoming" categories)', originalLanguageDefault: 'All Languages', languageServerDefault: 'Default ({language})', }); const UserGeneralSettings: React.FC = () => { const intl = useIntl(); const { addToast } = useToasts(); const router = useRouter(); const { user, hasPermission, mutate } = useUser({ id: Number(router.query.userId), }); const { currentSettings } = useSettings(); const { data, error, revalidate } = useSWR<{ username?: string; region?: string; originalLanguage?: string; }>(user ? `/api/v1/user/${user?.id}/settings/main` : null); const { data: languages, error: languagesError } = useSWR( '/api/v1/languages' ); if (!data && !error) { return ; } if (!languages && !languagesError) { return ; } if (!data || !languages) { return ; } const defaultLanguageNameFallback = languages.find( (language) => language.iso_639_1 === currentSettings.originalLanguage )?.english_name ?? currentSettings.originalLanguage; return ( <>

{intl.formatMessage(messages.generalsettings)}

{ try { await axios.post(`/api/v1/user/${user?.id}/settings/main`, { username: values.displayName, region: values.region, originalLanguage: values.originalLanguage, }); addToast(intl.formatMessage(messages.toastSettingsSuccess), { autoDismiss: true, appearance: 'success', }); } catch (e) { addToast(intl.formatMessage(messages.toastSettingsFailure), { autoDismiss: true, appearance: 'error', }); } finally { revalidate(); mutate(); } }} > {({ errors, touched, isSubmitting, values, setFieldValue }) => { return (
{intl.formatMessage(messages.accounttype)}
{user?.userType === UserType.PLEX ? ( {intl.formatMessage(messages.plexuser)} ) : ( {intl.formatMessage(messages.localuser)} )}
{intl.formatMessage(messages.role)}
{user?.id === 1 ? intl.formatMessage(messages.owner) : hasPermission(Permission.ADMIN) ? intl.formatMessage(messages.admin) : intl.formatMessage(messages.user)}
{errors.displayName && touched.displayName && (
{errors.displayName}
)}
{languages?.map((language) => ( ))}
); }}
); }; export default UserGeneralSettings;