Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState } from 'react'

import { useForm } from 'react-hook-form'

import { useSelector } from 'react-redux'

import { Avatar } from '@mui/material'

import styled from 'styled-components'

import SendIcon from '@mui/icons-material/Send'

import Options from '../UI/Option'

import ConfirmModal from '../modals/ConfirmModal'

import FormErrorFeedback from '../UI/FormErrorFeedback'

const StyledCommentForm = styled.form`

  display: flex;

  justify-content: flex-start;

  align-items: center;

  img {

    margin-right: 0.5rem;

    width: 43px;

    height: 43px;

  }

  input {

    flex-grow: 1;

    padding: 0.5rem;

    background-color: var(--bg-color-secondary);

    border: 1px solid var(--border-primary);

    border-top-left-radius: var(--border-radius);

    border-bottom-left-radius: var(--border-radius);

  }

  button {

    border-top-right-radius: var(--border-radius);

    border-bottom-right-radius: var(--border-radius);

  }

`

export const CommentForm = ({

  image = '/images/avatar.jpg',

  onSubmit = () => null,

}) => {

  const { register, handleSubmit, errors, reset } = useForm()

  const labels = useSelector(({ intl }) => intl.labels)

  const submitHandler = handleSubmit(async (data) => {

    await onSubmit(data)

    reset()

  })

  return (

    <>

      <StyledCommentForm onSubmit={submitHandler}>

        {image && <Avatar src={image} alt="Profile image" />}

        <input

          type="text"

          name="comment"

          maxLength="256"

          placeholder={labels.write_a_comment}

          ref={register({ required: 'El campo es requerido' })}

        />

        <button className="btn btn-primary">

          <SendIcon />

        </button>

      </StyledCommentForm>

      {errors.comment && (

        <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>

      )}

    </>

  )

}

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

  return (

    <ul className="comment-list">

      {comments.map((comment) => {

        return (

          <CommentsList.Item

            comment={comment}

            onDelete={onDelete}

            key={comment.unique}

          />

        )

      })}

    </ul>

  )

}

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

  const [showConfirmModal, setShowConfirmModal] = useState(false)

  const labels = useSelector(({ intl }) => intl.labels)

  const {

    unique,

    user_url,

    user_name,

    // user_image = '/images/avatar.jpg',

    time_elapsed,

    comment: content,

    link_delete,

  } = comment

  const toggleModal = () => {

    setShowConfirmModal(!showConfirmModal)

  }

  return (

    <li>

      <div className="comment-container">

        <div className="comment-content">

          <div className="info">

            <a href={user_url}>

              <h3>{user_name}</h3>

            </a>

            <span>{time_elapsed}</span>

            <span>

              {link_delete && (

                <Options

                  options={[

                    {

                      label: labels.delete,

                      action: toggleModal,

                    },

                  ]}

                />

              )}

            </span>

          </div>

          <p>{content}</p>

        </div>

      </div>

      <ConfirmModal

        show={showConfirmModal}

        onClose={toggleModal}

        onAccept={() => onDelete(unique, link_delete)}

        acceptLabel={labels.accept}

      />

    </li>

  )

}

CommentsList.Item = Comment