WIP: migrate hooks for modal

apps/app/src/client/components/Navbar/GrowiContextualSubNavigation.tsx

@@ -22,7 +22,7 @@ import { DropdownItem, UncontrolledTooltip, Tooltip } from 'reactstrap';
 import { exportAsMarkdown, updateContentWidth, syncLatestRevisionBody } from '~/client/services/page-operation';
 import { toastSuccess, toastError, toastWarning } from '~/client/util/toastr';
 import { GroundGlassBar } from '~/components/Navbar/GroundGlassBar';
-import { usePageBulkExportSelectModal } from '~/features/page-bulk-export/client/stores/modal';
+import { usePageBulkExportSelectModalActions } from '~/features/page-bulk-export/client/states/modal';
 import type { OnDuplicatedFunction, OnRenamedFunction, OnDeletedFunction } from '~/interfaces/ui';
 import { useShouldExpandContent } from '~/services/layout/use-should-expand-content';
 import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
@@ -91,7 +91,7 @@ const PageOperationMenuItems = (props: PageOperationMenuItemsProps): JSX.Element
 
   const { open: openPresentationModal } = usePresentationModalActions();
   const { open: openAccessoriesModal } = usePageAccessoriesModalActions();
-  const { open: openPageBulkExportSelectModal } = usePageBulkExportSelectModal();
+  const { open: openPageBulkExportSelectModal } = usePageBulkExportSelectModalActions();
 
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
 

apps/app/src/client/components/PageEditor/DrawioModal.tsx

@@ -4,7 +4,6 @@ import React, {
 
 import { Lang } from '@growi/core';
 import { useCodeMirrorEditorIsolated } from '@growi/editor/dist/client/stores/codemirror-editor';
-import { useDrawioModalForEditor } from '@growi/editor/dist/client/stores/use-drawio';
 import { LoadingSpinner } from '@growi/ui/dist/components';
 import {
   Modal,
@@ -14,6 +13,7 @@ import {
 import { replaceFocusedDrawioWithEditor, getMarkdownDrawioMxfile } from '~/client/components/PageEditor/markdown-drawio-util-for-editor';
 import { useRendererConfig } from '~/states/server-configurations';
 import { useDrawioModalActions, useDrawioModalStatus } from '~/states/ui/modal/drawio';
+import { useDrawioModalForEditorStatus, useDrawioModalForEditorActions } from '~/states/ui/modal/drawio-for-editor';
 import { usePersonalSettings } from '~/stores/personal-settings';
 import loggerFactory from '~/utils/logger';
 
@@ -65,7 +65,8 @@ export const DrawioModal = (): JSX.Element => {
 
   const drawioModalData = useDrawioModalStatus();
   const { close: closeDrawioModal } = useDrawioModalActions();
-  const { data: drawioModalDataInEditor, close: closeDrawioModalInEditor } = useDrawioModalForEditor();
+  const drawioModalDataInEditor = useDrawioModalForEditorStatus();
+  const { close: closeDrawioModalInEditor } = useDrawioModalForEditorActions();
   const editorKey = drawioModalDataInEditor?.editorKey ?? null;
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey);
   const editor = codeMirrorEditor?.view;

apps/app/src/features/page-bulk-export/client/components/PageBulkExportSelectModal.tsx

@@ -5,14 +5,18 @@ import { type JSX, useState } from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastError, toastSuccess } from '~/client/util/toastr';
-import { usePageBulkExportSelectModal } from '~/features/page-bulk-export/client/stores/modal';
-import { PageBulkExportFormat } from '~/features/page-bulk-export/interfaces/page-bulk-export';
 import { useCurrentPagePath } from '~/states/page';
 import { isPdfBulkExportEnabledAtom } from '~/states/server-configurations';
+import { PageBulkExportFormat } from '../../interfaces/page-bulk-export';
+import {
+  usePageBulkExportSelectModalActions,
+  usePageBulkExportSelectModalStatus,
+} from '../states/modal';
 
 const PageBulkExportSelectModal = (): JSX.Element => {
   const { t } = useTranslation();
-  const { data: status, close } = usePageBulkExportSelectModal();
+  const status = usePageBulkExportSelectModalStatus();
+  const { close } = usePageBulkExportSelectModalActions();
   const currentPagePath = useCurrentPagePath();
   const isPdfBulkExportEnabled = useAtomValue(isPdfBulkExportEnabledAtom);
 

apps/app/src/features/page-bulk-export/client/states/modal.tsx

@@ -0,0 +1,26 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+type PageBulkExportSelectModalState = {
+  isOpened: boolean;
+};
+
+const pageBulkExportSelectModalAtom = atom<PageBulkExportSelectModalState>({
+  isOpened: false,
+});
+
+export const usePageBulkExportSelectModalStatus = () => {
+  return useAtomValue(pageBulkExportSelectModalAtom);
+};
+
+export const usePageBulkExportSelectModalActions = () => {
+  const setModalState = useSetAtom(pageBulkExportSelectModalAtom);
+
+  return {
+    open: () => {
+      setModalState({ isOpened: true });
+    },
+    close: () => {
+      setModalState({ isOpened: false });
+    },
+  };
+};

apps/app/src/features/page-bulk-export/client/stores/modal.tsx

@@ -1,35 +0,0 @@
-import type { SWRResponse } from 'swr';
-
-import { useStaticSWR } from '../../../../stores/use-static-swr';
-
-type PageBulkExportSelectModalStatus = {
-  isOpened: boolean;
-};
-
-type PageBulkExportSelectModalUtils = {
-  open(): Promise<void>;
-  close(): Promise<void>;
-};
-
-export const usePageBulkExportSelectModal = (): SWRResponse<
-  PageBulkExportSelectModalStatus,
-  Error
-> &
-  PageBulkExportSelectModalUtils => {
-  const initialStatus: PageBulkExportSelectModalStatus = { isOpened: false };
-  const swrResponse = useStaticSWR<PageBulkExportSelectModalStatus, Error>(
-    'pageBulkExportSelectModal',
-    undefined,
-    { fallbackData: initialStatus },
-  );
-
-  return {
-    ...swrResponse,
-    async open() {
-      await swrResponse.mutate({ isOpened: true });
-    },
-    async close() {
-      await swrResponse.mutate({ isOpened: false });
-    },
-  };
-};

apps/app/src/states/ui/modal/drawio-for-editor.ts

@@ -0,0 +1,28 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+type DrawioModalForEditorState = {
+  isOpened: boolean;
+  editorKey?: string;
+};
+
+const drawioModalForEditorAtom = atom<DrawioModalForEditorState>({
+  isOpened: false,
+  editorKey: undefined,
+});
+
+export const useDrawioModalForEditorStatus = () => {
+  return useAtomValue(drawioModalForEditorAtom);
+};
+
+export const useDrawioModalForEditorActions = () => {
+  const setModalState = useSetAtom(drawioModalForEditorAtom);
+
+  return {
+    open: (editorKey: string) => {
+      setModalState({ isOpened: true, editorKey });
+    },
+    close: () => {
+      setModalState({ isOpened: false, editorKey: undefined });
+    },
+  };
+};

apps/app/src/states/ui/modal/link-edit.ts

@@ -0,0 +1,35 @@
+import type { Linker } from '@growi/editor/dist/models';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+type LinkEditModalState = {
+  isOpened: boolean;
+  defaultMarkdownLink?: Linker;
+  onSave?: (linkText: string) => void;
+};
+
+const linkEditModalAtom = atom<LinkEditModalState>({
+  isOpened: false,
+  defaultMarkdownLink: undefined,
+  onSave: undefined,
+});
+
+export const useLinkEditModalStatus = () => {
+  return useAtomValue(linkEditModalAtom);
+};
+
+export const useLinkEditModalActions = () => {
+  const setModalState = useSetAtom(linkEditModalAtom);
+
+  return {
+    open: (defaultMarkdownLink: Linker, onSave: (linkText: string) => void) => {
+      setModalState({ isOpened: true, defaultMarkdownLink, onSave });
+    },
+    close: () => {
+      setModalState({
+        isOpened: false,
+        defaultMarkdownLink: undefined,
+        onSave: undefined,
+      });
+    },
+  };
+};

apps/app/src/states/ui/modal/template.ts

@@ -0,0 +1,33 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+type TemplateSelectedCallback = (templateText: string) => void;
+
+type TemplateModalOptions = {
+  onSubmit?: TemplateSelectedCallback;
+};
+
+export type TemplateModalState = TemplateModalOptions & {
+  isOpened: boolean;
+};
+
+const templateModalAtom = atom<TemplateModalState>({
+  isOpened: false,
+  onSubmit: undefined,
+});
+
+export const useTemplateModalStatus = () => {
+  return useAtomValue(templateModalAtom);
+};
+
+export const useTemplateModalActions = () => {
+  const setModalState = useSetAtom(templateModalAtom);
+
+  return {
+    open: (opts: TemplateModalOptions) => {
+      setModalState({ isOpened: true, onSubmit: opts.onSubmit });
+    },
+    close: () => {
+      setModalState({ isOpened: false, onSubmit: undefined });
+    },
+  };
+};

apps/app/src/stores/modal.tsx

@@ -1,139 +1,2 @@
-import { useCallback } from 'react';
-
-import type {
-  IAttachmentHasId, IUserGroupHasId,
-} from '@growi/core';
-import { useSWRStatic } from '@growi/core/dist/swr';
-import type { SWRResponse } from 'swr';
-
-import type { BookmarkFolderItems } from '~/interfaces/bookmark-info';
-import type {
-  onDeletedBookmarkFolderFunction,
-} from '~/interfaces/ui';
-import loggerFactory from '~/utils/logger';
-
-const logger = loggerFactory('growi:stores:modal');
-
-
-/*
- * UpdateUserGroupConfirmModal
- */
-type UpdateUserGroupConfirmModalStatus = {
-  isOpened: boolean,
-  targetGroup?: IUserGroupHasId,
-  updateData?: Partial<IUserGroupHasId>,
-  onConfirm?: (targetGroup: IUserGroupHasId, updateData: Partial<IUserGroupHasId>, forceUpdateParents: boolean) => any,
-}
-
-type UpdateUserGroupConfirmModalUtils = {
-  open(targetGroup: IUserGroupHasId, updateData: Partial<IUserGroupHasId>, onConfirm?: (...args: any[]) => any): Promise<void>,
-  close(): Promise<void>,
-}
-
-export const useUpdateUserGroupConfirmModal = (): SWRResponse<UpdateUserGroupConfirmModalStatus, Error> & UpdateUserGroupConfirmModalUtils => {
-
-  const initialStatus: UpdateUserGroupConfirmModalStatus = { isOpened: false };
-  const swrResponse = useSWRStatic<UpdateUserGroupConfirmModalStatus, Error>('updateParentConfirmModal', undefined, { fallbackData: initialStatus });
-
-  return {
-    ...swrResponse,
-    async open(targetGroup: IUserGroupHasId, updateData: Partial<IUserGroupHasId>, onConfirm?: (...args: any[]) => any) {
-      await swrResponse.mutate({
-        isOpened: true, targetGroup, updateData, onConfirm,
-      });
-    },
-    async close() {
-      await swrResponse.mutate({ isOpened: false });
-    },
-  };
-};
-
-
-/*
-* BookmarkFolderDeleteModal
-*/
-export type IDeleteBookmarkFolderModalOption = {
-  onDeleted?: onDeletedBookmarkFolderFunction,
-}
-
-type DeleteBookmarkFolderModalStatus = {
-  isOpened: boolean,
-  bookmarkFolder?: BookmarkFolderItems,
-  opts?: IDeleteBookmarkFolderModalOption,
-}
-
-type DeleteModalBookmarkFolderStatusUtils = {
-  open(
-    bookmarkFolder?: BookmarkFolderItems,
-    opts?: IDeleteBookmarkFolderModalOption,
-  ): Promise<DeleteBookmarkFolderModalStatus | undefined>,
-  close(): Promise<DeleteBookmarkFolderModalStatus | undefined>,
-}
-
-export const useBookmarkFolderDeleteModal = (status?: DeleteBookmarkFolderModalStatus):
-  SWRResponse<DeleteBookmarkFolderModalStatus, Error> & DeleteModalBookmarkFolderStatusUtils => {
-  const initialData: DeleteBookmarkFolderModalStatus = {
-    isOpened: false,
-  };
-  const swrResponse = useSWRStatic<DeleteBookmarkFolderModalStatus, Error>('deleteBookmarkFolderModalStatus', status, { fallbackData: initialData });
-
-  return {
-    ...swrResponse,
-    open: (
-        bookmarkFolder?: BookmarkFolderItems,
-        opts?: IDeleteBookmarkFolderModalOption,
-    ) => swrResponse.mutate({
-      isOpened: true, bookmarkFolder, opts,
-    }),
-    close: () => swrResponse.mutate({ isOpened: false }),
-  };
-};
-
-/**
- * DeleteAttachmentModal
- */
-type Remove =
-  (body: {
-    attachment_id: string;
-  }) => Promise<void>
-
-type DeleteAttachmentModalStatus = {
-  isOpened: boolean,
-  attachment?: IAttachmentHasId,
-  remove?: Remove,
-}
-
-type DeleteAttachmentModalUtils = {
-  open(
-    attachment: IAttachmentHasId,
-    remove: Remove,
-  ): void,
-  close(): void,
-}
-
-export const useDeleteAttachmentModal = (): SWRResponse<DeleteAttachmentModalStatus, Error> & DeleteAttachmentModalUtils => {
-  const initialStatus: DeleteAttachmentModalStatus = {
-    isOpened: false,
-    attachment: undefined,
-    remove: undefined,
-  };
-  const swrResponse = useSWRStatic<DeleteAttachmentModalStatus, Error>('deleteAttachmentModal', undefined, { fallbackData: initialStatus });
-  const { mutate } = swrResponse;
-
-  const open = useCallback((attachment: IAttachmentHasId, remove: Remove) => {
-    mutate({ isOpened: true, attachment, remove });
-  }, [mutate]);
-  const close = useCallback(() => {
-    mutate({ isOpened: false });
-  }, [mutate]);
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};
-
-/*
-* OverwriteMergeModeModal
-*/
+// This file has been migrated to Jotai atoms in ~/states/ui/modal/
+// All modal implementations are now located there