68 lines
2.6 KiB
JavaScript
68 lines
2.6 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Button } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { faStar as filledStar } from '@fortawesome/free-solid-svg-icons';
|
|
import { faStar as emptyStar } from '@fortawesome/free-regular-svg-icons';
|
|
import { faHeartCirclePlus } from '@fortawesome/free-solid-svg-icons';
|
|
|
|
export function FavoriteBar({ teams }) {
|
|
const [favorite, setFavorite] = useState(null);
|
|
const [isVisible, setIsVisible] = useState(false);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const savedFavorite = localStorage.getItem('favoriteTeam');
|
|
if (savedFavorite) {
|
|
const team = teams.find(team => team.id === parseInt(savedFavorite, 10));
|
|
if (team) {
|
|
setFavorite(team);
|
|
}
|
|
}
|
|
setIsLoading(false);
|
|
}, [teams]);
|
|
|
|
const toggleFavorite = team => {
|
|
if (favorite && favorite.id === team.id) {
|
|
setFavorite(null);
|
|
localStorage.removeItem('favoriteTeam');
|
|
} else {
|
|
setFavorite(team);
|
|
localStorage.setItem('favoriteTeam', team.id);
|
|
}
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div>Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
|
<h2 style={{ marginRight: '10px' }}>Favorit:</h2>
|
|
<p style={{ marginRight: '10px' }}>{favorite ? favorite.name : ''}</p>
|
|
<Button onClick={() => setIsVisible(!isVisible)}>
|
|
<FontAwesomeIcon icon={faHeartCirclePlus} />
|
|
</Button>
|
|
</div>
|
|
{isVisible && (
|
|
<div className="favorite-bar">
|
|
<h3>All Teams</h3>
|
|
<div>
|
|
{teams.map(team => (
|
|
<div key={team.id} style={{ display: 'flex', alignItems: 'center' }}>
|
|
<Button onClick={() => toggleFavorite(team)} style={{ marginRight: '10px' }}>
|
|
<FontAwesomeIcon
|
|
icon={favorite && favorite.id === team.id ? filledStar : emptyStar}
|
|
/>
|
|
</Button>
|
|
<span>
|
|
{team.name} {favorite && favorite.id === team.id && <span>(Favorite)</span>}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |