Untitled
unknown
plain_text
a year ago
1.7 kB
5
Indexable
import React, { useEffect, useState } from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { ChakraProvider, Box, Heading, Spinner, Text } from '@chakra-ui/react'; import { getMatches } from './features/footballMatches/footballMatchesSlice'; import MatchCard from './components/MatchCard'; import SearchBar from './components/SearchBar'; import FilterOptions from './components/FilterOptions'; const App = () => { const dispatch = useDispatch(); const { footballMatches, isLoading, isError } = useSelector((state) => state.footballMatches); const [filteredMatches, setFilteredMatches] = useState([]); useEffect(() => { dispatch(getMatches()); }, [dispatch]); useEffect(() => { setFilteredMatches(footballMatches); }, [footballMatches]); const handleSearch = (query) => { setFilteredMatches(footballMatches.filter(match => match.team1.toLowerCase().includes(query.toLowerCase()) || match.team2.toLowerCase().includes(query.toLowerCase()) || match.venue.toLowerCase().includes(query.toLowerCase()) )); }; const handleFilterChange = (type, value) => { setFilteredMatches(footballMatches.filter(match => match[type].includes(value))); }; return ( <ChakraProvider> <Box p={4}> <Heading mb={4}>Football Match Tracker</Heading> <SearchBar onSearch={handleSearch} /> <FilterOptions onFilterChange={handleFilterChange} /> {isLoading ? <Spinner /> : isError ? <Text>Failed to load matches.</Text> : filteredMatches.map(match => ( <MatchCard key={match.id} match={match} /> ))} </Box> </ChakraProvider> ); }; export default App;
Editor is loading...
Leave a Comment