Olá, percebi que para cada CarPost, precisamos ficar chamando a função do auth.....
o componente card post final, ficaria mais limpo, se fizessemos a chamada da função no Feed e passar para o CardPost como prop!
..... Creio que assim ficaria melhor..
codigo final:
import styles from "./cardpost.module.css";
import { Author } from "../Author";
import { ThumbsUpButton } from "./ThumbsUpButton";
import { ModalComment } from "../ModalComment";
import { Link } from "react-router";
import { usePostInteractions } from "../../hooks/usePostInteractions";
export const CardPost = ({ post, isAuthenticated }) => {
const { likes, comments, handleLikeButton, handleNewComment } =
usePostInteractions(post);
return (
<article className={styles.card}>
<header className={styles.header}>
<figure className={styles.figure}>
<img src={post.cover} alt={`Capa do post de titulo: ${post.title}`} />
</figure>
</header>
<section className={styles.body}>
<h2>{post.title}</h2>
<p>{post.body}</p>
<Link to={`/blog-post/${post.slug}`}>Ver detalhes</Link>
</section>
<footer className={styles.footer}>
<div className={styles.actions}>
<div className={styles.action}>
<ThumbsUpButton
loading={false}
onClick={handleLikeButton}
disabled={!isAuthenticated}
/>
<p>{likes}</p>
</div>
<div className={styles.action}>
<ModalComment onSuccess={handleNewComment} postId={post.id} />
<p>{comments.length}</p>
</div>
</div>
<Author author={post.author} />
</footer>
</article>
);
};
