Fixed search box functionality
This commit is contained in:
98
src/ui/game/AdminGamesTab.tsx
Normal file
98
src/ui/game/AdminGamesTab.tsx
Normal file
@@ -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"
|
||||
>
|
||||
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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:
|
||||
return (
|
||||
const headElements: React.ReactNode[] = [
|
||||
<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"> </div>
|
||||
<GameAdminButtons {...buttonsProps}/>
|
||||
</div>
|
||||
];
|
||||
|
||||
return elements;
|
||||
}
|
||||
|
||||
@@ -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, useGetGamesCount } from "@/hooks/GameHooks";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useGetGames } from "@/hooks/GameHooks";
|
||||
import GamesList from "./GamesList";
|
||||
import GamesListSkeleton from "./GamesListSkeleton";
|
||||
import GameModal from "./modals/GameModal";
|
||||
|
||||
|
||||
export default function GamesLoader(){
|
||||
const [ displayCreateGameModal, setDisplayCreateGameModal ] = useState(false);
|
||||
const [ page, setPage ] = useState(1);
|
||||
const [ totalPages, setTotalPages ] = useState(1);
|
||||
const [ searchTerm, setSearchTerm ] = useState("");
|
||||
const pageSize = 10;
|
||||
const modalId = crypto.randomUUID().replace("-", "");
|
||||
|
||||
const gamesQuery = useGetGames(page - 1, pageSize);
|
||||
const gamesCountQuery = useGetGamesCount();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
if(gamesCountQuery.status === "success"){
|
||||
setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
|
||||
}
|
||||
}, [ gamesCountQuery ]);
|
||||
export function GamesLoader({
|
||||
page,
|
||||
pageSize,
|
||||
searchTerm
|
||||
}:{
|
||||
page: number;
|
||||
pageSize: number;
|
||||
searchTerm?: string;
|
||||
}){
|
||||
const gamesQuery = useGetGames(page - 1, pageSize, searchTerm);
|
||||
|
||||
|
||||
if(gamesQuery.status === "pending"){
|
||||
@@ -36,60 +24,9 @@ export default function GamesLoader(){
|
||||
}
|
||||
else{
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="flex flex-row justify-between items-center w-full"
|
||||
>
|
||||
<div
|
||||
className="flex flex-row items-center justify-start w-full"
|
||||
>
|
||||
|
||||
</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>
|
||||
</>
|
||||
<GamesList
|
||||
games={gamesQuery.data ?? []}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user