migrate PluginDeleteModal and refactor

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginDeleteModal.tsx → apps/app/src/features/growi-plugin/client/Admin/components/PluginsExtensionPageContents/PluginDeleteModal.tsx

@@ -9,17 +9,19 @@ import {
 import { apiv3Delete } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 
-import { useSWRxAdminPlugins, usePluginDeleteModal } from '../../../stores/admin-plugins';
+import { usePluginDeleteModalStatus, usePluginDeleteModalActions } from '../../states/modal/plugin-delete';
+import { useSWRxAdminPlugins } from '../../stores/admin-plugins';
 
 export const PluginDeleteModal: React.FC = () => {
 
   const { t } = useTranslation('admin');
   const { mutate } = useSWRxAdminPlugins();
-  const { data: pluginDeleteModalData, close: closePluginDeleteModal } = usePluginDeleteModal();
-  const isOpen = pluginDeleteModalData?.isOpen;
-  const id = pluginDeleteModalData?.id;
-  const name = pluginDeleteModalData?.name;
-  const url = pluginDeleteModalData?.url;
+  const pluginDeleteModalData = usePluginDeleteModalStatus();
+  const { close: closePluginDeleteModal } = usePluginDeleteModalActions();
+  const isOpen = pluginDeleteModalData.isOpened;
+  const id = pluginDeleteModalData.id;
+  const name = pluginDeleteModalData.name;
+  const url = pluginDeleteModalData.url;
 
   const toggleHandler = useCallback(() => {
     closePluginDeleteModal();

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginInstallerForm.tsx → apps/app/src/features/growi-plugin/client/Admin/components/PluginsExtensionPageContents/PluginInstallerForm.tsx

@@ -6,7 +6,7 @@ import { apiv3Post } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 
 import type { IGrowiPluginOrigin } from '../../../../interfaces';
-import { useSWRxAdminPlugins } from '../../../stores/admin-plugins';
+import { useSWRxAdminPlugins } from '../../stores/admin-plugins';
 
 export const PluginInstallerForm = (): JSX.Element => {
   const { mutate } = useSWRxAdminPlugins();

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginsExtensionPageContents.tsx → apps/app/src/features/growi-plugin/client/Admin/components/PluginsExtensionPageContents/PluginsExtensionPageContents.tsx

@@ -4,7 +4,8 @@ import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import { Spinner } from 'reactstrap';
 
-import { useSWRxAdminPlugins, usePluginDeleteModal } from '../../../stores/admin-plugins';
+import { usePluginDeleteModalActions } from '../../states/modal/plugin-delete';
+import { useSWRxAdminPlugins } from '../../stores/admin-plugins';
 
 import { PluginCard } from './PluginCard';
 import { PluginInstallerForm } from './PluginInstallerForm';
@@ -22,7 +23,7 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
   const PluginDeleteModal = dynamic(() => import('./PluginDeleteModal')
     .then(mod => mod.PluginDeleteModal), { ssr: false });
   const { data, mutate } = useSWRxAdminPlugins();
-  const { open: openPluginDeleteModal } = usePluginDeleteModal();
+  const { open: openPluginDeleteModal } = usePluginDeleteModalActions();
 
   return (
     <div>

apps/app/src/features/growi-plugin/client/Admin/states/modal/plugin-delete.ts

@@ -0,0 +1,55 @@
+import { useCallback } from 'react';
+
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+
+import type { IGrowiPluginHasId } from '../../../../interfaces';
+
+export type PluginDeleteModalStatus = {
+  isOpened: boolean;
+  id: string;
+  name: string;
+  url: string;
+};
+
+export type PluginDeleteModalActions = {
+  open: (plugin: IGrowiPluginHasId) => void;
+  close: () => void;
+};
+
+// Atom definition
+const pluginDeleteModalAtom = atom<PluginDeleteModalStatus>({
+  isOpened: false,
+  id: '',
+  name: '',
+  url: '',
+});
+
+// Read-only hook (useAtomValue)
+export const usePluginDeleteModalStatus = (): PluginDeleteModalStatus => {
+  return useAtomValue(pluginDeleteModalAtom);
+};
+
+// Actions hook (useSetAtom + useCallback)
+export const usePluginDeleteModalActions = (): PluginDeleteModalActions => {
+  const setStatus = useSetAtom(pluginDeleteModalAtom);
+
+  const open = useCallback((plugin: IGrowiPluginHasId) => {
+    setStatus({
+      isOpened: true,
+      id: plugin._id,
+      name: plugin.meta.name,
+      url: plugin.origin.url,
+    });
+  }, [setStatus]);
+
+  const close = useCallback(() => {
+    setStatus({
+      isOpened: false,
+      id: '',
+      name: '',
+      url: '',
+    });
+  }, [setStatus]);
+
+  return { open, close };
+};

apps/app/src/features/growi-plugin/client/Admin/stores/admin-plugins.tsx

@@ -0,0 +1,25 @@
+import type { SWRResponse } from 'swr';
+import useSWR from 'swr';
+
+import { apiv3Get } from '~/client/util/apiv3-client';
+
+import type { IGrowiPluginHasId } from '../../../interfaces';
+
+type Plugins = {
+  plugins: IGrowiPluginHasId[]
+}
+
+export const useSWRxAdminPlugins = (): SWRResponse<Plugins, Error> => {
+  return useSWR(
+    '/plugins',
+    async(endpoint) => {
+      try {
+        const res = await apiv3Get<Plugins>(endpoint);
+        return res.data;
+      }
+      catch (err) {
+        throw new Error(err);
+      }
+    },
+  );
+};

apps/app/src/features/growi-plugin/client/components/index.ts

@@ -1 +0,0 @@
-export * from './GrowiPluginsActivator';

apps/app/src/features/growi-plugin/client/stores/admin-plugins.tsx

@@ -1,72 +0,0 @@
-import type { SWRResponse } from 'swr';
-import useSWR from 'swr';
-
-import { apiv3Get } from '~/client/util/apiv3-client';
-import { useStaticSWR } from '~/stores/use-static-swr';
-
-import type { IGrowiPluginHasId } from '../../interfaces';
-
-type Plugins = {
-  plugins: IGrowiPluginHasId[]
-}
-
-export const useSWRxAdminPlugins = (): SWRResponse<Plugins, Error> => {
-  return useSWR(
-    '/plugins',
-    async(endpoint) => {
-      try {
-        const res = await apiv3Get<Plugins>(endpoint);
-        return res.data;
-      }
-      catch (err) {
-        throw new Error(err);
-      }
-    },
-  );
-};
-
-/*
- * PluginDeleteModal
- */
-type PluginDeleteModalStatus = {
-  isOpen: boolean,
-  id: string,
-  name: string,
-  url: string,
-}
-
-type PluginDeleteModalUtils = {
-  open(plugin: IGrowiPluginHasId): Promise<void>,
-  close(): Promise<void>,
-}
-
-export const usePluginDeleteModal = (): SWRResponse<PluginDeleteModalStatus, Error> & PluginDeleteModalUtils => {
-  const initialStatus: PluginDeleteModalStatus = {
-    isOpen: false,
-    id: '',
-    name: '',
-    url: '',
-  };
-
-  const swrResponse = useStaticSWR<PluginDeleteModalStatus, Error>('pluginDeleteModal', undefined, { fallbackData: initialStatus });
-  const { mutate } = swrResponse;
-
-  const open = async(plugin) => {
-    mutate({
-      isOpen: true,
-      id: plugin._id,
-      name: plugin.meta.name,
-      url: plugin.origin.url,
-    });
-  };
-
-  const close = async() => {
-    mutate(initialStatus);
-  };
-
-  return {
-    ...swrResponse,
-    open,
-    close,
-  };
-};

apps/app/src/pages/[[...path]]/index.page.tsx

@@ -49,7 +49,10 @@ declare global {
 
 const GrowiContextualSubNavigation = dynamic(() => import('~/client/components/Navbar/GrowiContextualSubNavigation'), { ssr: false });
 
-const GrowiPluginsActivator = dynamic(() => import('~/features/growi-plugin/client/components').then(mod => mod.GrowiPluginsActivator), { ssr: false });
+const GrowiPluginsActivator = dynamic(
+  () => import('~/features/growi-plugin/client/components/GrowiPluginsActivator').then(mod => mod.GrowiPluginsActivator),
+  { ssr: false },
+);
 
 const DisplaySwitcher = dynamic(() => import('~/client/components/Page/DisplaySwitcher').then(mod => mod.DisplaySwitcher), { ssr: false });
 const PageStatusAlert = dynamic(() => import('~/client/components/PageStatusAlert').then(mod => mod.PageStatusAlert), { ssr: false });

apps/app/src/pages/admin/plugins.page.tsx

@@ -7,7 +7,7 @@ import type { AdminCommonProps } from './_shared';
 import { createAdminPageLayout, getServerSideAdminCommonProps } from './_shared';
 
 const PluginsExtensionPageContents = dynamic(
-  () => import('~/features/growi-plugin/client/components/Admin').then(mod => mod.PluginsExtensionPageContents),
+  () => import('~/features/growi-plugin/client/Admin/components').then(mod => mod.PluginsExtensionPageContents),
   { ssr: false },
 );