People tab working

src/ui/person/PersonTab.tsx

@@ -0,0 +1,106 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetPeopleByRaidGroupCount } from "@/hooks/PersonHooks";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import PersonModal from "./modals/PersonModal";
+import PersonLoader from "./PersonLoader";
+
+
+export default function PersonTab({
+	raidGroup
+}:{
+	raidGroup: RaidGroup;
+}){
+	const [ displayCreatePersonModal, setDisplayCreatePersonModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	const personCountQuery = useGetPeopleByRaidGroupCount(raidGroup?.raidGroupId ?? "", sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(personCountQuery.status === "success"){
+			setTotalPages(Math.ceil(personCountQuery.data / pageSize));
+		}
+	}, [ personCountQuery ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row items-center justify-center w-full"
+			>
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					&nbsp;
+				</div>
+				{/* Add Person Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8 text-nowrap"
+						onClick={() => setDisplayCreatePersonModal(true)}
+					>
+						Create Person
+					</PrimaryButton>
+					<PersonModal
+						display={displayCreatePersonModal}
+						close={() => setDisplayCreatePersonModal(false)}
+						person={undefined}
+						raidGroupId={raidGroup.raidGroupId ?? ""}
+					/>
+				</div>
+				{/* Person Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`personSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{ /* Person List */}
+			<PersonLoader
+				raidGroup={raidGroup}
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}