diff --git a/src/components/collection/useSelectableCollection.ts b/src/components/collection/useSelectableCollection.ts index 0bcffb8d..bebf0090 100644 --- a/src/components/collection/useSelectableCollection.ts +++ b/src/components/collection/useSelectableCollection.ts @@ -19,6 +19,7 @@ export type SelectableCollectionReturnType void; setSelectionForKey: (key: Key, itemIds: Id[]) => void; getSelectionForKey: (key: Key) => Id[]; + clearSelection: () => void; }; export const useSelectableCollection = ( @@ -35,7 +36,7 @@ export const useSelectableCollection = => { const [keyToSelectedItemIds, setKeyToSelectedItemIds] = useState>(initialState); - const selectedItemIds = Object.values(keyToSelectedItemIds).flat(); + const selectedItemIds = [...new Set(Object.values(keyToSelectedItemIds).flat())]; const areAllItemsSelected = selectedItemIds.length === totalCount; const areNoItemsSelected = !selectedItemIds.length; @@ -48,7 +49,7 @@ export const useSelectableCollection = ({ ...prevState, - [key]: prevState[key].filter((selectedItemId) => selectedItemId !== id), + [key]: prevState[key]?.filter((selectedItemId) => selectedItemId !== id) ?? [], })); return; } @@ -79,11 +80,18 @@ export const useSelectableCollection = { - keyToSelectedItemIds[key] = itemIds; + setKeyToSelectedItemIds((prevState) => ({ + ...prevState, + [key]: [...itemIds], + })); }; const getSelectionForKey = (key: Key) => keyToSelectedItemIds[key]; + const clearSelection = () => { + setKeyToSelectedItemIds({}); + }; + return { selectedItemIds, keySelectedItemIds, @@ -95,5 +103,6 @@ export const useSelectableCollection = { - console.log('MangaActionMenuItem', manga); Mangas.performAction(action, manga ? [manga.id] : Mangas.getIds(mangas), { wasManuallyMarkedAsRead: true, }).catch(defaultPromiseErrorHandler(`MangaActionMenuItems:performAction(${action})`)); diff --git a/src/screens/Library.tsx b/src/screens/Library.tsx index d66004dd..46cdfd2b 100644 --- a/src/screens/Library.tsx +++ b/src/screens/Library.tsx @@ -75,6 +75,7 @@ export function Library() { selectedItemIds, handleSelectAll, handleSelection, + clearSelection, } = useSelectableCollection(mangas.length, { currentKey: activeTab?.id.toString() }); const handleSelect = (id: number, selected: boolean) => { @@ -108,6 +109,9 @@ export function Library() { onClose={(selectionModeState) => { handleClose(); setIsSelectModeActive(selectionModeState); + if (!selectionModeState) { + clearSelection(); + } }} setHideMenu={setHideMenu} />