Sort all language dropdowns, not just in the Settings Page.

This commit is contained in:
infinite-persistence 2021-06-07 09:54:39 +08:00
parent bd8172693c
commit 3abaed0f17
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
5 changed files with 38 additions and 37 deletions

View file

@ -21,6 +21,7 @@ import LbcSymbol from 'component/common/lbc-symbol';
import SUPPORTED_LANGUAGES from 'constants/supported_languages'; import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp'; import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
import { SIMPLE_SITE } from 'config'; import { SIMPLE_SITE } from 'config';
import { sortLanguageMap } from 'util/default-languages';
const LANG_NONE = 'none'; const LANG_NONE = 'none';
@ -416,9 +417,9 @@ function ChannelForm(props: Props) {
<option key={'pri-langNone'} value={LANG_NONE}> <option key={'pri-langNone'} value={LANG_NONE}>
{__('None selected')} {__('None selected')}
</option> </option>
{Object.keys(SUPPORTED_LANGUAGES).map((language) => ( {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
<option key={language} value={language}> <option key={langKey} value={langKey}>
{SUPPORTED_LANGUAGES[language]} {langName}
</option> </option>
))} ))}
</FormField> </FormField>
@ -434,13 +435,11 @@ function ChannelForm(props: Props) {
<option key={'sec-langNone'} value={LANG_NONE}> <option key={'sec-langNone'} value={LANG_NONE}>
{__('None selected')} {__('None selected')}
</option> </option>
{Object.keys(SUPPORTED_LANGUAGES) {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
.filter((lang) => lang !== languageParam[0]) <option key={langKey} value={langKey} disabled={langKey === languageParam[0]}>
.map((language) => ( {langName}
<option key={language} value={language}> </option>
{SUPPORTED_LANGUAGES[language]} ))}
</option>
))}
</FormField> </FormField>
</> </>
} }

View file

@ -8,6 +8,7 @@ import PublishReleaseDate from 'component/publishReleaseDate';
import LicenseType from './license-type'; import LicenseType from './license-type';
import Card from 'component/common/card'; import Card from 'component/common/card';
import SUPPORTED_LANGUAGES from 'constants/supported_languages'; import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import { sortLanguageMap } from 'util/default-languages';
// @if TARGET='app' // @if TARGET='app'
// import ErrorText from 'component/common/error-text'; // import ErrorText from 'component/common/error-text';
@ -162,9 +163,8 @@ function PublishAdditionalOptions(props: Props) {
value={language} value={language}
onChange={(event) => updatePublishForm({ language: event.target.value })} onChange={(event) => updatePublishForm({ language: event.target.value })}
> >
{Object.entries(SUPPORTED_LANGUAGES).map(([langkey, langName]) => ( {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
// $FlowFixMe <option key={langKey} value={langKey}>
<option key={langkey} value={langkey}>
{langName} {langName}
</option> </option>
))} ))}

View file

@ -4,7 +4,7 @@ import React, { useState } from 'react';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import SUPPORTED_LANGUAGES from 'constants/supported_languages'; import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import { getDefaultLanguage } from 'util/default-languages'; import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
type Props = { type Props = {
language: string, language: string,
@ -15,9 +15,7 @@ type Props = {
function SettingLanguage(props: Props) { function SettingLanguage(props: Props) {
const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props; const { language, setLanguage, searchInLanguage, setSearchInLanguage } = props;
const [previousLanguage, setPreviousLanguage] = useState(null); const [previousLanguage, setPreviousLanguage] = useState(null);
const languages = SUPPORTED_LANGUAGES;
if (previousLanguage && language !== previousLanguage) { if (previousLanguage && language !== previousLanguage) {
setPreviousLanguage(null); setPreviousLanguage(null);
@ -41,23 +39,11 @@ function SettingLanguage(props: Props) {
'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.' 'Multi-language support is brand new and incomplete. Switching your language may have unintended consequences, like glossolalia.'
)} )}
> >
{Object.entries(languages) {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
.sort((a, b) => { <option key={langKey} value={langKey}>
const lhs = String(a[1]); {langName}
const rhs = String(b[1]); </option>
if (lhs < rhs) return -1; ))}
if (lhs > rhs) return 1;
return 0;
})
.map((language) => {
const langKey = language[0];
const langName = String(language[1]);
return (
<option key={langKey} value={langKey}>
{langName}
</option>
);
})}
</FormField> </FormField>
{previousLanguage && <Spinner type="small" />} {previousLanguage && <Spinner type="small" />}
<FormField <FormField

View file

@ -14,7 +14,7 @@ import { Lbryio } from 'lbryinc';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import YoutubeTransferStatus from 'component/youtubeTransferStatus'; import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Nag from 'component/common/nag'; import Nag from 'component/common/nag';
import { getDefaultLanguage } from 'util/default-languages'; import { getDefaultLanguage, sortLanguageMap } from 'util/default-languages';
const STATUS_TOKEN_PARAM = 'status_token'; const STATUS_TOKEN_PARAM = 'status_token';
const ERROR_MESSAGE_PARAM = 'error_message'; const ERROR_MESSAGE_PARAM = 'error_message';
@ -147,9 +147,9 @@ export default function YoutubeSync(props: Props) {
onChange={(event) => setLanguage(event.target.value)} onChange={(event) => setLanguage(event.target.value)}
value={language} value={language}
> >
{Object.keys(SUPPORTED_LANGUAGES).map((language) => ( {sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
<option key={language} value={language}> <option key={langKey} value={langKey}>
{SUPPORTED_LANGUAGES[language]} {langName}
</option> </option>
))} ))}
</FormField> </FormField>

View file

@ -12,3 +12,19 @@ export const getDefaultHomepageKey = () => {
const language = getDefaultLanguage(); const language = getDefaultLanguage();
return (homepages[language] && language) || (homepages[language.slice(0, 2)] && language.slice(0, 2)) || DEFAULT_LANG; return (homepages[language] && language) || (homepages[language.slice(0, 2)] && language.slice(0, 2)) || DEFAULT_LANG;
}; };
/**
* Sorts the language map by their native representation (not by language code).
*
* @param languages The language map to sort, e.g. "{ 'ja': '日本語', ... }"
* @returns {[string, string][]}
*/
export function sortLanguageMap(languages) {
return Object.entries(languages).sort((a, b) => {
const lhs = String(a[1]);
const rhs = String(b[1]);
if (lhs < rhs) return -1;
if (lhs > rhs) return 1;
return 0;
});
}