diff --git a/app/(content)/(gaming)/games/page.tsx b/app/(content)/(gaming)/games/page.tsx index d0f8a42879a6fdafa951c05b3b49fb51144dcfe5..4ff601ba9e793611a00380291f9f29d1510f6ae6 100644 --- a/app/(content)/(gaming)/games/page.tsx +++ b/app/(content)/(gaming)/games/page.tsx @@ -3,7 +3,7 @@ import { InfiniteScrollGames } from "@/components/infinity-scroll"; import ScrollToTop from "@/components/scroll-to-top"; import SearchInput from "@/components/search-input"; -// renders a list of games infinitely (presumably) +// renders a list of games infinitely export default async function GamesPage() { return ( <> diff --git a/app/api/games/route.ts b/app/api/games/route.ts index f411fce9454181f205c9f0e4c39bb27a8be2d4e4..7ad46c19e55a8bc94cada8bad8a4d147e0dab992 100644 --- a/app/api/games/route.ts +++ b/app/api/games/route.ts @@ -30,12 +30,12 @@ export async function GET(req: NextRequest) { } const games = await getGames(page, - search ? search : '', + search ? search : undefined, category ? EGameCategory[category as keyof typeof EGameCategory] : undefined, genre ? EGameGenres[genre as keyof typeof EGameGenres] : undefined, filteredPlatforms, - sortby ? sortby : '', - order ? order : '' + sortby ? sortby : undefined, + order ? order : undefined ); return NextResponse.json(games); } catch (error) { diff --git a/components/filter-sort-games.tsx b/components/filter-sort-games.tsx index bf38172f75a738a7c708134d497f97188861e4ac..b1c574699ac1f9f274389fc48b9fb84d7d591d92 100644 --- a/components/filter-sort-games.tsx +++ b/components/filter-sort-games.tsx @@ -2,7 +2,7 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; -import { useEffect, useState } from "react"; +import { useState } from "react"; import { Icons } from "./icons"; import { Button } from "./ui/button"; import { Card } from "./ui/card"; @@ -25,8 +25,8 @@ export default function Sort() { category: selectedCategory ? `category=${selectedCategory}` : '', genre: selectedGenre ? `genre=${selectedGenre}` : '', platform: selectedPlatform ? `platform=${selectedPlatform}` : '', - sortMethod: selectedSortMethod ? `sortby=${selectedSortMethod}` : '', - sortOrder: selectedSortOrder ? `order=${selectedSortOrder}` : '', + sortMethod: selectedSortMethod == 'total_rating_count' ? '' : `sortby=${selectedSortMethod}`, + sortOrder: selectedSortOrder == 'desc' ? '' : `order=${selectedSortOrder}`, }; const queryParamString = Object.values(urlParams) @@ -49,6 +49,7 @@ export default function Sort() { setSelectedGenre(''); setSelectedPlatform(''); setSelectedSortMethod('total_rating_count'); + setSelectedSortOrder('desc'); } return ( diff --git a/components/infinity-scroll.tsx b/components/infinity-scroll.tsx index 179db1d6a0546eb58487d293ffe11dccd41bbe71..b1651210f22eb1d933213067230fe8e34565582d 100644 --- a/components/infinity-scroll.tsx +++ b/components/infinity-scroll.tsx @@ -34,7 +34,7 @@ export function InfiniteScrollGames() { fetchNextPage, hasNextPage, } = useInfiniteQuery( - ['infiniteGames', params], + [params], async ({ pageParam = 1 }) => await fetch(`/api/games/?page=${pageParam}${params}`, ).then((result) => result.json() as Promise<IGame[]>), @@ -49,7 +49,9 @@ export function InfiniteScrollGames() { <Card className="p-6"> {status === 'error' ? - (<span>Uh oh... something went wrong: {(error as Error).message}</span>) + (<span className="text-center"> + Uh oh... something went wrong + </span>) : (status === 'success' && ( <InfiniteScroll diff --git a/lib/igdb.ts b/lib/igdb.ts index c33959864889bb0cf7714af42a5ec1f00cf5074a..d48e98edd15371363135cff7fa0ffab6a36718e7 100644 --- a/lib/igdb.ts +++ b/lib/igdb.ts @@ -28,7 +28,7 @@ async function getToken(): Promise<IAuth> { } // fetches the top 200 games with a rating of 96 or higher -export async function getGames(page = 1, search?: string, category?: number, genre?: number, platform?: number[], sortby?: string, order?: string): Promise<IGame[]> { +export async function getGames(page = 1, search?: string, category?: number, genre?: number, platform?: number[], sortby = "total_rating_count", order = "desc"): Promise<IGame[]> { const auth = await getToken(); const url = new URL(`${IGDB_BASE_URL}/games`); @@ -42,7 +42,7 @@ export async function getGames(page = 1, search?: string, category?: number, gen }, body: `fields name, cover.image_id; limit ${limit}; offset ${offset}; - sort ${sortby ? sortby : "total_rating_count"} ${order ? order : "desc"}; + sort ${sortby} ${order}; where total_rating_count > 3 & cover != null & total_rating != null & rating != null & age_ratings != null & name ~ *"${search ? search : ""}"*