125483 add component PluginsExtensionPageContents

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

@@ -13,8 +13,6 @@ import styles from './Admin.module.scss';
 const PageCreateModal = dynamic(() => import('../PageCreateModal'), { ssr: false });
 const SystemVersion = dynamic(() => import('../SystemVersion'), { ssr: false });
 const HotkeysManager = dynamic(() => import('../Hotkeys/HotkeysManager'), { ssr: false });
-const PluginDeleteModal = dynamic(() => import('~/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginDeleteModal')
-  .then(mod => mod.PluginDeleteModal), { ssr: false });
 
 
 type Props = {
@@ -49,7 +47,6 @@ const AdminLayout = ({
         </div>
 
         <PageCreateModal />
-        <PluginDeleteModal />
         <SystemVersion />
       </div>
 

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

@@ -8,9 +8,8 @@ import {
 
 import { apiv3Delete } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
-import { usePluginDeleteModal } from '~/stores/modal';
 
-import { useSWRxAdminPlugins } from '../../../stores/admin-plugins';
+import { useSWRxAdminPlugins, usePluginDeleteModal } from '../../../stores/admin-plugins';
 
 export const PluginDeleteModal: React.FC = () => {
 

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

@@ -1,11 +1,10 @@
 import React from 'react';
 
 import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
 import { Spinner } from 'reactstrap';
 
-import { usePluginDeleteModal } from '~/stores/modal';
-
-import { useSWRxAdminPlugins } from '../../../stores/admin-plugins';
+import { useSWRxAdminPlugins, usePluginDeleteModal } from '../../../stores/admin-plugins';
 
 import { PluginCard } from './PluginCard';
 import { PluginInstallerForm } from './PluginInstallerForm';
@@ -20,6 +19,8 @@ const Loading = (): JSX.Element => {
 
 export const PluginsExtensionPageContents = (): JSX.Element => {
   const { t } = useTranslation('admin');
+  const PluginDeleteModal = dynamic(() => import('./PluginDeleteModal')
+    .then(mod => mod.PluginDeleteModal), { ssr: false });
   const { data, mutate } = useSWRxAdminPlugins();
   const { open: openPluginDeleteModal } = usePluginDeleteModal();
 
@@ -62,6 +63,7 @@ export const PluginsExtensionPageContents = (): JSX.Element => {
             )}
         </div>
       </div>
+      <PluginDeleteModal />
 
     </div>
   );

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

@@ -1,6 +1,7 @@
 import useSWR, { SWRResponse } from 'swr';
 
 import { apiv3Get } from '~/client/util/apiv3-client';
+import { useStaticSWR } from '~/stores/use-static-swr';
 
 import type { IGrowiPluginHasId } from '../../interfaces';
 
@@ -22,3 +23,49 @@ export const useSWRxAdminPlugins = (): SWRResponse<Plugins, Error> => {
     },
   );
 };
+
+/*
+ * 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/stores/modal.tsx

@@ -13,8 +13,6 @@ import {
 import { IUserGroupHasId } from '~/interfaces/user';
 import loggerFactory from '~/utils/logger';
 
-import type { IGrowiPluginHasId } from '../features/growi-plugin/interfaces';
-
 import { useStaticSWR } from './use-static-swr';
 
 const logger = loggerFactory('growi:stores:modal');
@@ -741,49 +739,3 @@ export const useLinkEditModal = (): SWRResponse<LinkEditModalStatus, Error> & Li
     },
   });
 };
-
-/*
- * 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,
-  };
-};