Raid groups page working

src/ui/raidGroup/RaidGroupsByAccountDisplay.tsx

@@ -0,0 +1,103 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetRaidGroupsCountByAccount } from "@/hooks/RaidGroupHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import RaidGroupsByAccountLoader from "./RaidGroupsByAccountLoader";
+import RaidGroupModal from "./modals/RaidGroupModal";
+
+
+export default function RaidGroupsByAccountDisplay({
+	accountId
+}:{
+	accountId: string;
+}){
+	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = 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 raidGroupsCountQuery = useGetRaidGroupsCountByAccount(accountId, sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+			setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+		}, 1000);
+	
+	
+		useEffect(() => {
+			updateSearchTerm(searchTerm ?? "");
+		}, [ searchTerm, updateSearchTerm ]);
+	
+	
+		useEffect(() => {
+			if(raidGroupsCountQuery.status === "success"){
+				setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
+			}
+		}, [ raidGroupsCountQuery ]);
+
+
+	return (
+		<>
+			<div
+				className="flex flex-row justify-between items-center w-full"
+			>
+				<div
+					className="flex flex-row items-center justify-start w-full"
+				>
+					&nbsp;
+				</div>
+				{/* Add Raid Group Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8"
+						onClick={() => setDisplayCreateAccountModal(true)}
+					>
+						Create Raid Group
+					</PrimaryButton>
+					<RaidGroupModal
+						display={displayCreateAccountModal}
+						close={() => setDisplayCreateAccountModal(false)}
+						raidGroup={undefined}
+					/>
+				</div>
+				{/* Raid Group Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`raidGroupSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Raid Groups List */}
+			<RaidGroupsByAccountLoader
+				accountId={accountId}
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/raidGroup/RaidGroupsByAccountLoader.tsx

@@ -0,0 +1,33 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetRaidGroupsByAccount } from "@/hooks/RaidGroupHooks";
+import RaidGroupsList from "./RaidGroupsList";
+import RaidGroupsListSkeleton from "./RaidGroupsListSkeleton";
+
+export default function RaidGroupsByAccountLoader({
+	accountId,
+	page,
+	pageSize,
+	searchTerm
+}:{
+	accountId: string;
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+}){
+	const raidGroupsQuery = useGetRaidGroupsByAccount(accountId, page - 1, pageSize, searchTerm);
+
+
+	if(raidGroupsQuery.status === "pending"){
+		return <RaidGroupsListSkeleton/>
+	}
+	else if(raidGroupsQuery.status === "error"){
+		return <DangerMessage>Error {raidGroupsQuery.error.message}</DangerMessage>
+	}
+	else{
+		return (
+			<RaidGroupsList
+				raidGroups={raidGroupsQuery.data ?? []}
+			/>
+		);
+	}
+}

src/ui/raidGroup/RaidGroupsList.tsx

@@ -2,6 +2,7 @@ import { ButtonProps } from "@/components/button/Button";
 import Table from "@/components/table/Table";
 import { RaidGroup } from "@/interface/RaidGroup";
 import { useState } from "react";
+import { Link } from "react-router";
 import DeleteRaidGroupModal from "./modals/DeleteRaidGroupModal";
 import RaidGroupModal from "./modals/RaidGroupModal";
 import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
@@ -55,9 +56,11 @@ export default function RaidGroupsList({
 			}
 			 
 		</div>,
-		<div>
+		<Link
+			to={`/raidGroup/${raidGroup.raidGroupId}`}
+		>
 			{raidGroup.raidGroupName}
-		</div>,
+		</Link>,
 		<div
 			className="flex flex-row items-center justify-center gap-2 pl-16"
 		>

src/ui/raidGroup/RaidGroupsListSkeleton.tsx

@@ -1,7 +1,71 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import RaidGroupAdminButtons from "./RaidGroupAdminButtons";
+
+
 export default function RaidGroupsListSkeleton(){
-	return (
-		<div>
-			Raid Group List Skeleton
-		</div>
-	);
+	const headElements: React.ReactNode[] = [
+			<div>
+				Icon
+			</div>,
+			<div>
+				Name
+			</div>,
+			<div
+				className="pl-16"
+			>
+				Actions
+			</div>
+		];
+		const bodyElements: React.ReactNode[][] = [
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+			RaidGroupSkeleton(),
+		];
+	
+	
+		return (
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+		);
+}
+
+
+function RaidGroupSkeleton(): React.ReactNode[]{
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showEditRaidGroupModal: () => {},
+		showDeleteRaidGroupModal: () => {}
+	}
+	const elements: React.ReactNode[] = [
+		<div
+			className={`h-8 w-8 -my-1 mr-4 ${elementBg}`}
+		/>,
+		<div
+			className={`h-6 w-full ${elementBg}`}
+		/>,
+		<div
+			className={`flex flex-row items-center justify-center gap-2 pl-16`}
+		>
+			<div className="py-4 border-l border-neutral-500">&nbsp;</div>
+			<RaidGroupAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
 }