Raid Request button working

src/ui/raidGroup/RaidGroupAdminButtons.tsx

@@ -1,22 +1,41 @@
 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";
+import TertiaryButton from "@/components/button/TertiaryButton";
+import { BsChatRightText, BsPencilFill, BsTrash3 } from "react-icons/bs";
 
 
 export default function RaidGroupAdminButtons({
 	buttonProps,
+	showRaidGroupRequestModal,
 	showEditRaidGroupModal,
-	showDeleteRaidGroupModal
+	showDeleteRaidGroupModal,
+	hasRaidGroupPermissions,
+	hasRaidGroupRequest
 }:{
 	buttonProps: ButtonProps;
+	showRaidGroupRequestModal?: () => void;
 	showEditRaidGroupModal: () => void;
 	showDeleteRaidGroupModal: () => void;
+	hasRaidGroupPermissions: boolean;
+	hasRaidGroupRequest: boolean;
 }){
 	return (
 		<div
 			className="flex flex-row items-center justify-center gap-2"
 		>
+			{
+				!hasRaidGroupPermissions &&
+				<TertiaryButton
+					{...buttonProps}
+					onClick={showRaidGroupRequestModal}
+					disabled={hasRaidGroupRequest}
+				>
+					<BsChatRightText
+						size={22}
+					/>
+				</TertiaryButton>
+			}
 			<PrimaryButton
 				{...buttonProps}
 				onClick={showEditRaidGroupModal}

src/ui/raidGroup/RaidGroupsList.tsx

@@ -1,8 +1,11 @@
 import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { RaidGroup } from "@/interface/RaidGroup";
+import { useAuth } from "@/providers/AuthProvider";
+import { containsRaidGroupPermission, containsRaidGroupRequest } from "@/util/PermissionUtil";
 import { useState } from "react";
 import { Link } from "react-router";
+import RaidGroupRequestModal from "../raidGroupRequest/modal/RaidGroupRequestModal";
 import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
 import RaidGroupModal from "./modals/RaidGroupModal";
 import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
@@ -14,8 +17,10 @@ export default function RaidGroupsList({
 	raidGroups: RaidGroup[];
 }){
 	const [ selectedRaidGroup, setSelectedRaidGroup ] = useState<RaidGroup>();
+	const [ displayRaidGroupRequestModal, setDisplayRaidGroupRequestModal ] = useState(false);
 	const [ displayEditRaidGroupModal, setDisplayEditRaidGroupModal ] = useState(false);
 	const [ displayDeleteRaidGroupModal, setDisplayDeleteRaidGroupModal ] = useState(false);
+	const { raidGroupPermissions, raidGroupRequests } = useAuth();
 
 
 	const buttonProps: ButtonProps = {
@@ -69,6 +74,10 @@ export default function RaidGroupsList({
 			</div>
 			<RaidGroupAdminButtons
 				buttonProps={buttonProps}
+				showRaidGroupRequestModal={() => {
+					setSelectedRaidGroup(raidGroup);
+					setDisplayRaidGroupRequestModal(true);
+				}}
 				showEditRaidGroupModal={() => {
 					setSelectedRaidGroup(raidGroup);
 					setDisplayEditRaidGroupModal(true);
@@ -77,6 +86,8 @@ export default function RaidGroupsList({
 					setSelectedRaidGroup(raidGroup);
 					setDisplayDeleteRaidGroupModal(true);
 				}}
+				hasRaidGroupPermissions={containsRaidGroupPermission(raidGroup.raidGroupId ?? "", raidGroupPermissions)}
+				hasRaidGroupRequest={containsRaidGroupRequest(raidGroup.raidGroupId ?? "", raidGroupRequests)}
 			/>
 		</div>
 	]);
@@ -88,6 +99,11 @@ export default function RaidGroupsList({
 				tableHeadElements={headElements}
 				tableBodyElements={bodyElements}
 			/>
+			<RaidGroupRequestModal
+				display={displayRaidGroupRequestModal}
+				close={() => {setDisplayRaidGroupRequestModal(false); setSelectedRaidGroup(undefined);}}
+				raidGroupId={selectedRaidGroup?.raidGroupId ?? ""}
+			/>
 			<RaidGroupModal
 				display={displayEditRaidGroupModal}
 				close={() => {setDisplayEditRaidGroupModal(false); setSelectedRaidGroup(undefined);}}