Merge pull request #7951 from weseek/feat/127486-create-modal-for-page-selection

feat: Create modal

apps/app/src/components/Layout/BasicLayout.tsx

@@ -3,12 +3,17 @@ import React, { ReactNode } from 'react';
 import dynamic from 'next/dynamic';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { Button } from 'reactstrap';
+
+import { useParentPageSelectModal } from '~/stores/modal';
 
 import { GrowiNavbar } from '../Navbar/GrowiNavbar';
+import { ParentPageSelectModal } from '../ParentPageSelectModal';
 import Sidebar from '../Sidebar';
 
 import { RawLayout } from './RawLayout';
 
+
 const AlertSiteUrlUndefined = dynamic(() => import('../AlertSiteUrlUndefined').then(mod => mod.AlertSiteUrlUndefined), { ssr: false });
 const DeleteAttachmentModal = dynamic(() => import('../PageAttachment/DeleteAttachmentModal').then(mod => mod.DeleteAttachmentModal), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
@@ -34,7 +39,12 @@ type Props = {
   className?: string
 }
 
+
 export const BasicLayout = ({ children, className }: Props): JSX.Element => {
+  const {
+    open: openModal,
+  } = useParentPageSelectModal();
+
   return (
     <RawLayout className={className ?? ''}>
       <DndProvider backend={HTML5Backend}>
@@ -70,6 +80,10 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
 
       <ShortcutsModal />
       <SystemVersion showShortcutsButton />
+
+      <Button onClick={() => openModal()}>Open!</Button>
+      <ParentPageSelectModal/>
+      {/* TODO: remove unnecessary code with https://redmine.weseek.co.jp/issues/128327 */}
     </RawLayout>
   );
 };

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

@@ -24,6 +24,7 @@ import CodeMirrorEditor from './CodeMirrorEditor';
 import pasteHelper from './PasteHelper';
 import TextAreaEditor from './TextAreaEditor';
 
+
 import styles from './Editor.module.scss';
 
 export type EditorPropsType = {

apps/app/src/components/ParentPageSelectModal.tsx

@@ -0,0 +1,36 @@
+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?.isOpened ?? false;
+
+  return (
+    <Modal
+      isOpen={isOpened}
+      toggle={() => closeModal()}
+      centered={true}
+    >
+      <ModalHeader toggle={() => closeModal()}>modal</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 }),
+  };
+};