WIP: migrate hooks for modal

apps/app/src/client/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -6,7 +6,7 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
+import { useUpdateUserGroupConfirmModalStatus, useUpdateUserGroupConfirmModalActions } from '~/states/ui/modal/update-user-group-confirm';
 
 
 export const UpdateParentConfirmModal: FC = () => {
@@ -14,7 +14,8 @@ export const UpdateParentConfirmModal: FC = () => {
 
   const [isForceUpdate, setForceUpdate] = useState(false);
 
-  const { data: modalStatus, close: closeModal } = useUpdateUserGroupConfirmModal();
+  const modalStatus = useUpdateUserGroupConfirmModalStatus();
+  const { close: closeModal } = useUpdateUserGroupConfirmModalActions();
 
   if (modalStatus == null) {
     closeModal();

apps/app/src/client/components/Admin/UserGroupDetail/UserGroupDetailPage.tsx

@@ -20,7 +20,7 @@ import type { IExternalUserGroupHasId } from '~/features/external-user-group/int
 import type { PageActionOnGroupDelete, SearchType } from '~/interfaces/user-group';
 import { SearchTypes } from '~/interfaces/user-group';
 import { isAclEnabledAtom } from '~/states/server-configurations';
-import { useUpdateUserGroupConfirmModal } from '~/stores/modal';
+import { useUpdateUserGroupConfirmModalActions } from '~/states/ui/modal/update-user-group-confirm';
 import { useSWRxUserGroupPages, useSWRxSelectableParentUserGroups, useSWRxSelectableChildUserGroups } from '~/stores/user-group';
 import loggerFactory from '~/utils/logger';
 
@@ -107,7 +107,7 @@ const UserGroupDetailPage = (props: Props): JSX.Element => {
 
   const isAclEnabled = useAtomValue(isAclEnabledAtom);
 
-  const { open: openUpdateParentConfirmModal } = useUpdateUserGroupConfirmModal();
+  const { open: openUpdateParentConfirmModal } = useUpdateUserGroupConfirmModalActions();
 
   const parentUserGroup = (() => {
     if (isExternalGroup) {

apps/app/src/client/components/Bookmarks/BookmarkFolderItem.tsx

@@ -12,7 +12,7 @@ import { toastError } from '~/client/util/toastr';
 import type { BookmarkFolderItems, DragItemDataType, DragItemType } from '~/interfaces/bookmark-info';
 import { DRAG_ITEM_TYPE } from '~/interfaces/bookmark-info';
 import type { onDeletedBookmarkFolderFunction } from '~/interfaces/ui';
-import { useBookmarkFolderDeleteModal } from '~/stores/modal';
+import { useDeleteBookmarkFolderModalActions } from '~/states/ui/modal/delete-bookmark-folder';
 
 import { BookmarkFolderItemControl } from './BookmarkFolderItemControl';
 import { BookmarkFolderNameInput } from './BookmarkFolderNameInput';
@@ -49,7 +49,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
   const [isRenameAction, setIsRenameAction] = useState<boolean>(false);
   const [isCreateAction, setIsCreateAction] = useState<boolean>(false);
 
-  const { open: openDeleteBookmarkFolderModal } = useBookmarkFolderDeleteModal();
+  const { open: openDeleteBookmarkFolderModal } = useDeleteBookmarkFolderModalActions();
 
   const childrenExists = hasChildren({ childFolder, bookmarks });
 

apps/app/src/client/components/DeleteBookmarkFolderModal.tsx

@@ -10,12 +10,13 @@ import {
 import { FolderIcon } from '~/client/components/Icons/FolderIcon';
 import { deleteBookmarkFolder } from '~/client/util/bookmark-utils';
 import { toastError } from '~/client/util/toastr';
-import { useBookmarkFolderDeleteModal } from '~/stores/modal';
+import { useDeleteBookmarkFolderModalStatus, useDeleteBookmarkFolderModalActions } from '~/states/ui/modal/delete-bookmark-folder';
 
 
 const DeleteBookmarkFolderModal: FC = () => {
   const { t } = useTranslation();
-  const { data: deleteBookmarkFolderModalData, close: closeBookmarkFolderDeleteModal } = useBookmarkFolderDeleteModal();
+  const deleteBookmarkFolderModalData = useDeleteBookmarkFolderModalStatus();
+  const { close: closeBookmarkFolderDeleteModal } = useDeleteBookmarkFolderModalActions();
   const isOpened = deleteBookmarkFolderModalData?.isOpened ?? false;
 
   async function deleteBookmark() {

apps/app/src/client/components/PageAccessoriesModal/PageAttachment.tsx

@@ -7,8 +7,8 @@ import { LoadingSpinner } from '@growi/ui/dist/components';
 
 import { useIsGuestUser, useIsReadOnlyUser } from '~/states/context';
 import { useCurrentPageData, useCurrentPageId } from '~/states/page';
+import { useDeleteAttachmentModalActions } from '~/states/ui/modal/delete-attachment';
 import { useSWRxAttachments } from '~/stores/attachment';
-import { useDeleteAttachmentModal } from '~/stores/modal';
 
 import { PageAttachmentList } from '../PageAttachment/PageAttachmentList';
 import PaginationWrapper from '../PaginationWrapper';
@@ -33,7 +33,7 @@ const PageAttachment = (): JSX.Element => {
 
   // SWRs
   const { data: dataAttachments, remove } = useSWRxAttachments(pageId, pageNumber);
-  const { open: openDeleteAttachmentModal } = useDeleteAttachmentModal();
+  const { open: openDeleteAttachmentModal } = useDeleteAttachmentModalActions();
   const markdown = currentPage?.revision?.body;
 
   // Custom hooks

apps/app/src/client/components/PageAttachment/DeleteAttachmentModal.tsx

@@ -9,7 +9,7 @@ import {
 } from 'reactstrap';
 
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { useDeleteAttachmentModal } from '~/stores/modal';
+import { useDeleteAttachmentModalStatus, useDeleteAttachmentModalActions } from '~/states/ui/modal/delete-attachment';
 import loggerFactory from '~/utils/logger';
 
 import { Username } from '../../../components/User/Username';
@@ -27,7 +27,8 @@ export const DeleteAttachmentModal: React.FC = () => {
   const [deleteError, setDeleteError] = useState<string>('');
 
   const { t } = useTranslation();
-  const { data: deleteAttachmentModal, close: closeDeleteAttachmentModal } = useDeleteAttachmentModal();
+  const deleteAttachmentModal = useDeleteAttachmentModalStatus();
+  const { close: closeDeleteAttachmentModal } = useDeleteAttachmentModalActions();
   const isOpen = deleteAttachmentModal?.isOpened;
   const attachment = deleteAttachmentModal?.attachment;
   const remove = deleteAttachmentModal?.remove;

apps/app/src/client/components/ReactMarkdownComponents/RichAttachment.tsx

@@ -6,8 +6,8 @@ import Image from 'next/image';
 import prettyBytes from 'pretty-bytes';
 
 import { useIsGuestUser, useIsReadOnlyUser, useIsSharedUser } from '~/states/context';
+import { useDeleteAttachmentModalActions } from '~/states/ui/modal/delete-attachment';
 import { useSWRxAttachment } from '~/stores/attachment';
-import { useDeleteAttachmentModal } from '~/stores/modal';
 
 import styles from './RichAttachment.module.scss';
 
@@ -21,7 +21,7 @@ export const RichAttachment = React.memo((props: RichAttachmentProps) => {
   const { attachmentId, attachmentName } = props;
   const { t } = useTranslation();
   const { data: attachment, remove } = useSWRxAttachment(attachmentId);
-  const { open: openDeleteAttachmentModal } = useDeleteAttachmentModal();
+  const { open: openDeleteAttachmentModal } = useDeleteAttachmentModalActions();
 
   const isGuestUser = useIsGuestUser();
   const isSharedUser = useIsSharedUser();

apps/app/src/states/ui/modal/delete-attachment.ts

@@ -0,0 +1,54 @@
+import type { IAttachmentHasId } from '@growi/core';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+type Remove = (body: { attachment_id: string }) => Promise<void>;
+
+export type DeleteAttachmentModalStatus = {
+  isOpened: boolean;
+  attachment?: IAttachmentHasId;
+  remove?: Remove;
+};
+
+export type DeleteAttachmentModalActions = {
+  open: (attachment: IAttachmentHasId, remove: Remove) => void;
+  close: () => void;
+};
+
+// Atom for delete attachment modal state
+const deleteAttachmentModalAtom = atom<DeleteAttachmentModalStatus>({
+  isOpened: false,
+  attachment: undefined,
+  remove: undefined,
+});
+
+/**
+ * Hook for managing delete attachment modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const useDeleteAttachmentModalStatus =
+  (): DeleteAttachmentModalStatus => {
+    return useAtomValue(deleteAttachmentModalAtom);
+  };
+
+/**
+ * Hook for managing delete attachment modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const useDeleteAttachmentModalActions =
+  (): DeleteAttachmentModalActions => {
+    const setStatus = useSetAtom(deleteAttachmentModalAtom);
+
+    const open = useCallback(
+      (attachment: IAttachmentHasId, remove: Remove) => {
+        setStatus({ isOpened: true, attachment, remove });
+      },
+      [setStatus],
+    );
+
+    const close = useCallback(() => {
+      setStatus({ isOpened: false, attachment: undefined, remove: undefined });
+    }, [setStatus]);
+
+    return { open, close };
+  };

apps/app/src/states/ui/modal/delete-bookmark-folder.ts

@@ -0,0 +1,66 @@
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+import type { BookmarkFolderItems } from '../../../interfaces/bookmark-info';
+import type { onDeletedBookmarkFolderFunction } from '../../../interfaces/ui';
+
+type IDeleteBookmarkFolderModalOption = {
+  onDeleted?: onDeletedBookmarkFolderFunction;
+};
+
+export type DeleteBookmarkFolderModalStatus = {
+  isOpened: boolean;
+  bookmarkFolder?: BookmarkFolderItems;
+  opts?: IDeleteBookmarkFolderModalOption;
+};
+
+export type DeleteBookmarkFolderModalActions = {
+  open: (
+    bookmarkFolder?: BookmarkFolderItems,
+    opts?: IDeleteBookmarkFolderModalOption,
+  ) => void;
+  close: () => void;
+};
+
+// Atom for delete bookmark folder modal state
+const deleteBookmarkFolderModalAtom = atom<DeleteBookmarkFolderModalStatus>({
+  isOpened: false,
+});
+
+/**
+ * Hook for managing delete bookmark folder modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const useDeleteBookmarkFolderModalStatus =
+  (): DeleteBookmarkFolderModalStatus => {
+    return useAtomValue(deleteBookmarkFolderModalAtom);
+  };
+
+/**
+ * Hook for managing delete bookmark folder modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const useDeleteBookmarkFolderModalActions =
+  (): DeleteBookmarkFolderModalActions => {
+    const setStatus = useSetAtom(deleteBookmarkFolderModalAtom);
+
+    const open = useCallback(
+      (
+        bookmarkFolder?: BookmarkFolderItems,
+        opts?: IDeleteBookmarkFolderModalOption,
+      ) => {
+        setStatus({ isOpened: true, bookmarkFolder, opts });
+      },
+      [setStatus],
+    );
+
+    const close = useCallback(() => {
+      setStatus({
+        isOpened: false,
+        bookmarkFolder: undefined,
+        opts: undefined,
+      });
+    }, [setStatus]);
+
+    return { open, close };
+  };

apps/app/src/states/ui/modal/update-user-group-confirm.ts

@@ -0,0 +1,70 @@
+import type { IUserGroupHasId } from '@growi/core';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback } from 'react';
+
+export type UpdateUserGroupConfirmModalStatus = {
+  isOpened: boolean;
+  targetGroup?: IUserGroupHasId;
+  updateData?: Partial<IUserGroupHasId>;
+  onConfirm?: (
+    targetGroup: IUserGroupHasId,
+    updateData: Partial<IUserGroupHasId>,
+    forceUpdateParents: boolean,
+  ) => Promise<void>;
+};
+
+export type UpdateUserGroupConfirmModalActions = {
+  open: (
+    targetGroup: IUserGroupHasId,
+    updateData: Partial<IUserGroupHasId>,
+    onConfirm?: (...args: unknown[]) => Promise<void>,
+  ) => void;
+  close: () => void;
+};
+
+// Atom for update user group confirm modal state
+const updateUserGroupConfirmModalAtom = atom<UpdateUserGroupConfirmModalStatus>(
+  {
+    isOpened: false,
+  },
+);
+
+/**
+ * Hook for managing update user group confirm modal state
+ * Returns read-only modal status for optimal performance
+ */
+export const useUpdateUserGroupConfirmModalStatus =
+  (): UpdateUserGroupConfirmModalStatus => {
+    return useAtomValue(updateUserGroupConfirmModalAtom);
+  };
+
+/**
+ * Hook for managing update user group confirm modal actions
+ * Returns actions for opening and closing the modal with stable references
+ */
+export const useUpdateUserGroupConfirmModalActions =
+  (): UpdateUserGroupConfirmModalActions => {
+    const setStatus = useSetAtom(updateUserGroupConfirmModalAtom);
+
+    const open = useCallback(
+      (
+        targetGroup: IUserGroupHasId,
+        updateData: Partial<IUserGroupHasId>,
+        onConfirm?: (...args: unknown[]) => Promise<void>,
+      ) => {
+        setStatus({ isOpened: true, targetGroup, updateData, onConfirm });
+      },
+      [setStatus],
+    );
+
+    const close = useCallback(() => {
+      setStatus({
+        isOpened: false,
+        targetGroup: undefined,
+        updateData: undefined,
+        onConfirm: undefined,
+      });
+    }, [setStatus]);
+
+    return { open, close };
+  };