ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extensions cleanup (#257)

Browse Source 
* [Cleanup] Add enums and types

* Extract "default languages" from ISOLanguages

The "default languages" will also be translated depending on which language the user selected
This commit is contained in:
schroda
2023-04-21 00:27:42 +02:00
committed by GitHub
parent c81189a9ed
commit 0a56a2f6d4
8 changed files with 101 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/SourceCard.tsx
View File

@@ -15,9 +15,9 @@ import { Box, styled } from '@mui/system';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Link, useHistory } from 'react-router-dom';
import { langCodeToName } from 'util/language';
import useLocalStorage from 'util/useLocalStorage';
import { ISource } from 'typings';
import { translateExtensionLanguage } from 'screens/util/Extensions';
const MobileWidthButtons = styled('div')(({ theme }) => ({
display: 'flex',
@@ -99,7 +99,7 @@ const SourceCard: React.FC<IProps> = (props: IProps) => {
</Typography>
{id !== '0' && (
<Typography variant="caption" display="block" gutterBottom>
{langCodeToName(lang)}
{translateExtensionLanguage(lang)}
{isNsfw && (
<Typography variant="caption" display="inline" gutterBottom color="red">
{' 18+'}

4
src/components/navbar/action/LangSelect.tsx
View File

@@ -16,9 +16,9 @@ import IconButton from '@mui/material/IconButton';
import FilterListIcon from '@mui/icons-material/FilterList';
import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
import ListItem from '@mui/material/ListItem';
import { langCodeToName } from 'util/language';
import cloneObject from 'util/cloneObject';
import { useTranslation } from 'react-i18next';
import { translateExtensionLanguage } from 'screens/util/Extensions';
function removeAll(firstList: any[], secondList: any[]) {
secondList.forEach((item) => {
@@ -93,7 +93,7 @@ export default function LangSelect(props: IProps) {
<List>
{allLangs.map((lang) => (
<ListItem key={lang}>
<ListItemText primary={langCodeToName(lang)} />
<ListItemText primary={translateExtensionLanguage(lang)} />
<ListItemSecondaryAction>
<Switch

8
src/i18n/locale/en.json
View File

@@ -168,13 +168,16 @@
"installing_file": "Installing Extension File..."
},
"language": {
"all": "All"
"all": "All",
"other": "Other"
},
"state": {
"label": {
"installed": "Installed",
"installing": "installing",
"obsolete": "obsolete",
"uninstalling": "uninstalling",
"update_pending": "Update pending",
"updating": "updating"
}
},
@@ -417,7 +420,8 @@
"label": {
"checkout": "Check out",
"guide": "Local source guide"
}
},
"title": "Local source"
},
"title": "Source",
"title_one": "Source",

49
src/screens/Extensions.tsx
View File

@@ -5,7 +5,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import React, { useContext, useEffect, useState, useMemo, useRef } from 'react';
import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
import { fromEvent } from 'file-selector';
import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
@@ -14,28 +14,37 @@ import NavbarContext from 'components/context/NavbarContext';
import client, { useQuery } from 'util/client';
import useLocalStorage from 'util/useLocalStorage';
import LangSelect from 'components/navbar/action/LangSelect';
import { extensionDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from 'util/language';
import { makeToaster } from 'components/util/Toast';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import AppbarSearch from 'components/util/AppbarSearch';
import { useQueryParam, StringParam } from 'use-query-params';
import { StringParam, useQueryParam } from 'use-query-params';
import { Virtuoso } from 'react-virtuoso';
import { Typography, useMediaQuery, useTheme } from '@mui/material';
import { IExtension } from 'typings';
import { useTranslation } from 'react-i18next';
import {
ExtensionState,
GroupedExtensions,
GroupedExtensionsResult,
isExtensionStateOrLanguage,
translateExtensionLanguage,
} from 'screens/util/Extensions';
const LANGUAGE = 0;
const EXTENSIONS = 1;
const allLangs: string[] = [];
interface GroupedExtension {
[key: string]: IExtension[];
}
function groupExtensions(extensions: IExtension[]) {
function groupExtensions(extensions: IExtension[]): GroupedExtensionsResult {
allLangs.length = 0; // empty the array
const sortedExtenions: GroupedExtension = { installed: [], 'updates pending': [], all: [] };
const sortedExtenions: GroupedExtensions = {
[ExtensionState.INSTALLED]: [],
[ExtensionState.UPDATE_PENDING]: [],
[DefaultLanguage.ALL]: [],
[DefaultLanguage.OTHER]: [],
[DefaultLanguage.LOCAL_SOURCE]: [],
};
extensions.forEach((extension) => {
if (sortedExtenions[extension.lang] === undefined) {
sortedExtenions[extension.lang] = [];
@@ -45,9 +54,9 @@ function groupExtensions(extensions: IExtension[]) {
}
if (extension.installed) {
if (extension.hasUpdate) {
sortedExtenions['updates pending'].push(extension);
sortedExtenions[ExtensionState.UPDATE_PENDING].push(extension);
} else {
sortedExtenions.installed.push(extension);
sortedExtenions[ExtensionState.INSTALLED].push(extension);
}
} else {
sortedExtenions[extension.lang].push(extension);
@@ -55,15 +64,17 @@ function groupExtensions(extensions: IExtension[]) {
});
allLangs.sort(langSortCmp);
const result: [string, IExtension[]][] = [
['updates pending', sortedExtenions['updates pending']],
['installed', sortedExtenions.installed],
['all', sortedExtenions.all],
const result: GroupedExtensionsResult<ExtensionState | DefaultLanguage | string> = [
[ExtensionState.UPDATE_PENDING, sortedExtenions[ExtensionState.UPDATE_PENDING]],
[ExtensionState.INSTALLED, sortedExtenions[ExtensionState.INSTALLED]],
[DefaultLanguage.ALL, sortedExtenions[DefaultLanguage.ALL]],
[DefaultLanguage.OTHER, sortedExtenions[DefaultLanguage.OTHER]],
[DefaultLanguage.LOCAL_SOURCE, sortedExtenions[DefaultLanguage.LOCAL_SOURCE]],
];
const langExt: [string, IExtension[]][] = allLangs.map((lang) => [lang, sortedExtenions[lang]]);
const langExt: GroupedExtensionsResult = allLangs.map((lang) => [lang, sortedExtenions[lang]]);
return result.concat(langExt);
return (result as GroupedExtensionsResult).concat(langExt);
}
export default function MangaExtensions() {
@@ -106,7 +117,7 @@ export default function MangaExtensions() {
() =>
groupExtensions(filteredExtensions)
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => ['installed', 'updates pending', 'all', ...shownLangs].includes(group[LANGUAGE])),
.filter((group) => isExtensionStateOrLanguage(group[LANGUAGE]) || shownLangs.includes(group[LANGUAGE])),
[shownLangs, filteredExtensions],
);
@@ -196,7 +207,7 @@ export default function MangaExtensions() {
fontWeight: 'bold',
}}
>
{langCodeToName(item)}
{translateExtensionLanguage(item)}
</Typography>
);
}

5
src/screens/SearchAll.tsx
View File

@@ -16,10 +16,11 @@ import React, { useContext, useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { StringParam, useQueryParam } from 'use-query-params';
import client from 'util/client';
import { langCodeToName, langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from 'util/language';
import { langSortCmp, sourceDefualtLangs, sourceForcedDefaultLangs } from 'util/language';
import useLocalStorage from 'util/useLocalStorage';
import { ISource } from 'typings';
import { useTranslation } from 'react-i18next';
import { translateExtensionLanguage } from 'screens/util/Extensions';
function sourceToLangList(sources: ISource[]) {
const result: string[] = [];
@@ -202,7 +203,7 @@ const SearchAll: React.FC = () => {
sx={{ p: 3 }}
>
<Typography variant="h5">{displayName}</Typography>
<Typography variant="caption">{langCodeToName(lang)}</Typography>
<Typography variant="caption">{translateExtensionLanguage(lang)}</Typography>
</CardActionArea>
</Card>
<MangaGrid

5
src/screens/Sources.tsx
View File

@@ -9,7 +9,7 @@ import React, { useContext, useEffect } from 'react';
import LangSelect from 'components/navbar/action/LangSelect';
import SourceCard from 'components/SourceCard';
import NavbarContext from 'components/context/NavbarContext';
import { sourceDefualtLangs, sourceForcedDefaultLangs, langCodeToName, langSortCmp } from 'util/language';
import { sourceDefualtLangs, sourceForcedDefaultLangs, langSortCmp } from 'util/language';
import useLocalStorage from 'util/useLocalStorage';
import LoadingPlaceholder from 'components/util/LoadingPlaceholder';
import { IconButton } from '@mui/material';
@@ -18,6 +18,7 @@ import { useHistory } from 'react-router-dom';
import { useQuery } from 'util/client';
import { ISource } from 'typings';
import { useTranslation } from 'react-i18next';
import { translateExtensionLanguage } from 'screens/util/Extensions';
function sourceToLangList(sources: ISource[]) {
const result: string[] = [];
@@ -104,7 +105,7 @@ export default function Sources() {
shownLangs.indexOf(lang) !== -1 && (
<React.Fragment key={lang}>
<h1 key={lang} style={{ marginLeft: 25 }}>
{langCodeToName(lang)}
{translateExtensionLanguage(lang)}
</h1>
{(list as ISource[])
.filter((source) => showNsfw || !source.isNsfw)

44
src/screens/util/Extensions.ts Normal file
View File

@@ -0,0 +1,44 @@
import { IExtension, TranslationKey } from 'typings';
import { DefaultLanguage, langCodeToName } from 'util/language';
import { t } from 'i18next';
export enum ExtensionState {
INSTALLED = 'INSTALLED',
UPDATE_PENDING = 'UPDATE_PENDING',
}
export type GroupedExtensionsResult<KEY extends string = string> = [KEY, IExtension[]][];
export type GroupedByExtensionState = {
[state in ExtensionState]: IExtension[];
};
export type GroupedByLanguage = {
[language in DefaultLanguage]: IExtension[];
} & {
[language: string]: IExtension[];
};
export type GroupedExtensions = GroupedByExtensionState & GroupedByLanguage;
export const extensionLanguageToTranslationKey: { [state in ExtensionState | DefaultLanguage]: TranslationKey } = {
[ExtensionState.INSTALLED]: 'extension.state.label.installed',
[ExtensionState.UPDATE_PENDING]: 'extension.state.label.update_pending',
[DefaultLanguage.ALL]: 'extension.language.all',
[DefaultLanguage.OTHER]: 'extension.language.other',
[DefaultLanguage.LOCAL_SOURCE]: 'source.local_source.title',
};
export const isExtensionStateOrLanguage = (languageCode: string): boolean =>
[
ExtensionState.INSTALLED,
ExtensionState.UPDATE_PENDING,
DefaultLanguage.ALL,
DefaultLanguage.OTHER,
DefaultLanguage.LOCAL_SOURCE,
].includes(languageCode as ExtensionState | DefaultLanguage);
export const translateExtensionLanguage = (languageCode: string): string =>
isExtensionStateOrLanguage(languageCode)
? (t(extensionLanguageToTranslationKey[languageCode as ExtensionState | DefaultLanguage]) as string)
: langCodeToName(languageCode);

24
src/util/language.tsx
View File

@@ -6,15 +6,13 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
import { t } from 'i18next';
export enum DefaultLanguage {
ALL = 'all',
OTHER = 'other',
LOCAL_SOURCE = 'localsourcelang',
}
export const ISOLanguages = [
{ code: 'all', name: 'All', nativeName: 'All' },
{ code: 'installed', name: 'Installed', nativeName: 'Installed' },
{ code: 'updates pending', name: 'Updates pending', nativeName: 'Updates pending' },
{ code: 'other', name: 'other langs?', nativeName: 'Other' },
{ code: 'localsourcelang', name: 'Local source', nativeName: 'Local source' },
// full list: https://github.com/meikidd/iso-639-1/blob/master/src/data.js
{ code: 'en', name: 'English', nativeName: 'English' },
{ code: 'ca', name: 'Catalan; Valencian', nativeName: 'Català' },
@@ -97,15 +95,15 @@ function defaultNativeLang() {
}
export function extensionDefaultLangs() {
return [defaultNativeLang(), 'all'];
return [defaultNativeLang(), DefaultLanguage.ALL];
}
export function sourceDefualtLangs() {
return [defaultNativeLang(), 'localsourcelang'];
return [defaultNativeLang(), DefaultLanguage.LOCAL_SOURCE];
}
export function sourceForcedDefaultLangs(): string[] {
return ['localsourcelang'];
return [DefaultLanguage.LOCAL_SOURCE];
}
export const langSortCmp = (a: string, b: string) => {
@@ -115,8 +113,8 @@ export const langSortCmp = (a: string, b: string) => {
if (a === 'en') return -1;
if (b === 'en') return 1;
if (a === 'localSourceLang') return 1;
if (b === 'localSourceLang') return -1;
if (a === DefaultLanguage.LOCAL_SOURCE) return 1;
if (b === DefaultLanguage.LOCAL_SOURCE) return -1;
return aLang > bLang ? 1 : -1;
};