diff --git a/js/components/FavoriteBar.js b/js/components/FavoriteBar.js new file mode 100644 index 0000000..c3c5371 --- /dev/null +++ b/js/components/FavoriteBar.js @@ -0,0 +1,52 @@ +import React, {useState, useEffect} from 'react'; +import {Button} from 'reactstrap'; + +export function FavoriteBar({teams}) { + const [favorite, setFavorite] = useState(null); + const [isVisible, setIsVisible] = useState(false); + + useEffect(() => { + const savedFavorite = localStorage.getItem('favoriteTeam'); + if (savedFavorite) { + const team = teams.find(team => team.id === parseInt(savedFavorite, 10)); + if (team) { + setFavorite(team); + } + } + }, [teams]); + + const toggleFavorite = team => { + if (favorite && favorite.id === team.id) { + setFavorite(null); + localStorage.removeItem('favoriteTeam'); + } else { + setFavorite(team); + localStorage.setItem('favoriteTeam', team.id); + } + }; + + return ( +
+ + {isVisible && ( +
+

Favorite Team

+ {favorite ?

{favorite.name}

:

No favorite team selected

} +

All Teams

+ +
+ )} +
+ ); +} diff --git a/js/redux/tournamentApi.js b/js/redux/tournamentApi.js index 7d9576d..2bca5cb 100644 --- a/js/redux/tournamentApi.js +++ b/js/redux/tournamentApi.js @@ -67,7 +67,8 @@ function convertTournament(apiTournament) { isPublic: apiTournament.public, ownerUsername: apiTournament.owner_username, groupStage: groupStage, - playoffStages: playoffStages + playoffStages: playoffStages, + teams: apiTournament.teams }; } diff --git a/pages/tournament.js b/pages/tournament.js index b5b656c..a686e21 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -15,6 +15,7 @@ import {EditButton, TournamentStatusBar} from '../js/components/TournamentStatus import {LinkButton} from '../js/components/LinkButton'; import {LoadingPage} from '../js/components/LoadingPage'; import {getTournament} from '../js/redux/tournamentApi'; +import {FavoriteBar} from '../js/components/FavoriteBar'; class PrivateTournamentPage extends React.Component { render() { @@ -25,6 +26,7 @@ class PrivateTournamentPage extends React.Component { return (
+
{groupStage != null &&
- Vollbild-Ansicht Gruppen ); }