Buttons hidden by permissions

src/ui/gameClass/GameClassAdminButtons.tsx

@@ -1,25 +1,37 @@
 import { ButtonProps } from "@/components/button/Button";
 import DangerButton from "@/components/button/DangerButton";
 import PrimaryButton from "@/components/button/PrimaryButton";
+import { GameClass } from "@/interface/GameClass";
+import { useTheme } from "@/providers/ThemeProvider";
 import { BsPencilFill, BsTrash3 } from "react-icons/bs";
+import { Tooltip } from "react-tooltip";
 
 
 export default function GameClassAdminButtons({
+	gameClass,
 	buttonProps,
 	showEditGameClassModal,
 	showDeleteGameClassModal
 }:{
+	gameClass: GameClass;
 	buttonProps: ButtonProps;
 	showEditGameClassModal: () => void;
 	showDeleteGameClassModal: () => void;
 }){
+	const { theme } = useTheme();
+	const componentId = crypto.randomUUID().replaceAll("-", "");
+
+
 	return (
 		<div
 			className="flex flex-row items-center justify-center gap-2"
 		>
 			<PrimaryButton
 				{...buttonProps}
+				id={`gameClassAdminButtonsEdit${componentId}`}
 				onClick={showEditGameClassModal}
+				aria-label={`Edit ${gameClass.gameClassName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsPencilFill
 					size={22}
@@ -27,12 +39,29 @@ export default function GameClassAdminButtons({
 			</PrimaryButton>
 			<DangerButton
 				{...buttonProps}
+				id={`gameClassAdminButtonsDelete${componentId}`}
 				onClick={showDeleteGameClassModal}
+				aria-label={`Delete ${gameClass.gameClassName}`}
+				data-tooltip-delay-show={750}
 			>
 				<BsTrash3
 					size={22}
 				/>
 			</DangerButton>
+			<Tooltip
+				anchorSelect={`#gameClassAdminButtonsEdit${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Edit {gameClass.gameClassName}
+			</Tooltip>
+			<Tooltip
+				anchorSelect={`#gameClassAdminButtonsDelete${componentId}`}
+				place="top"
+				variant={theme === "dark" ? "light" : "dark"}
+			>
+				Delete {gameClass.gameClassName}
+			</Tooltip>
 		</div>
 	);
 }

src/ui/gameClass/GameClassCreateAndSearch.tsx

@@ -1,5 +1,7 @@
 import PrimaryButton from "@/components/button/PrimaryButton";
 import TextInput from "@/components/input/TextInput";
+import { useAuth } from "@/providers/AuthProvider";
+import { isGameAdmin } from "@/util/PermissionUtil";
 import { useState } from "react";
 import GameClassModal from "./modals/GameClassModal";
 
@@ -13,6 +15,7 @@ export default function GameClassCreateAndSearch({
 	searchTerm: string;
 	setSearchTerm: (searchTerm: string) => void;
 }){
+	const { gamePermissions, accountPermissions } = useAuth();
 	const [ displayGameClassModal, setDisplayGameClassModal ] = useState(false);
 	const modalId = crypto.randomUUID().replaceAll("-", "");
 
@@ -33,6 +36,7 @@ export default function GameClassCreateAndSearch({
 				<PrimaryButton
 					className="mb-8"
 					onClick={() => setDisplayGameClassModal(true)}
+					disabled={!isGameAdmin(gameId, gamePermissions, accountPermissions)}
 				>
 					Create Game Class
 				</PrimaryButton>

src/ui/gameClass/GameClassList.tsx

@@ -1,6 +1,8 @@
 import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { GameClass } from "@/interface/GameClass";
+import { useAuth } from "@/providers/AuthProvider";
+import { isGameAdmin } from "@/util/PermissionUtil";
 import { useState } from "react";
 import GameClassAdminButtons from "./GameClassAdminButtons";
 import DeleteGameClassModal from "./modals/DeleteGameClassModal";
@@ -12,6 +14,7 @@ export default function GameClassList({
 }:{
 	gameClasses: GameClass[];
 }){
+	const { gamePermissions, accountPermissions } = useAuth();
 	const [ selectedGameClass, setSelectedGameClass ] = useState<GameClass>();
 	const [ displayGameClassModal, setDisplayGameClassModal ] = useState(false);
 	const [ displayDeleteGameClassModal, setDisplayDeleteGameClassModal ] = useState(false);
@@ -65,7 +68,11 @@ export default function GameClassList({
 				&nbsp;
 			</div>
 			<GameClassAdminButtons
-				buttonProps={buttonProps}
+				gameClass={gameClass}
+				buttonProps={{
+					...buttonProps,
+					disabled: !isGameAdmin(gameClass.gameId, gamePermissions, accountPermissions)
+				}}
 				showEditGameClassModal={() => {
 					setSelectedGameClass(gameClass);
 					setDisplayGameClassModal(true);

src/ui/gameClass/GameClassListSkeleton.tsx

@@ -1,5 +1,6 @@
 import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
 import Table from "@/components/table/Table";
+import { GameClass } from "@/interface/GameClass";
 import { elementBg } from "@/util/SkeletonUtil";
 import GameClassAdminButtons from "./GameClassAdminButtons";
 
@@ -49,6 +50,7 @@ function GameClassSkeleton(): React.ReactNode[]{
 			shape: "square" as ButtonShape,
 			disabled: true
 		},
+		gameClass:{} as GameClass,
 		showEditGameClassModal: () => {},
 		showDeleteGameClassModal: () => {}
 	}