Fixed search box functionality

src/components/input/FileInput.tsx

@@ -1,5 +1,6 @@
 import { BsCloudUpload } from "react-icons/bs";
 
+
 export default function FileInput({
 	file,
 	setFile

src/hooks/AccountHooks.ts

@@ -11,7 +11,7 @@ export function useGetAccounts(page: number, pageSize: number, searchTerm?: stri
 			params.append("page", page.toString());
 			params.append("pageSize", pageSize.toString());
 			if(searchTerm){
-				params.append("search", searchTerm ?? "");
+				params.append("searchTerm", searchTerm ?? "");
 			}
 
 			const response = await api.get(`/account?${params}`);
@@ -28,11 +28,18 @@ export function useGetAccounts(page: number, pageSize: number, searchTerm?: stri
 	});
 }
 
-export function useGetAccountsCount(){
+export function useGetAccountsCount(searchTerm?: string){
+	const searchParams = new URLSearchParams();
+	if(searchTerm){
+		searchParams.append("searchTerm", searchTerm);
+	}
+
+
 	return useQuery({
-		queryKey: [ "accounts", "count"],
+		queryKey: [ "accounts", "count", searchTerm],
 		queryFn: async () => {
-			const response = await api.get("/account/count");
+
+			const response = await api.get(`/account/count?${searchParams}`);
 
 			if(response.status !== 200){
 				throw new Error("Failed to get accounts count");

src/hooks/GameHooks.ts

@@ -11,7 +11,7 @@ export function useGetGames(page: number, pageSize: number, searchTerm?: string)
 			params.append("page", page.toString());
 			params.append("pageSize", pageSize.toString());
 			if(searchTerm){
-				params.append("search", searchTerm);
+				params.append("searchTerm", searchTerm);
 			}
 
 			const response = await api.get(`/game?${params}`);
@@ -28,11 +28,17 @@ export function useGetGames(page: number, pageSize: number, searchTerm?: string)
 	});
 }
 
-export function useGetGamesCount(){
+export function useGetGamesCount(searchTerm?: string){
+	const searchParams = new URLSearchParams();
+	if(searchTerm){
+		searchParams.append("searchTerm", searchTerm);
+	}
+
+
 	return useQuery({
-		queryKey: ["games", "count"],
+		queryKey: ["games", "count", searchTerm],
 		queryFn: async () => {
-			const response = await api.get("/game/count");
+			const response = await api.get(`/game/count?${searchParams}`);
 
 			if(response.status !== 200){
 				throw new Error("Failed to get games count");

src/pages/protected/AdminPage.tsx

@@ -1,17 +1,17 @@
 import TabGroup, { Tab } from "@/components/tab/TabGroup";
-import AccountsLoader from "@/ui/account/AccountsLoader";
+import AdminAccountsTab from "@/ui/account/AdminAccountsTab";
-import GamesLoader from "@/ui/game/GamesLoader";
+import AdminGamesTab from "@/ui/game/AdminGamesTab";
 
 
 export default function AdminPage(){
 	const tabs: Tab[] = [
 		{
 			tabHeader: "Accounts",
-			tabContent: <AccountsLoader/>
+			tabContent: <AdminAccountsTab/>
 		},
 		{
 			tabHeader: "Games",
-			tabContent: <GamesLoader/>
+			tabContent: <AdminGamesTab/>
 		}
 	];
 

src/ui/account/AccountsLoader.tsx

@@ -1,31 +1,19 @@
-import PrimaryButton from "@/components/button/PrimaryButton";
-import TextInput from "@/components/input/TextInput";
 import DangerMessage from "@/components/message/DangerMessage";
-import Pagination from "@/components/pagination/Pagination";
+import { useGetAccounts } from "@/hooks/AccountHooks";
-import { useGetAccounts, useGetAccountsCount } from "@/hooks/AccountHooks";
-import { useEffect, useState } from "react";
 import AccountsList from "./AccountsList";
 import AccountsListSkeleton from "./AccountsListSkeleton";
-import AccountModal from "./modals/AccountModal";
 
 
-export default function AccountsLoader(){
+export function AccountsLoader({
-	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);
+	page,
-	const [ page, setPage ] = useState(1);
+	pageSize,
-	const [ totalPages, setTotalPages ] = useState(1);
+	searchTerm
-	const [ searchTerm, setSearchTerm ] = useState("");
+}:{
-	const pageSize = 10;
+	page: number;
-	const modalId = crypto.randomUUID().replace("-", "");
+	pageSize: number;
-
+	searchTerm?: string;
-	const accountsQuery = useGetAccounts(page - 1, pageSize);
+}){
-	const accountsCountQuery = useGetAccountsCount();
+	const accountsQuery = useGetAccounts(page - 1, pageSize, searchTerm);
-
-
-	useEffect(() => {
-		if(accountsCountQuery.status === "success"){
-			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
-		}
-	}, [ accountsCountQuery ]);
 
 
 	if(accountsQuery.status === "pending"){
@@ -36,60 +24,9 @@ export default function AccountsLoader(){
 	}
 	else{
 		return (
-			<>
+			<AccountsList
-				<div
+				accounts={accountsQuery.data ?? []}
-					className="flex flex-row justify-between items-center w-full"
+			/>
-				>
-					<div
-						className="flex flex-row items-center justify-start w-full"
-					>
-						&nbsp;
-					</div>
-					{/* Add Account Button */}
-					<div
-						className="flex flex-row items-center justify-center w-full"
-					>
-						<PrimaryButton
-							className="mb-8 tex-tnowrap"
-							onClick={() => setDisplayCreateAccountModal(true)}
-						>
-							Create Account
-						</PrimaryButton>
-						<AccountModal
-							display={displayCreateAccountModal}
-							close={() => setDisplayCreateAccountModal(false)}
-							account={undefined}
-						/>
-					</div>
-					{/* Account Search Box */}
-					<div
-						className="flex flex-row items-center justify-end w-full"
-					>
-						<div>
-							<TextInput
-								id={`accountSearchBox${modalId}`}
-								value={searchTerm}
-								onChange={(e) => setSearchTerm(e.target.value)}
-								placeholder="Search"
-							/>
-						</div>
-					</div>
-				</div>
-				{/* Account List */}
-				<AccountsList
-					accounts={accountsQuery.data ?? []}
-				/>
-				{/* Pagination */}
-				<div
-					className="my-12"
-				>
-					<Pagination
-						currentPage={page}
-						totalPages={totalPages}
-						onChange={setPage}
-					/>
-				</div>
-			</>
 		);
 	}
 }

src/ui/account/AdminAccountsTab.tsx

@@ -0,0 +1,99 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetAccountsCount } from "@/hooks/AccountHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { AccountsLoader } from "./AccountsLoader";
+import AccountModal from "./modals/AccountModal";
+
+
+export default function AdminAccountsTab(){
+	const [ displayCreateAccountModal, setDisplayCreateAccountModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState<string>("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replace("-", "");
+
+	
+	const accountsCountQuery = useGetAccountsCount(sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(accountsCountQuery.status === "success"){
+			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
+		}
+	}, [ accountsCountQuery ]);
+
+
+	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 Account Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8 tex-tnowrap"
+						onClick={() => setDisplayCreateAccountModal(true)}
+					>
+						Create Account
+					</PrimaryButton>
+					<AccountModal
+						display={displayCreateAccountModal}
+						close={() => setDisplayCreateAccountModal(false)}
+						account={undefined}
+					/>
+				</div>
+				{/* Account Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`accountSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Account List */}
+			<AccountsLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/game/AdminGamesTab.tsx

@@ -0,0 +1,98 @@
+import PrimaryButton from "@/components/button/PrimaryButton";
+import TextInput from "@/components/input/TextInput";
+import Pagination from "@/components/pagination/Pagination";
+import { useGetGamesCount } from "@/hooks/GameHooks";
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+import { GamesLoader } from "./GamesLoader";
+import GameModal from "./modals/GameModal";
+
+
+export default function AdminGamesTab(){
+	const [ displayCreateGameModal, setDisplayCreateGameModal ] = useState(false);
+	const [ page, setPage ] = useState(1);
+	const [ totalPages, setTotalPages ] = useState(1);
+	const [ searchTerm, setSearchTerm ] = useState<string>("");
+	const [ sentSearchTerm, setSentSearchTerm ] = useState<string>();
+	const pageSize = 10;
+	const modalId = crypto.randomUUID().replace("-", "");
+
+	const gamesCountQuery = useGetGamesCount(sentSearchTerm);
+
+
+	const updateSearchTerm = useDebouncedCallback((newSearchTerm: string) => {
+		setSentSearchTerm(newSearchTerm.length ? newSearchTerm : undefined);
+	}, 1000);
+
+
+	useEffect(() => {
+		updateSearchTerm(searchTerm ?? "");
+	}, [ searchTerm, updateSearchTerm ]);
+
+
+	useEffect(() => {
+		if(gamesCountQuery.status === "success"){
+			setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
+		}
+	}, [ gamesCountQuery ]);
+
+
+	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 Game Button */}
+				<div
+					className="flex flex-row items-center justify-center w-full"
+				>
+					<PrimaryButton
+						className="mb-8"
+						onClick={() => setDisplayCreateGameModal(true)}
+					>
+						Create Game
+					</PrimaryButton>
+					<GameModal
+						display={displayCreateGameModal}
+						close={() => setDisplayCreateGameModal(false)}
+						game={undefined}
+					/>
+				</div>
+				{/* Game Search Box */}
+				<div
+					className="flex flex-row items-center justify-end w-full"
+				>
+					<div>
+						<TextInput
+							id={`gameSearchBox${modalId}`}
+							value={searchTerm}
+							onChange={(e) => setSearchTerm(e.target.value)}
+							placeholder="Search"
+						/>
+					</div>
+				</div>
+			</div>
+			{/* Game List */}
+			<GamesLoader
+				page={page}
+				pageSize={pageSize}
+				searchTerm={sentSearchTerm}
+			/>
+			{/* Pagination */}
+			<div
+				className="my-12"
+			>
+				<Pagination
+					currentPage={page}
+					totalPages={totalPages}
+					onChange={setPage}
+				/>
+			</div>
+		</>
+	);
+}

src/ui/game/GamesListSkeleton.tsx

@@ -1,8 +1,70 @@
+import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button";
+import Table from "@/components/table/Table";
+import { elementBg } from "@/util/SkeletonUtil";
+import React from "react";
+import GameAdminButtons from "./GameAdminButtons";
+
 export default function GamesListSkeleton(){
-	//TODO:
+	const headElements: React.ReactNode[] = [
-	return (
 		<div>
-			Game List Skeleton
+			Icon
+		</div>,
+		<div>
+			Name
+		</div>,
+		<div
+			className="pl-16"
+		>
+			Actions
 		</div>
+	];
+	const bodyElements: React.ReactNode[][] = [
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+		GameSkeleton(),
+	];
+
+
+	return (
+		<Table
+			tableHeadElements={headElements}
+			tableBodyElements={bodyElements}
+		/>
 	);
 }
+
+function GameSkeleton(): React.ReactNode[]{
+	const buttonsProps = {
+		buttonProps: {
+			variant: "ghost" as ButtonVariant,
+			size: "md" as ButtonSizeType,
+			shape: "square" as ButtonShape,
+			disabled: true
+		},
+		showEditGameModal: () => {},
+		showDeleteGameModal: () => {}
+	}
+	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>
+			<GameAdminButtons {...buttonsProps}/>
+		</div>
+	];
+
+	return elements;
+}

src/ui/game/GamesLoader.tsx

@@ -1,31 +1,19 @@
-import PrimaryButton from "@/components/button/PrimaryButton";
-import TextInput from "@/components/input/TextInput";
 import DangerMessage from "@/components/message/DangerMessage";
-import Pagination from "@/components/pagination/Pagination";
+import { useGetGames } from "@/hooks/GameHooks";
-import { useGetGames, useGetGamesCount } from "@/hooks/GameHooks";
-import { useEffect, useState } from "react";
 import GamesList from "./GamesList";
 import GamesListSkeleton from "./GamesListSkeleton";
-import GameModal from "./modals/GameModal";
 
 
-export default function GamesLoader(){
+export function GamesLoader({
-	const [ displayCreateGameModal, setDisplayCreateGameModal ] = useState(false);
+	page,
-	const [ page, setPage ] = useState(1);
+	pageSize,
-	const [ totalPages, setTotalPages ] = useState(1);
+	searchTerm
-	const [ searchTerm, setSearchTerm ] = useState("");
+}:{
-	const pageSize = 10;
+	page: number;
-	const modalId = crypto.randomUUID().replace("-", "");
+	pageSize: number;
-
+	searchTerm?: string;
-	const gamesQuery = useGetGames(page - 1, pageSize);
+}){
-	const gamesCountQuery = useGetGamesCount();
+	const gamesQuery = useGetGames(page - 1, pageSize, searchTerm);
-
-
-	useEffect(() => {
-		if(gamesCountQuery.status === "success"){
-			setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
-		}
-	}, [ gamesCountQuery ]);
 
 
 	if(gamesQuery.status === "pending"){
@@ -36,60 +24,9 @@ export default function GamesLoader(){
 	}
 	else{
 		return (
-			<>
+			<GamesList
-				<div
+				games={gamesQuery.data ?? []}
-					className="flex flex-row justify-between items-center w-full"
+			/>
-				>
-					<div
-						className="flex flex-row items-center justify-start w-full"
-					>
-						&nbsp;
-					</div>
-					{/* Add Game Button */}
-					<div
-						className="flex flex-row items-center justify-center w-full"
-					>
-						<PrimaryButton
-							className="mb-8"
-							onClick={() => setDisplayCreateGameModal(true)}
-						>
-							Create Game
-						</PrimaryButton>
-						<GameModal
-							display={displayCreateGameModal}
-							close={() => setDisplayCreateGameModal(false)}
-							game={undefined}
-						/>
-					</div>
-					{/* Game Search Box */}
-					<div
-						className="flex flex-row items-center justify-end w-full"
-					>
-						<div>
-							<TextInput
-								id={`gameSearchBox${modalId}`}
-								value={searchTerm}
-								onChange={(e) => setSearchTerm(e.target.value)}
-								placeholder="Search"
-							/>
-						</div>
-					</div>
-				</div>
-				{/* Game List */}
-				<GamesList
-					games={gamesQuery.data ?? []}
-				/>
-				{/* Pagination */}
-				<div
-					className="my-12"
-				>
-					<Pagination
-						currentPage={page}
-						totalPages={totalPages}
-						onChange={setPage}
-					/>
-				</div>
-			</>
 		);
 	}
 }