Games tab on admin page working

src/ui/account/AccountsLoader.tsx

@@ -1,4 +1,5 @@
 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 { useGetAccounts, useGetAccountsCount } from "@/hooks/AccountHooks";
@@ -12,41 +13,69 @@ export default function AccountsLoader(){
 	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = 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 accountsQuery = useGetAccounts(page - 1, pageSize);
 	const accountsCountQuery = useGetAccountsCount();
 
 
 	useEffect(() => {
-		if(accountsCountQuery.isSuccess){
+		if(accountsCountQuery.status === "success"){
 			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
 		}
 	}, [ accountsCountQuery ]);
 
 
-	if(accountsQuery.isLoading){
+	if(accountsQuery.status === "pending"){
 		return <AccountsListSkeleton/>
 	}
-	else if(accountsQuery.isError){
+	else if(accountsQuery.status === "error"){
 		return <DangerMessage>Error: {accountsQuery.error.message}</DangerMessage>
 	}
 	else{
 		return (
 			<>
-				{/* Add Account Button */}
-				<PrimaryButton
-					className="mb-8"
-					onClick={() => setDisplayCreateAccountModal(true)}
+				<div
+					className="flex flex-row justify-between items-center w-full"
 				>
-					Create Account
-				</PrimaryButton>
-				<AccountModal
-					display={displayCreateAccountModal}
-					close={() => setDisplayCreateAccountModal(false)}
-					account={undefined}
-				/>
-				{/* Account Search Bar */}
+					<div
+						className="flex flex-row items-center justify-start w-full"
+					>
+						&nbsp;
+					</div>
+					{/* Add Account Button */}
+					<div
+						className="flex flex-row items-center justify-center w-full"
+					>
+						<PrimaryButton
+							className="mb-8 tex-tnowrap"
+							onClick={() => setDisplayCreateAccountModal(true)}
+						>
+							Create Account
+						</PrimaryButton>
+						<AccountModal
+							display={displayCreateAccountModal}
+							close={() => setDisplayCreateAccountModal(false)}
+							account={undefined}
+						/>
+					</div>
+					{/* Account Search Box */}
+					<div
+						className="flex flex-row items-center justify-end w-full"
+					>
+						<div>
+							<TextInput
+								id={`accountSearchBox${modalId}`}
+								value={searchTerm}
+								onChange={(e) => setSearchTerm(e.target.value)}
+								placeholder="Search"
+							/>
+						</div>
+					</div>
+				</div>
+				{/* Account List */}
 				<AccountsList
 					accounts={accountsQuery.data ?? []}
 				/>

src/ui/account/modals/AccountModal.tsx

@@ -40,22 +40,22 @@ export default function AccountModal({
 
 
 	useEffect(() => {
-		if(createAccountMutate.isSuccess){
+		if(createAccountMutate.status === "success"){
 			createAccountMutate.reset();
 			addSuccessMessage(`Account ${username} created successfully`);
 			close();
 		}
-		else if(updateAccountMutate.isSuccess){
+		else if(updateAccountMutate.status === "success"){
 			updateAccountMutate.reset();
 			addSuccessMessage(`Account ${username} updated successfully`);
 			close();
 		}
-		else if(createAccountMutate.isError){
+		else if(createAccountMutate.status === "error"){
 			createAccountMutate.reset();
 			addErrorMessage(`Error creating account ${username}: ${createAccountMutate.error.message}`);
 			console.log(createAccountMutate.error);
 		}
-		else if(updateAccountMutate.isError){
+		else if(updateAccountMutate.status === "error"){
 			updateAccountMutate.reset();
 			addErrorMessage(`Error updating account ${username}: ${updateAccountMutate.error.message}`);
 			console.log(updateAccountMutate.error);

src/ui/account/modals/AccountPasswordResetModal.tsx

@@ -30,12 +30,12 @@ export default function AccountPasswordRestModal({
 	}
 
 	useEffect(() => {
-		if(passwordResetMutate.isSuccess){
+		if(passwordResetMutate.status === "success"){
 			passwordResetMutate.reset();
 			addSuccessMessage(`Successfully reset password for ${account?.username}`);
 			close();
 		}
-		else if(passwordResetMutate.isError){
+		else if(passwordResetMutate.status === "error"){
 			passwordResetMutate.reset();
 			addErrorMessage(`Failed to reset password for ${account?.username}: ${passwordResetMutate.error.message}`);
 			console.log(passwordResetMutate.error);

src/ui/account/modals/DeleteAccountModal.tsx

@@ -25,12 +25,12 @@ export default function DeleteAccountModal({
 	}
 
 	useEffect(() => {
-		if(deleteAccountMutate.isSuccess){
+		if(deleteAccountMutate.status === "success"){
 			deleteAccountMutate.reset();
 			addSuccessMessage(`Successfully deleted ${account?.username}`);
 			close();
 		}
-		else if(deleteAccountMutate.isError){
+		else if(deleteAccountMutate.status === "error"){
 			deleteAccountMutate.reset();
 			addErrorMessage(`Error deleting ${account?.username}: ${deleteAccountMutate.error.message}`);
 			console.log(deleteAccountMutate.error);

src/ui/account/modals/ForcePasswordResetModal.tsx

@@ -25,12 +25,12 @@ export default function ForcePasswordResetModal({
 	}
 
 	useEffect(() => {
-		if(forcePasswordResetMutate.isSuccess){
+		if(forcePasswordResetMutate.status === "success"){
 			forcePasswordResetMutate.reset();
 			addSuccessMessage(`Successfully forced password reset for ${account?.username}`);
 			close();
 		}
-		else if(forcePasswordResetMutate.isError){
+		else if(forcePasswordResetMutate.status === "error"){
 			forcePasswordResetMutate.reset();
 			addErrorMessage(`Error forcing password reset for ${account?.username}: ${forcePasswordResetMutate.error.message}`);
 			console.log(forcePasswordResetMutate.error);

src/ui/account/modals/RevokeRefreshTokenModal.tsx

@@ -25,12 +25,12 @@ export default function RevokeRefreshTokenModal({
 	}
 
 	useEffect(() => {
-		if(revokeRefreshTokenMutate.isSuccess){
+		if(revokeRefreshTokenMutate.status === "success"){
 			revokeRefreshTokenMutate.reset();
 			addSuccessMessage(`Refresh token for ${account?.username} was successfully revoked`);
 			close();
 		}
-		else if(revokeRefreshTokenMutate.isError){
+		else if(revokeRefreshTokenMutate.status === "error"){
 			revokeRefreshTokenMutate.reset();
 			addErrorMessage(`Error revoking refresh token for ${account?.username}: ${revokeRefreshTokenMutate.error.message}`);
 			console.log(revokeRefreshTokenMutate.error);

src/ui/game/GameAdminButtons.tsx

@@ -0,0 +1,38 @@
+import { ButtonProps } from "@/components/button/Button";
+import DangerButton from "@/components/button/DangerButton";
+import PrimaryButton from "@/components/button/PrimaryButton";
+import { BsPencilFill, BsTrash3 } from "react-icons/bs";
+
+
+export default function GameAdminButtons({
+	buttonProps,
+	showEditGameModal,
+	showDeleteGameModal
+}:{
+	buttonProps: ButtonProps;
+	showEditGameModal: () => void;
+	showDeleteGameModal: () => void;
+}){
+	return (
+		<div
+			className="flex flex-row items-center justify-center gap-2"
+		>
+			<PrimaryButton
+				{...buttonProps}
+				onClick={showEditGameModal}
+			>
+				<BsPencilFill
+					size={22}
+				/>
+			</PrimaryButton>
+			<DangerButton
+				{...buttonProps}
+				onClick={showDeleteGameModal}
+			>
+				<BsTrash3
+					size={22}
+				/>
+			</DangerButton>
+		</div>
+	);
+}

src/ui/game/GamesList.tsx

@@ -0,0 +1,102 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { Game } from "@/interface/Game";
+import { useState } from "react";
+import GameAdminButtons from "./GameAdminButtons";
+import DeleteGameModal from "./modals/DeleteGameModal";
+import GameModal from "./modals/GameModal";
+
+
+export default function GamesList({
+	games
+}:{
+	games: Game[];
+}){
+	const [ selectedGame, setSelectedGame ] = useState<Game>();
+	const [ displayEditGameModal, setDisplayEditGameModal ] = useState(false);
+	const [ displayDeleteGameModal, setDisplayDeleteGameModal ] = useState(false);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div>
+			Icon
+		</div>,
+		<div>
+			Name
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = games.map((game) => [
+		<div>
+			{
+				game.gameIcon &&
+				<div
+					className="absolute -my-4"
+				>
+					<img
+						className="m-auto"
+						src={`${import.meta.env.VITE_ICON_URL}/gameIcons/${game.gameIcon}`}
+						height={56}
+						width={56}
+					/>
+				</div>
+			}
+			&nbsp;
+		</div>,
+		<div>
+			{game.gameName}
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<GameAdminButtons
+				buttonProps={buttonProps}
+				showEditGameModal={() => {
+					setSelectedGame(game);
+					setDisplayEditGameModal(true);
+				}}
+				showDeleteGameModal={() => {
+					setSelectedGame(game);
+					setDisplayDeleteGameModal(true);
+				}}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<GameModal
+				display={displayEditGameModal}
+				close={() => {setDisplayEditGameModal(false); setSelectedGame(undefined);}}
+				game={selectedGame}
+			/>
+			<DeleteGameModal
+				display={displayDeleteGameModal}
+				close={() => {setDisplayDeleteGameModal(false); setSelectedGame(undefined);}}
+				game={selectedGame}
+			/>
+		</>
+	);
+}

src/ui/game/GamesListSkeleton.tsx

@@ -0,0 +1,8 @@
+export default function GamesListSkeleton(){
+	//TODO:
+	return (
+		<div>
+			Game List Skeleton
+		</div>
+	);
+}

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>
+			</>
+		);
+	}
+}

src/ui/game/modals/DeleteGameModal.tsx

@@ -0,0 +1,62 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useDeleteGame } from "@/hooks/GameHooks";
+import { Game } from "@/interface/Game";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+export default function DeleteGameModal({
+	display,
+	close,
+	game
+}:{
+	display: boolean;
+	close: () => void;
+	game: Game | undefined;
+}){
+	const deleteGameMutate = useDeleteGame();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const deleteGame = () => {
+		deleteGameMutate.mutate(game?.gameId ?? "");
+	}
+
+	useEffect(() => {
+		if(deleteGameMutate.status === "success"){
+			deleteGameMutate.reset();
+			addSuccessMessage(`Successfully delete ${game?.gameName}`);
+			close();
+		}
+		else if(deleteGameMutate.status === "error"){
+			deleteGameMutate.reset();
+			addErrorMessage(`Error deleting game ${game?.gameName}: ${deleteGameMutate.error.message}`);
+			console.log(deleteGameMutate.error);
+		}
+	});
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={`Delete ${game?.gameName}`}
+			modalBody={`Are you sure you want to delete ${game?.gameName}`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={deleteGame}
+					>
+						Delete
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/game/modals/GameModal.tsx

@@ -0,0 +1,113 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import IconInput from "@/components/input/IconInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useCreateGame, useUpdateGame } from "@/hooks/GameHooks";
+import { Game } from "@/interface/Game";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function GameModal({
+	display,
+	close,
+	game
+}:{
+	display: boolean;
+	close: () => void;
+	game?: Game;
+}){
+	const [ gameName, setGameName ] = useState(game?.gameName);
+	const [ gameIcon, setGameIcon ] = useState(game?.gameIcon);
+	const [ iconFile, setIconFile ] = useState<File | null>(null);
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	useEffect(() => {
+		setGameName(game?.gameName ?? "");
+		setGameIcon(game?.gameIcon ?? "");
+	}, [ game, setGameName, setGameIcon ]);
+
+
+	const updateGameMutate = useUpdateGame();
+	const createGameMutate = useCreateGame();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	useEffect(() => {
+		if(updateGameMutate.status === "success"){
+			updateGameMutate.reset();
+			addSuccessMessage("Game updated successfully");
+			close();
+		}
+		else if(createGameMutate.status === "success"){
+			createGameMutate.reset();
+			addSuccessMessage("Game created successfully");
+			close();
+		}
+		else if(updateGameMutate.status === "error"){
+			updateGameMutate.reset();
+			addErrorMessage(`Error updating game ${gameName}: ${updateGameMutate.error.message}`);
+			console.log(updateGameMutate.error);
+		}
+		else if(createGameMutate.status === "error"){
+			createGameMutate.reset();
+			addErrorMessage(`Error creating game ${gameName}: ${createGameMutate.error.message}`);
+			console.log(createGameMutate.error);
+		}
+	}, [ updateGameMutate, createGameMutate, gameName, close, addSuccessMessage, addErrorMessage ]);
+
+
+	const updateGame = () => {
+		updateGameMutate.mutate({game: {gameId: game?.gameId, gameName, gameIcon} as Game, iconFile});
+	}
+
+	const createGame = () => {
+		createGameMutate.mutate({gameName: gameName ?? "", iconFile});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={game ? "Update Game" : "Create Game"}
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<div
+						className="flex flex-row items-center justify-center w-full px-4.5"
+					>
+						<TextInput
+							id={`gameModalGameName${modalId}`}
+							placeholder="Game Name"
+							value={gameName}
+							onChange={(e) => setGameName(e.target.value)}
+						/>
+					</div>
+					<IconInput
+						file={iconFile}
+						setFile={(file) => {setIconFile(file); setGameIcon(undefined);}}
+						addErrorMessage={addErrorMessage}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={game ? updateGame : createGame}
+					>
+						{game ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}