feat: add server default locale setting (#1536)

* feat: add server default locale setting

* fix: do not modify defaultLocale property of IntlProvider

src/components/Settings/SettingsMain.tsx

@@ -6,7 +6,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import useSWR, { mutate } from 'swr';
 import * as Yup from 'yup';
+import { UserSettingsGeneralResponse } from '../../../server/interfaces/api/userSettingsInterfaces';
 import type { MainSettings } from '../../../server/lib/settings';
+import {
+  availableLanguages,
+  AvailableLocales,
+} from '../../context/LanguageContext';
+import useLocale from '../../hooks/useLocale';
 import { Permission, useUser } from '../../hooks/useUser';
 import globalMessages from '../../i18n/globalMessages';
 import Badge from '../Common/Badge';
@@ -50,15 +56,20 @@ const messages = defineMessages({
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   partialRequestsEnabled: 'Allow Partial Series Requests',
+  locale: 'Display Language',
 });
 
 const SettingsMain: React.FC = () => {
   const { addToast } = useToasts();
-  const { hasPermission: userHasPermission } = useUser();
+  const { user: currentUser, hasPermission: userHasPermission } = useUser();
   const intl = useIntl();
+  const { setLocale } = useLocale();
   const { data, error, revalidate } = useSWR<MainSettings>(
     '/api/v1/settings/main'
   );
+  const { data: userData } = useSWR<UserSettingsGeneralResponse>(
+    currentUser ? `/api/v1/user/${currentUser.id}/settings/main` : null
+  );
 
   const MainSettingsSchema = Yup.object().shape({
     applicationTitle: Yup.string().required(
@@ -122,6 +133,7 @@ const SettingsMain: React.FC = () => {
             applicationUrl: data?.applicationUrl,
             csrfProtection: data?.csrfProtection,
             hideAvailable: data?.hideAvailable,
+            locale: data?.locale ?? 'en',
             region: data?.region,
             originalLanguage: data?.originalLanguage,
             partialRequestsEnabled: data?.partialRequestsEnabled,
@@ -136,6 +148,7 @@ const SettingsMain: React.FC = () => {
                 applicationUrl: values.applicationUrl,
                 csrfProtection: values.csrfProtection,
                 hideAvailable: values.hideAvailable,
+                locale: values.locale,
                 region: values.region,
                 originalLanguage: values.originalLanguage,
                 partialRequestsEnabled: values.partialRequestsEnabled,
@@ -143,6 +156,14 @@ const SettingsMain: React.FC = () => {
               });
               mutate('/api/v1/settings/public');
 
+              if (setLocale) {
+                setLocale(
+                  (userData?.locale
+                    ? userData.locale
+                    : values.locale) as AvailableLocales
+                );
+              }
+
               addToast(intl.formatMessage(messages.toastSettingsSuccess), {
                 autoDismiss: true,
                 appearance: 'success',
@@ -271,6 +292,28 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="locale" className="text-label">
+                    {intl.formatMessage(messages.locale)}
+                  </label>
+                  <div className="form-input">
+                    <div className="form-input-field">
+                      <Field as="select" id="locale" name="locale">
+                        {(Object.keys(
+                          availableLanguages
+                        ) as (keyof typeof availableLanguages)[]).map((key) => (
+                          <option
+                            key={key}
+                            value={availableLanguages[key].code}
+                            lang={availableLanguages[key].code}
+                          >
+                            {availableLanguages[key].display}
+                          </option>
+                        ))}
+                      </Field>
+                    </div>
+                  </div>
+                </div>
                 <div className="form-row">
                   <label htmlFor="region" className="text-label">
                     <span>{intl.formatMessage(messages.region)}</span>