Games tab on admin page working

src/ui/game/GamesLoader.tsx

@@ -0,0 +1,95 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import DangerMessage from "@/components/message/DangerMessage";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetGames, useGetGamesCount } from "@/hooks/GameHooks";
+import { useEffect, useState } from "react";
+import GamesList from "./GamesList";
+import GamesListSkeleton from "./GamesListSkeleton";
+import GameModal from "./modals/GameModal";
+
+
+export default function GamesLoader(){
+	const [ displayCreateGameModal, setDisplayCreateGameModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replace("-", "");
+
+	const gamesQuery = useGetGames(page - 1, pageSize);
+	const gamesCountQuery = useGetGamesCount();
+
+
+	useEffect(() => {
+		if(gamesCountQuery.status === "success"){
+			setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
+		}
+	}, [ gamesCountQuery ]);
+
+
+	if(gamesQuery.status === "pending"){
+		return <GamesListSkeleton/>
+	}
+	else if(gamesQuery.status === "error"){
+		return <DangerMessage>Error {gamesQuery.error.message}</DangerMessage>
+	}
+	else{
+		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 */}
+				<GamesList
+					games={gamesQuery.data ?? []}
+				/>
+				{/* Pagination */}
+				<div
+					className="my-12"
+				>
+					<Pagination
+						currentPage={page}
+						totalPages={totalPages}
+						onChange={setPage}
+					/>
+				</div>
+			</>
+		);
+	}
+}