Merge branch 'donskov/v2' into aslobodian/v2-add-key-usege-for-certif…

…icate-creation

src/app.tsx

@@ -6,7 +6,7 @@ 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 { CertificateViewerDialog } from "./components/certificate-viewer-dialog";
+import { useCertificateViewerDialog } from "./dialogs/certificate-viewer-dialog";
 import { useCertificateDeleteDialog } from "./dialogs/certificate-delete-dialog";
 import { useSortList } from "./hooks/sort-list";
 import { useSearchList } from "./hooks/search-list";
@@ -23,11 +23,8 @@ export function App() {
     providers,
     currentProviderId,
     certificates,
-    currentCertificateViewerValue,
     handleCertificatesDataReload,
     handleProviderChange,
-    handleCertificateViewerOpen,
-    handleCertificateViewerClose,
   } = useApp();
 
   const {
@@ -77,6 +74,11 @@ export function App() {
     },
   });
 
+  const {
+    open: handleCertificateViewerDialogOpen,
+    dialog: certificateViewerDialog,
+  } = useCertificateViewerDialog();
+
   return (
     <>
       <CertificatesSidebar className={styles.sidebar}>
@@ -94,29 +96,19 @@ export function App() {
         onImport={handleCertificateImportDialogOpen}
         onCreate={handleCertificateCreateDialogOpen}
       ></CertificatesTopbar>
-      {fetching.certificates ? (
-        <CertificatesList
-          currentSortName={currentSortName}
-          currentSortDir={currentSortDir}
-          onSort={handleSort}
-          className={styles.certificate_list}
-          certificates={sortedCertificates}
-          onDelete={handleCertificateDeleteDialogOpen}
-          onViewDetails={handleCertificateViewerOpen}
-          loading={
-            !fetching.certificates || fetching.certificates === "pending"
-          }
-          highlightedText={searchedText}
-        />
-      ) : null}
-
+      <CertificatesList
+        currentSortName={currentSortName}
+        currentSortDir={currentSortDir}
+        onSort={handleSort}
+        className={styles.certificate_list}
+        certificates={sortedCertificates}
+        onDelete={handleCertificateDeleteDialogOpen}
+        onViewDetails={handleCertificateViewerDialogOpen}
+        loading={!fetching.certificates || fetching.certificates === "pending"}
+        highlightedText={searchedText}
+      />
       <FetchingStatusOwerlay fetching={fetching} challenge={challenge} />
-      {currentCertificateViewerValue ? (
-        <CertificateViewerDialog
-          certificate={currentCertificateViewerValue}
-          onClose={handleCertificateViewerClose}
-        />
-      ) : null}
+      {certificateViewerDialog()}
       {certificateDeleteDialog()}
       {certificateImportDialog()}
       {certificateCreateDialog()}

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

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

src/dialogs/certificate-viewer-dialog/useCertificateViewerDialog.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { useLockBodyScroll } from "react-use";
+import { CertificateViewerDialog } from "../../components/certificate-viewer-dialog";
+import { CertificateProps } from "../../types";
+
+export function useCertificateViewerDialog() {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const certificateRef = React.useRef<CertificateProps>();
+
+  const handleOpen = (certificaate: CertificateProps) => {
+    certificateRef.current = certificaate;
+    setIsOpen(true);
+  };
+
+  const handleClose = () => {
+    certificateRef.current = undefined;
+    setIsOpen(false);
+  };
+
+  useLockBodyScroll(isOpen);
+
+  return {
+    open: handleOpen,
+    dialog: () =>
+      isOpen && certificateRef.current ? (
+        <CertificateViewerDialog
+          certificate={certificateRef.current}
+          onClose={handleClose}
+        />
+      ) : null,
+  };
+}

src/hooks/app/useApp.tsx

@@ -23,9 +23,6 @@ export function useApp() {
     connectionDetect: "pending",
   });
 
-  const [currentCertificateViewerValue, setCurrentCertificateViewerValue] =
-    React.useState<ICertificate | undefined>(undefined);
-
   /**
    *
    */
@@ -207,25 +204,14 @@ export function useApp() {
     }
   };
 
-  const handleCertificateViewerOpen = (certificate: ICertificate) => {
-    setCurrentCertificateViewerValue(certificate);
-  };
-
-  const handleCertificateViewerClose = () => {
-    setCurrentCertificateViewerValue(undefined);
-  };
-
   return {
     fortifyClient: fortifyClient.current,
     fetching,
     challenge,
     providers,
     currentProviderId,
     certificates,
-    currentCertificateViewerValue,
     handleCertificatesDataReload,
     handleProviderChange,
-    handleCertificateViewerOpen,
-    handleCertificateViewerClose,
   };
 }