import axios from 'axios'; import { Field, Form, Formik } from 'formik'; import { useRouter } from 'next/router'; import React, { useEffect, useMemo, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { useToasts } from 'react-toast-notifications'; import useSWR from 'swr'; import { UserSettingsGeneralResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces'; import { Language } from '../../../../../server/lib/settings'; import { availableLanguages } from '../../../../context/LanguageContext'; import useLocale from '../../../../hooks/useLocale'; import useSettings from '../../../../hooks/useSettings'; import { Permission, UserType, useUser } from '../../../../hooks/useUser'; import globalMessages from '../../../../i18n/globalMessages'; import Error from '../../../../pages/_error'; import Badge from '../../../Common/Badge'; import Button from '../../../Common/Button'; import LoadingSpinner from '../../../Common/LoadingSpinner'; import PageTitle from '../../../Common/PageTitle'; import LanguageSelector from '../../../LanguageSelector'; import QuotaSelector from '../../../QuotaSelector'; import RegionSelector from '../../../RegionSelector'; const messages = defineMessages({ general: 'General', generalsettings: 'General Settings', displayName: 'Display Name', accounttype: 'Account Type', plexuser: 'Plex User', localuser: 'Local User', role: 'Role', owner: 'Owner', admin: 'Admin', user: 'User', toastSettingsSuccess: 'Settings saved successfully!', toastSettingsFailure: 'Something went wrong while saving settings.', region: 'Discover Region', regionTip: 'Filter content by regional availability', originallanguage: 'Discover Language', originallanguageTip: 'Filter content by original language', movierequestlimit: 'Movie Request Limit', seriesrequestlimit: 'Series Request Limit', enableOverride: 'Enable Override', applanguage: 'Display Language', }); const UserGeneralSettings: React.FC = () => { const intl = useIntl(); const { addToast } = useToasts(); const { locale, setLocale } = useLocale(); const [movieQuotaEnabled, setMovieQuotaEnabled] = useState(false); const [tvQuotaEnabled, setTvQuotaEnabled] = useState(false); const router = useRouter(); const { user, hasPermission, mutate } = useUser({ id: Number(router.query.userId), }); const { hasPermission: currentHasPermission } = useUser(); const { currentSettings } = useSettings(); const { data, error, revalidate } = useSWR( user ? `/api/v1/user/${user?.id}/settings/main` : null ); useEffect(() => { setMovieQuotaEnabled( data?.movieQuotaLimit != undefined && data?.movieQuotaDays != undefined ); setTvQuotaEnabled( data?.tvQuotaLimit != undefined && data?.tvQuotaDays != undefined ); }, [data]); const { data: languages, error: languagesError } = useSWR( '/api/v1/languages' ); const sortedLanguages = useMemo( () => languages?.sort((lang1, lang2) => { const lang1Name = intl.formatDisplayName(lang1.iso_639_1, { type: 'language', fallback: 'none', }) ?? lang1.english_name; const lang2Name = intl.formatDisplayName(lang2.iso_639_1, { type: 'language', fallback: 'none', }) ?? lang2.english_name; return lang1Name === lang2Name ? 0 : lang1Name > lang2Name ? 1 : -1; }), [intl, languages] ); if (!data && !error) { return ; } if (!languages && !languagesError) { return ; } if (!data || !languages) { return ; } 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, movieQuotaLimit: movieQuotaEnabled ? values.movieQuotaLimit : null, movieQuotaDays: movieQuotaEnabled ? values.movieQuotaDays : null, tvQuotaLimit: tvQuotaEnabled ? values.tvQuotaLimit : null, tvQuotaDays: tvQuotaEnabled ? values.tvQuotaDays : null, locale: values.locale, }); if (setLocale) { setLocale(values.locale); } 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 (
{user?.userType === UserType.PLEX ? ( {intl.formatMessage(messages.plexuser)} ) : ( {intl.formatMessage(messages.localuser)} )}
{user?.id === 1 ? intl.formatMessage(messages.owner) : hasPermission(Permission.ADMIN) ? intl.formatMessage(messages.admin) : intl.formatMessage(messages.user)}
{errors.displayName && touched.displayName && (
{errors.displayName}
)}
{(Object.keys( availableLanguages ) as (keyof typeof availableLanguages)[]).map((key) => ( ))}
{currentHasPermission(Permission.MANAGE_USERS) && !hasPermission(Permission.MANAGE_USERS) && ( <>
setMovieQuotaEnabled((s) => !s)} /> {intl.formatMessage(messages.enableOverride)}
setTvQuotaEnabled((s) => !s)} /> {intl.formatMessage(messages.enableOverride)}
)}
); }}
); }; export default UserGeneralSettings;