From e0e8c3554a8821501bb30e9eb52a61d458c4c699 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 24 Jun 2024 21:06:37 -0500
Subject: [PATCH] feat: some fixes

---
 .../tools/tankopedia/components/QuickLink.tsx | 25 +++++++++++++++++++
 .../tools/tankopedia/components/SearchBar.tsx | 25 ++++++++-----------
 2 files changed, 35 insertions(+), 15 deletions(-)
 create mode 100644 src/app/tools/tankopedia/components/QuickLink.tsx

diff --git a/src/app/tools/tankopedia/components/QuickLink.tsx b/src/app/tools/tankopedia/components/QuickLink.tsx
new file mode 100644
index 000000000..47aa9fac1
--- /dev/null
+++ b/src/app/tools/tankopedia/components/QuickLink.tsx
@@ -0,0 +1,25 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Button, Link, TextField } from '@radix-ui/themes';
+import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
+import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
+
+interface QuickLinkProps {
+  topResult?: TankDefinition;
+}
+
+export function QuickLink({ topResult }: QuickLinkProps) {
+  const search = useTankopediaFilters((state) => state.search);
+  const searching = useTankopediaFilters((state) => state.searching);
+
+  if (!search || !topResult || searching) return null;
+
+  return (
+    <TextField.Slot>
+      <Link href={`/tools/tankopedia/${topResult.id}`}>
+        <Button variant="ghost">
+          {topResult.name} <CaretRightIcon />
+        </Button>
+      </Link>
+    </TextField.Slot>
+  );
+}
diff --git a/src/app/tools/tankopedia/components/SearchBar.tsx b/src/app/tools/tankopedia/components/SearchBar.tsx
index a7b0973a1..54490e950 100644
--- a/src/app/tools/tankopedia/components/SearchBar.tsx
+++ b/src/app/tools/tankopedia/components/SearchBar.tsx
@@ -1,11 +1,11 @@
-import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Spinner, TextField } from '@radix-ui/themes';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Flex, Spinner, TextField } from '@radix-ui/themes';
 import { debounce } from 'lodash';
 import { useRouter } from 'next/navigation';
 import { KeyboardEventHandler, useCallback, useRef } from 'react';
-import { Link } from '../../../../components/Link';
 import { TankDefinition } from '../../../../core/blitzkit/tankDefinitions';
 import { useTankopediaFilters } from '../../../../stores/tankopediaFilters';
+import { QuickLink } from './QuickLink';
 import { Sort } from './Sort';
 
 interface SearchBarProps {
@@ -16,7 +16,7 @@ export function SearchBar({ topResult }: SearchBarProps) {
   const router = useRouter();
   const input = useRef<HTMLInputElement>(null);
   const searching = useTankopediaFilters((state) => state.searching);
-  const search = useCallback(
+  const performSearch = useCallback(
     debounce(() => {
       useTankopediaFilters.setState({ searching: false });
 
@@ -31,8 +31,11 @@ export function SearchBar({ topResult }: SearchBarProps) {
     [],
   );
   const handleChange = useCallback(() => {
-    useTankopediaFilters.setState({ searching: true });
-    search();
+    if (!useTankopediaFilters.getState().searching) {
+      useTankopediaFilters.setState({ searching: true });
+    }
+
+    performSearch();
   }, []);
   const handleKeyDown = useCallback<KeyboardEventHandler>(
     (event) => {
@@ -58,15 +61,7 @@ export function SearchBar({ topResult }: SearchBarProps) {
             {searching ? <Spinner /> : <MagnifyingGlassIcon />}
           </TextField.Slot>
 
-          {topResult && !searching && (
-            <TextField.Slot>
-              <Link href={`/tools/tankopedia/${topResult.id}`}>
-                <Button variant="ghost">
-                  {topResult.name} <CaretRightIcon />
-                </Button>
-              </Link>
-            </TextField.Slot>
-          )}
+          <QuickLink topResult={topResult} />
         </TextField.Root>
 
         <Sort />