Fixed search box functionality

src/ui/game/AdminGamesTab.tsx

@@ -0,0 +1,98 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetGamesCount } from "@/hooks/GameHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { GamesLoader } from "./GamesLoader";
+import GameModal from "./modals/GameModal";
+
+
+export default function AdminGamesTab(){
+	const [ displayCreateGameModal, setDisplayCreateGameModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState<string>("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replace("-", "");
+
+	const gamesCountQuery = useGetGamesCount(sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(gamesCountQuery.status === "success"){
+			setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
+		}
+	}, [ gamesCountQuery ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row justify-between items-center w-full"
+			>
+				<div
+					className="flex flex-row items-center justify-start w-full"
+				>
+					&nbsp;
+				</div>
+				{/* Add Game Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8"
+						onClick={() => setDisplayCreateGameModal(true)}
+					>
+						Create Game
+					</PrimaryButton>
+					<GameModal
+						display={displayCreateGameModal}
+						close={() => setDisplayCreateGameModal(false)}
+						game={undefined}
+					/>
+				</div>
+				{/* Game Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`gameSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Game List */}
+			<GamesLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}