Rev 7229 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
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