import { useRef, useState } from "react";
import { IconButton } from "../IconButton";
import { Modal } from "../Modal";
import { Textarea } from "../Textarea";
import { Subheading } from "../Subheading";
import { IconChat } from "../icons/IconChat";
import { IconArrowFoward } from "../icons/IconArrowFoward";
import { Spinner } from "../Spinner";
import styles from "./coment.module.css";
import { Button } from "../Button";
import { http } from "../../api";
export const ModalComment = ({ isEditing, onSuccess, postId }) => {
const modalRef = useRef(null);
const [loading, setLoading] = useState(false);
const onSubmit = async (formData) => {
const text = formData.get("text");
const token = localStorage.getItem('access_token');
if (!text.trim()) return;
try {
setLoading(true);
console.log('postId:', postId)
http
.post(
`/comments/post/${postId}`,
{
text
},
{
headers: {
Authorization: `Bearer ${token}`,
},
},
)
.then((response) => {
modalRef.current.closeModal();
onSuccess(response.data);
setLoading(false);
});
} catch (error) {
console.error("Erro ao criar/atualizar comentário:", error);
}
};
return (
<>
{isEditing
? "Editar comentário:"
: "Deixe seu comentário sobre o post:"}
<br> <div className={styles.footer}><br> <Button disabled={loading} type="submit"><br> {loading ? (<br> <Spinner /><br> ) : (<br> <><br> {isEditing ? "Atualizar" : "Comentar"} <IconArrowFoward /><br> </><br> )}<br> </Button><br> </div><br> </form><br> </Modal><br> <IconButton onClick={() => modalRef.current.openModal()}><br> <IconChat fill={isEditing ? "#000" : "#888888"} /><br> </IconButton><br> </><br> );<br>};</p> <p> import { Author } from "../Author";<br>import styles from "./cardpost.module.css";</p> <p>import { ThumbsUpButton } from "./ThumbsUpButton";<br>import { Link } from "react-router";<br>import { ModalComment } from "../ModalComment";<br>import { useState } from "react";<br>import { http } from "../../api";</p> <p>export const CardPost = ({ post }) => {</p> <p> const [likes, setLikes] = useState(post.likes);<br> const [comments, setComments] = useState(post.comments);</p> <p> const handleNewComment = (comment) => {<br> setComments([comment, ...comments])<br> }</p> <p> const handleLikeButton = () => {</p> <pre class="prettyprint"><code>const token = localStorage.getItem('access_token') http.post(`blog-posts/${post.id}/like`, {}, { headers: { Authorization: `Bearer ${token}` } }) .then(() => { setLikes((oldState) => oldState + 1); console.log("íncrementar like"); }) </code></pre> <p> };</p> <p> return (<br> <article className={styles.card}><br> <header className={styles.header}><br> <figure className={styles.figure}><br> <img src={post.cover} alt={<code>Capa do post de titulo: ${post.title}</code>} /><br> </figure><br> </header><br> <section className={styles.body}><br> <h2>{post.title}</h2><br> <p>{post.body}</p><br> <Link to={<code>/blog-post/${post.slug}</code>}>Ver detalhes</Link><br> </section><br> <footer className={styles.footer}><br> <div className={styles.actions}><br> <div className={styles.action}><br> <ThumbsUpButton loading={false} onClick={handleLikeButton} /><br> <p>{likes}</p><br> </div><br> <div className={styles.action}><br> <ModalComment onSuccess={handleNewComment} postId={post.id}/><br> <p>{comments.length}</p><br> </div><br> </div><br> <Author author={post.author} /><br> </footer><br> </article><br> );<br>};</p>
