People tab working

src/components/gameClass/GameClassSelector.tsx

@@ -0,0 +1,73 @@
+import { useGetGameClasses } from "@/hooks/GameClassHooks";
+import { useEffect, useState } from "react";
+import DangerMessage from "../message/DangerMessage";
+
+
+export function GameClassSelector({
+	gameId,
+	gameClassId,
+	onChange
+}:{
+	gameId: string;
+	gameClassId?: string;
+	onChange?: (gameClassId?: string) => void;
+}){
+	const [ selectedGameClassId, setSelectedGameClassId ] = useState(gameClassId);
+	const selectorId = crypto.randomUUID().replaceAll("-", "");
+
+
+	const gameClassesQuery = useGetGameClasses(gameId, 0, 100, undefined);
+
+
+	useEffect(() => {
+		onChange?.(selectedGameClassId);
+	}, [ selectedGameClassId, onChange ]);
+
+
+	if(gameClassesQuery.status === "pending"){
+		return <div>Loading...</div>
+	}
+	else if(gameClassesQuery.status === "error"){
+		return <DangerMessage>Error loading Game Classes: {gameClassesQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<div
+				className="grid grid-cols-3 gap-4"
+				style={{flex: "0 0 33.333333333%"}}
+			>
+				{
+					gameClassesQuery.data.map((gameClass) => (
+						<div
+							key={gameClass.gameClassId}
+							className="flex flex-row"
+						>
+							<input
+								id={`gameClassSelector${gameClass.gameClassId}${selectorId}`}
+								className="cursor-pointer"
+								type="radio"
+								name="gameClassId"
+								value={gameClass.gameClassId}
+								checked={selectedGameClassId === gameClass.gameClassId}
+								onChange={(e) => setSelectedGameClassId(e.target.value)}
+							/>
+							<label
+								className="ml-2 flex flex-row flex-nowrap justify-center items-center text-nowrap cursor-pointer"
+								htmlFor={`gameClassSelector${gameClass.gameClassId}${selectorId}`}
+							>
+								{
+									gameClass.gameClassIcon &&
+									<img
+										className="m-auto max-h-6 max-w-6 mr-2"
+										src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
+									/>
+								}
+								{gameClass.gameClassName}
+							</label>
+						</div>
+					))
+				}
+			</div>
+		);
+	}
+}

src/components/personCharacter/PersonCharacterDisplay.tsx

@@ -0,0 +1,49 @@
+import { useGetPersonCharactersByPersonId } from "@/hooks/PersonCharacterHooks";
+import DangerMessage from "../message/DangerMessage";
+
+
+export default function PersonCharacterDisplay({
+	personId,
+	raidGroupId
+}:{
+	personId: string;
+	raidGroupId: string;
+}){
+	const personCharacterQuery = useGetPersonCharactersByPersonId(personId, raidGroupId);
+
+
+	if(personCharacterQuery.status === "pending"){
+		return (<div>Loading...</div>);
+	}
+	else if(personCharacterQuery.status === "error"){
+		return (<DangerMessage>Error loading characters: {personCharacterQuery.error.message}</DangerMessage>);
+	}
+	else{
+		return (
+			<div
+				className="flex flex-row flex-wrap items-center justify-center"
+			>
+				{
+					personCharacterQuery.data.map((personCharacter) => {
+						return (
+							<div
+								key={personCharacter.personCharacterId}
+								className="flex flex-row flex-nowrap items-center justify-center mr-8"
+							>
+								<img
+									className="m-auto max-h-6 max-w-6 mr-2"
+									src={`${import.meta.env.VITE_ICON_URL}/gameClass/id/${personCharacter.gameClassId}`}
+								/>
+								{personCharacter.characterName}
+							</div>
+						);
+					})
+				}
+				{
+					personCharacterQuery.data.length === 0 &&
+					<div>No characters</div>
+				}
+			</div>
+		);
+	}
+}

src/components/personCharacter/RatingSelector.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+export default function RatingSelector({
+	rating,
+	onChange
+}:{
+	rating?: number;
+	onChange?: (rating?: number) => void;
+}){
+	const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+	const [ currentRating, setCurrentRating ] = useState(rating);
+
+
+	useEffect(() => {
+		setCurrentRating(rating);
+	}, [ rating, setCurrentRating ]);
+
+	useEffect(() => {
+		onChange?.(currentRating);
+	}, [ currentRating, onChange ]);
+
+
+	return (
+		<div>
+			<select
+				onChange={(e) => setCurrentRating(parseInt(e.target.value))}
+				value={currentRating}
+			>
+				<option value={undefined}></option>
+				{
+					ratings.map((rating) => (
+						<option
+							key={rating}
+							value={rating}
+						>
+							{rating}
+						</option>
+					))
+				}
+			</select>
+		</div>
+	);
+}