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="d-flex w-100" onSubmit={(e) => handleSubmit(e)}>

					<input

						className="form-control pe-4 bg-light 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>

			<ul className="comment-wrap list-unstyled">

				{

					commentState.map((comment) =>

						<li className="comment-item" key={comment.unique}>

							<CommentTemplate

								feed_comment={comment}

								deleteComment={deleteComment}

							/>

						</li>

					)

				}

			</ul>

		</>

	)

}

export default CommentSection