handle createAndTransit as a callback in GrantedGroupsInheritanceSelectModal

apps/app/src/client/services/create-page/use-create-page-and-transit.tsx

@@ -50,7 +50,7 @@ export const useCreatePageAndTransit: UseCreatePageAndTransit = () => {
 
   const { data: currentPagePath } = useCurrentPagePath();
   const { mutate: mutateEditorMode } = useEditorMode();
-  const { open: openGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModal();
+  const { open: openGrantedGroupsInheritanceSelectModal, close: closeGrantedGroupsInheritanceSelectModal } = useGrantedGroupsInheritanceSelectModal();
 
   const [isCreating, setCreating] = useState(false);
 
@@ -78,6 +78,7 @@ export const useCreatePageAndTransit: UseCreatePageAndTransit = () => {
         }
       }
       catch (err) {
+        onAborted?.();
         throw err;
       }
       finally {
@@ -85,44 +86,52 @@ export const useCreatePageAndTransit: UseCreatePageAndTransit = () => {
       }
     }
 
+    const _createAndTransit = async(onlyInheritUserRelatedGrantedGroups?: boolean) => {
+      try {
+        setCreating(true);
+        onCreationStart?.();
+
+        params.onlyInheritUserRelatedGrantedGroups = onlyInheritUserRelatedGrantedGroups;
+        const response = await createPage(params);
+
+        closeGrantedGroupsInheritanceSelectModal();
+
+        await router.push(`/${response.page._id}#edit`);
+        mutateEditorMode(EditorMode.Editor);
+
+        onCreated?.();
+      }
+      catch (err) {
+        onAborted?.();
+        throw err;
+      }
+      finally {
+        onTerminated?.();
+        setCreating(false);
+      }
+    };
+
     // If parent page is granted to non-user-related groups, let the user select whether or not to inherit them.
-    // Once selected, the request with same params(+ onlyInheritUserRelatedGrantedGroups) and opts will be sent here.
-    if (params.parentPath != null && params?.onlyInheritUserRelatedGrantedGroups == null) {
+    if (params.parentPath != null) {
       try {
         const { isNonUserRelatedGroupsGranted } = await getIsNonUserRelatedGroupsGranted(params.parentPath);
         if (isNonUserRelatedGroupsGranted) {
-          openGrantedGroupsInheritanceSelectModal(params, opts);
-          onAborted?.();
+          // create and transit request will be made from modal
+          openGrantedGroupsInheritanceSelectModal(_createAndTransit);
           return;
         }
       }
       catch (err) {
         // Do not throw error when the parent page is empty, since empty parent page could be created on create request
-        if (err[0]?.code !== 'page_unreachable_or_empty') throw err;
+        if (err[0]?.code !== 'page_unreachable_or_empty') {
+          onAborted?.();
+          throw err;
+        }
       }
     }
 
-    // create and transit
-    try {
-      setCreating(true);
-      onCreationStart?.();
-
-      const response = await createPage(params);
-
-      await router.push(`/${response.page._id}#edit`);
-      mutateEditorMode(EditorMode.Editor);
-
-      onCreated?.();
-    }
-    catch (err) {
-      throw err;
-    }
-    finally {
-      onTerminated?.();
-      setCreating(false);
-    }
-
-  }, [currentPagePath, mutateEditorMode, router, openGrantedGroupsInheritanceSelectModal]);
+    await _createAndTransit();
+  }, [currentPagePath, mutateEditorMode, router, openGrantedGroupsInheritanceSelectModal, closeGrantedGroupsInheritanceSelectModal]);
 
   return {
     isCreating,

apps/app/src/components/GrantedGroupsInheritanceSelectModal.tsx

@@ -5,26 +5,18 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { useCreatePageAndTransit } from '~/client/services/create-page';
 import { useGrantedGroupsInheritanceSelectModal } from '~/stores/modal';
 
 export const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
   const { t } = useTranslation();
   const { data: modalData, close: closeModal } = useGrantedGroupsInheritanceSelectModal();
   const [onlyInheritUserRelatedGrantedGroups, setOnlyInheritUserRelatedGrantedGroups] = useState(false);
-  const { createAndTransit } = useCreatePageAndTransit();
 
-  const params = modalData?.params;
-  const opts = modalData?.opts;
-  const isOpened = modalData?.isOpened ?? false;
-
-  const onCreateBtnClick = () => {
-    if (params != null) {
-      params.onlyInheritUserRelatedGrantedGroups = onlyInheritUserRelatedGrantedGroups;
-      createAndTransit(params, opts);
-    }
-    closeModal();
+  const onCreateBtnClick = async() => {
+    await modalData?.onCreateBtnClick?.(onlyInheritUserRelatedGrantedGroups);
+    setOnlyInheritUserRelatedGrantedGroups(false); // reset to false after create request
   };
+  const isOpened = modalData?.isOpened ?? false;
 
   return (
     <Modal
@@ -66,7 +58,9 @@ export const GrantedGroupsInheritanceSelectModal = (): JSX.Element => {
       </ModalBody>
       <ModalFooter className="grw-modal-footer">
         <button type="button" className="me-2 btn btn-secondary" onClick={() => closeModal()}>{t('Cancel')}</button>
-        <button className="btn btn-primary" type="button" onClick={onCreateBtnClick}>{t('modal_granted_groups_inheritance_select.create_page')}</button>
+        <button className="btn btn-primary" type="button" onClick={onCreateBtnClick}>
+          {t('modal_granted_groups_inheritance_select.create_page')}
+        </button>
       </ModalFooter>
     </Modal>
   );

apps/app/src/stores/modal.tsx

@@ -49,12 +49,11 @@ export const usePageCreateModal = (status?: CreateModalStatus): SWRResponse<Crea
 */
 type GrantedGroupsInheritanceSelectModalStatus = {
   isOpened: boolean,
-  params?: IApiv3PageCreateParams,
-  opts?: CreatePageAndTransitOpts,
+  onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>,
 }
 
 type GrantedGroupsInheritanceSelectModalStatusUtils = {
-  open(params?: IApiv3PageCreateParams, opts?: CreatePageAndTransitOpts): Promise<GrantedGroupsInheritanceSelectModalStatus | undefined>
+  open(onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>): Promise<GrantedGroupsInheritanceSelectModalStatus | undefined>
   close(): Promise<GrantedGroupsInheritanceSelectModalStatus | undefined>
 }
 
@@ -70,7 +69,9 @@ export const useGrantedGroupsInheritanceSelectModal = (
 
   return {
     ...swrResponse,
-    open: useCallback((params?: IApiv3PageCreateParams, opts?: CreatePageAndTransitOpts) => mutate({ isOpened: true, params, opts }), [mutate]),
+    open: useCallback(
+      (onCreateBtnClick?: (onlyInheritUserRelatedGrantedGroups?: boolean) => Promise<void>) => mutate({ isOpened: true, onCreateBtnClick }), [mutate],
+    ),
     close: useCallback(() => mutate({ isOpened: false }), [mutate]),
   };
 };