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;

  input {

    flex-grow: 1;

    padding: 0.5rem;

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

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

    border-radius: var(--border-radius) 0 0 var(--border-radius);

  }

  button {

    border-radius: 0 var(--border-radius) var(--border-radius) 0;

    border: 1px solid var(--button-bg) !important;

  }

`

const StyledCommentList = styled.ul`

  display: flex;

  flex-direction: column;

  padding-right: 0.5rem;

  gap: 0.5rem;

  margin-top: 0.5rem;

  max-height: 300px;

  overflow-y: auto;

  width: 100%;

`

const StyledComment = styled.div`

  display: flex;

  gap: 0.5rem;

  align-items: flex-start;

  .content {

    background-color: var(--chat-send);

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

    display: flex;

    flex-direction: column;

    flex-grow: 1;

    gap: 0.5rem;

    max-width: 100%;

    overflow: hidden;

    padding: 0.5rem;

    position: relative;

    p {

      max-width: 100%;

      overflow: hidden;

      text-overflow: ellipsis;

    }

  }

  .info {

    display: inline-flex;

    flex-direction: column;

    h3 {

      color: var(--title-color);

      font-weight: 600;

    }

    span {

      color: var(--subtitle-color);

      font-size: 0.9rem;

    }

  }

`

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"

            sx={{ marginRight: '.5rem', width: '45px', height: '45px' }}

          />

        )}

        <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 (

    <>

      <StyledCommentList>

        {comments.map((comment) => {

          return (

            <li key={comment.unique}>

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

            </li>

          )

        })}

      </StyledCommentList>

    </>

  )

}

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 (

    <>

      <StyledComment>

        <div className="content">

          <div className="info">

            <a href={user_url}>

              <h3>{user_name}</h3>

            </a>

            <span>{time_elapsed}</span>

          </div>

          {link_delete && (

            <Options

              options={[

                {

                  label: labels.delete,

                  action: toggleModal,

                },

              ]}

              right="0.5rem"

              top="1.5rem"

            />

          )}

          <p>{content}</p>

        </div>

      </StyledComment>

      <ConfirmModal

        show={showConfirmModal}

        onClose={toggleModal}

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

        acceptLabel={labels.accept}

      />

    </>

  )

}

CommentsList.Item = Comment