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

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);