implement submits to current searchbars

UTDNebula · Oct 1, 2024 · ea1284e · ea1284e
1 parent 3a422c1
commit ea1284e
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 37 deletions.
diff --git a/src/components/searchBar/ClubSearchBar.tsx b/src/components/searchBar/ClubSearchBar.tsx
@@ -21,6 +21,12 @@ export const ClubSearchBar = () => {
       setSearch={setSearch}
       searchResults={data || []}
       onClick={onClickSearchResult}
+      submitButton
+      submitLogic={() => {
+        if (data && data[0]) {
+          onClickSearchResult(data[0]);
+        }
+      }}
     />
   );
 };
diff --git a/src/components/searchBar/EventClubSearchBar.tsx b/src/components/searchBar/EventClubSearchBar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import type { SelectClub as Club } from '@src/server/db/models';
 import { api } from '@src/trpc/react';
 import { DebouncedSearchBar } from './DebouncedSearchBar';
@@ -9,29 +9,30 @@ type EventClubSearchBarProps = {
 };
 export const EventClubSearchBar = ({ addClub }: EventClubSearchBarProps) => {
   const [search, setSearch] = useState('');
-  const [res, setRes] = useState<Club[]>([]);
   const utils = api.useUtils();
-  const clubQuery = api.club.byName.useQuery(
+  const { data } = api.club.byName.useQuery(
     { name: search },
     {
       enabled: !!search,
     },
   );
-  useEffect(() => {
-    if (clubQuery.data) {
-      setRes(clubQuery.data);
-    }
-  }, [clubQuery.data]);
+  const submit = (club: Club) => {
+    void utils.club.byId.prefetch({ id: club.id });
+    addClub(club.id);
+    setSearch('');
+  };
   return (
     <DebouncedSearchBar
       placeholder="Select a club"
       setSearch={setSearch}
       value={search}
-      searchResults={res}
-      onClick={(club) => {
-        void utils.club.byId.prefetch({ id: club.id });
-        addClub(club.id);
-        setSearch('');
+      searchResults={data || []}
+      onClick={submit}
+      submitButton
+      submitLogic={() => {
+        if (data && data[0]) {
+          submit(data[0]);
+        }
       }}
     />
   );

diff --git a/src/components/searchBar/EventSearchBar.tsx b/src/components/searchBar/EventSearchBar.tsx
@@ -1,5 +1,5 @@
 'use client';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { api } from '@src/trpc/react';
 import type { SelectEvent as Event } from '@src/server/db/models';
@@ -8,26 +8,28 @@ import { DebouncedSearchBar } from './DebouncedSearchBar';
 export const EventSearchBar = () => {
   const router = useRouter();
   const [search, setSearch] = useState<string>('');
-  const [res, setRes] = useState<Event[]>([]);
 
-  const eventQuery = api.event.byName.useQuery(
+  const { data } = api.event.byName.useQuery(
     {
       name: search,
       sortByDate: true,
     },
     { enabled: !!search },
   );
-  useEffect(() => {
-    if (eventQuery.data) setRes(eventQuery.data);
-  }, [eventQuery.data]);
-
+  const onClickSearchResult = (event: Event) => {
+    router.push(`/event/${event.id}`);
+  };
   return (
     <DebouncedSearchBar
       placeholder="Search for Events"
       setSearch={setSearch}
-      searchResults={res}
-      onClick={(event) => {
-        router.push(`/event/${event.id}`);
+      searchResults={data || []}
+      onClick={onClickSearchResult}
+      submitButton
+      submitLogic={() => {
+        if (data && data[0]) {
+          onClickSearchResult(data[0]);
+        }
       }}
     />
   );

diff --git a/src/components/searchBar/UserSearchBar.tsx b/src/components/searchBar/UserSearchBar.tsx
@@ -1,42 +1,41 @@
 'use client';
-import { type SelectUserMetadata } from '@src/server/db/models';
 import { api } from '@src/trpc/react';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { DebouncedSearchBar } from './DebouncedSearchBar';
 
 type UserSearchBarProps = {
   passUser: (user: { id: string; name: string }) => void;
 };
-type User = {
-  name: string;
-} & SelectUserMetadata;
 export const UserSearchBar = ({ passUser }: UserSearchBarProps) => {
   const [search, setSearch] = useState('');
-  const [res, setRes] = useState<User[]>([]);
   const userQuery = api.userMetadata.searchByName.useQuery(
     { name: search },
     {
       enabled: !!search,
     },
   );
-  useEffect(() => {
-    if (userQuery.data) {
-      const newData = userQuery.data.map((val) => {
+  const formattedData = userQuery.isSuccess
+    ? userQuery.data.map((val) => {
         return { name: val.firstName + ' ' + val.lastName, ...val };
-      });
-      setRes(newData);
-    }
-  }, [userQuery.data]);
+      })
+    : [];
   return (
     <DebouncedSearchBar
       placeholder="Search for Someone"
       setSearch={setSearch}
       value={search}
-      searchResults={res}
+      searchResults={formattedData}
       onClick={(user) => {
         passUser({ id: user.id, name: user.name });
         setSearch('');
       }}
+      submitLogic={() => {
+        if (formattedData && formattedData[0]) {
+          const user = formattedData[0];
+          passUser({ id: user.id, name: user.name });
+          setSearch('');
+        }
+      }}
     />
   );
 };