Merge branch 'feat/127882-create-modal' into feat/128145-show-page-tree-in-modal

apps/app/src/components/PageEditor/Editor.tsx

@@ -7,16 +7,18 @@ import React, {
 import Dropzone from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import {
-  Modal, ModalHeader, ModalBody,
+  Modal, ModalHeader, ModalBody, Button,
 } from 'reactstrap';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
 import { IEditorSettings } from '~/interfaces/editor-settings';
 import { useDefaultIndentSize } from '~/stores/context';
 import { useEditorSettings } from '~/stores/editor';
+import { useParentPageSelectModal } from '~/stores/modal';
 import { useIsMobile } from '~/stores/ui';
 
 import { IEditorMethods } from '../../interfaces/editor-methods';
+import { ParentPageSelectModal } from '../ParentPageSelectModal';
 
 import AbstractEditor from './AbstractEditor';
 import { Cheatsheet } from './Cheatsheet';
@@ -24,6 +26,7 @@ import CodeMirrorEditor from './CodeMirrorEditor';
 import pasteHelper from './PasteHelper';
 import TextAreaEditor from './TextAreaEditor';
 
+
 import styles from './Editor.module.scss';
 
 export type EditorPropsType = {
@@ -66,6 +69,9 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
   const { data: editorSettings } = useEditorSettings();
   const { data: defaultIndentSize } = useDefaultIndentSize();
   const { data: isMobile } = useIsMobile();
+  const {
+    open: openModal,
+  } = useParentPageSelectModal();
 
   const dropzoneRef = useRef<DropzoneRef>(null);
   // CodeMirrorEditor ref
@@ -335,6 +341,9 @@ const Editor: ForwardRefRenderFunction<IEditorMethods, EditorPropsType> = (props
           }}
         </Dropzone>
 
+        <Button onClick={() => openModal()}>起動！</Button>
+        <ParentPageSelectModal></ParentPageSelectModal>
+
         { isUploadable
           && (
             <button

apps/app/src/components/ParentPageSelectModal.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import {
+  Modal, ModalHeader, ModalBody, ModalFooter, Button,
+} from 'reactstrap';
+
+import { useParentPageSelectModal } from '~/stores/modal';
+
+export const ParentPageSelectModal = (): JSX.Element => {
+  const {
+    data: parentPageSelectModalData,
+    close: closeModal,
+  } = useParentPageSelectModal();
+
+  const { isOpened } = parentPageSelectModalData;
+
+  if (!isOpened) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <Modal
+        isOpen={isOpened}
+        toggle={() => closeModal()}
+        centered={true}
+      >
+        <ModalHeader toggle={() => closeModal()}>モーダル</ModalHeader>
+        <ModalBody >
+        少年老い易く学成り難し
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary">
+          Do Something
+          </Button>{' '}
+          <Button color="secondary">
+          Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </>
+  );
+};

apps/app/src/stores/modal.tsx

@@ -739,3 +739,28 @@ export const useLinkEditModal = (): SWRResponse<LinkEditModalStatus, Error> & Li
     },
   });
 };
+
+/*
+* ParentPageSelectModal
+*/
+type ParentPageSelectModalStatus = {
+  isOpened: boolean;
+}
+
+type ParentPageSelectModalStatusUtils = {
+  open(): Promise<ParentPageSelectModalStatus | undefined>
+  close(): Promise<ParentPageSelectModalStatus | undefined>
+}
+
+export const useParentPageSelectModal = (
+    status?: ParentPageSelectModalStatus,
+): SWRResponse<ParentPageSelectModalStatus, Error> & ParentPageSelectModalStatusUtils => {
+  const initialStatus = { isOpened: false };
+  const swrResponse = useStaticSWR<ParentPageSelectModalStatus, Error>('parentPageSelectModal', status, { fallbackData: initialStatus });
+
+  return {
+    ...swrResponse,
+    open: () => swrResponse.mutate({ isOpened: true }),
+    close: () => swrResponse.mutate({ isOpened: false }),
+  };
+};