People tab working

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>
+	);
+}