Merge pull request #69 from TheRealOwenRees/remove-clear

remove clear button

app/[lang]/tournois/SearchBar.tsx

@@ -1,13 +1,10 @@
-import { Dispatch, SetStateAction } from "react";
 import { useTranslations } from "next-intl";
+import { useAtom } from "jotai/index";
+import { searchStringAtom } from "@/app/atoms";
 
-interface SearchBarProps {
+const SearchBar = () => {
-  searchString: string;
-  setSearchString: Dispatch<SetStateAction<string>>;
-}
-
-const SearchBar = ({ searchString, setSearchString }: SearchBarProps) => {
   const t = useTranslations("Tournaments");
+  const [searchString, setSearchString] = useAtom(searchStringAtom);
 
   return (
     <div className="bg-white dark:bg-gray-800">

app/[lang]/tournois/TournamentTable.tsx

@@ -21,7 +21,6 @@ import ScrollToTopButton from "./ScrollToTopButton";
 export default function TournamentTable() {
   const t = useTranslations("Tournaments");
 
-  const [searchString, setSearchString] = useAtom(searchStringAtom);
   const filteredTournaments = useAtomValue(filteredTournamentsListAtom);
   const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom);
   const hoveredMapTournamentId = useAtomValue(hoveredMapTournamentIdAtom);
@@ -41,10 +40,6 @@ export default function TournamentTable() {
     tournamentRow?.scrollIntoView({ behavior: "smooth" });
   }, [debouncedHoveredMapTournamentId]);
 
-  const handleClearSearch = () => {
-    setSearchString("");
-  };
-
   return (
     <section
       className="tournament-table grid w-full auto-rows-max pb-20 lg:col-start-2 lg:col-end-3 lg:h-[calc(100vh-144px)] lg:overflow-y-scroll"
@@ -52,16 +47,7 @@ export default function TournamentTable() {
       data-test="tournament-table-div"
     >
       <div className="z-10 flex w-full flex-wrap items-center justify-between gap-3 p-3">
-        <SearchBar
+        <SearchBar />
-          searchString={searchString}
-          setSearchString={setSearchString}
-        />
-        <button
-          className="mr-auto rounded-full bg-teal-600 px-3 py-1 text-white hover:bg-teal-700"
-          onClick={() => handleClearSearch()}
-        >
-          {t("clearButton")}
-        </button>
         <div className="text-gray-900 dark:text-white">
           <label>
             <input