Version2: Add certificate search logic (#167)

* Add certificate search logic * Fix useSearch * Fix search input * Fix search input state --------- Co-authored-by: alex-slobodian <[email protected]>
PeculiarVentures · Jul 22, 2024 · dc0a890 · dc0a890
1 parent 86be410
commit dc0a890
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 32 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -9,6 +9,7 @@ import { CertificatesTopbar } from "./components/certificates-topbar";
 import { CertificateViewerDialog } from "./components/certificate-viewer-dialog";
 import { useCertificateDeleteDialog } from "./dialogs/certificate-delete-dialog";
 import { useSortList } from "./hooks/sort-list";
+import { useSearchList } from "./hooks/search-list";
 import { useCertificateImportDialog } from "./dialogs/certificate-import-dialog";
 import { useCertificateCreateDialog } from "./dialogs/certificate-create-dialog";
 
@@ -25,11 +26,16 @@ export function App() {
     currentCertificateViewerValue,
     handleCertificatesDataReload,
     handleProviderChange,
-    handleCertificatesSearch,
     handleCertificateViewerOpen,
     handleCertificateViewerClose,
   } = useApp();
 
+  const {
+    searchedText,
+    list: searchedCertificate,
+    handleSearch,
+  } = useSearchList(certificates);
+
   const {
     open: handleCertificateDeleteDialogOpen,
     dialog: certificateDeleteDialog,
@@ -45,7 +51,7 @@ export function App() {
     name: currentSortName,
     derection: currentSortDir,
     handleSort,
-  } = useSortList(certificates, "notAfter");
+  } = useSortList(searchedCertificate, "notAfter");
 
   const {
     open: handleCertificateImportDialogOpen,
@@ -82,8 +88,9 @@ export function App() {
         />
       </CertificatesSidebar>
       <CertificatesTopbar
+        searchValue={searchedText}
         className={styles.top_bar}
-        onSearch={handleCertificatesSearch}
+        onSearch={handleSearch}
         onImport={handleCertificateImportDialogOpen}
         onCreate={handleCertificateCreateDialogOpen}
       ></CertificatesTopbar>
@@ -99,6 +106,7 @@ export function App() {
           loading={
             !fetching.certificates || fetching.certificates === "pending"
           }
+          highlightedText={searchedText}
         />
       ) : null}
 

diff --git a/src/components/certificates-topbar/CertificatesTopbar.tsx b/src/components/certificates-topbar/CertificatesTopbar.tsx
@@ -1,12 +1,11 @@
 import clsx from "clsx";
-import React, { ComponentProps, useEffect, useRef } from "react";
+import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Button,
   IconButton,
   Menu,
   TextField,
-  useDebounceCallback,
 } from "@peculiar/react-components";
 import ImportIcon from "../../icons/import.svg?react";
 import SearchIcon from "../../icons/search.svg?react";
@@ -30,44 +29,27 @@ export const CertificatesTopbar: React.FunctionComponent<
   const { className, searchValue = "", onSearch, onImport, onCreate } = props;
 
   const { t } = useTranslation();
-  const isFirst = useRef(true);
-  const [searchInputValue, setSearchInputValue] = React.useState(searchValue);
-  const [searchingValue, setSearchingValue] = React.useState(searchInputValue);
-  const setSearchingValueDebounced = useDebounceCallback(
-    setSearchingValue,
-    300
-  );
-
-  useEffect(() => {
-    if (isFirst?.current) {
-      isFirst.current = false;
-      return;
-    }
-    onSearch(searchingValue);
-  }, [searchingValue]);
 
   return (
     <div className={clsx(styles.topbar_root, className)}>
       <div className={styles.search_field}>
         <TextField
-          value={searchInputValue}
+          value={searchValue}
           placeholder={t("topbar.search-placeholder")}
           type="search"
           size="large"
           onChange={(event) => {
-            setSearchInputValue(event.target.value);
-            setSearchingValueDebounced(event.target.value);
+            onSearch(event.target.value);
           }}
         />
         <SearchIcon className={styles.search_icon} />
         <IconButton
           className={clsx(styles.clear_button, {
-            ["hidden"]: !searchInputValue,
+            ["hidden"]: !searchValue,
           })}
           size="small"
           onClick={() => {
-            setSearchingValue("");
-            setSearchInputValue("");
+            onSearch("");
           }}
         >
           <CrossIcon className={styles.cross_icon} />

diff --git a/src/hooks/app/useApp.tsx b/src/hooks/app/useApp.tsx
@@ -207,11 +207,6 @@ export function useApp() {
     }
   };
 
-  const handleCertificatesSearch = (value: string) => {
-    // TODO: add logic
-    console.log(value);
-  };
-
   const handleCertificateViewerOpen = (certificate: ICertificate) => {
     setCurrentCertificateViewerValue(certificate);
   };
@@ -230,7 +225,6 @@ export function useApp() {
     currentCertificateViewerValue,
     handleCertificatesDataReload,
     handleProviderChange,
-    handleCertificatesSearch,
     handleCertificateViewerOpen,
     handleCertificateViewerClose,
   };

diff --git a/src/hooks/search-list/index.ts b/src/hooks/search-list/index.ts
@@ -0,0 +1 @@
+export * from "./useSearchList";
diff --git a/src/hooks/search-list/useSearchList.tsx b/src/hooks/search-list/useSearchList.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useMemo, useState } from "react";
+import { CertificateProps } from "../../types";
+
+export function useSearchList(certificates: CertificateProps[]) {
+  const [searchedText, setSearchedText] = useState(
+    new URLSearchParams(window.location.search).get("search") || ""
+  );
+
+  const handleSearch = (text: string) => {
+    const url = new URL(window.location.href);
+
+    if (text?.length) {
+      url.searchParams.set("search", text);
+    } else {
+      url.searchParams.delete("search");
+    }
+
+    window.history.pushState(null, "", url);
+    setSearchedText(text);
+  };
+
+  useEffect(() => {
+    const handleUrlChange = () => {
+      const searchParams = new URLSearchParams(window.location.search);
+      setSearchedText(searchParams.get("search") || "");
+    };
+
+    window.addEventListener("popstate", handleUrlChange);
+
+    return () => {
+      window.removeEventListener("popstate", handleUrlChange);
+    };
+  }, []);
+
+  const list = useMemo(
+    () =>
+      searchedText
+        ? certificates.filter(({ label }) =>
+            label
+              ?.toLocaleLowerCase()
+              .includes(searchedText.toLocaleLowerCase())
+          )
+        : certificates,
+    [searchedText, certificates]
+  );
+
+  return {
+    searchedText,
+    list,
+    handleSearch,
+  };
+}