fix: Refresh page when install / delete plugins from AdminCP

apps/frontend/src/plugins/admin/langs/en.json

@@ -252,6 +252,7 @@
       },
       "plugins": {
         "title": "Plugins",
+        "desc": "Extend the functionality of your app with plugins.",
         "upload_new_version": "Upload New Version",
         "set_default": "Set as default",
         "get_help": "Get help",
@@ -376,7 +377,7 @@
         "delete": {
           "submit": "Yes, delete plugin",
           "desc": "This action will delete <name></name> plugin created by <author></author> and all data associated with it.",
-          "info": "You may see the errors while the system is changing files. After the process is complete, you need to restart the server to apply the changes."
+          "info": "After the process is complete, you need to restart the server to apply the changes."
         },
         "download": {
           "title": "Download Plugin",

packages/frontend/src/views/admin/views/core/plugins/actions/create/form.tsx

@@ -2,8 +2,8 @@
 
 import { AutoForm, DependencyType } from '@/components/form/auto-form';
 import { AutoFormInput } from '@/components/form/fields/input';
-import { ShowAdminPlugins } from '@/graphql/types';
 import { useTranslations } from 'next-intl';
+import { ShowPluginAdmin } from 'vitnode-shared/admin/plugins.dto';
 
 import { useCreateEditPluginAdmin } from './hooks/use-create-edit-plugin-admin';
 
@@ -12,7 +12,7 @@ export const FormCreateEditPluginAdmin = ({
   className,
 }: {
   className?: string;
-  data?: ShowAdminPlugins;
+  data?: ShowPluginAdmin;
 }) => {
   const t = useTranslations('admin.core.plugins');
   const { onSubmit, formSchema } = useCreateEditPluginAdmin({ data });

packages/frontend/src/views/admin/views/core/plugins/actions/create/hooks/mutation-create-api.ts

@@ -7,12 +7,18 @@ import {
   ShowPluginAdmin,
 } from 'vitnode-shared/admin/plugins.dto';
 
+import { checkConnectionApi } from '../../../check-connection-api';
+
 export const mutationCreateApi = async (body: CreatePluginsAdminBody) => {
   await fetcher<ShowPluginAdmin, CreatePluginsAdminBody>({
     url: '/admin/plugins',
     method: 'POST',
     body,
   });
 
+  // await new Promise(resolve => setTimeout(resolve, 3000));
+
+  await checkConnectionApi();
+
   revalidatePath('/', 'layout');
 };

packages/frontend/src/views/admin/views/core/plugins/actions/create/hooks/use-create-edit-plugin-admin.ts

@@ -1,3 +1,4 @@
+import { useDialog } from '@/components/ui/dialog';
 import { useSessionAdmin } from '@/hooks/use-session-admin';
 import { useTranslations } from 'next-intl';
 import { UseFormReturn } from 'react-hook-form';
@@ -17,6 +18,7 @@ export const useCreateEditPluginAdmin = ({
   const t = useTranslations('admin.core.plugins');
   const tCore = useTranslations('core.global.errors');
   const { user } = useSessionAdmin();
+  const { setOpen } = useDialog();
 
   const formSchema = z.object({
     name: z
@@ -69,9 +71,14 @@ export const useCreateEditPluginAdmin = ({
       // });
 
       await mutationCreateApi(values);
-      toast.success(t('edit.success'), {
-        description: values.name,
+      setOpen?.(false);
+      await new Promise<void>(resolve => {
+        setTimeout(() => {
+          form.reset(values);
+          resolve();
+        }, 0);
       });
+      window.location.reload();
     } catch (err) {
       const error = err as Error;
       if (error.message.includes('PLUGIN_ALREADY_EXISTS')) {

packages/frontend/src/views/admin/views/core/plugins/check-connection-api.ts

@@ -0,0 +1,25 @@
+import { fetcher } from '@/api/fetcher';
+
+export const checkConnectionApi = async () => {
+  const startTime = Date.now();
+
+  await new Promise<void>((resolve, reject) => {
+    const interval = setInterval(async () => {
+      try {
+        await fetcher<object>({
+          url: '/admin/plugins',
+        });
+
+        clearInterval(interval);
+        resolve();
+      } catch (_) {
+        /* empty */
+      }
+
+      if (Date.now() - startTime > 10000) {
+        clearInterval(interval);
+        reject(new Error('Connection check timed out'));
+      }
+    }, 1000);
+  });
+};

packages/frontend/src/views/admin/views/core/plugins/plugins-admin-view.tsx

@@ -48,7 +48,7 @@ export const PluginsAdminView = async ({
 
   return (
     <>
-      <HeaderContent h1={t('title')}>
+      <HeaderContent desc={t('desc')} h1={t('title')}>
         <ActionsPluginsAdmin />
       </HeaderContent>
 

packages/frontend/src/views/admin/views/core/plugins/table/actions/delete/content.tsx

@@ -12,10 +12,11 @@ import { SubmitContentDeletePluginActionsAdmin } from './submit';
 
 export const ContentDeletePluginActionsAdmin = ({
   id,
+  name,
 }: Pick<ShowPluginAdmin, 'author' | 'id' | 'name'>) => {
   const t = useTranslations('admin.core.plugins.delete');
   const tCore = useTranslations('core.global');
-  const { onSubmit } = useDeletePluginAdmin({ id });
+  const { onSubmit } = useDeletePluginAdmin({ id, name });
 
   return (
     <form action={onSubmit}>

packages/frontend/src/views/admin/views/core/plugins/table/actions/delete/delete.tsx

@@ -9,11 +9,7 @@ import { Loader } from '@/components/ui/loader';
 import { useTranslations } from 'next-intl';
 import React from 'react';
 
-const ContentDeletePluginActionsAdmin = React.lazy(async () =>
-  import('./content').then(module => ({
-    default: module.ContentDeletePluginActionsAdmin,
-  })),
-);
+import { ContentDeletePluginActionsAdmin } from './content';
 
 export const DeletePluginActionsAdmin = ({
   open,

packages/frontend/src/views/admin/views/core/plugins/table/actions/delete/hooks/mutation-api.ts

@@ -3,11 +3,17 @@
 import { fetcher } from '@/api/fetcher';
 import { revalidatePath } from 'next/cache';
 
+import { checkConnectionApi } from '../../../../check-connection-api';
+
 export const mutationApi = async (id: number) => {
   await fetcher<object>({
     url: `/admin/plugins/${id}`,
     method: 'DELETE',
   });
 
+  // await new Promise(resolve => setTimeout(resolve, 3000));
+
+  await checkConnectionApi();
+
   revalidatePath('/', 'layout');
 };

packages/frontend/src/views/admin/views/core/plugins/table/actions/delete/hooks/use-delete-plugin-admin.ts

@@ -1,38 +1,23 @@
+import { useAlertDialog } from '@/components/ui/alert-dialog';
 import { useTranslations } from 'next-intl';
 import { toast } from 'sonner';
 
-// import { checkConnectionMutationApi } from '../../../../hooks/check-connection-mutation-api';
 import { mutationApi } from './mutation-api';
 
 export const useDeletePluginAdmin = ({ id }: { id: number }) => {
   const tCore = useTranslations('core.global.errors');
+  const { setOpen } = useAlertDialog();
 
   const onSubmit = async () => {
     try {
       await mutationApi(id);
+      setOpen(false);
+      window.location.reload();
     } catch (_) {
       toast.error(tCore('title'), {
         description: tCore('internal_server_error'),
       });
     }
-
-    // // Wait 3 seconds before reloading the page
-    // await new Promise<void>(resolve =>
-    //   setTimeout(async () => {
-    //     const data = await checkConnectionMutationApi();
-
-    //     if (data?.error) {
-    //       toast.error(tCore('title'), {
-    //         description: tCore('internal_server_error'),
-    //       });
-
-    //       resolve();
-    //     }
-
-    //     window.location.reload();
-    //     resolve();
-    //   }, 3000),
-    // );
   };
 
   return {