Requests tab working

src/hooks/AccountHooks.ts

@@ -285,14 +285,14 @@ export function useDeleteAccount(accountId: string){
 
 }
 
-export function UseRemoveAccountFromRaidGroup(raidGroupId?: string, accountId?: string){
+export function useRemoveAccountFromRaidGroup(raidGroupId?: string, accountId?: string){
 	const queryClient = useQueryClient();
 
 
 	return useMutation({
 		mutationKey: ["removeAccountFromRaidGroup", raidGroupId, accountId],
 		mutationFn: async () => {
-			const response = await api.delete(`/account/raidGroup/${raidGroupId}/permissions/${accountId}`);
+			const response = await api.delete(`/account/${accountId}/raidGroup/${raidGroupId}/permission`);
 
 			if(response.status !== 200){
 				throw new Error("Failed to remove account from raid group");

src/hooks/ClassGroupHooks.ts

@@ -109,7 +109,6 @@ export function useUpdateClassGroup(raidGroupId: string){
 	return useMutation({
 		mutationKey: ["updateClassGroup"],
 		mutationFn: async ({classGroup, gameClassIds}:{classGroup: ClassGroup; gameClassIds: string[];}) => {
-			console.log("Hit");
 			const response = await api.put(`/raidGroup/${raidGroupId}/classGroup/${classGroup.classGroupId}`,
 				{
 					classGroup,

src/hooks/RaidGroupRequestHooks.ts

@@ -0,0 +1,124 @@
+import { RaidGroupPermissionType } from "@/interface/RaidGroup";
+import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
+import { api } from "@/util/AxiosUtil";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+
+export function useGetRaidGroupRequests(raidGroupId: string, page: number, pageSize: number, searchTerm?: string){
+	const searchParams = new URLSearchParams();
+	searchParams.append("page", page.toString());
+	searchParams.append("pageSize", pageSize.toString());
+	if(searchTerm){
+		searchParams.append("searchTerm", searchTerm);
+	}
+
+	return useQuery({
+		queryKey: ["raidGroupRequest", raidGroupId, {page, pageSize, searchTerm}],
+		queryFn: async () => {
+			const response = await api.get(`/raidGroup/${raidGroupId}/raidGroupRequest?${searchParams}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid group requests");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data as RaidGroupRequest[];
+		},
+		enabled: !!raidGroupId && raidGroupId !== ""
+	});
+}
+
+export function useGetRaidGroupRequestCount(raidGroupId?: string, searchTerm?: string){
+	const searchParams = new URLSearchParams();
+	if(searchTerm){
+		searchParams.append("searchTerm", searchTerm);
+	}
+
+	return useQuery({
+		queryKey: ["raidGroupRequest", raidGroupId, "count", searchTerm],
+		queryFn: async () => {
+			const response = await api.get(`/raidGroup/${raidGroupId}/raidGroupRequest/count?${searchParams}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to get raid group request count");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+
+			return response.data.count as number;
+		},
+		enabled: !!raidGroupId && raidGroupId !== ""
+	});
+}
+
+
+export function useCreateRaidGroupRequest(raidGroupId: string){
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationKey: ["raidGroupRequest", raidGroupId],
+		mutationFn: async (requestMessage: string) => {
+			const response = await api.post(`/raidGroup/${raidGroupId}/raidGroupRequest`, {
+				requestMessage
+			});
+
+			if(response.status !== 200){
+				throw new Error("Failed to create raid group request");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroupRequest", raidGroupId] });
+		}
+	});
+}
+
+export function useResolveRaidGroupRequest(raidGroupId: string, raidGroupRequestId: string){
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationKey: ["raidGroupRequest", raidGroupId, raidGroupRequestId],
+		mutationFn: async (permission: RaidGroupPermissionType) => {
+			const response = await api.put(`/raidGroup/${raidGroupId}/raidGroupRequest/${raidGroupRequestId}/resolve`, {
+				resolution: permission
+			});
+
+			if(response.status !== 200){
+				throw new Error("Failed to resolve raid group request");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroupRequest", raidGroupId] });
+		}
+	});
+
+}
+
+export function useDeleteRaidGroupRequest(raidGroupId: string, raidGroupRequestId: string){
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationKey: ["raidGroupRequest", raidGroupId, raidGroupRequestId],
+		mutationFn: async () => {
+			const response = await api.delete(`/raidGroup/${raidGroupId}/raidGroupRequest/${raidGroupRequestId}`);
+
+			if(response.status !== 200){
+				throw new Error("Failed to delete raid group request");
+			}
+			else if(response.data.errors){
+				throw new Error(response.data.errors.join(", "));
+			}
+		},
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["raidGroupRequest", raidGroupId] });
+		}
+	});
+}

src/interface/RaidGroupRequest.ts

@@ -0,0 +1,8 @@
+export interface RaidGroupRequest {
+	raidGroupRequestId?: string;
+	raidGroupId: string;
+	accountId: string;
+	requestMessage: string;
+
+	username: string;
+}

src/pages/protected/RaidGroupPage.tsx

@@ -6,6 +6,7 @@ import RaidGroupCalendarDisplay from "@/ui/calendar/RaidGroupCalendarDisplay";
 import RaidGroupHeader from "@/ui/calendar/RaidGroupHeader";
 import ClassGroupsTab from "@/ui/classGroup/ClassGroupsTab";
 import PersonTab from "@/ui/person/PersonTab";
+import RaidGroupRequestTab from "@/ui/raidGroupRequest/RaidGroupRequestTab";
 import RaidInstancesTab from "@/ui/raidInstances/RaidInstancesTab";
 import RaidLayoutTab from "@/ui/raidLayout/RaidLayoutTab";
 import { useEffect, useState } from "react";
@@ -65,13 +66,17 @@ export default function RaidGroupPage(){
 			{
 				tabHeader: "Users",
 				tabContent: <RaidGroupAccountsTab raidGroup={raidGroup}/>
+			},
+			{
+				tabHeader: "Requests",
+				tabContent: <RaidGroupRequestTab raidGroup={raidGroup}/>
 			}
 		];
 
 
 		return (
 			<main
-				className="flex flex-col items-center justify-center"
+				className="flex flex-col items-center justify-center gap-y-8"
 			>
 				<RaidGroupHeader
 					raidGroup={raidGroup}

src/providers/AuthProvider.tsx

@@ -38,7 +38,7 @@ export function AuthProvider({
 
 
 	const fetchToken = useCallback(async () => {
-		console.log("Fetching token");
+		//console.log("Fetching token");
 		try{
 			const response = await api.get("/auth/refresh");
 			//If the token is retrieved

src/ui/account/AccountsList.tsx

@@ -15,16 +15,13 @@ import RevokeRefreshTokenModal from "./modals/RevokeRefreshTokenModal";
 import RaidGroupAccountAdminButtons from "./RaidGroupAccountAdminButtons";
 
 
-export interface AccountsListProps {
+export default function AccountsList({
+	accounts,
+	raidGroup
+}:{
 	accounts: Account[];
 	raidGroup?: RaidGroup;
-}
+}){
-
-
-export default function AccountsList(props: AccountsListProps){
-	const { accounts, raidGroup } = props;
-
-
 	const [ selectedAccount, setSelectedAccount ] = useState<Account | undefined>(undefined);
 	const [ displayForcePasswordResetModal, setDisplayForcePasswordResetModal ] = useState(false);
 	const [ displayAccountPasswordSetModal, setDisplayAccountPasswordSetModal ] = useState(false);
@@ -175,6 +172,7 @@ export default function AccountsList(props: AccountsListProps){
 				display={displayRemoveAccountFromRaidGroupModal}
 				close={() => {setDisplayRemoveAccountFromRaidGroupModal(false); setSelectedAccount(undefined);}}
 				account={selectedAccount}
+				raidGroup={raidGroup}
 			/>
 		</>
 	);

src/ui/account/RaidGroupAccountsTab.tsx

@@ -51,7 +51,7 @@ export default function RaidGroupAccountsTab({
 					 
 				</div>
 				<div
-					className="flex flex-row items-center justify-end w-full"
+					className="flex flex-row items-center justify-center w-full"
 				>
 					&nbsp;
 				</div>
@@ -72,7 +72,7 @@ export default function RaidGroupAccountsTab({
 			<AccountsByRaidGroupLoader
 				page={page}
 				pageSize={pageSize}
-				searchTerm={searchTerm}
+				searchTerm={sentSearchTerm}
 				raidGroup={raidGroup}
 			/>
 			{/* Pagination */}

src/ui/account/modals/RemoveAccountFromRaidGroupModal.tsx

@@ -1,7 +1,7 @@
 import DangerButton from "@/components/button/DangerButton";
 import SecondaryButton from "@/components/button/SecondaryButton";
 import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
-import { UseRemoveAccountFromRaidGroup } from "@/hooks/AccountHooks";
+import { useRemoveAccountFromRaidGroup } from "@/hooks/AccountHooks";
 import { Account } from "@/interface/Account";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { useTimedModal } from "@/providers/TimedModalProvider";
@@ -19,7 +19,7 @@ export default function RemoveAccountFromRaidGroupModal({
 	account?: Account;
 	raidGroup?: RaidGroup;
 }){
-	const removeAccountFromRaidGroupQuery = UseRemoveAccountFromRaidGroup(raidGroup?.raidGroupId ?? "", account?.accountId ?? "");
+	const removeAccountFromRaidGroupQuery = useRemoveAccountFromRaidGroup(raidGroup?.raidGroupId ?? "", account?.accountId ?? "");
 	const { addSuccessMessage, addErrorMessage } = useTimedModal();
 
 

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

src/ui/raidGroupRequest/RaidGroupRequestList.tsx

@@ -0,0 +1,81 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
+import { useState } from "react";
+import DeleteRaidGroupRequestModal from "./modal/DeleteRaidGroupRequestModal";
+import RaidGroupRequestModal from "./modal/RaidGroupRequestModal";
+import RaidGroupRequestButtons from "./RaidGroupRequestButtons";
+
+
+export default function RaidGroupRequestList({
+	raidGroupRequests,
+	raidGroup
+}:{
+	raidGroupRequests: RaidGroupRequest[];
+	raidGroup: RaidGroup;
+}){
+	const [ selectedRequest, setSelectedRequest ] = useState<RaidGroupRequest>();
+	const [ displayRequestModal, setDisplayRequestModal ] = useState(false);
+	const [ displayDeleteRequestModal, setDisplayDeleteRequestModal ] = useState(false);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div>
+			Username
+		</div>,
+		<div>
+			Actions
+		</div>
+	];
+	const bodyElements: React.ReactNode[][] = raidGroupRequests.map((request) => [
+		<div>
+			{request.username}
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			{
+				raidGroup &&
+				<RaidGroupRequestButtons
+					buttonProps={buttonProps}
+					showRaidGroupRequestModal={() => { setSelectedRequest(request); setDisplayRequestModal(true); }}
+					showDeleteRaidGroupRequestModal={() => { setSelectedRequest(request); setDisplayDeleteRequestModal(true); }}
+				/>
+			}
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidGroupRequestModal
+				display={displayRequestModal}
+				close={() => {setDisplayRequestModal(false); setSelectedRequest(undefined);}}
+				raidGroupRequest={selectedRequest}
+				raidGroupId={raidGroup.raidGroupId ?? ""}
+			/>
+			<DeleteRaidGroupRequestModal
+				display={displayDeleteRequestModal}
+				close={() => {setDisplayDeleteRequestModal(false); setSelectedRequest(undefined);}}
+				raidGroupRequest={selectedRequest}
+			/>
+		</>
+	);
+}

src/ui/raidGroupRequest/RaidGroupRequestListSkeleton.tsx

@@ -0,0 +1,10 @@
+export default function RaidGroupRequestListSkeleton(){
+	//TODO:
+
+
+	return (
+		<div>
+			Raid Group Request List Skeleton
+		</div>
+	);
+}

src/ui/raidGroupRequest/RaidGroupRequestLoader.tsx

@@ -0,0 +1,36 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetRaidGroupRequests } from "@/hooks/RaidGroupRequestHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import RaidGroupRequestList from "./RaidGroupRequestList";
+import RaidGroupRequestListSkeleton from "./RaidGroupRequestListSkeleton";
+
+
+export default function RaidGroupRequestLoader({
+	page,
+	pageSize,
+	searchTerm,
+	raidGroup
+}:{
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+	raidGroup: RaidGroup;
+}){
+	const raidGroupRequestsQuery = useGetRaidGroupRequests(raidGroup.raidGroupId!, page - 1, pageSize, searchTerm);
+
+
+	if(raidGroupRequestsQuery.status === "pending"){
+		return <RaidGroupRequestListSkeleton/>
+	}
+	else if(raidGroupRequestsQuery.status === "error"){
+		return <DangerMessage>Error: {raidGroupRequestsQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<RaidGroupRequestList
+				raidGroupRequests={raidGroupRequestsQuery.data ?? []}
+				raidGroup={raidGroup}
+			/>
+		);
+	}
+}

src/ui/raidGroupRequest/RaidGroupRequestTab.tsx

@@ -0,0 +1,89 @@
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetRaidGroupRequestCount } from "@/hooks/RaidGroupRequestHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import RaidGroupRequestLoader from "./RaidGroupRequestLoader";
+
+
+export default function RaidGroupRequestTab({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	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().replaceAll("-", "");
+
+
+	const raidGroupRequestsCountQuery = useGetRaidGroupRequestCount(raidGroup.raidGroupId);
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(raidGroupRequestsCountQuery.status === "success"){
+			setTotalPages(Math.ceil(raidGroupRequestsCountQuery.data / pageSize));
+		}
+	}, [ raidGroupRequestsCountQuery ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row items-center justify-between w-full"
+			>
+				<div
+					className="flex flex-row items-center justify-start w-full"
+				>
+					&nbsp;
+				</div>
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					&nbsp;
+				</div>
+				<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>
+			{/* Requests List */}
+			<RaidGroupRequestLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+				raidGroup={raidGroup}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/raidGroupRequest/modal/DeleteRaidGroupRequestModal.tsx

@@ -0,0 +1,63 @@
+import DangerButton from "@/components/button/DangerButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import { useDeleteRaidGroupRequest } from "@/hooks/RaidGroupRequestHooks";
+import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect } from "react";
+
+
+export default function DeleteRaidGroupRequestModal({
+	display,
+	close,
+	raidGroupRequest
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroupRequest?: RaidGroupRequest;
+}){
+	const deleteRaidGroupRequestMutate = useDeleteRaidGroupRequest(raidGroupRequest?.raidGroupId ?? "", raidGroupRequest?.raidGroupRequestId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	const deleteRaidGroupRequest = () => {
+		deleteRaidGroupRequestMutate.mutate();
+	}
+
+	useEffect(() => {
+		if(deleteRaidGroupRequestMutate.status === "success"){
+			deleteRaidGroupRequestMutate.reset();
+			addSuccessMessage("Raid Group Request deleted successfully");
+			close();
+		}
+		else if(deleteRaidGroupRequestMutate.status === "error"){
+			deleteRaidGroupRequestMutate.reset();
+			addErrorMessage(`Error deleting Raid Group Request: ${deleteRaidGroupRequestMutate.error.message}`);
+			console.log(deleteRaidGroupRequestMutate.error);
+		}
+	});
+
+
+	return(
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Delete Raid Group Request"
+			modalBody={`Are you sure you want to delete the request from ${raidGroupRequest?.username}?`}
+			modalFooter={
+				<>
+					<DangerButton
+						onClick={deleteRaidGroupRequest}
+					>
+						Delete
+					</DangerButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidGroupRequest/modal/RaidGroupRequestModal.tsx

@@ -0,0 +1,127 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import SecondaryButton from "@/components/button/SecondaryButton";
+import TextInput from "@/components/input/TextInput";
+import RaidBuilderModal from "@/components/modal/RaidBuilderModal";
+import RaidGroupPermissionSelector from "@/components/raidGroup/RaidGroupPermissionSelector";
+import { useCreateRaidGroupRequest, useResolveRaidGroupRequest } from "@/hooks/RaidGroupRequestHooks";
+import { Account } from "@/interface/Account";
+import { RaidGroupPermissionType } from "@/interface/RaidGroup";
+import { RaidGroupRequest } from "@/interface/RaidGroupRequest";
+import { useTimedModal } from "@/providers/TimedModalProvider";
+import { useEffect, useState } from "react";
+
+
+export default function RaidGroupRequestModal({
+	display,
+	close,
+	raidGroupId,
+	raidGroupRequest,
+	account
+}:{
+	display: boolean;
+	close: () => void;
+	raidGroupId: string;
+	raidGroupRequest?: RaidGroupRequest;
+	account?: Account;
+}){
+	const [ currentPermission, setCurrentPermission ] = useState(RaidGroupPermissionType.RAIDER);
+	const [ requestMessage, setRequestMessage ] = useState(raidGroupRequest?.requestMessage ?? "");
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	useEffect(() => {
+		setCurrentPermission(RaidGroupPermissionType.RAIDER);
+		setRequestMessage(raidGroupRequest?.requestMessage ?? "");
+	}, [ display, raidGroupRequest ]);
+
+
+	const createRaidGroupRequestMutate = useCreateRaidGroupRequest(raidGroupId);
+	const resolveRaidGroupRequestMutate = useResolveRaidGroupRequest(raidGroupId, raidGroupRequest?.raidGroupRequestId ?? "");
+	const { addSuccessMessage, addErrorMessage } = useTimedModal();
+
+
+	useEffect(() => {
+		if(createRaidGroupRequestMutate.status === "success"){
+			createRaidGroupRequestMutate.reset();
+			addSuccessMessage("Raid Group Request Created");
+			close();
+		}
+		else if(createRaidGroupRequestMutate.status === "error"){
+			createRaidGroupRequestMutate.reset();
+			addErrorMessage(`Error creating raid group request: ${createRaidGroupRequestMutate.error.message}`);
+			console.log(createRaidGroupRequestMutate.error);
+		}
+		else if(resolveRaidGroupRequestMutate.status === "success"){
+			resolveRaidGroupRequestMutate.reset();
+			addSuccessMessage("Raid Group Request Resolved");
+			close();
+		}
+		else if(resolveRaidGroupRequestMutate.status === "error"){
+			resolveRaidGroupRequestMutate.reset();
+			addErrorMessage(`Error resolving raid group request: ${resolveRaidGroupRequestMutate.error.message}`);
+			console.log(resolveRaidGroupRequestMutate.error);
+		}
+	});
+
+
+	const createRaidGroupRequest = () => {
+		createRaidGroupRequestMutate.mutate(requestMessage);
+	}
+
+	const resolveRaidGroupRequest = () => {
+		resolveRaidGroupRequestMutate.mutate(currentPermission);
+	}
+
+
+	return (
+		<RaidBuilderModal
+			display={display}
+			close={close}
+			modalHeader="Raid Group Request"
+			modalBody={
+				<div
+					className="flex flex-col items-center justify-center gap-4"
+				>
+					<div>
+						{
+							raidGroupRequest &&
+							raidGroupRequest?.username
+						}
+						{
+							account &&
+							account?.username
+						}
+					</div>
+					<TextInput
+						id={`raidGroupRequestModalMessageInput${modalId}`}
+						value={requestMessage}
+						onChange={(e) => setRequestMessage(e.target.value)}
+						placeholder="Message"
+						disabled={!!raidGroupRequest}
+					/>
+					{
+						raidGroupRequest &&
+						<RaidGroupPermissionSelector
+							value={currentPermission}
+							onChange={(e) => setCurrentPermission(e.target.value as RaidGroupPermissionType)}
+						/>
+					}
+				</div>
+			}
+			modalFooter={
+				<>
+					<PrimaryButton
+						onClick={raidGroupRequest ? resolveRaidGroupRequest : createRaidGroupRequest}
+					>
+						{raidGroupRequest ? "Resolve" : "Request"}
+					</PrimaryButton>
+					<SecondaryButton
+						onClick={close}
+					>
+						Cancel
+					</SecondaryButton>
+				</>
+			}
+		/>
+	);
+}

src/ui/raidLayout/modal/RaidLayoutModal.tsx

@@ -38,22 +38,17 @@ export default function RaidLayoutModal({
 	}, [ raidLayout, selectedClassGroups ]);
 
 	const updateRaidLayoutSize = (newLayoutSize: number) => {
-		console.log("newLayoutSize = " + newLayoutSize + ", " + classGroups.length);
 		setRaidLayoutSize(newLayoutSize);
 		if(newLayoutSize < classGroups.length){
-			console.log("Removing");
 			setClassGroups(classGroups.slice(0, newLayoutSize));
 		}
 		else if(newLayoutSize > classGroups.length){
-			console.log("Adding");
 			setClassGroups([
 				...classGroups,
 				null
 			]);
 		}
 	}
-	console.log("classGroups");
-	console.log(classGroups);
 
 
 	const createRaidLayoutMutate = useCreateRaidLayout(raidGroup.raidGroupId ?? "");