From f008207b03275a5b3c3dc1941fa4c2a3e36a6e22 Mon Sep 17 00:00:00 2001
From: Ruben Olano <rubendavid2711@gmail.com>
Date: Fri, 22 Nov 2024 13:32:53 -0600
Subject: [PATCH] Fix search bar errors

---
 src/app/directory/search/page.tsx             |  4 +-
 src/components/searchBar/ClubSearchBar.tsx    |  8 ++--
 .../searchBar/DebouncedSearchBar.tsx          | 41 ++++++++++++++++---
 src/components/searchBar/index.tsx            |  1 +
 4 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/src/app/directory/search/page.tsx b/src/app/directory/search/page.tsx
index 028ddf27..068717ad 100644
--- a/src/app/directory/search/page.tsx
+++ b/src/app/directory/search/page.tsx
@@ -8,11 +8,11 @@ type Params = {
 
 const clubSearch = async (props: Params) => {
   const params = await props.searchParams;
-  const userSearch = params['search'] || '';
+  const userSearch = params['q'] || '';
   const session = await getServerAuthSession();
 
   return (
-    <main className="md:pl-72">
+    <main className="md:pl-72 min-h-screen">
       <div>
         <Header />
         <ClubSearchComponent userSearch={userSearch} session={session} />
diff --git a/src/components/searchBar/ClubSearchBar.tsx b/src/components/searchBar/ClubSearchBar.tsx
index 8b02f613..f46a25c2 100644
--- a/src/components/searchBar/ClubSearchBar.tsx
+++ b/src/components/searchBar/ClubSearchBar.tsx
@@ -1,13 +1,14 @@
 'use client';
 import { useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import type { SelectClub as Club } from '@src/server/db/models';
 import { api } from '@src/trpc/react';
 import { DebouncedSearchBar } from './DebouncedSearchBar';
 
 export const ClubSearchBar = () => {
   const router = useRouter();
-  const [search, setSearch] = useState<string>('');
+  const searchParams = useSearchParams();
+  const [search, setSearch] = useState(searchParams.get('q') ?? '');
   const { data } = api.club.byName.useQuery(
     { name: search },
     { enabled: !!search },
@@ -19,11 +20,12 @@ export const ClubSearchBar = () => {
     <DebouncedSearchBar
       placeholder="Search for Clubs"
       setSearch={setSearch}
+      value={search}
       searchResults={data || []}
       onClick={onClickSearchResult}
       submitButton
       submitLogic={() => {
-        router.push(`/directory/search?search=${encodeURIComponent(search)}`);
+        router.push(`/directory/search?q=${encodeURIComponent(search)}`);
       }}
     />
   );
diff --git a/src/components/searchBar/DebouncedSearchBar.tsx b/src/components/searchBar/DebouncedSearchBar.tsx
index 1fe89774..6e16af7e 100644
--- a/src/components/searchBar/DebouncedSearchBar.tsx
+++ b/src/components/searchBar/DebouncedSearchBar.tsx
@@ -5,6 +5,7 @@ import {
   useEffect,
   type Dispatch,
   type SetStateAction,
+  type KeyboardEvent,
 } from 'react';
 import { SearchBar } from '.';
 
@@ -32,20 +33,44 @@ export const DebouncedSearchBar = <T extends SearchElement>({
 }: DebouncedSearchBarProps<T>) => {
   const [input, setInput] = useState<string>(value ?? '');
   const [focused, setFocused] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
   const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
     setInput(e.target.value);
   };
   useEffect(() => {
     const handler = setTimeout(() => {
       setSearch(input);
+      setSelectedIndex(-1);
     }, 300);
     return () => {
       clearTimeout(handler);
     };
   }, [input, setSearch]);
 
+  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {
+    switch(e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setSelectedIndex(Math.min(selectedIndex + 1, searchResults?.length ?? 0));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setSelectedIndex(Math.max(selectedIndex - 1, 0));
+        break;
+      case 'Enter':
+        if (searchResults && searchResults[selectedIndex]) {
+          onClick?.(searchResults[selectedIndex]);
+        }
+        break;
+    }
+  }
+
   return (
-    <div className="relative mr-3 w-full max-w-xs md:max-w-sm lg:max-w-md">
+    <div
+      className="relative mr-3 w-full max-w-xs md:max-w-sm lg:max-w-md"
+      onKeyDown={handleKeyDown}
+    >
       <SearchBar
         placeholder={placeholder}
         tabIndex={0}
@@ -56,12 +81,18 @@ export const DebouncedSearchBar = <T extends SearchElement>({
         submitLogic={submitLogic}
       />
       {input && focused && searchResults && searchResults.length > 0 && (
-        <div className="absolute left-0 right-0 top-full z-50 mt-1 rounded-sm shadow-lg">
-          {searchResults.map((item) => (
+        <div className="absolute left-0 right-0 top-full z-50 mt-2 max-h-[300px] overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+          {searchResults.map((item, i) => (
             <button
               type="button"
-              key={item.name}
-              className="w-full bg-gray-50 px-4 py-2 text-left font-semibold hover:bg-gray-200"
+              key={item.id}
+              className={`w-full px-4 py-2.5 text-left text-sm transition-colors duration-150
+                ${selectedIndex === i
+                  ? 'bg-blue-50 text-blue-700'
+                  : 'text-gray-700 hover:bg-gray-50'
+                }
+                ${i !== searchResults.length - 1 ? 'border-b border-gray-100' : ''}
+              `}
               onClick={() => (onClick ? onClick(item) : null)}
             >
               {item.name}
diff --git a/src/components/searchBar/index.tsx b/src/components/searchBar/index.tsx
index 79d8adb0..a182e59f 100644
--- a/src/components/searchBar/index.tsx
+++ b/src/components/searchBar/index.tsx
@@ -1,3 +1,4 @@
+'use client';
 import { RightArrowIcon, SearchIcon } from '@src/icons/Icons';
 import { type ComponentProps } from 'react';