From e00dec5fa7154742405097bb5d21407070eb62c0 Mon Sep 17 00:00:00 2001
From: Yashvardhan Jagnani <60016972+jagnani73@users.noreply.github.com>
Date: Tue, 22 Oct 2024 22:05:58 +0530
Subject: [PATCH] Yj-fix/search-debounce (#15)

* wip: search on keypress

* wip: fix responsiveness

* nit
---
 components/shared/footer.tsx |   2 +-
 components/shared/navbar.tsx | 157 ++++++++++++++++++++++-------------
 tailwind.config.ts           |   7 +-
 utils/hooks/index.ts         |   1 -
 utils/hooks/use-debounce.tsx |  22 -----
 5 files changed, 104 insertions(+), 85 deletions(-)
 delete mode 100644 utils/hooks/index.ts
 delete mode 100644 utils/hooks/use-debounce.tsx

diff --git a/components/shared/footer.tsx b/components/shared/footer.tsx
index f19e938..34ae0a6 100644
--- a/components/shared/footer.tsx
+++ b/components/shared/footer.tsx
@@ -20,7 +20,7 @@ export const Footer: React.FC = () => {
     ];
 
     return (
-        <footer className="gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-py-8 gbk-px-8 gbk-border-t border-secondary-light dark:border-secondary-dark">
+        <footer className="gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-py-4 gbk-px-8 gbk-border-t border-secondary-light dark:border-secondary-dark">
             <div className="gbk-flex gbk-flex-col gbk-gap-4 gbk-gap-y-2 lg:gbk-flex-row">
                 {anchors.map(({ content, href }) => (
                     <a
diff --git a/components/shared/navbar.tsx b/components/shared/navbar.tsx
index c238e59..856642b 100644
--- a/components/shared/navbar.tsx
+++ b/components/shared/navbar.tsx
@@ -2,7 +2,6 @@
 
 import { goldrushConfig } from "@/goldrush.config";
 import { timestampParser } from "@/utils/functions";
-import { useDebounce } from "@/utils/hooks";
 import {
     type Price,
     type Chain,
@@ -14,7 +13,7 @@ import { ChainSelector, useGoldRush } from "@covalenthq/goldrush-kit";
 import Image from "next/image";
 import Link from "next/link";
 import { notFound, useParams, usePathname, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 export const Navbar: React.FC = () => {
     const {
@@ -200,47 +199,38 @@ export const Navbar: React.FC = () => {
         }
     };
 
-    const searchResultsHandler = useCallback(
-        (input: string, chain: ChainItem) => {
-            if (!input) return;
-
-            const searchType = searchHandler(input);
-            let page: string | null = null;
-            switch (searchType) {
-                case "address":
-                    page = "address";
-                    break;
-                case "tx":
-                    page = "transaction";
-                    break;
-                case "block":
-                    page = "block";
-                    break;
-                default:
-                    push(`/not-found`);
-                    return;
-            }
-            push(`/${chain.name}/${page}/${input}`);
-        },
-        [push, searchHandler]
-    );
+    const searchResultsHandler = (input: string) => {
+        if (!input || !selectedChain) return;
+
+        const searchType = searchHandler(input);
+        let page: string | null = null;
+        switch (searchType) {
+            case "address":
+                page = "address";
+                break;
+            case "tx":
+                page = "transaction";
+                break;
+            case "block":
+                page = "block";
+                break;
+            default:
+                push(`/not-found`);
+                return;
+        }
+        push(`/${selectedChain.name}/${page}/${input}`);
+    };
 
-    useDebounce(
-        () => {
-            if (searchInput && selectedChain) {
-                searchResultsHandler(searchInput, selectedChain);
-            }
-        },
-        500,
-        [searchInput, selectedChain]
-    );
+    const clearSearchInputHandler = () => {
+        setSearchInput("");
+    };
 
     return (
-        <nav className="bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark border-secondary-light dark:border-secondary-dark gbk-sticky gbk-left-0 gbk-top-0 gbk-z-50 gbk-flex gbk-w-full gbk-flex-wrap gbk-items-center gbk-justify-between gbk-gap-x-4 gbk-border-b gbk-px-8 gbk-py-4 lg:gbk-flex-nowrap">
-            <div className="gbk-flex gbk-items-center gbk-gap-x-8">
+        <nav className="bg-background-light text-foreground-light dark:bg-background-dark dark:text-foreground-dark border-secondary-light dark:border-secondary-dark gbk-sticky gbk-left-0 gbk-top-0 gbk-z-50 gbk-grid gbk-grid-cols-2 xl:gbk-grid-cols-3 gbk-w-full gbk-items-center gbk-justify-between gbk-gap-4 gbk-border-b gbk-px-8 gbk-py-4">
+            <div className="gbk-flex gbk-items-center gbk-gap-x-8 gbk-col-span-2 xl:gbk-col-span-1">
                 <Link
                     href={`/${selectedChain?.name}`}
-                    className="gbk-mr-auto gbk-flex gbk-w-fit gbk-items-center gbk-gap-2"
+                    className="gbk-flex gbk-w-fit gbk-items-center gbk-gap-2"
                 >
                     <figure className="gbk-relative gbk-h-10 gbk-w-10">
                         <Image
@@ -305,33 +295,80 @@ export const Navbar: React.FC = () => {
                         </p>
                     </div>
                 )}
-            </div>
 
-            <input
-                id="menu"
-                type="checkbox"
-                role="button"
-                onClick={() => setOpen(!open)}
-                className="gbk-ml-auto lg:gbk-hidden"
-                defaultChecked={open}
-            />
+                <input
+                    id="menu"
+                    type="checkbox"
+                    role="button"
+                    onClick={() => setOpen(!open)}
+                    className="gbk-ml-auto lg:gbk-hidden"
+                    defaultChecked={open}
+                />
+            </div>
 
             <div
                 className={`${
                     open ? "gbk-max-h-40" : "gbk-max-h-0 gbk-overflow-hidden"
-                } gbk-flex gbk-w-full gbk-items-center gbk-justify-between gbk-transition-all gbk-duration-500 gbk-ease-in-out lg:gbk-max-h-fit lg:gbk-flex-row`}
+                } gbk-grid gbk-grid-cols-2 gbk-gap-4 gbk-col-span-2 gbk-w-full gbk-items-center gbk-justify-between gbk-transition-all gbk-duration-500 gbk-ease-in-out lg:gbk-max-h-fit`}
             >
-                <div className="gbk-mt-4 gbk-flex gbk-flex-col gbk-items-center gbk-gap-2 lg:gbk-mx-auto lg:gbk-mt-0 lg:gbk-flex-row">
-                    <input
-                        type="text"
-                        name="search"
-                        value={searchInput}
-                        placeholder="Address / Block / Hash / Domain"
-                        onChange={({ target: { value } }) =>
-                            setSearchInput(value)
-                        }
-                        className="bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark placeholder:text-secondary-light dark:placeholder:text-secondary-dark rounded border border-secondary-light dark:border-secondary-dark gbk-h-9 gbk-w-72 gbk-px-3 gbk-outline-none"
-                    />
+                <div className="gbk-col-span-2 lg:gbk-col-span-1 gbk-mt-4 gbk-flex gbk-flex-col lg:gbk-items-center gbk-gap-2 lg:gbk-mx-auto lg:gbk-mt-0 lg:gbk-flex-row">
+                    <form
+                        onSubmit={(e) => {
+                            e.preventDefault();
+                            searchResultsHandler(searchInput);
+                        }}
+                        className="gbk-flex gbk-items-center gbk-gap-x-2 bg-background-light dark:bg-background-dark text-foreground-light dark:text-foreground-dark placeholder:text-secondary-light dark:placeholder:text-secondary-dark rounded border border-secondary-light dark:border-secondary-dark gbk-px-2 gbk-w-124 gbk-max-w-full gbk-justify-between gbk-h-9"
+                    >
+                        <input
+                            type="text"
+                            name="search"
+                            value={searchInput}
+                            placeholder="Address / Block / Hash / Domain"
+                            onChange={({ target: { value } }) =>
+                                setSearchInput(value)
+                            }
+                            className="gbk-w-full gbk-outline-none gbk-bg-transparent"
+                        />
+
+                        <div className="gbk-flex gbk-items-center gbk-gap-x-2">
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    clearSearchInputHandler();
+                                }}
+                                disabled={!searchInput}
+                                className="gbk-w-4"
+                            >
+                                {searchInput ? (
+                                    <svg
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        viewBox="0 -960 960 960"
+                                        fill="currentColor"
+                                        className="gbk-w-full"
+                                    >
+                                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224z" />
+                                    </svg>
+                                ) : (
+                                    "\u00A0"
+                                )}
+                            </button>
+
+                            <button
+                                type="submit"
+                                disabled={!searchInput}
+                                className="gbk-w-6"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 -960 960 960"
+                                    fill="currentColor"
+                                    className="bg-primary-light dark:bg-primary-dark rounded gbk-p-1 gbk-w-full"
+                                >
+                                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580t75.5-184.5T380-840t184.5 75.5T640-580q0 44-14 83t-38 69l252 252zM380-400q75 0 127.5-52.5T560-580t-52.5-127.5T380-760t-127.5 52.5T200-580t52.5 127.5T380-400" />
+                                </svg>
+                            </button>
+                        </div>
+                    </form>
 
                     <ChainSelector
                         onChangeChain={(newChain) =>
@@ -343,7 +380,7 @@ export const Navbar: React.FC = () => {
 
                 <input
                     id="theme-toggle"
-                    className="dark:text-background-light text-background-dark"
+                    className="dark:text-background-light text-background-dark lg:gbk-ml-auto gbk-w-4 gbk-h-4"
                     type="checkbox"
                     defaultChecked={theme.mode === "light"}
                     onClick={() =>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index e779156..b47c684 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,7 +9,12 @@ const config: Config = {
     ],
     prefix: "gbk-",
     theme: {
-        extend: {},
+        extend: {
+            width: {
+                104: "26rem",
+                124: "31rem",
+            },
+        },
     },
     plugins: [],
 };
diff --git a/utils/hooks/index.ts b/utils/hooks/index.ts
deleted file mode 100644
index e796757..0000000
--- a/utils/hooks/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useDebounce } from "./use-debounce";
diff --git a/utils/hooks/use-debounce.tsx b/utils/hooks/use-debounce.tsx
deleted file mode 100644
index 13e40a1..0000000
--- a/utils/hooks/use-debounce.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useRef, type DependencyList, useEffect } from "react";
-
-export const useDebounce = (
-    func: (...args: unknown[]) => unknown,
-    delay: number,
-    deps: DependencyList
-) => {
-    const timerRef = useRef<NodeJS.Timeout>();
-
-    useEffect(() => {
-        timerRef.current = setTimeout(() => {
-            func();
-        }, delay);
-
-        return () => {
-            if (timerRef.current) clearTimeout(timerRef.current);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [delay, ...deps]);
-
-    return null;
-};