53 lines
1.8 KiB
JavaScript
53 lines
1.8 KiB
JavaScript
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 (
|
|
<div>
|
|
<Button onClick={() => setIsVisible(!isVisible)}>
|
|
{isVisible ? 'Hide Favorite Bar' : 'Show Favorite Bar'}
|
|
</Button>
|
|
{isVisible && (
|
|
<div className="favorite-bar">
|
|
<h2>Favorite Team</h2>
|
|
{favorite ? <p>{favorite.name}</p> : <p>No favorite team selected</p>}
|
|
<h3>All Teams</h3>
|
|
<ul>
|
|
{teams.map(team => (
|
|
<li key={team.id}>
|
|
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
|
|
<Button onClick={() => toggleFavorite(team)}>
|
|
{favorite && favorite.id === team.id ? 'Remove from Favorites' : 'Add to Favorites'}
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|