Raid Instance Creator works for raiders

src/hooks/RaidInstanceHooks.ts

@@ -18,7 +18,8 @@ export function useGetRaidInstance(raidInstanceId: string, raidGroupId: string){
 			}
 
 			return response.data as RaidInstance;
-		}
+		},
+		enabled: !!raidInstanceId && !!raidGroupId
 	});
 }
 

src/providers/RaidInstanceLayoutProvider.tsx

@@ -127,7 +127,8 @@ export default function RaidInstanceLayoutProvider({
 			}
 		}
 		else if(!raidInstanceId){
-			setRaidInstance({} as RaidInstance);
+			setRaidInstance({raidSize: 3, numberRuns: 1} as RaidInstance);
+			setSelectedClassGroups([null, null, null]);
 		}
 	}, [ raidInstanceId, raidInstanceQuery.status, raidInstanceQuery.data ]);
 

src/ui/classGroup/modal/SelectClassGroupModal.tsx

@@ -23,7 +23,7 @@ export default function SelectClassGroupModal({
 	const [ currentClassGroup, setCurrentClassGroup ] = useState(selectedClassGroup);
 	const selectorId = crypto.randomUUID().replaceAll("-", "");
 
-	const classGroupsQuery = useGetClassGroups(raidGroupId, 0, 100);
+	const classGroupsQuery = useGetClassGroups(raidGroupId, 0, 1000);
 
 
 	useEffect(() => {

src/ui/personCharacter/modal/PersonCharacterSelectorModal.tsx

@@ -24,7 +24,7 @@ export default function PersonCharacterSelectorModal({
 }:{
 	display: boolean;
 	close: () => void;
-	currentSlotClassGroup?: ClassGroup;
+	currentSlotClassGroup?: ClassGroup | null;
 	currentRunCharacters: PersonCharacter[];
 	otherRunsCharacters: PersonCharacter[];
 	personCharacters: PersonCharacter[];

src/ui/raidInstance/RaidInstanceHeader.tsx

@@ -4,8 +4,10 @@ import NumberInput from "@/components/input/NumberInput";
 import TextInput from "@/components/input/TextInput";
 import { useUpdateRaidInstanceNoInvalidation, useUpdateRaidInstancePersonCharacterXrefs } from "@/hooks/RaidInstanceHooks";
 import { RaidInstance } from "@/interface/RaidInstance";
+import { useAuth } from "@/providers/AuthProvider";
 import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
 import { useTimedModal } from "@/providers/TimedModalProvider";
+import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
 import clsx from "clsx";
 import moment from "moment";
 import { useEffect, useState } from "react";
@@ -25,6 +27,8 @@ export default function RaidInstanceHeader(){
 		personCharacterXrefs, setPersonCharacterXrefs
 	} = useRaidInstanceContext();
 
+	const { accountPermissions, raidGroupPermissions } = useAuth();
+
 	const [ displayRaidLayoutSelectorModal, setDisplayRaidLayoutSelectorModal ] = useState(false);
 	const [ displayRosterSelectorModal, setDisplayRosterSelectorModal ] = useState(false);
 	const { addSuccessMessage, addErrorMessage } = useTimedModal();
@@ -98,7 +102,6 @@ export default function RaidInstanceHeader(){
 								raidInstanceName: e.target.value
 							} as RaidInstance)
 						}
-						//disabled={}
 					/>
 				</h1>
 			</div>
@@ -197,6 +200,7 @@ export default function RaidInstanceHeader(){
 						<PrimaryButton
 							id="saveInstanceButton"
 							onClick={saveRaidInstance}
+							disabled={!isRaidGroupAdmin(raidGroup?.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup?.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
 						>
 							Save
 						</PrimaryButton>

src/ui/raidInstance/RaidInstanceTab.tsx

@@ -6,6 +6,7 @@ import { RaidGroup } from "@/interface/RaidGroup";
 import { useAuth } from "@/providers/AuthProvider";
 import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
 import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
 import { useDebouncedCallback } from "use-debounce";
 import RaidInstanceLoader from "./RaidInstanceLoader";
 import RaidInstanceModal from "./modals/RaidInstanceModal";
@@ -24,6 +25,7 @@ export default function RaidInstanceTab({
 	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
 	const pageSize = 10;
 	const modalId = crypto.randomUUID().replaceAll("-", "");
+	const navigate = useNavigate();
 
 
 	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
@@ -59,13 +61,25 @@ export default function RaidInstanceTab({
 				<div
 					className="flex flex-row items-center justify-center w-full"
 				>
-					<PrimaryButton
+					{
-						className="text-nowrap"
+						(!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) || !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)) &&
-						onClick={() => setDisplayCreateRaidInstanceModal(true)}
+						<PrimaryButton
-						disabled={!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
+							className="text-nowrap"
-					>
+							onClick={() => navigate(`/raidGroup/${raidGroup.raidGroupId}/raidInstance`)}
-						Create Raid Instance
+						>
-					</PrimaryButton>
+							Create Raid Instance
+						</PrimaryButton>
+					}
+					{
+						(isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) || isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)) &&
+						<PrimaryButton
+							className="text-nowrap"
+							onClick={() => setDisplayCreateRaidInstanceModal(true)}
+							disabled={!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
+						>
+							Create Raid Instance
+						</PrimaryButton>
+					}
 					<RaidInstanceModal
 						display={displayCreateRaidInstanceModal}
 						close={() => setDisplayCreateRaidInstanceModal(false)}

src/ui/raidInstance/creator/RaidInstanceCreator.tsx

@@ -13,7 +13,6 @@ import RaidInstanceCreatorTable from "./RaidInstanceCreatorTable";
 export default function RaidInstanceCreator(){
 	const {
 		raidGroup,
-		classGroups,
 		raidInstance, setRaidInstance,
 		roster,
 		setRaidLayout,
@@ -117,7 +116,7 @@ export default function RaidInstanceCreator(){
 			<PersonCharacterSelectorModal
 				display={displayPersonCharacterSelectorModal}
 				close={() => setDisplayPersonCharacterSelectorModal(false)}
-				currentSlotClassGroup={classGroups[currentLocation.col]}
+				currentSlotClassGroup={selectedClassGroups.length >= currentLocation.col ? selectedClassGroups[currentLocation.col] : null}
 				currentRunCharacters={getCurrentRunCharacters()}
 				otherRunsCharacters={getCharactersFromOtherRuns()}
 				personCharacters={getPersonCharactersFromRoster()}