Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

import DeleteModal from '../../shared/DeleteModal'

import styles from './comments.module.scss'

const CommentsList = ({ comments, onDelete }) => {

  return (

    <ul className={styles.comments_list}>

      {comments.map((comment) => (

        <li key={comment.unique}>

          <CommentsList.Item comment={comment} onDelete={onDelete} />

        </li>

      ))}

    </ul>

  )

}

const Item = ({ comment, onDelete }) => {

  const [showDeleteModal, setShowDeleteModal] = useState(false)

  const closeModal = () => {

    setShowDeleteModal(false)

  }

  return (

    <>

      <div className={styles.comment}>

        <div className={styles.comment_header}>

          <img src={comment.user_image} alt="user-image" />

          <div className="info">

            <a href={comment.user_url}>

              <h3>{comment.user_name}</h3>

            </a>

            <span>{comment.time_elapsed}</span>

          </div>

        </div>

        <p>{comment.comment}</p>

      </div>

      <DeleteModal

        url={comment.link_delete}

        isOpen={showDeleteModal}

        closeModal={closeModal}

        onComplete={() => onDelete(comment.unique)}

        title="¿Esta seguro de borrar este comentario?"

        message="El comentario ha sido borrado"

      />

    </>

  )

}

CommentsList.Item = Item

export default CommentsList