From c19fbd065621cbbecdc1eafe96d40fb1c4bd89a2 Mon Sep 17 00:00:00 2001
From: Serdar D <serdar-dorak@hotmail.de>
Date: Wed, 24 May 2023 20:07:51 +0200
Subject: [PATCH] Search angepasst.
---
components/Search.tsx | 34 +++++++++++++++++++++++++++++-----
1 file changed, 29 insertions(+), 5 deletions(-)
diff --git a/components/Search.tsx b/components/Search.tsx
index 01532ab..8884b09 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -1,11 +1,28 @@
+"use client"
+
import ArrowCircleRightRoundedIcon from '@mui/icons-material/ArrowCircleRightRounded';
import SearchIcon from '@mui/icons-material/Search';
import { Container, IconButton, InputAdornment, TextField } from '@mui/material';
+import { useState } from 'react';
+import { getGames } from '@/lib/igdb';
+import { IGame } from '@/types/types';
+import Game from './Game';
+
+export default function Search() {
+ const [searchText, setSearchText] = useState('');
+ const [searchResults, setSearchResults] = useState<IGame[]>([]);
-export default function SearchInput() {
- const handleSearch = (event: { target: { value: any; }; }) => {
+ const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
const searchText = event.target.value;
- console.log('Search:', searchText);
+ setSearchText(searchText);
+ };
+
+ const handleSearchSubmit = async () => {
+ // Suche der Games durch eigene Sucheingaben.
+ const games = await getGames(); // Funktion um die Games aus Datenbank zu getten
+ //Es wird geschaut ob gamename(mit to lower Case), dem suchtext (searchText mit to lower case) entspricht.
+ const filteredGames = games.filter(game => game.name.toLowerCase().includes(searchText.toLowerCase()));
+ setSearchResults(filteredGames);
};
return (
@@ -14,6 +31,7 @@ export default function SearchInput() {
placeholder="Search"
variant="outlined"
size="small"
+ value={searchText}
onChange={handleSearch}
InputProps={{
startAdornment: (
@@ -23,7 +41,8 @@ export default function SearchInput() {
),
endAdornment: (
<InputAdornment position="end">
- <IconButton edge="end" aria-label="start search">
+ {/* Gesucht wird erst wenn auf Suche geklickt wird. */}
+ <IconButton edge="end" aria-label="start search" onClick={handleSearchSubmit}>
<ArrowCircleRightRoundedIcon />
</IconButton>
</InputAdornment>
@@ -33,6 +52,11 @@ export default function SearchInput() {
},
}}
/>
+
+ {/* Anzeigen der Suchergebnisse */}
+ {searchResults.map(game => (
+ <Game key={game.id} id={game.id} name={game.name} cover={game.cover} />
+ ))}
</Container>
);
-};
\ No newline at end of file
+}
\ No newline at end of file
--
GitLab