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, setComment }) => {

        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])
                                setComment(data.total_comments)
                                setInputState('')
                        })
                        .catch((err) => console.log(err))
        }

        const deleteComment = (id) => {
                setComment(prev => parseInt(prev) - 1)
                setCommentState(commentState.filter((comment) => comment.unique !== id))
        }

        return (
                <>
                        <ul className="comment-wrap list-unstyled">
                                {
                                        commentState.map((comment) =>
                                                <li className="comment-item" key={comment.unique}>
                                                        <CommentTemplate
                                                                feed_comment={comment}
                                                                deleteComment={deleteComment}
                                                        />
                                                </li>
                                        )
                                }
                        </ul>
                        <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="d-flex w-100" onSubmit={(e) => handleSubmit(e)}>
                                        <input
                                                className="form-control pe-4 mr-2"
                                                type='text'
                                                placeholder="Escribe un comentario"
                                                value={inputState}
                                                onChange={(e) => setInputState(e.target.value)}
                                                style={{ height: 'auto' }}
                                        />
                                        <button type="submit" className="btn btn-primary">Comentar</button>
                                </form>

                        </div>
                </>
        )
}
export default CommentSection