diff --git a/src/stores/game.ts b/src/stores/game.ts index f16d070..b627764 100644 --- a/src/stores/game.ts +++ b/src/stores/game.ts @@ -128,7 +128,7 @@ interface State { minigame?: Minigame; getMinigames: ( - params: Partial + params: Partial & { query?: string } ) => Promise>; startMinigame: (game: Minigame) => void; stopMinigame: () => void; diff --git a/src/ui/components/Menu/MinigameMenu.tsx b/src/ui/components/Menu/MinigameMenu.tsx index 21da0c5..14c2023 100644 --- a/src/ui/components/Menu/MinigameMenu.tsx +++ b/src/ui/components/Menu/MinigameMenu.tsx @@ -14,11 +14,14 @@ const PAGE_SIZE = 12; export const MinigameMenu = () => { const { closeMenu, startMinigame, getActiveScene, getMinigames } = useGameState(); - const [searchQuery, setSearchQuery] = useState(""); + const [filter, setFilter] = useState({ + page: 1, + size: PAGE_SIZE, + query: "", + }); - const [page, setPage] = useState(1); - const { data, isLoading } = useSWR(["minigames", page], () => - getMinigames({ page, size: PAGE_SIZE }) + const { data, isLoading } = useSWR(["minigames", filter], () => + getMinigames(filter) ); const minigames = data?.data ?? []; const isLastPage = minigames.length < PAGE_SIZE; @@ -130,7 +133,9 @@ export const MinigameMenu = () => { setSearchQuery(e.target.value)} + onChange={(e) => + setFilter((o) => ({ ...o, query: e.target.value, page: 1 })) + } placeholder="Search..." className="bg-black/30 px-4 py-2 !border-none !outline-none" /> @@ -169,8 +174,8 @@ export const MinigameMenu = () => { setPage(v)} + page={filter.page} + onChange={(v) => setFilter((o) => ({ ...o, page: v }))} hideOnSinglePage isLastPage={isLastPage} />