small optimization

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 (
         <>

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) {

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 (

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

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 : ""}"*