Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

import { axios } from '../../utils'

import { addNotification } from '../../redux/notification/notification.actions'

import { useDispatch, useSelector } from 'react-redux'

import EditIcon from '@mui/icons-material/Edit'

import DeleteIcon from '@mui/icons-material/Delete'

import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'

import styled from 'styled-components'

import { QuestionStats } from './QuestionCard'

import { CommentForm, CommentsList } from '../feed/CommentSection'

import Paraphrase from '../UI/Paraphrase'

import StyledContainer from '../widgets/WidgetLayout'

import ReactionsButton from '../UI/buttons/ReactionsButton'

const StyledForm = styled(CommentForm)`

  border: 1px solid lightgray;

  background-color: #fff;

  border-radius: 30px;

  padding: 5px;

  padding-left: 1rem;

  flex: 1;

  cursor: pointer;

  &:hover {

    background-color: rgba(0, 0, 0, 0.08);

  }

`

const AnswerCard = ({

  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 [showComments, setShowComments] = useState(false)

  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 (

    <>

      <StyledContainer>

        <StyledContainer.Header image={user_image} title={user_name}>

          <QuestionStats>

            <span>{`${labels.published} ${time_elapsed}`}</span>

            <span>{`${totalReactions} ${labels.reactions}`}</span>

            <span>{`${totalComments} ${labels.comments}`}</span>

          </QuestionStats>

        </StyledContainer.Header>

        <StyledContainer.Body>

          <Paraphrase>{text}</Paraphrase>

        </StyledContainer.Body>

        <StyledContainer.Actions>

          {link_save_reaction && (

            <ReactionsButton

              currentReaction={reaction}

              saveUrl={link_save_reaction}

              deleteUrl={link_reaction_delete}

              onChange={(res) => {

                setTotalReactions(res.total_reactions_answer)

                updateReactions(res.total_reactions_question)

              }}

              withLabel

            />

          )}

          {link_add_comment && (

            <button onClick={() => setShowComments(!showComments)}>

              <ChatOutlinedIcon />

              {labels.comment}

            </button>

          )}

          {link_edit && (

            <button onClick={() => onEdit(link_edit, text)}>

              <EditIcon />

              {labels.edit}

            </button>

          )}

          {link_delete && (

            <button onClick={() => onDelete(link_delete)}>

              <DeleteIcon />

              {labels.delete}

            </button>

          )}

        </StyledContainer.Actions>

        <div className="px-1 pb-1">

          <StyledForm image={user_image} onSubmit={addComment} />

          {showComments && (

            <CommentsList comments={comments} onDelete={deleteComment} />

          )}

        </div>

      </StyledContainer>

    </>

  )

}

export default AnswerCard