Game calendar working

src/ui/raidGroup/AllRaidGroupsDisplay.tsx

@@ -1,20 +1,17 @@
-import PrimaryButton from "@/components/button/PrimaryButton";
-import TextInput from "@/components/input/TextInput";
 import Pagination from "@/components/pagination/Pagination";
 import { useGetRaidGroupsCount } from "@/hooks/RaidGroupHooks";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
-import RaidGroupModal from "./modals/RaidGroupModal";
+import RaidGroupCreateAndSearch from "./RaidGroupCreateAndSearch";
 import RaidGroupsLoader from "./RaidGroupsLoader";
 
-export default function AdminRaidGroupTab(){
-	const [ displayCreateRaidGroupModal, setDisplayRaidGroupModal ] = useState(false);
+
+export default function AllRaidGroupsDisplay(){
 	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().replace("-", "");
 
 
 	const raidGroupsCountQuery = useGetRaidGroupsCount(sentSearchTerm);
@@ -37,44 +34,10 @@ export default function AdminRaidGroupTab(){
 
 	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={() => setDisplayRaidGroupModal(true)}
-					>
-						Create Raid Group
-					</PrimaryButton>
-					<RaidGroupModal
-						display={displayCreateRaidGroupModal}
-						close={() => setDisplayRaidGroupModal(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>
+			<RaidGroupCreateAndSearch
+				searchTerm={searchTerm}
+				setSearchTerm={setSearchTerm}
+			/>
 			{/* Raid Group List */}
 			<RaidGroupsLoader
 				page={page}

src/ui/raidGroup/RaidGroupCreateAndSearch.tsx

@@ -0,0 +1,58 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import { useState } from "react";
+import RaidGroupModal from "./modals/RaidGroupModal";
+
+
+export default function RaidGroupCreateAndSearch({
+	searchTerm,
+	setSearchTerm
+}:{
+	searchTerm: string;
+	setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+}){
+	const [ displayCreateRaidGroupModal, setDisplayRaidGroupModal ] = useState(false);
+	const modalId = crypto.randomUUID().replaceAll("-", "");
+
+
+	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={() => setDisplayRaidGroupModal(true)}
+				>
+					Create Raid Group
+				</PrimaryButton>
+				<RaidGroupModal
+					display={displayCreateRaidGroupModal}
+					close={() => setDisplayRaidGroupModal(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>
+	);
+}

src/ui/raidGroup/RaidGroupsByGameDisplay.tsx

@@ -0,0 +1,66 @@
+import Pagination from "@/components/pagination/Pagination";
+import { useGetRaidGroupsByGameCount } from "@/hooks/RaidGroupHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import RaidGroupCreateAndSearch from "./RaidGroupCreateAndSearch";
+import RaidGroupsByGameLoader from "./RaidGroupsByGameLoader";
+
+
+export default function RaidGroupsByGameDisplay({
+	gameId
+}:{
+	gameId: string;
+}){
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+
+
+	const raidGroupsCountQuery = useGetRaidGroupsByGameCount(gameId, 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-col items-center justify-center"
+		>
+			<RaidGroupCreateAndSearch
+				searchTerm={searchTerm}
+				setSearchTerm={setSearchTerm}
+			/>
+			{/* Raid Group List */}
+			<RaidGroupsByGameLoader
+				gameId={gameId ?? ""}
+				page={page}
+				pageSize={pageSize}
+				searchTerm={searchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</div>
+	);
+}

src/ui/raidGroup/RaidGroupsByGameLoader.tsx

@@ -0,0 +1,34 @@
+import DangerMessage from "@/components/message/DangerMessage";
+import { useGetRaidGroupsByGame } from "@/hooks/RaidGroupHooks";
+import RaidGroupsList from "./RaidGroupsList";
+import RaidGroupsListSkeleton from "./RaidGroupsListSkeleton";
+
+
+export default function RaidGroupsByGameLoader({
+	gameId,
+	page,
+	pageSize,
+	searchTerm
+}:{
+	gameId: string;
+	page: number;
+	pageSize: number;
+	searchTerm?: string;
+}){
+	const raidGroupsQuery = useGetRaidGroupsByGame(gameId, 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/modals/RaidGroupModal.tsx

@@ -25,7 +25,7 @@ export default function RaidGroupModal({
 	const [ raidGroupIcon, setRaidGroupIcon ] = useState(raidGroup?.raidGroupIcon);
 	const [ iconFile, setIconFile ] = useState<File | null>(null);
 	const [ game, setGame ] = useState<Game>();
-	const modalId = crypto.randomUUID().replace("-", "");
+	const modalId = crypto.randomUUID().replaceAll("-", "");
 
 
 	useEffect(() => {