Admin page raid groups tab working

src/ui/game/modals/DeleteGameModal.tsx

@@ -6,6 +6,7 @@ import { Game } from "@/interface/Game";
 import { useTimedModal } from "@/providers/TimedModalProvider";
 import { useEffect } from "react";
 
+
 export default function DeleteGameModal({
 	display,
 	close,

src/ui/raidGroup/AdminRaidGroupTab.tsx

@@ -0,0 +1,96 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetRaidGroupsCount } from "@/hooks/RaidGroupHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import RaidGroupModal from "./modals/RaidGroupModal";
+import RaidGroupsLoader from "./RaidGroupsLoader";
+
+export default function AdminRaidGroupTab(){
+	const [ displayCreateRaidGroupModal, setDisplayRaidGroupModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	const raidGroupsCountQuery = useGetRaidGroupsCount(sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm);
+	}, [ searchTerm, updateSearchTerm ]);
+
+	useEffect(() => {
+		if(raidGroupsCountQuery.status === "success"){
+			setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
+		}
+	}, [ raidGroupsCountQuery ]);
+
+
+	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 Raid Group Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8"
+						onClick={() => setDisplayRaidGroupModal(true)}
+					>
+						Create Raid Group
+					</PrimaryButton>
+					<RaidGroupModal
+						display={displayCreateRaidGroupModal}
+						close={() => setDisplayRaidGroupModal(false)}
+						raidGroup={undefined}
+					/>
+				</div>
+				{/* Raid Group Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`raidGroupSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Raid Group List */}
+			<RaidGroupsLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/raidGroup/RaidGroupAdminButtons.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 RaidGroupAdminButtons({
+	buttonProps,
+	showEditRaidGroupModal,
+	showDeleteRaidGroupModal
+}:{
+	buttonProps: ButtonProps;
+	showEditRaidGroupModal: () => void;
+	showDeleteRaidGroupModal: () => void;
+}){
+	return (
+		<div
+			className="flex flex-row items-center justify-center gap-2"
+		>
+			<PrimaryButton
+				{...buttonProps}
+				onClick={showEditRaidGroupModal}
+			>
+				<BsPencilFill
+					size={22}
+				/>
+			</PrimaryButton>
+			<DangerButton
+				{...buttonProps}
+				onClick={showDeleteRaidGroupModal}
+			>
+				<BsTrash3
+					size={22}
+				/>
+			</DangerButton>
+		</div>
+	);
+}

src/ui/raidGroup/RaidGroupsList.tsx

@@ -0,0 +1,102 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useState } from "react";
+import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
+import RaidGroupModal from "./modals/RaidGroupModal";
+import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
+
+
+export default function RaidGroupsList({
+	raidGroups
+}:{
+	raidGroups: RaidGroup[];
+}){
+	const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
+	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
+	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = 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[][] = raidGroups.map((raidGroup) => [
+		<div>
+			{
+				raidGroup.raidGroupIcon &&
+				<div
+					className="absolute -my-4"
+				>
+					<img
+						className="m-auto"
+						src={`${import.meta.env.VITE_ICON_URL}/raidGroupIcons/${raidGroup.raidGroupIcon}`}
+						height={56}
+						width={56}
+					/>
+				</div>
+			}
+			&nbsp;
+		</div>,
+		<div>
+			{raidGroup.raidGroupName}
+		</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>
+			<RaidGroupAdminButtons
+				buttonProps={buttonProps}
+				showEditRaidGroupModal={() => {
+					setSelectedRaidGroup(raidGroup);
+					setDisplayEditRaidGroupModal(true);
+				}}
+				showDeleteRaidGroupModal={() => {
+					setSelectedRaidGroup(raidGroup);
+					setDisplayDeleteRaidGroupModal(true);
+				}}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidGroupModal
+				display={displayEditRaidGroupModal}
+				close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
+				raidGroup={selectedRaidGroup}
+			/>
+			<DeleteRaidGroupModal
+				display={displayDeleteRaidGroupModal}
+				close={() => {setDisplayDeleteRaidGroupModal(false); setSelectedRaidGroup(undefined);}}
+				raidGroup={selectedRaidGroup}
+			/>
+		</>
+	);
+}

src/ui/raidGroup/RaidGroupsListSkeleton.tsx

@@ -0,0 +1,7 @@
+export default function RaidGroupsListSkeleton(){
+	return (
+		<div>
+			Raid Group List Skeleton
+		</div>
+	);
+}

src/ui/raidGroup/RaidGroupsLoader.tsx

@@ -0,0 +1,31 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetRaidGroups } from "@/hooks/RaidGroupHooks";
+import RaidGroupsList from "./RaidGroupsList";
+import RaidGroupsListSkeleton from "./RaidGroupsListSkeleton";
+
+export default function RaidGroupsLoader({
+	page,
+	pageSize,
+	searchTerm
+}:{
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+}){
+	const raidGroupsQuery = useGetRaidGroups(page - 1, pageSize, searchTerm);
+
+
+	if(raidGroupsQuery.status === "pending"){
+		return <RaidGroupsListSkeleton/>
+	}
+	else if(raidGroupsQuery.status === "error"){
+		return <DangerMessage>Error {raidGroupsQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<RaidGroupsList
+				raidGroups={raidGroupsQuery.data ?? []}
+			/>
+		);
+	}
+}

src/ui/raidGroup/modals/DeleteRaidGroupModal.tsx

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

src/ui/raidGroup/modals/RaidGroupModal.tsx

@@ -0,0 +1,130 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import GameSelector from "@/components/game/GameSelector";
+import IconInput from "@/components/input/IconInput";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useGetGame } from "@/hooks/GameHooks";
+import { useCreateRaidGroup, useUpdateRaidGroup } from "@/hooks/RaidGroupHooks";
+import { Game } from "@/interface/Game";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function RaidGroupModal({
+	display,
+	close,
+	raidGroup
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroup?: RaidGroup;
+}){
+	const [ raidGroupName, setRaidGroupName ] = useState(raidGroup?.raidGroupName);
+	const [ raidGroupIcon, setRaidGroupIcon ] = useState(raidGroup?.raidGroupIcon);
+	const [ iconFile, setIconFile ] = useState<File | null>(null);
+	const [ game, setGame ] = useState<Game>();
+	const modalId = crypto.randomUUID().replace("-", "");
+
+
+	useEffect(() => {
+		setRaidGroupName(raidGroup?.raidGroupName ?? "");
+		setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
+	}, [ raidGroup, setRaidGroupName, setRaidGroupIcon ]);
+
+
+	const updateRaidGroupMutate = useUpdateRaidGroup();
+	const createRaidGroupMutate = useCreateRaidGroup();
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+	const gameQuery = useGetGame(raidGroup?.gameId ?? "", raidGroup === undefined);
+	if(gameQuery.status === "success" && !game){
+		setGame(gameQuery.data);
+	}
+
+
+	useEffect(() => {
+		if(updateRaidGroupMutate.status === "success"){
+			updateRaidGroupMutate.reset();
+			addSuccessMessage(`Updated raid group ${raidGroupName}`);
+			close();
+		}
+		else if(updateRaidGroupMutate.status === "error"){
+			updateRaidGroupMutate.reset();
+			addErrorMessage(`Error updating raid group ${raidGroupName}: ${updateRaidGroupMutate.error.message}`);
+			console.log(updateRaidGroupMutate.error);
+		}
+		else if(createRaidGroupMutate.status === "success"){
+			createRaidGroupMutate.reset();
+			addSuccessMessage(`Created raid group ${raidGroupName}`);
+			close();
+		}
+		else if(createRaidGroupMutate.status === "error"){
+			createRaidGroupMutate.reset();
+			addErrorMessage(`Error creating raid group ${raidGroupName}: ${createRaidGroupMutate.error.message}`);
+			console.log(createRaidGroupMutate.error);
+		}
+	}, [ updateRaidGroupMutate, createRaidGroupMutate, raidGroupName, close, addSuccessMessage, addErrorMessage ]);
+
+
+	const updateRaidGroup = () => {
+		updateRaidGroupMutate.mutate({raidGroup: {raidGroupId: raidGroup?.raidGroupId, raidGroupName, gameId: game?.gameId, raidGroupIcon} as RaidGroup, iconFile});
+	}
+
+	const createRaidGroup = () => {
+		createRaidGroupMutate.mutate({raidGroupName: raidGroupName ?? "", gameId: game?.gameId ?? "", iconFile});
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader={raidGroup ? "Update Raid Group" : "Create Raid Group"}
+			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={`raidGroupModalRaidGroupName${modalId}`}
+							placeholder="Raid Group Name"
+							value={raidGroupName}
+							onChange={(e) => setRaidGroupName(e.target.value)}
+						/>
+					</div>
+					<div
+						className="w-full px-4.5"
+					>
+						<GameSelector
+							game={game}
+							onChange={setGame}
+							disabled={!!raidGroup}
+						/>
+					</div>
+					<IconInput
+						file={iconFile}
+						setFile={(file) => {setIconFile(file); setRaidGroupIcon(undefined);}}
+						addErrorMessage={addErrorMessage}
+					/>
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={raidGroup ? updateRaidGroup : createRaidGroup}
+					>
+						{raidGroup ? "Update" : "Create"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}