Add useCertificateDeleteDialog

src/app.tsx

@@ -6,8 +6,8 @@ import { CertificatesList } from "./components/certificates-list";
 import { CertificatesSidebar } from "./components/certificates-sidebar";
 import { CertificatesProvidersList } from "./components/certificates-providers-list";
 import { CertificatesTopbar } from "./components/certificates-topbar";
-import { CertificateDeleteDialog } from "./components/certificate-delete-dialog";
 import { CertificateViewerDialog } from "./components/certificate-viewer-dialog";
+import { useCertificateDeleteDialog } from "./dialogs/certificate-delete-dialog";
 import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog";
 import { useCertificateCreateDialog } from "./dialogs/certificate-create-dialog";
 
@@ -20,17 +20,18 @@ export function App() {
     providers,
     currentProviderId,
     certificates,
-    currentCertificatDelete,
     currentCertificateViewerValue,
     handleProviderChange,
     handleCertificatesSearch,
-    handleCertificateDeleteDialogOpen,
-    handleCertificateDeleteDialogClose,
-    handleCertificateDelete,
     handleCertificateViewerOpen,
     handleCertificateViewerClose,
   } = useApp();
 
+  const {
+    open: handleCertificateDeleteDialogOpen,
+    dialog: certificateDeleteDialog,
+  } = useCertificateDeleteDialog();
+
   const {
     open: handleCertificateImportDialogOpen,
     dialog: certificateImportDialog,
@@ -70,15 +71,6 @@ export function App() {
           onViewDetails={handleCertificateViewerOpen}
         />
       ) : null}
-      {currentCertificatDelete?.id ? (
-        <CertificateDeleteDialog
-          certificateId={currentCertificatDelete.id}
-          certificateName={currentCertificatDelete.name}
-          loading={currentCertificatDelete?.loading}
-          onDialogClose={handleCertificateDeleteDialogClose}
-          onDeleteClick={handleCertificateDelete}
-        />
-      ) : null}
 
       <FetchingStatusOwerlay fetching={fetching} challenge={challenge} />
       {currentCertificateViewerValue ? (
@@ -87,6 +79,7 @@ export function App() {
           onClose={handleCertificateViewerClose}
         />
       ) : null}
+      {certificateDeleteDialog()}
       {certificateImportDialog()}
       {certificateCreateDialog()}
     </>

src/dialogs/certificate-delete-dialog/index.ts

@@ -0,0 +1 @@
+export * from "./useCertificateDeleteDialog";

src/dialogs/certificate-delete-dialog/useCertificateDeleteDialog.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { useToast } from "@peculiar/react-components";
+import { useTranslation } from "react-i18next";
+import { useLockBodyScroll } from "react-use";
+import { CertificateDeleteDialog } from "src/components/certificate-delete-dialog";
+
+export function useCertificateDeleteDialog() {
+  const { addToast } = useToast();
+  const { t } = useTranslation();
+
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [currentCertificatDelete, setCurrentCetificateDelete] = React.useState<
+    undefined | { id: string; name: string }
+  >();
+
+  const handleOpen = (id: string, name: string) => {
+    setCurrentCetificateDelete({
+      id,
+      name,
+    });
+  };
+
+  const handleClose = () => {
+    setCurrentCetificateDelete(undefined);
+  };
+
+  const handleCertificateDelete = (id: string) => {
+    // TODO: add logic
+    console.log("Delete certificate: ", id);
+    // temporary behaviour
+    setIsLoading(true);
+    setTimeout(function () {
+      setIsLoading(false);
+      handleClose();
+      addToast({
+        message: t("certificates.dialog.delete.failure-message"),
+        variant: "wrong",
+        disableIcon: true,
+        isClosable: true,
+      });
+    }, 1000);
+  };
+
+  const isOpen = !!currentCertificatDelete?.id;
+
+  useLockBodyScroll(isOpen);
+
+  return {
+    open: handleOpen,
+    dialog: () =>
+      isOpen ? (
+        <CertificateDeleteDialog
+          certificateId={currentCertificatDelete.id}
+          certificateName={currentCertificatDelete.name}
+          loading={isLoading}
+          onDialogClose={handleClose}
+          onDeleteClick={handleCertificateDelete}
+        />
+      ) : null,
+  };
+}

src/hooks/app/useApp.tsx

@@ -1,13 +1,10 @@
 import React from "react";
-import { useTranslation } from "react-i18next";
 import {
   FortifyAPI,
   IProviderInfo,
   ICertificate,
 } from "@peculiar/fortify-client-core";
 
-import { useToast } from "@peculiar/react-components";
-
 import { AppFetchingStatus, AppFetchingType } from "./types";
 
 export function useApp() {
@@ -26,20 +23,13 @@ export function useApp() {
     connectionDetect: "pending",
   });
 
-  const [currentCertificatDelete, setCurrentCetificateDelete] = React.useState<
-    undefined | { id: string; name: string; loading?: boolean }
-  >();
-
   const [currentCertificateViewerValue, setCurrentCertificateViewerValue] =
     React.useState<ICertificate | undefined>(undefined);
 
   /**
    *
    */
 
-  const { addToast } = useToast();
-  const { t } = useTranslation();
-
   const setFetchingValue = (
     name: keyof AppFetchingType,
     value: AppFetchingStatus
@@ -204,34 +194,6 @@ export function useApp() {
     console.log(value);
   };
 
-  const handleCertificateDeleteDialogOpen = (id: string, name: string) => {
-    setCurrentCetificateDelete({
-      id,
-      name,
-    });
-  };
-
-  const handleCertificateDeleteDialogClose = () => {
-    setCurrentCetificateDelete(undefined);
-  };
-
-  const handleCertificateDelete = (id: string) => {
-    // TODO: add logic
-    // temporary behaviour
-    setCurrentCetificateDelete((prevState) =>
-      prevState?.id === id ? { ...prevState, loading: true } : undefined
-    );
-    setTimeout(function () {
-      setCurrentCetificateDelete(undefined);
-      addToast({
-        message: t("certificates.dialog.delete.failure-message"),
-        variant: "wrong",
-        disableIcon: true,
-        isClosable: true,
-      });
-    }, 1000);
-  };
-
   const handleCertificateViewerOpen = (certificate: ICertificate) => {
     setCurrentCertificateViewerValue(certificate);
   };
@@ -246,13 +208,9 @@ export function useApp() {
     providers,
     currentProviderId,
     certificates,
-    currentCertificatDelete,
     currentCertificateViewerValue,
     handleProviderChange,
     handleCertificatesSearch,
-    handleCertificateDeleteDialogOpen,
-    handleCertificateDeleteDialogClose,
-    handleCertificateDelete,
     handleCertificateViewerOpen,
     handleCertificateViewerClose,
   };