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

Do not use and mutate global array

Browse Source
This commit is contained in:
schroda
2023-06-23 00:05:33 +02:00
parent 5c0dcf1f6c
commit 67b4bbbdcf
1 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/screens/Extensions.tsx
View File

@@ -35,10 +35,11 @@ import ExtensionCard from '@/components/ExtensionCard';
const LANGUAGE = 0;
const EXTENSIONS = 1;
const allLangs: string[] = [];
function getExtensionsInfo(extensions: IExtension[]): GroupedExtensionsResult {
allLangs.length = 0; // empty the array
function getExtensionsInfo(extensions: IExtension[]): {
allLangs: string[];
groupedExtensions: GroupedExtensionsResult;
} {
const allLangs: string[] = [];
const sortedExtensions: GroupedExtensions = {
[ExtensionState.OBSOLETE]: [],
[ExtensionState.INSTALLED]: [],
@@ -82,7 +83,10 @@ function getExtensionsInfo(extensions: IExtension[]): GroupedExtensionsResult {
const langExt: GroupedExtensionsResult = allLangs.map((lang) => [lang, sortedExtensions[lang]]);
return (result as GroupedExtensionsResult).concat(langExt);
return {
allLangs,
groupedExtensions: (result as GroupedExtensionsResult).concat(langExt),
};
}
export default function MangaExtensions() {
@@ -96,19 +100,6 @@ export default function MangaExtensions() {
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const [query] = useQueryParam('query', StringParam);
useEffect(() => {
setTitle(t('extension.title'));
setAction(
<>
<AppbarSearch />
<IconButton onClick={() => inputRef.current?.click()} size="large">
<AddIcon />
</IconButton>
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
</>,
);
}, [t, shownLangs]);
const { data: allExtensions, mutate, isLoading } = requestManager.useGetExtensionList();
const filteredExtensions = useMemo(
@@ -121,15 +112,17 @@ export default function MangaExtensions() {
[allExtensions, showNsfw, query],
);
const groupedExtensions = useMemo(
const { allLangs, groupedExtensions } = useMemo(() => getExtensionsInfo(filteredExtensions), [filteredExtensions]);
const filteredGroupedExtensions = useMemo(
() =>
getExtensionsInfo(filteredExtensions)
groupedExtensions
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => isExtensionStateOrLanguage(group[LANGUAGE]) || shownLangs.includes(group[LANGUAGE])),
[shownLangs, filteredExtensions],
[shownLangs, groupedExtensions],
);
const flatRenderItems: (IExtension | string)[] = groupedExtensions.flat(2);
const flatRenderItems: (IExtension | string)[] = filteredGroupedExtensions.flat(2);
const [toasts, makeToast] = makeToaster(useState<React.ReactElement[]>([]));
@@ -152,6 +145,19 @@ export default function MangaExtensions() {
}
};
useEffect(() => {
setTitle(t('extension.title'));
setAction(
<>
<AppbarSearch />
<IconButton onClick={() => inputRef.current?.click()} size="large">
<AddIcon />
</IconButton>
<LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
</>,
);
}, [t, shownLangs]);
useEffect(() => {
const dropHandler = async (e: Event) => {
e.preventDefault();