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