Admin page raid groups tab working

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

src/hooks/GameHooks.ts

@@ -3,6 +3,25 @@ import { api } from "@/util/AxiosUtil";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 
+export function useGetGame(gameId: string, disabled: boolean){
+	return useQuery({
+		queryKey: ["game", gameId],
+		queryFn: async () => {
+			const response = await api.get(`/game/${gameId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get game");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data as Game;
+		},
+		enabled: !disabled
+	});
+}
+
 export function useGetGames(page: number, pageSize: number, searchTerm?: string){
 	return useQuery({
 		queryKey: ["games", { page, pageSize, searchTerm }],
@@ -58,7 +77,7 @@ export function useCreateGame(){
 
 	return useMutation({
 		mutationKey: ["createGame"],
-		mutationFn: async ({gameName, iconFile}:{gameName: string, iconFile: File | null}) => {
+		mutationFn: async ({gameName, iconFile}:{gameName: string; iconFile: File | null;}) => {
 			const formData = new FormData();
 			if(iconFile){
 				formData.append("iconFile", iconFile);

src/hooks/RaidGroupHooks.ts

@@ -0,0 +1,139 @@
+import { RaidGroup } from "@/interface/RaidGroup";
+import { api } from "@/util/AxiosUtil";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+
+export function useGetRaidGroups(page: number, pageSize: number, searchTerm?: string){
+	return useQuery({
+		queryKey: ["raidGroups", { page, pageSize, searchTerm }],
+		queryFn: async () => {
+			const params = new URLSearchParams();
+			params.append("page", page.toString());
+			params.append("pageSize", pageSize.toString());
+			if(searchTerm){
+				params.append("searchTerm", searchTerm);
+			}
+
+			const response = await api.get(`/raidGroup?${params}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid groups");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data as RaidGroup[];
+		}
+	});
+}
+
+export function useGetRaidGroupsCount(searchTerm?: string){
+	const searchParams = new URLSearchParams();
+	if(searchTerm){
+		searchParams.append("searchTerm", searchTerm);
+	}
+
+
+	return useQuery({
+		queryKey: ["raidGroups", "count", searchTerm],
+		queryFn: async () => {
+			const response = await api.get(`/raidGroup/count?${searchParams}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid groups count");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data.count as number;
+		}
+	});
+}
+
+export function useCreateRaidGroup(){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["createRaidGroup"],
+		mutationFn: async ({raidGroupName, gameId, iconFile}:{raidGroupName: string; gameId: string; iconFile: File | null;}) => {
+			const formData = new FormData();
+			if(iconFile){
+				formData.append("iconFile", iconFile);
+			}
+			formData.append("raidGroupName", raidGroupName);
+			formData.append("gameId", gameId);
+
+			const response = await api.post(
+				"/raidGroup",
+				formData
+			);
+
+			if(response.status !== 200){
+				throw new Error("Failed to create raid group");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroups"] });
+		}
+	});
+}
+
+export function useUpdateRaidGroup(){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["updateRaidGroup"],
+		mutationFn: async ({raidGroup, iconFile}:{raidGroup: RaidGroup; iconFile: File | null;}) => {
+			const formData = new FormData();
+			if(iconFile){
+				formData.append("iconFile", iconFile);
+			}
+			formData.append("raidGroupName", raidGroup.raidGroupName);
+			formData.append("gameId", raidGroup.gameId);
+			if(raidGroup.raidGroupIcon){
+				formData.append("raidGroupIcon", raidGroup.raidGroupIcon);
+			}
+
+			const response = await api.put(`/raidGroup/${raidGroup.raidGroupId}`, formData);
+
+			if(response.status !== 200){
+				throw new Error("Failed to update raid group");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroups"] });
+		}
+	});
+}
+
+export function useDeleteRaidGroup(){
+	const queryClient = useQueryClient();
+
+
+	return useMutation({
+		mutationKey: ["deleteRaidGroup"],
+		mutationFn: async (raidGroupId: string) => {
+			const response = await api.delete(`/raidGroup/${raidGroupId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to delete raid group");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroups"] });
+		}
+	});
+}

src/interface/RaidGroup.ts

@@ -0,0 +1,6 @@
+export interface RaidGroup {
+	raidGroupId?: string;
+	gameId: string;
+	raidGroupName: string;
+	raidGroupIcon?: string;
+}

src/pages/protected/AdminPage.tsx

@@ -1,6 +1,7 @@
 import TabGroup, { Tab } from "@/components/tab/TabGroup";
 import AdminAccountsTab from "@/ui/account/AdminAccountsTab";
 import AdminGamesTab from "@/ui/game/AdminGamesTab";
+import AdminRaidGroupTab from "@/ui/raidGroup/AdminRaidGroupTab";
 
 
 export default function AdminPage(){
@@ -12,6 +13,10 @@ export default function AdminPage(){
 		{
 			tabHeader: "Games",
 			tabContent: <AdminGamesTab/>
+		},
+		{
+			tabHeader: "Raid Groups",
+			tabContent: <AdminRaidGroupTab/>
 		}
 	];
 

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