Return utilities

packages/app/src/components/Fab.jsx

@@ -18,7 +18,7 @@ const Fab = (props) => {
   const { navigationContainer, appContainer } = props;
   const { currentUser } = appContainer;
 
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { open: openCreateModal } = useCreateModalStatus();
 
   const [animateClasses, setAnimateClasses] = useState('invisible');
   const [buttonClasses, setButtonClasses] = useState('');
@@ -56,7 +56,7 @@ const Fab = (props) => {
           <button
             type="button"
             className={`btn btn-lg btn-create-page btn-primary rounded-circle p-0 waves-effect waves-light ${buttonClasses}`}
-            onClick={() => mutateModalStatus({ isOpened: true })}
+            onClick={() => openCreateModal()}
           >
             <CreatePageIcon />
           </button>

packages/app/src/components/Hotkeys/Subscribers/CreatePage.jsx

@@ -5,15 +5,15 @@ import { useCreateModalStatus } from '~/stores/ui';
 
 const CreatePage = React.memo((props) => {
 
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { open: openCreateModal } = useCreateModalStatus();
 
   // setup effect
   useEffect(() => {
-    mutateModalStatus({ isOpened: true });
+    openCreateModal();
 
     // remove this
     props.onDeleteRender(this);
-  }, [mutateModalStatus, props]);
+  }, [openCreateModal, props]);
 
   return <></>;
 });

packages/app/src/components/Navbar/GrowiNavbar.tsx

@@ -20,7 +20,7 @@ type NavbarRightProps = {
 }
 const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
   const { t } = useTranslation();
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { open: openCreateModal } = useCreateModalStatus();
 
   const { currentUser } = props;
 
@@ -35,7 +35,7 @@ const NavbarRight: FC<NavbarRightProps> = memo((props: NavbarRightProps) => {
         <button
           className="px-md-2 nav-link btn-create-page border-0 bg-transparent"
           type="button"
-          onClick={() => mutateModalStatus({ isOpened: true })}
+          onClick={() => openCreateModal()}
         >
           <i className="icon-pencil mr-2"></i>
           <span className="d-none d-lg-block">{ t('New') }</span>

packages/app/src/components/Navbar/GrowiNavbarBottom.jsx

@@ -15,7 +15,7 @@ const GrowiNavbarBottom = (props) => {
 
   const { data: isDrawerOpened, mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { open: openCreateModal } = useCreateModalStatus();
 
   const additionalClasses = ['grw-navbar-bottom'];
   if (isDrawerOpened) {
@@ -40,7 +40,7 @@ const GrowiNavbarBottom = (props) => {
             <a
               role="button"
               className="nav-link btn-lg"
-              onClick={() => mutateModalStatus({ isOpened: true })}
+              onClick={() => openCreateModal()}
             >
               <i className="icon-menu"></i>
             </a>
@@ -59,7 +59,7 @@ const GrowiNavbarBottom = (props) => {
             <a
               role="button"
               className="nav-link btn-lg"
-              onClick={() => mutateModalStatus(true)}
+              onClick={() => openCreateModal(true)}
             >
               <i className="icon-pencil"></i>
             </a>

packages/app/src/components/PageCreateModal.jsx

@@ -24,7 +24,7 @@ const {
 const PageCreateModal = (props) => {
   const { t, appContainer } = props;
 
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { close: closeCreateModal } = useCreateModalStatus();
   const { data: isOpened } = useCreateModalOpened();
   const { data: path } = useCreateModalPath();
 
@@ -275,11 +275,11 @@ const PageCreateModal = (props) => {
     <Modal
       size="lg"
       isOpen={isOpened}
-      toggle={() => mutateModalStatus({ isOpened: false })}
+      toggle={() => closeCreateModal()}
       className="grw-create-page"
       autoFocus={false}
     >
-      <ModalHeader tag="h4" toggle={() => mutateModalStatus({ isOpened: false })} className="bg-primary text-light">
+      <ModalHeader tag="h4" toggle={() => closeCreateModal()} className="bg-primary text-light">
         {t('New Page')}
       </ModalHeader>
       <ModalBody>

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -81,7 +81,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   const { data: targetId } = usePageId();
   const { data, error } = useSWRxPageChildren(isOpen ? page._id : null);
 
-  const { mutate: mutateModalStatus } = useCreateModalStatus();
+  const { open: openCreateModal } = useCreateModalStatus();
 
   const hasChildren = useCallback((): boolean => {
     return currentChildren != null && currentChildren.length > 0;
@@ -92,8 +92,8 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   }, [isOpen]);
 
   const onClickOpenModalButtonHandler = useCallback(() => {
-    mutateModalStatus({ isOpened: true, path: page.path });
-  }, [mutateModalStatus, page]);
+    openCreateModal(page.path);
+  }, [openCreateModal, page]);
 
   // didMount
   useEffect(() => {

packages/app/src/stores/ui.tsx

@@ -235,13 +235,24 @@ export const useSidebarResizeDisabled = (isDisabled?: boolean): SWRResponse<bool
   return useStaticSWR('isSidebarResizeDisabled', isDisabled || null, { fallbackData: initialData });
 };
 
-type ModalStatus = {
+type CreateModalStatus = {
   isOpened: boolean,
   path?: string,
 }
 
-export const useCreateModalStatus = (status?: ModalStatus): SWRResponse<ModalStatus, Error> => {
-  return useStaticSWR('modalStatus', status || null);
+type CreateModalStatusUtils = {
+  open(path?: string): Promise<CreateModalStatus | undefined>
+  close(): Promise<CreateModalStatus | undefined>
+}
+
+export const useCreateModalStatus = (status?: CreateModalStatus): SWRResponse<CreateModalStatus, Error> & CreateModalStatusUtils => {
+  const swrResponse = useStaticSWR<CreateModalStatus, Error>('modalStatus', status || null);
+
+  return {
+    ...swrResponse,
+    open: (path?: string) => swrResponse.mutate({ isOpened: true, path }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
 };
 
 export const useCreateModalOpened = (): SWRResponse<boolean, Error> => {