Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useState } from 'react'
import CommentTemplate from './CommentTemplate'

const CommentSection = ({ owner_url, owner_image, comments, comments_link_add }) => {

    const [inputState, setInputState] = useState('')
    const [commentState, setCommentState] = useState(comments)

    const handleSubmit = (e) => {
        e.preventDefault()

        const formData = new FormData()
        formData.append("comment", inputState)

        axios.post(comments_link_add, formData)
            .then(({ data }) => {
                if (!data.success) {
                    return console.log("Error de envio")
                }

                setCommentState([...commentState, data.data])
                setInputState('')
            })
            .catch((err) => console.log(err))
    }

    const deleteComment = (id) => { 
        setCommentState(commentState.filter((comment)=> comment.unique !== id))
    }

    return (
        <>
            <div className="d-flex mb-3">
                <div className="avatar avatar-xs me-2">
                    <a href={owner_url}>
                        <img
                            className="avatar-img rounded-circle"
                            src={owner_image}
                            alt="user avatar image"
                        />
                    </a>
                </div>
                <form className="w-100" onSubmit={(e) => handleSubmit(e)}>
                    <input
                        className="form-control pe-4 bg-light"
                        type='text'
                        placeholder="Escribe un comentario"
                        value={inputState}
                        onChange={(e) => setInputState(e.target.value)}
                    />
                </form>
            </div>
            <ul className="comment-wrap list-unstyled">
                {
                    commentState.map((comment) =>
                        <li className="comment-item">
                            <CommentTemplate
                                key={comment.unique}
                                feed_comment={comment}
                                deleteComment={deleteComment}
                            />
                        </li>
                    )
                }
            </ul>
        </>
    )
}
export default CommentSection