create hooks for using modal

apps/app/src/components/ModalForParentPageSelection.tsx

@@ -1,31 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  Modal, ModalHeader, ModalBody, ModalFooter, Button,
-} from 'reactstrap';
-
-export const ModalForParentPageSelection = () => {
-  const [modal, setModal] = useState(false);
-
-  const toggle = () => setModal(!modal);
-
-  return (
-    <>
-      <Button color="primary" onClick={toggle}>起動！</Button>
-      <Modal isOpen={modal} toggle={toggle} centered="true">
-        <ModalHeader toggle={toggle}>Modal Title</ModalHeader>
-        <ModalBody>
-          明日には明日の風が吹く
-        </ModalBody>
-        <ModalFooter>
-          <Button color="primary" onClick={toggle}>
-            Do Something
-          </Button>{' '}
-          <Button color="secondary" onClick={toggle}>
-            Cancel
-          </Button>
-        </ModalFooter>
-      </Modal>
-    </>
-  );
-};

apps/app/src/components/ParentPageSelectModal.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter, Button,
+} from 'reactstrap';
+
+import { useParentPageSelectModal } from '~/stores/modal';
+
+export const ParentPageSelectModal = () => {
+  const {
+    data, error, open, close,
+  } = useParentPageSelectModal();
+
+  const {
+    data: parentPageSelectModalData, open: openModal, close: closeModal,
+  } = useParentPageSelectModal();
+  const { isOpened } = parentPageSelectModalData;
+
+  if (error) {
+    // エラーが発生した場合の処理
+  }
+
+  if (!isOpened) {
+    // modalが開いていないときの処理
+  }
+  else {
+    // modalが開いている時の処理
+  }
+};

apps/app/src/stores/modal.tsx

@@ -739,3 +739,14 @@ export const useLinkEditModal = (): SWRResponse<LinkEditModalStatus, Error> & Li
     },
   });
 };
+
+export const useParentPageSelectModal = () => {
+  const initialStatus = { isOpened: false };
+  const swrResponse = useStaticSWR('parentPageSelectModal', undefined, { fallbackData: initialStatus });
+
+  return {
+    ...swrResponse,
+    open: () => swrResponse.mutate({ isOpened: true }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
+};