70 lines
2.8 KiB
JavaScript
70 lines
2.8 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 from '../../utils/api'
|
|
import { API_URL } from '../../utils/config/config'
|
|
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', true)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FunctionComponentTop
|