Fix/add manga to library without dialog not adding default categories (#632)

* Add default categories when adding manga to library without dialog

* Add manga to library and update categories in one mutation

src/components/manga/MangaDetails.tsx

@@ -193,9 +193,12 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
         }
     }, [manga.source]);
 
-    const addToLibrary = () => {
+    const addToLibrary = (addToCategories: number[] = [], removeFromCategories: number[] = []) => {
         requestManager
-            .updateManga(manga.id, { inLibrary: true })
+            .updateManga(manga.id, {
+                updateManga: { inLibrary: true },
+                updateMangaCategories: { addToCategories, removeFromCategories },
+            })
             .response.then(() => makeToast(t('library.info.label.added_to_library'), 'success'))
             .catch(() => {
                 makeToast(t('library.error.label.add_to_library'), 'error');
@@ -218,7 +221,7 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
 
         const showCategorySelectDialog = showAddToLibraryCategorySelectDialog && !!userCreatedCategories.length;
         if (!showCategorySelectDialog) {
-            addToLibrary();
+            addToLibrary(Categories.getIds(Categories.getDefaults(userCreatedCategories!)));
             return;
         }
 
@@ -226,7 +229,7 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
     };
 
     const removeFromLibrary = () => {
-        Promise.all([requestManager.updateManga(manga.id, { inLibrary: false }).response])
+        Promise.all([requestManager.updateManga(manga.id, { updateManga: { inLibrary: false } }).response])
             .then(() => makeToast(t('library.info.label.removed_from_library'), 'success'))
             .catch(() => {
                 makeToast(t('library.error.label.remove_from_library'), 'error');
@@ -284,11 +287,11 @@ export const MangaDetails: React.FC<IProps> = ({ manga }) => {
             {isCategorySelectOpen && (
                 <CategorySelect
                     open={isCategorySelectOpen}
-                    onClose={(didUpdateCategories) => {
+                    onClose={(didUpdateCategories, addToCategories, removeFromCategories) => {
                         setIsCategorySelectOpen(false);
 
                         if (didUpdateCategories) {
-                            addToLibrary();
+                            addToLibrary(addToCategories, removeFromCategories);
                         }
                     }}
                     mangaId={manga.id}

src/components/navbar/action/CategorySelect.tsx

@@ -28,7 +28,7 @@ import { makeToast } from '@/components/util/Toast.tsx';
 
 type BaseProps = {
     open: boolean;
-    onClose: (didUpdateCategories: boolean) => void;
+    onClose: (didUpdateCategories: boolean, addToCategories?: number[], removeFromCategories?: number[]) => void;
 };
 
 type SingleMangaModeProps = {
@@ -125,8 +125,6 @@ export function CategorySelect(props: Props) {
     };
 
     const handleOk = () => {
-        onClose(true);
-
         const addToCategories = isSingleSelectionMode
             ? categoriesToAdd.filter((categoryId) => !mangaCategoryIds.includes(categoryId))
             : categoriesToAdd;
@@ -134,6 +132,8 @@ export function CategorySelect(props: Props) {
             ? mangaCategoryIds.filter((categoryId) => !categoriesToAdd.includes(categoryId))
             : categoriesToRemove;
 
+        onClose(true, addToCategories, removeFromCategories);
+
         if (doNotShowAddToLibraryDialogAgain) {
             requestUpdateServerMetadata(convertToGqlMeta(serverMetadata)! ?? {}, [
                 ['showAddToLibraryCategorySelectDialog', false],
@@ -145,6 +145,11 @@ export function CategorySelect(props: Props) {
             return;
         }
 
+        if (addToLibrary) {
+            // categories get updated in MangaDetails
+            return;
+        }
+
         Mangas.performAction('change_categories', mangaIds, {
             changeCategoriesPatch: {
                 addToCategories,

src/lib/data/Mangas.ts

@@ -299,9 +299,11 @@ export class Mangas {
                     ? Mangas.migrateCategories(mangaToMigrateData.manga, mangaToMigrateToData.fetchManga.manga)
                     : undefined,
                 !mangaToMigrateToData.fetchManga.manga.inLibrary
-                    ? requestManager.updateManga(mangaIdToMigrateTo, { inLibrary: true }).response
+                    ? requestManager.updateManga(mangaIdToMigrateTo, { updateManga: { inLibrary: true } }).response
+                    : undefined,
+                mode === 'migrate'
+                    ? requestManager.updateManga(mangaId, { updateManga: { inLibrary: false } }).response
                     : undefined,
-                mode === 'migrate' ? requestManager.updateManga(mangaId, { inLibrary: false }).response : undefined,
             ]);
         });
     }

src/lib/graphql/generated/graphql.ts

@@ -2833,10 +2833,12 @@ export type SetMangaMetadataMutation = { __typename?: 'Mutation', setMangaMeta:
 
 export type UpdateMangaMutationVariables = Exact<{
   input: UpdateMangaInput;
+  updateCategoryInput: UpdateMangaCategoriesInput;
+  updateCategories: Scalars['Boolean']['input'];
 }>;
 
 
-export type UpdateMangaMutation = { __typename?: 'Mutation', updateManga: { __typename?: 'UpdateMangaPayload', clientMutationId?: string | null, manga: { __typename?: 'MangaType', id: number, inLibrary: boolean, inLibraryAt: any, categories: { __typename?: 'CategoryNodeList', totalCount: number, nodes: Array<{ __typename?: 'CategoryType', id: number, mangas: { __typename?: 'MangaNodeList', totalCount: number } }> } } } };
+export type UpdateMangaMutation = { __typename?: 'Mutation', updateManga: { __typename?: 'UpdateMangaPayload', clientMutationId?: string | null, manga: { __typename?: 'MangaType', id: number, inLibrary: boolean, inLibraryAt: any } }, updateMangaCategories?: { __typename?: 'UpdateMangaCategoriesPayload', manga: { __typename?: 'MangaType', id: number, categories: { __typename?: 'CategoryNodeList', totalCount: number, nodes: Array<{ __typename?: 'CategoryType', id: number, mangas: { __typename?: 'MangaNodeList', totalCount: number } }> } } } };
 
 export type UpdateMangasMutationVariables = Exact<{
   input: UpdateMangasInput;

src/lib/graphql/mutations/MangaMutation.ts

@@ -99,13 +99,22 @@ export const SET_MANGA_METADATA = gql`
 `;
 
 export const UPDATE_MANGA = gql`
-    mutation UPDATE_MANGA($input: UpdateMangaInput!) {
+    mutation UPDATE_MANGA(
+        $input: UpdateMangaInput!
+        $updateCategoryInput: UpdateMangaCategoriesInput!
+        $updateCategories: Boolean!
+    ) {
         updateManga(input: $input) {
             clientMutationId
             manga {
                 id
                 inLibrary
                 inLibraryAt
+            }
+        }
+        updateMangaCategories(input: $updateCategoryInput) @include(if: $updateCategories) {
+            manga {
+                id
                 categories {
                     nodes {
                         id

src/lib/requests/RequestManager.ts

@@ -1560,13 +1560,17 @@ export class RequestManager {
 
     public updateManga(
         id: number,
-        patch: UpdateMangaPatchInput,
+        patch: { updateManga: UpdateMangaPatchInput; updateMangaCategories?: UpdateMangaCategoriesPatchInput },
         options?: MutationOptions<UpdateMangaMutation, UpdateMangaMutationVariables>,
     ): AbortableApolloMutationResponse<UpdateMangaMutation> {
         const result = this.doRequest<UpdateMangaMutation, UpdateMangaMutationVariables>(
             GQLMethod.MUTATION,
             UPDATE_MANGA,
-            { input: { id, patch } },
+            {
+                input: { id, patch: patch.updateManga },
+                updateCategoryInput: { id, patch: patch.updateMangaCategories ?? {} },
+                updateCategories: !!patch.updateMangaCategories,
+            },
             options,
         );