theoludwig/FunctionProject
Archived
1
1
Fork 0
Code Pull Requests Actions Releases Activity

frontend: Ajouter/Retirer une fonction des favoris

Browse Source
This commit is contained in:
Divlo
2020-04-10 22:50:24 +02:00
parent 0ac2fbf3ab
commit 02058fc2fb
8 changed files with 113 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/components/CommentCard/CommentCard.js
View File

@ -11,6 +11,7 @@ const CommentCard = forwardRef((props, ref) => {
const { isAuth, user } = useContext(UserContext);
const deleteCommentById = async () => {
props.manageComment.setLoadingComments(true);
if (isAuth && user.token != undefined) {
try {
await api.delete(`/comments?commentId=${props.id}`, { headers: { 'Authorization': user.token } });
@ -20,6 +21,7 @@ const CommentCard = forwardRef((props, ref) => {
props.manageComment.setCommentsData({ hasMore: props.manageComment.commentsData.hasMore, rows: newCommentsData.rows });
} catch {}
}
props.manageComment.setLoadingComments(false);
}
return (

20
website/components/FunctionComments/FunctionComments.js
View File

@ -17,6 +17,14 @@ const FunctionComments = ({ functionId }) => {
const [isLoadingComments, setLoadingComments] = useState(true);
const [pageComments, setPageComments] = useState(1);
// Récupère les commentaires si la page change
useEffect(() => {
getCommentsData().then((data) => setCommentsData({
hasMore: data.hasMore,
rows: [...commentsData.rows, ...data.rows]
}));
}, [pageComments]);
// Permet la pagination au scroll
const observer = useRef();
const lastCommentCardRef = useCallback((node) => {
@ -39,14 +47,6 @@ const FunctionComments = ({ functionId }) => {
});
}
// Récupère les commentaires si la page change
useEffect(() => {
getCommentsData().then((data) => setCommentsData({
hasMore: data.hasMore,
rows: [...commentsData.rows, ...data.rows]
}));
}, [pageComments]);
const handleChange = (event) => {
const inputStateNew = { ...inputState };
inputStateNew[event.target.name] = event.target.value;
@ -102,9 +102,9 @@ const FunctionComments = ({ functionId }) => {
{commentsData.rows.map((comment, index) => {
// Si c'est le dernier élément
if (commentsData.rows.length === index + 1) {
return <CommentCard key={comment.id} ref={lastCommentCardRef} { ...comment } manageComment={{ setCommentsData, commentsData }} />;
return <CommentCard key={comment.id} ref={lastCommentCardRef} { ...comment } manageComment={{ setCommentsData, commentsData, setLoadingComments }} />;
}
return <CommentCard key={comment.id} { ...comment } manageComment={{ setCommentsData, commentsData }} />;
return <CommentCard key={comment.id} { ...comment } manageComment={{ setCommentsData, commentsData, setLoadingComments }} />;
})}
</div>
</div>

72
website/components/FunctionComponentTop.js
View File

@ -1,21 +1,65 @@
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 { UserContext } from '../contexts/UserContext';
import api from '../utils/api';
import './FunctionCard/FunctionCard.css';
const FunctionComponentTop = (props) => (
<div className="container-fluid">
<div className="row justify-content-center text-center">
<div className="FunctionComponent__top col-24">
<img style={{ width: '150px' }} src={props.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">{props.publicationDate}</p>
const FunctionComponentTop = (props) => {
const { isAuth, user } = useContext(UserContext);
const [isFavorite, setIsFavorite] = useState(false);
useEffect(() => {
if (isAuth && user.token != undefined) {
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 != undefined) {
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 {}
}
}
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 className="FunctionComponent__image" src={props.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">{props.publicationDate}</p>
</div>
</div>
</div>
</div>
</div>
);
);
}
export default FunctionComponentTop;