Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'

import { StyledCommentList, StyledCommentTemplate } from './comments-ui'
import Options from '@app/components/UI/Option'
import ConfirmModal from '@app/components/modals/ConfirmModal'

export default function CommentsList({ comments, onDelete }) {
  return (
    <>
      <StyledCommentList>
        {comments.map((comment) => {
          return (
            <li key={comment.unique}>
              <CommentsList.Item comment={comment} onDelete={onDelete} />
            </li>
          )
        })}
      </StyledCommentList>
    </>
  )
}

function Comment({ onDelete, comment }) {
  const [showConfirmModal, setShowConfirmModal] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const {
    unique,
    user_url,
    user_name,
    time_elapsed,
    comment: content,
    link_delete
  } = comment

  const toggleModal = () => {
    setShowConfirmModal(!showConfirmModal)
  }

  return (
    <>
      <StyledCommentTemplate>
        <div className='content'>
          <div className='info'>
            <Link to={user_url}>
              <h3>{user_name}</h3>
            </Link>
            <span>{time_elapsed}</span>
          </div>
          {link_delete && (
            <Options
              options={[
                {
                  label: labels.delete,
                  action: toggleModal
                }
              ]}
              right='0.5rem'
              top='1.5rem'
            />
          )}
          <p>{content}</p>
        </div>
      </StyledCommentTemplate>
      <ConfirmModal
        show={showConfirmModal}
        onClose={toggleModal}
        onAccept={() => onDelete(unique, link_delete)}
        acceptLabel={labels.accept}
      />
    </>
  )
}

CommentsList.Item = Comment