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

Feature/swr for simple queries (#187)

Browse Source 
* Refactor simple queries with useSWR hook

* Fix plus button in Extensions screen

* Add type to categories query

* Add useQuery abstraction which adds loading attribute

* Reload categories even if reorder fails
This commit is contained in:
Valter Martinek
2022-11-02 21:48:22 +01:00
committed by GitHub
parent 6f8755fa05
commit 14265164a4
11 changed files with 134 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/screens/Extensions.tsx
View File

@@ -5,13 +5,15 @@
* 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 } from 'react';
import React, {
useContext, useEffect, useState, useMemo, useRef,
} from 'react';
import { fromEvent } from 'file-selector';
import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
import ExtensionCard from 'components/ExtensionCard';
import NavbarContext from 'components/context/NavbarContext';
import client from 'util/client';
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';
@@ -63,6 +65,7 @@ function groupExtensions(extensions: IExtension[]) {
}
export default function MangaExtensions() {
const inputRef = useRef<HTMLInputElement>(null);
const { setTitle, setAction } = useContext(NavbarContext);
const [shownLangs, setShownLangs] = useLocalStorage<string[]>('shownExtensionLangs', extensionDefaultLangs());
const [showNsfw] = useLocalStorage<boolean>('showNsfw', true);
@@ -76,9 +79,7 @@ export default function MangaExtensions() {
<>
<AppbarSearch />
<IconButton
onClick={
() => document.getElementById('external-extension-file')?.click()
}
onClick={() => inputRef.current?.click()}
size="large"
>
<AddIcon />
@@ -92,16 +93,19 @@ export default function MangaExtensions() {
);
}, [shownLangs]);
const [extensionsRaw, setExtensionsRaw] = useState<IExtension[]>([]);
const { data: allExtensions, mutate, loading } = useQuery<IExtension[]>('/api/v1/extension/list');
const [updateTriggerHolder, setUpdateTriggerHolder] = useState(0); // just a hack
const triggerUpdate = () => setUpdateTriggerHolder(updateTriggerHolder + 1); // just a hack
const filteredExtensions = useMemo(() => (allExtensions ?? []).filter((ext) => {
const nsfwFilter = showNsfw || !ext.isNsfw;
if (!query) return nsfwFilter;
return nsfwFilter && ext.name.toLowerCase().includes(query.toLowerCase());
}), [allExtensions, showNsfw, query]);
useEffect(() => {
client.get('/api/v1/extension/list')
.then((response) => response.data)
.then((data) => setExtensionsRaw(data));
}, [updateTriggerHolder]);
const groupedExtensions = useMemo(() => groupExtensions(filteredExtensions)
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => ['installed', 'updates pending', 'all', ...shownLangs].includes(group[LANGUAGE])), [shownLangs, filteredExtensions]);
const flatRenderItems: (IExtension | string)[] = groupedExtensions.flat(2);
const [toasts, makeToast] = makeToaster(useState<React.ReactElement[]>([]));
@@ -110,16 +114,16 @@ export default function MangaExtensions() {
const formData = new FormData();
formData.append('file', file);
// empty the input
// @ts-ignore
document.getElementById('external-extension-file').value = null;
if (inputRef.current) {
inputRef.current.value = '';
}
makeToast('Installing Extension File....', 'info');
client.post('/api/v1/extension/install',
formData, { headers: { 'Content-Type': 'multipart/form-data' } })
.then(() => {
makeToast('Installed extension successfully!', 'success');
triggerUpdate();
mutate();
})
.catch(() => makeToast('Extension installion failed!', 'error'));
} else {
@@ -127,60 +131,43 @@ export default function MangaExtensions() {
}
};
const dropHandler = async (e: Event) => {
e.preventDefault();
const files = await fromEvent(e);
submitExternalExtension(files[0] as File);
};
const dragOverHandler = (e: Event) => {
e.preventDefault();
};
useEffect(() => {
document.addEventListener('drop', dropHandler);
document.addEventListener('dragover', dragOverHandler);
const changeHandler = async (evt: Event) => {
const files = await fromEvent(evt);
const dropHandler = async (e: Event) => {
e.preventDefault();
const files = await fromEvent(e);
submitExternalExtension(files[0] as File);
};
const input = document.getElementById('external-extension-file');
input?.addEventListener('change', changeHandler);
const dragOverHandler = (e: Event) => {
e.preventDefault();
};
document.addEventListener('drop', dropHandler);
document.addEventListener('dragover', dragOverHandler);
return () => {
document.removeEventListener('drop', dropHandler);
document.removeEventListener('dragover', dragOverHandler);
input?.removeEventListener('change', changeHandler);
};
}, [extensionsRaw]); // useEffect only after <input> renders
}, []);
if (extensionsRaw.length === 0) {
if (loading) {
return <LoadingPlaceholder />;
}
const filtered = extensionsRaw.filter((ext) => {
const nsfwFilter = showNsfw || !ext.isNsfw;
if (!query) return nsfwFilter;
return nsfwFilter && ext.name.toLowerCase().includes(query.toLowerCase());
});
const combinedShownLangs = ['installed', 'updates pending', 'all', ...shownLangs];
const groupedExtensions: [string, IExtension[]][] = groupExtensions(filtered)
.filter((group) => group[EXTENSIONS].length > 0)
.filter((group) => combinedShownLangs.includes(group[LANGUAGE]));
const flatRenderItems: (IExtension | string)[] = groupedExtensions.flat(2);
return (
<>
{toasts}
<input
type="file"
id="external-extension-file"
style={{ display: 'none' }}
ref={inputRef}
onChange={(e) => {
const file = e.target.files?.[0];
if (file) {
submitExternalExtension(file);
}
}}
/>
<Virtuoso
style={{
@@ -214,7 +201,7 @@ export default function MangaExtensions() {
key={item.apkName}
extension={item}
notifyInstall={() => {
triggerUpdate();
mutate();
}}
/>
);