From a82ca115cf382317d8bfae5c4173ee15a9974f08 Mon Sep 17 00:00:00 2001
From: Serdar D <serdar-dorak@hotmail.de>
Date: Wed, 24 May 2023 19:48:24 +0200
Subject: [PATCH] Sort und Search angepasst.
---
components/Sort.tsx | 113 ++++++++++++++++++++++----------------------
1 file changed, 56 insertions(+), 57 deletions(-)
diff --git a/components/Sort.tsx b/components/Sort.tsx
index 7f1f634..ab366f3 100644
--- a/components/Sort.tsx
+++ b/components/Sort.tsx
@@ -1,68 +1,67 @@
"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
--
GitLab