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