shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: correctly fall back to English name in LanguageSelector (#1537)

Browse Source 
* fix: correctly fall back to English name in LanguageSelector

* refactor: clean up language sort & name logic

* refactor: also clean up region sort & name logic

* refactor: use arrow functions
This commit is contained in:
TheCatLady
2021-04-30 14:02:59 -04:00
committed by GitHub
parent b7b55e275c
commit 189313e94a
5 changed files with 49 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/LanguageSelector/index.tsx
View File

@@ -1,8 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { sortBy } from 'lodash';
import dynamic from 'next/dynamic';
import React from 'react';
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import type { OptionsType, OptionTypeBase } from 'react-select';
import useSWR from 'swr';
import { Language } from '../../../server/lib/settings';
import globalMessages from '../../i18n/globalMessages';
@@ -29,7 +31,6 @@ const selectStyles = {
};
interface LanguageSelectorProps {
languages: Language[];
value?: string;
setFieldValue: (property: string, value: string) => void;
serverValue?: string;
@@ -37,26 +38,33 @@ interface LanguageSelectorProps {
}
const LanguageSelector: React.FC<LanguageSelectorProps> = ({
languages,
value,
setFieldValue,
serverValue,
isUserSettings = false,
}) => {
const intl = useIntl();
const { data: languages } = useSWR<Language[]>('/api/v1/languages');
const defaultLanguageNameFallback = serverValue
? languages.find((language) => language.iso_639_1 === serverValue)
?.english_name ?? serverValue
: undefined;
const options: OptionType[] =
languages.map((language) => ({
label:
const sortedLanguages = useMemo(() => {
languages?.forEach((language) => {
language.name =
intl.formatDisplayName(language.iso_639_1, {
type: 'language',
fallback: 'none',
}) ?? language.english_name,
}) ?? language.english_name;
});
return sortBy(languages, 'name');
}, [intl, languages]);
const languageName = (languageCode: string) =>
sortedLanguages?.find((language) => language.iso_639_1 === languageCode)
?.name ?? languageCode;
const options: OptionType[] =
sortedLanguages?.map((language) => ({
label: language.name,
value: language.iso_639_1,
})) ?? [];
@@ -67,13 +75,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
language: serverValue
? serverValue
.split('|')
.map(
(value) =>
intl.formatDisplayName(value, {
type: 'language',
fallback: 'none',
}) ?? defaultLanguageNameFallback
)
.map((value) => languageName(value))
.reduce((prev, curr) =>
intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
@@ -112,13 +114,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
language: serverValue
? serverValue
.split('|')
.map(
(value) =>
intl.formatDisplayName(value, {
type: 'language',
fallback: 'none',
}) ?? defaultLanguageNameFallback
)
.map((value) => languageName(value))
.reduce((prev, curr) =>
intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
@@ -130,7 +126,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
isFixed: true,
}
: value?.split('|').map((code) => {
const matchedLanguage = languages.find(
const matchedLanguage = sortedLanguages?.find(
(lang) => lang.iso_639_1 === code
);
@@ -139,11 +135,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
}
return {
label:
intl.formatDisplayName(matchedLanguage.iso_639_1, {
type: 'language',
fallback: 'none',
}) ?? matchedLanguage.english_name,
label: matchedLanguage.name,
value: matchedLanguage.iso_639_1,
};
}) ?? undefined