103 lines
3.2 KiB
JavaScript
103 lines
3.2 KiB
JavaScript
import { useState, useEffect, useContext } from 'react'
|
|
import Link from 'next/link'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { faStar } from '@fortawesome/free-solid-svg-icons'
|
|
import { faStar as farStar } from '@fortawesome/free-regular-svg-icons'
|
|
import date from 'date-and-time'
|
|
import { UserContext } from '../../contexts/UserContext'
|
|
import api, { API_URL } from '../../utils/api'
|
|
import '../FunctionCard/FunctionCard.css'
|
|
|
|
const FunctionComponentTop = props => {
|
|
const { isAuth, user } = useContext(UserContext)
|
|
const [isFavorite, setIsFavorite] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (isAuth && user.token != null) {
|
|
fetchFavorite()
|
|
}
|
|
}, [isAuth])
|
|
|
|
const fetchFavorite = async () => {
|
|
try {
|
|
const favoriteResponse = await api.get(`/favorites/${props.id}`, {
|
|
headers: { Authorization: user.token }
|
|
})
|
|
setIsFavorite(favoriteResponse.data.isFavorite)
|
|
} catch {}
|
|
}
|
|
|
|
const toggleFavorite = async () => {
|
|
if (isAuth && user.token != null) {
|
|
try {
|
|
if (isFavorite) {
|
|
const response = await api.delete(`/favorites/${props.id}`, {
|
|
headers: { Authorization: user.token }
|
|
})
|
|
if (response.status === 200) return setIsFavorite(false)
|
|
}
|
|
const response = await api.post(
|
|
`/favorites/${props.id}`,
|
|
{},
|
|
{ headers: { Authorization: user.token } }
|
|
)
|
|
if (response.status === 201) return setIsFavorite(true)
|
|
} catch {}
|
|
}
|
|
}
|
|
|
|
const handleError = event => {
|
|
event.target.src = API_URL + '/images/functions/default.png'
|
|
}
|
|
|
|
return (
|
|
<div className='container-fluid'>
|
|
<div className='row justify-content-center text-center'>
|
|
<div className='FunctionComponent__top col-24'>
|
|
{isAuth && (
|
|
<FontAwesomeIcon
|
|
onClick={toggleFavorite}
|
|
{...(isFavorite ? { icon: faStar } : { icon: farStar })}
|
|
title={
|
|
isFavorite
|
|
? 'Retirer la fonction des favoris'
|
|
: 'Ajouter la fonction aux favoris'
|
|
}
|
|
className='FunctionComponent__star-favorite'
|
|
/>
|
|
)}
|
|
|
|
<img
|
|
onError={handleError}
|
|
className='FunctionComponent__image'
|
|
src={API_URL + props.image}
|
|
alt={props.title}
|
|
/>
|
|
<h1 className='FunctionComponent__title title-important'>
|
|
{props.title}
|
|
</h1>
|
|
<p className='FunctionComponent__description'>{props.description}</p>
|
|
<div className='FunctionCard__info'>
|
|
<Link href={`/functions?categoryId=${props.categorieId}`}>
|
|
<a
|
|
className='FunctionCard__category'
|
|
style={{
|
|
backgroundColor: props.categorie.color,
|
|
color: 'inherit'
|
|
}}
|
|
>
|
|
{props.categorie.name}
|
|
</a>
|
|
</Link>
|
|
<p className='FunctionCard__publication-date'>
|
|
{date.format(new Date(props.createdAt), 'DD/MM/YYYY', false)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FunctionComponentTop
|