feat(regions): add region/original language setting for filtering Discover (#732) (#942)

src/components/Settings/SettingsMain.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import useSWR from 'swr';
 import LoadingSpinner from '../Common/LoadingSpinner';
-import type { MainSettings } from '../../../server/lib/settings';
+import type { MainSettings, Language } from '../../../server/lib/settings';
 import CopyButton from './CopyButton';
 import { Form, Formik, Field } from 'formik';
 import axios from 'axios';
@@ -13,6 +13,7 @@ import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
 import PermissionEdit from '../PermissionEdit';
 import * as Yup from 'yup';
+import RegionSelector from '../RegionSelector';
 
 const messages = defineMessages({
   generalsettings: 'General Settings',
@@ -23,6 +24,12 @@ const messages = defineMessages({
   apikey: 'API Key',
   applicationTitle: 'Application Title',
   applicationurl: 'Application URL',
+  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)',
   toastApiKeySuccess: 'New API key generated!',
   toastApiKeyFailure: 'Something went wrong while generating a new API key.',
   toastSettingsSuccess: 'Settings successfully saved!',
@@ -50,6 +57,9 @@ const SettingsMain: React.FC = () => {
   const { data, error, revalidate } = useSWR<MainSettings>(
     '/api/v1/settings/main'
   );
+  const { data: languages, error: languagesError } = useSWR<Language[]>(
+    '/api/v1/languages'
+  );
   const MainSettingsSchema = Yup.object().shape({
     applicationTitle: Yup.string().required(
       intl.formatMessage(messages.validationApplicationTitle)
@@ -85,7 +95,7 @@ const SettingsMain: React.FC = () => {
     }
   };
 
-  if (!data && !error) {
+  if (!data && !error && !languages && !languagesError) {
     return <LoadingSpinner />;
   }
 
@@ -108,6 +118,8 @@ const SettingsMain: React.FC = () => {
             defaultPermissions: data?.defaultPermissions ?? 0,
             hideAvailable: data?.hideAvailable,
             localLogin: data?.localLogin,
+            region: data?.region,
+            originalLanguage: data?.originalLanguage,
             trustProxy: data?.trustProxy,
           }}
           enableReinitialize
@@ -121,6 +133,8 @@ const SettingsMain: React.FC = () => {
                 defaultPermissions: values.defaultPermissions,
                 hideAvailable: values.hideAvailable,
                 localLogin: values.localLogin,
+                region: values.region,
+                originalLanguage: values.originalLanguage,
                 trustProxy: values.trustProxy,
               });
 
@@ -263,6 +277,51 @@ const SettingsMain: React.FC = () => {
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="region" className="text-label">
+                    <span>{intl.formatMessage(messages.region)}</span>
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.regionTip)}
+                    </span>
+                  </label>
+                  <div className="form-input">
+                    <RegionSelector
+                      value={values.region ?? ''}
+                      name="region"
+                      onChange={setFieldValue}
+                    />
+                  </div>
+                </div>
+                <div className="form-row">
+                  <label htmlFor="originalLanguage" className="text-label">
+                    <span>{intl.formatMessage(messages.originallanguage)}</span>
+                    <span className="label-tip">
+                      {intl.formatMessage(messages.originallanguageTip)}
+                    </span>
+                  </label>
+                  <div className="form-input">
+                    <div className="flex max-w-lg rounded-md shadow-sm">
+                      <Field
+                        as="select"
+                        id="originalLanguage"
+                        name="originalLanguage"
+                      >
+                        <option value="">All</option>
+                        {languages?.map((language) => (
+                          <option
+                            key={`language-key-${language.iso_639_1}`}
+                            value={language.iso_639_1}
+                          >
+                            {intl.formatDisplayName(language.iso_639_1, {
+                              type: 'language',
+                              fallback: 'none',
+                            }) ?? language.english_name}
+                          </option>
+                        ))}
+                      </Field>
+                    </div>
+                  </div>
+                </div>
                 <div className="form-row">
                   <label htmlFor="hideAvailable" className="checkbox-label">
                     <span className="mr-2">