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

Update manga category selection in case categories changed (#518)

Browse Source 
After a manga got added to the library, the category selection dialog did not show the categories the manga got automatically added to.
The selection only got updated after the dialog got closed and opened again

Regression was introduced with 446deeae06
This commit is contained in:
schroda
2023-12-27 17:20:28 +01:00
committed by GitHub
parent 446deeae06
commit 1345cfe624
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/navbar/action/CategorySelect.tsx
View File

@@ -6,7 +6,7 @@
* file, You can obtain one at https://mozilla.org/MPL/2.0/. * file, You can obtain one at https://mozilla.org/MPL/2.0/.
*/ */
import { useMemo } from 'react'; import { useEffect, useMemo } from 'react';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle'; import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent'; import DialogContent from '@mui/material/DialogContent';
@@ -77,7 +77,7 @@ export function CategorySelect(props: Props) {
const isSingleSelectionMode = mangaId !== undefined; const isSingleSelectionMode = mangaId !== undefined;
const mangaIds = passedMangaIds ?? [mangaId]; const mangaIds = passedMangaIds ?? [mangaId];
const mangaCategories = useGetMangaCategoryIds(mangaId); const mangaCategoryIds = useGetMangaCategoryIds(mangaId);
const { data } = requestManager.useGetCategories(); const { data } = requestManager.useGetCategories();
const categoriesData = data?.categories.nodes; const categoriesData = data?.categories.nodes;
@@ -95,16 +95,21 @@ export function CategorySelect(props: Props) {
>(allCategories.length, { >(allCategories.length, {
currentKey: 'categoriesToAdd', currentKey: 'categoriesToAdd',
initialState: { initialState: {
categoriesToAdd: mangaCategories, categoriesToAdd: mangaCategoryIds,
categoriesToRemove: [], categoriesToRemove: [],
}, },
}); });
useEffect(() => {
setSelectionForKey('categoriesToAdd', mangaCategoryIds);
setSelectionForKey('categoriesToRemove', []);
}, [mangaCategoryIds]);
const categoriesToAdd = getSelectionForKey('categoriesToAdd'); const categoriesToAdd = getSelectionForKey('categoriesToAdd');
const categoriesToRemove = getSelectionForKey('categoriesToRemove'); const categoriesToRemove = getSelectionForKey('categoriesToRemove');
const handleCancel = () => { const handleCancel = () => {
setSelectionForKey('categoriesToAdd', mangaCategories); setSelectionForKey('categoriesToAdd', mangaCategoryIds);
setSelectionForKey('categoriesToRemove', []); setSelectionForKey('categoriesToRemove', []);
setOpen(false); setOpen(false);
}; };
@@ -113,10 +118,10 @@ export function CategorySelect(props: Props) {
setOpen(false); setOpen(false);
const addToCategories = isSingleSelectionMode const addToCategories = isSingleSelectionMode
? categoriesToAdd.filter((categoryId) => !mangaCategories.includes(categoryId)) ? categoriesToAdd.filter((categoryId) => !mangaCategoryIds.includes(categoryId))
: categoriesToAdd; : categoriesToAdd;
const removeFromCategories = isSingleSelectionMode const removeFromCategories = isSingleSelectionMode
? mangaCategories.filter((categoryId) => !categoriesToAdd.includes(categoryId)) ? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
: categoriesToRemove; : categoriesToRemove;
const isUpdateRequired = !!addToCategories.length || !!removeFromCategories.length; const isUpdateRequired = !!addToCategories.length || !!removeFromCategories.length;