Sort + Search UI

components/Sort.tsx

 "use client"
 
-import { Box, Card, CardContent, FormControl, FormHelperText, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
-import { useState, useEffect } from "react";
-import { getGame, getGames } from "@/lib/igdb";
+import { useEffect, useState } from "react";
+import { getGames } from "@/lib/igdb";
 import { IGame } from "@/types/types";
-import Image from "next/image";
+import Game from "./Game";
+import { Box, Card, CardContent, FormControl, FormHelperText, MenuItem, Select, SelectChangeEvent, Typography } from "@mui/material";
+
 
 export default function Sort() {
-    const [select, setSelect] = useState('');
+    const [select, setSelect] = useState<string>('');
     const [games, setGames] = useState<IGame[]>([]);
-
-    useEffect(() => {
-        async function fetchGames() {
-            //spiele werden über getGames geholt und in den state gesetzt
-            const fetchedGames = await getGames();
-            setGames(fetchedGames);
-        }
-        fetchGames();
-    }, []);
-
+  
     const handleChange = (event: SelectChangeEvent) => {
-        setSelect(event.target.value);
+      const selectedOption = event.target.value as string;
+      setSelect(selectedOption);
+  
+      if (selectedOption === "name") {
+        const sortedGames = [...games].sort((a, b) => a.name.localeCompare(b.name));
+        setGames(sortedGames);
+      }
     };
-
-    const sortGames = () => {
-        if (select === "name") {
-            // Sortiert die Spiele nach namen (aufsteigend)
-            return games.sort((a, b) => a.name.localeCompare(b.name));
-        }
-        
-        // returned unsortierte games
-        return games;
+  
+    // Fetch die games wenn die komponenten geladen sind.
+    useEffect(() => {
+      fetchGames();
+    }, []);
+  
+    const fetchGames = async () => {
+      try {
+        const games = await getGames(); // methode um die games zu fetchen
+        setGames(games);
+      } catch (error) {
+        console.error("Error fetching games:", error);
+      }
     };
-
-    const sortedGames = sortGames();
-
+  
     return (
-        <Box sx={{ position: 'sticky', top: 0 }}>
-            <Card variant="outlined">
-                <CardContent>
-                    <Typography>Filter</Typography>
-
-                    <FormControl fullWidth>
-                        <FormHelperText>Sort By</FormHelperText>
-                        <Select
-                            value={select}
-                            onChange={handleChange}
-                            displayEmpty
-                            inputProps={{ 'aria-label': 'Without label' }}
-                        >
-                            <MenuItem value="">
-                                <em>Any</em>
-                            </MenuItem>
-                            <MenuItem value="name">Name</MenuItem>
-                            
-                        </Select>
-                    </FormControl>
-                </CardContent>
-            </Card>
-
-            {/* Zeigt sortierte liste */}
-            {sortedGames.map(game => (
-                <div key={game.id}>{game.name}</div>
-            ))}
-        </Box>
+      <Box sx={{ position: 'sticky', top: 0 }}>
+        <Card variant="outlined">
+          <CardContent>
+            <Typography>Filter</Typography>
+  
+            <FormControl fullWidth>
+              <FormHelperText>Sort By</FormHelperText>
+              <Select
+                value={select}
+                onChange={handleChange}
+                displayEmpty
+                inputProps={{ 'aria-label': 'Without label' }}
+              >
+                <MenuItem value="">
+                  <em>Any</em>
+                </MenuItem>
+                <MenuItem value="name">Name</MenuItem>
+              </Select>
+            </FormControl>
+          </CardContent>
+        </Card>
+  
+        {/* zeigt sortierte games */}
+        {games.map((game) => (
+          <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+        ))}
+      </Box>
     )
-}
\ No newline at end of file
+  }
\ No newline at end of file