113 lines
3.2 KiB
TypeScript
113 lines
3.2 KiB
TypeScript
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 { useAuth } from "@/providers/AuthProvider";
|
|
import { isRaidGroupAdmin, isRaidGroupLeader } from "@/util/PermissionUtil";
|
|
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 { accountPermissions, raidGroupPermissions } = useAuth();
|
|
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"){
|
|
//TODO: Fix this warning
|
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
|
setTotalPages(Math.ceil(personCountQuery.data / pageSize));
|
|
}
|
|
}, [ personCountQuery ]);
|
|
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="flex flex-row items-center justify-center w-full mb-8"
|
|
>
|
|
<div
|
|
className="flex flex-row items-center justify-center w-full"
|
|
>
|
|
|
|
</div>
|
|
{/* Add Person Button */}
|
|
<div
|
|
className="flex flex-row items-center justify-center w-full"
|
|
>
|
|
<PrimaryButton
|
|
className="text-nowrap"
|
|
onClick={() => setDisplayCreatePersonModal(true)}
|
|
disabled={!isRaidGroupAdmin(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions) && !isRaidGroupLeader(raidGroup.raidGroupId ?? "", raidGroupPermissions, accountPermissions)}
|
|
>
|
|
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>
|
|
</>
|
|
);
|
|
}
|