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(ui): sort regions & languages by their localized names rather than their TMDb English names (#1157)

Browse Source
This commit is contained in:
TheCatLady
2021-03-16 12:13:52 -04:00
committed by GitHub
parent 1178ebff73
commit d76bf32c9d
3 changed files with 66 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/RegionSelector/index.tsx
View File

@@ -38,6 +38,29 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
[]
);
const sortedRegions = useMemo(
() =>
regions?.sort((region1, region2) => {
const region1Name =
intl.formatDisplayName(region1.iso_3166_1, {
type: 'region',
fallback: 'none',
}) ?? region1.english_name;
const region2Name =
intl.formatDisplayName(region2.iso_3166_1, {
type: 'region',
fallback: 'none',
}) ?? region2.english_name;
return region1Name === region2Name
? 0
: region1Name > region2Name
? 1
: -1;
}),
[intl, regions]
);
const defaultRegionNameFallback =
regions?.find((region) => region.iso_3166_1 === currentSettings.region)
?.english_name ?? currentSettings.region;
@@ -228,7 +251,7 @@ const RegionSelector: React.FC<RegionSelectorProps> = ({
</div>
)}
</Listbox.Option>
{regions?.map((region) => (
{sortedRegions?.map((region) => (
<Listbox.Option key={region.iso_3166_1} value={region}>
{({ selected, active }) => (
<div

23
src/components/Settings/SettingsMain.tsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useMemo } from 'react';
import useSWR from 'swr';
import LoadingSpinner from '../Common/LoadingSpinner';
import type { MainSettings, Language } from '../../../server/lib/settings';
@@ -94,6 +94,25 @@ const SettingsMain: React.FC = () => {
}
};
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 && !languages && !languagesError) {
return <LoadingSpinner />;
}
@@ -306,7 +325,7 @@ const SettingsMain: React.FC = () => {
<option value="">
{intl.formatMessage(messages.originalLanguageDefault)}
</option>
{languages?.map((language) => (
{sortedLanguages?.map((language) => (
<option
key={`language-key-${language.iso_639_1}`}
value={language.iso_639_1}

23
src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
View File

@@ -1,7 +1,7 @@
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import { useRouter } from 'next/router';
import React from 'react';
import React, { useMemo } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr';
@@ -56,6 +56,25 @@ const UserGeneralSettings: React.FC = () => {
'/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 <LoadingSpinner />;
}
@@ -211,7 +230,7 @@ const UserGeneralSettings: React.FC = () => {
<option value="all">
{intl.formatMessage(messages.originalLanguageDefault)}
</option>
{languages?.map((language) => (
{sortedLanguages?.map((language) => (
<option
key={`language-key-${language.iso_639_1}`}
value={language.iso_639_1}