Admin page raid groups tab working

2025-03-05 20:12:10 -05:00
parent 58d1e83a2f
commit b78b6109b3
13 changed files with 738 additions and 1 deletions
--- a/src/components/game/GameSelector.tsx
+++ b/src/components/game/GameSelector.tsx
@@ -0,0 +1,100 @@
+import { useGetGames } from "@/hooks/GameHooks";
+import { Game } from "@/interface/Game";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import TextInput from "../input/TextInput";
+
+export default function GameSelector({
+	disabled,
+	game,
+	onChange
+}:{
+	disabled: boolean;
+	game?: Game;
+	onChange: (game: Game | undefined) => void;
+}){
+	const [ gameSearch, setGameSearch ] = useState(game?.gameName ?? "");
+	const [ searchTerm, setSearchTerm ] = useState(game?.gameName ?? "");
+	const [ searching, setSearching ] = useState(false);
+
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	const gameSearchQuery = useGetGames(0, 5, gameSearch);
+	const games = gameSearchQuery.data;
+
+	const setGame = (selectedGame: Game) => {
+		setSearchTerm(selectedGame.gameName ?? "");
+		setGameSearch(selectedGame.gameName ?? "");
+		setSearching(false);
+		onChange?.(selectedGame);
+	}
+
+
+	const updateGameSearch = useDebouncedCallback((searchTerm: string) => {
+		setGameSearch(searchTerm);
+	}, 500);
+
+
+	useEffect(() => {
+		updateGameSearch(searchTerm);
+	}, [ searchTerm, updateGameSearch ]);
+
+
+	return (
+		<div
+			className="relative flex flex-col"
+		>
+			<TextInput
+				id={`gameSearchTextInput${modalId}`}
+				placeholder="Game Search"
+				onChange={(e) => { setSearchTerm(e.target.value); setSearching(true); }}
+				value={searchTerm}
+				disabled={disabled}
+			/>
+			<div
+				className="relative mx-4 z-10"
+			>
+				<div
+					className={clsx(
+						"absolute flex flex-col justify-center items-center w-full min-h-6 rounded-lg bg-neutral-700",
+						{
+							"hidden": !searching
+						}
+					)}
+				>
+					{
+						games && games.map((searchGame, index) => (
+							<div
+								key={searchGame.gameId}
+								className={clsx("w-full border-x-2 border-black dark:border-gray-400 cursor-pointer",
+									{
+										"rounded-t-lg border-t-2 border-b": index === 0,
+										"rounded-b-lg border-b-2 border-t": index === games.length - 1,
+										"border-y-1": index > 0 && index < games.length - 1,
+									}
+								)}
+								onClick={() => setGame(searchGame)}
+							>
+								<div
+									className="mx-4 py-2"
+								>
+									{searchGame.gameName}
+								</div>
+							</div>
+						))
+					}
+					{
+						games?.length == 0 &&
+						<div
+							className="mx-4 py-2"
+						>
+							No games found
+						</div>
+					}
+				</div>
+			</div>
+		</div>
+	);
+}