Raid Instance Creator working

src/ui/raidInstance/RaidInstanceList.tsx

@@ -0,0 +1,124 @@
+import { ButtonProps } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { RaidGroup } from "@/interface/RaidGroup";
+import { RaidInstance } from "@/interface/RaidInstance";
+import moment from "moment";
+import { useState } from "react";
+import { Link } from "react-router";
+import DeleteRaidInstanceModal from "./modals/DeleteRaidInstanceModal";
+import RaidInstanceModal from "./modals/RaidInstanceModal";
+import RaidInstanceAdminButtons from "./RaidInstanceAdminButtons";
+
+
+export default function RaidInstanceList({
+	raidInstances,
+	raidGroup
+}:{
+	raidInstances: RaidInstance[];
+	raidGroup: RaidGroup;
+}){
+	const [ selectedRaidInstance, setSelectedRaidInstance ] = useState<RaidInstance>();
+	const [ displayEditRaidInstanceModal, setDisplayEditRaidInstanceModal ] = useState(false);
+	const [ displayDeleteRaidInstanceModal, setDisplayDeleteRaidInstanceModal ] = useState(false);
+
+
+	const buttonProps: ButtonProps = {
+		variant: "ghost",
+		size: "md",
+		shape: "square"
+	};
+
+
+	const headElements: React.ReactNode[] = [
+		<div
+			className="text-nowrap"
+		>
+			Raid Instance
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Start Date
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			End Date
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Size
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			Runs
+		</div>,
+		<div
+			className="text-nowrap pl-16"
+		>
+			Actions
+		</div>
+	];
+
+	const bodyElements: React.ReactNode[][] = raidInstances.map((raidInstance) => [
+		<Link
+			to={`/raidGroup/${raidInstance.raidGroupId}/raidInstance/${raidInstance.raidInstanceId}`}
+			className="text-nowrap"
+		>
+			{raidInstance.raidInstanceName}
+		</Link>,
+		<div
+			className="text-nowrap"
+		>
+			{moment(raidInstance.raidStartDate).format("MM-DD-YYYY HH:mm")}
+		</div>,
+		<div
+			className="text-nowrap"
+		>
+			{moment(raidInstance.raidEndDate).format("MM-DD-YYYY HH:mm")}
+		</div>,
+		<div>
+			{raidInstance.raidSize}
+		</div>,
+		<div>
+			{raidInstance.numberRuns}
+		</div>,
+		<div
+			className="flex flex-row items-center justify-center gap-2 pl-16"
+		>
+			<div
+				className="py-4 border-l border-neutral-500"
+			>
+				&nbsp;
+			</div>
+			<RaidInstanceAdminButtons
+				buttonProps={buttonProps}
+				showRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayEditRaidInstanceModal(true); }}
+				showDeleteRaidInstanceModal={() => { setSelectedRaidInstance(raidInstance); setDisplayDeleteRaidInstanceModal(true); }}
+			/>
+		</div>
+	]);
+
+
+	return (
+		<>
+			<Table
+				tableHeadElements={headElements}
+				tableBodyElements={bodyElements}
+			/>
+			<RaidInstanceModal
+				display={displayEditRaidInstanceModal}
+				close={() => { setDisplayEditRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
+				raidInstance={selectedRaidInstance}
+				raidGroup={raidGroup}
+			/>
+			<DeleteRaidInstanceModal
+				display={displayDeleteRaidInstanceModal}
+				close={() => { setDisplayDeleteRaidInstanceModal(false); setSelectedRaidInstance(undefined); }}
+				raidInstance={selectedRaidInstance}
+			/>
+		</>
+	);
+}