Rev 7231 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import { axios } from '../../utils'
import { Link } from 'react-router-dom'
import { Avatar } from '@mui/material'
import { addNotification } from '../../redux/notification/notification.actions'
import { useDispatch, useSelector } from 'react-redux'
import parse from 'html-react-parser'
import styled from 'styled-components'
import EditIcon from '@mui/icons-material/Edit'
import DeleteIcon from '@mui/icons-material/Delete'
import {
QuestionActions,
QuestionDetails,
QuestionStats,
QuestionUserInfo,
StyledQuestionCard,
} from './QuestionCard'
import { CommentForm, CommentsList } from '../feed/CommentSection'
import ReactionsButton from '../UI/buttons/ReactionsButton'
const AnswerActions = styled(QuestionActions)`
margin-bottom: 0.5rem;
`
const AnswerCard = ({
// unique = '',
// uuid = '',
// question_uuid = '',
time_elapsed = '',
user_image = '',
user_url = '',
user_name = '',
text = '',
reaction = '',
total_comments = 0,
total_reactions = 0,
comments: defaultComments = [],
link_edit = '',
link_delete = '',
link_reaction_delete = '',
link_save_reaction = '',
link_add_comment = '',
onEdit = () => {},
onDelete = () => {},
updateComments = () => {},
updateReactions = () => {},
}) => {
const [comments, setComments] = useState(defaultComments)
const [totalComments, setTotalComments] = useState(total_comments)
const [totalReactions, setTotalReactions] = useState(total_reactions)
const labels = useSelector(({ intl }) => intl.labels)
const dispatch = useDispatch()
const addComment = ({ comment }) => {
const formData = new FormData()
formData.append('comment', comment)
axios
.post(link_add_comment, formData)
.then((response) => {
const { success, data } = response.data
if (!success) {
const errorMessage =
typeof data === 'string'
? data
: 'Error interno. Intente más tarde.'
dispatch(addNotification({ style: 'danger', msg: errorMessage }))
return
}
setComments([...comments, data.item])
updateComments(data.total_comments_question)
setTotalComments(data.total_comments_answer)
})
.catch((error) => {
dispatch(
addNotification({
style: 'danger',
msg: 'Error interno. Intente más tarde.',
})
)
throw new Error(error)
})
}
const deleteComment = (commentUnique, deleteCommentUrl) => {
axios
.post(deleteCommentUrl)
.then((response) => {
const { success, data } = response.data
if (!success) {
const errorMessage =
typeof data === 'string'
? data
: 'Error interno. Intente más tarde.'
dispatch(addNotification({ style: 'danger', msg: errorMessage }))
return
}
const newComments = comments.filter(
({ unique }) => unique !== commentUnique
)
dispatch(addNotification({ style: 'success', msg: data.message }))
setComments(newComments)
updateComments(data.total_comments_question)
setTotalComments(data.total_comments_answer)
})
.catch((error) => {
dispatch(
addNotification({
style: 'danger',
msg: 'Error interno. Intente más tarde.',
})
)
throw new Error(error)
})
}
return (
<>
<StyledQuestionCard>
<QuestionDetails>
<QuestionUserInfo>
<Link to={user_url}>
<Avatar
src={user_image}
alt={`${user_name} profile image`}
sx={{ width: '50px', height: '50px' }}
/>
</Link>
<p>{user_name}</p>
</QuestionUserInfo>
<QuestionStats className="mb-2">
<span>{`${labels.published} ${time_elapsed}`}</span>
<span>{`${totalReactions} ${labels.reactions}`}</span>
<span>{`${totalComments} ${labels.comments}`}</span>
</QuestionStats>
</QuestionDetails>
{text && parse(text)}
<AnswerActions>
{link_edit && (
<button
className="btn feed__share-option"
onClick={() => onEdit(link_edit, text)}
>
<EditIcon />
{labels.edit}
</button>
)}
{link_delete && (
<button
className="btn feed__share-option"
onClick={() => onDelete(link_delete)}
>
<DeleteIcon />
{labels.delete}
</button>
)}
{link_save_reaction && (
<ReactionsButton
className="btn feed__share-option"
currentReaction={reaction}
saveUrl={link_save_reaction}
deleteUrl={link_reaction_delete}
onChange={(res) => {
setTotalReactions(res.total_reactions_answer)
updateReactions(res.total_reactions_question)
}}
withLabel
/>
)}
</AnswerActions>
<CommentForm onSubmit={addComment} />
<CommentsList comments={comments} onDelete={deleteComment} />
</StyledQuestionCard>
</>
)
}
export default AnswerCard