From 1345cfe62498d0e859f62fc09679295080250578 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 27 Dec 2023 17:20:28 +0100
Subject: [PATCH] Update manga category selection in case categories changed
 (#518)

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 446deeae06b4c8f5f189685969105b185043f0a7
---
 src/components/navbar/action/CategorySelect.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/navbar/action/CategorySelect.tsx b/src/components/navbar/action/CategorySelect.tsx
index 738044d4..62eb5d04 100644
--- a/src/components/navbar/action/CategorySelect.tsx
+++ b/src/components/navbar/action/CategorySelect.tsx
@@ -6,7 +6,7 @@
  * 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 DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
@@ -77,7 +77,7 @@ export function CategorySelect(props: Props) {
     const isSingleSelectionMode = mangaId !== undefined;
     const mangaIds = passedMangaIds ?? [mangaId];
 
-    const mangaCategories = useGetMangaCategoryIds(mangaId);
+    const mangaCategoryIds = useGetMangaCategoryIds(mangaId);
     const { data } = requestManager.useGetCategories();
     const categoriesData = data?.categories.nodes;
 
@@ -95,16 +95,21 @@ export function CategorySelect(props: Props) {
     >(allCategories.length, {
         currentKey: 'categoriesToAdd',
         initialState: {
-            categoriesToAdd: mangaCategories,
+            categoriesToAdd: mangaCategoryIds,
             categoriesToRemove: [],
         },
     });
 
+    useEffect(() => {
+        setSelectionForKey('categoriesToAdd', mangaCategoryIds);
+        setSelectionForKey('categoriesToRemove', []);
+    }, [mangaCategoryIds]);
+
     const categoriesToAdd = getSelectionForKey('categoriesToAdd');
     const categoriesToRemove = getSelectionForKey('categoriesToRemove');
 
     const handleCancel = () => {
-        setSelectionForKey('categoriesToAdd', mangaCategories);
+        setSelectionForKey('categoriesToAdd', mangaCategoryIds);
         setSelectionForKey('categoriesToRemove', []);
         setOpen(false);
     };
@@ -113,10 +118,10 @@ export function CategorySelect(props: Props) {
         setOpen(false);
 
         const addToCategories = isSingleSelectionMode
-            ? categoriesToAdd.filter((categoryId) => !mangaCategories.includes(categoryId))
+            ? categoriesToAdd.filter((categoryId) => !mangaCategoryIds.includes(categoryId))
             : categoriesToAdd;
         const removeFromCategories = isSingleSelectionMode
-            ? mangaCategories.filter((categoryId) => !categoriesToAdd.includes(categoryId))
+            ? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
             : categoriesToRemove;
 
         const isUpdateRequired = !!addToCategories.length || !!removeFromCategories.length;