Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useSelector } from 'react-redux';

import { Box, Typography } from '@mui/material';

import { ChatOutlined } from '@mui/icons-material';

import { useAnswerComments } from '@my-coach/hooks';

import { parse } from '@shared/utils';

import {

  Card,

  CardActions,

  CardContent,

  CardHeader,

  CommentForm,

  Menu,

  Button,

  CommentList

} from '@shared/components';

import { useAlertModal } from '@shared/hooks';

export function AnswerCard({

  answer: {

    uuid = '',

    time_elapsed = '',

    user_image = '',

    user_name = '',

    text = '',

    total_comments = 0,

    total_reactions = 0,

    comments = [],

    link_add_comment = ''

  },

  onEdit,

  onDelete,

  onUpdateComments

}) {

  const [showComments, setShowComments] = useState(false);

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

  const { showAlert, closeAlert } = useAlertModal();

  const {

    comments: answerComments,

    addComment,

    deleteComment

  } = useAnswerComments(comments, {

    onAddComment: (data) => {

      onUpdateComments(uuid, data);

    },

    onDeleteComment: (data) => {

      onUpdateComments(uuid, data);

      closeAlert();

    }

  });

  const handleAddComment = (comment) => {

    addComment(link_add_comment, comment);

  };

  const handleDeleteComment = (url) => {

    showAlert({

      title: 'Eliminar comentario',

      message: '¿Estás seguro de querer eliminar este comentario?',

      onConfirm: () => deleteComment(url)

    });

  };

  /* 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((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }));

      });

  };

  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((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }));

      });

  }; */

  // const ReactionsButton = withReactions(Button);

  return (

    <Card>

      <CardHeader

        avatar={user_image}

        title={user_name}

        subheader={time_elapsed}

        renderAction={() => (

          <Menu>

            {onDelete && <Menu.Item onClick={onDelete}>Borrar</Menu.Item>}

            {onEdit && <Menu.Item onClick={onEdit}>{labels.edit}</Menu.Item>}

          </Menu>

        )}

      />

      <CardContent>

        <Typography variant='body1'>{parse(text)}</Typography>

        <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>

          <Typography variant='overline'>{`${total_reactions} ${labels.reactions}`}</Typography>

          <Typography variant='overline'>{`${total_comments} ${labels.comments}`}</Typography>

        </Box>

      </CardContent>

      <CardActions>

        {/* {link_save_reaction && (

            <ReactionsButton

              currentReactionType={reaction}

              saveUrl={link_save_reaction}

              deleteUrl={link_reaction_delete}

              onReaction={({

                total_reactions_answer,

                total_reactions_question

              }) => {

                setTotalReactions(total_reactions_answer)

                updateReactions(total_reactions_question)

              }}

            />

          )} */}

        {link_add_comment && (

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

            <ChatOutlined />

            {labels.comment}

          </Button>

        )}

      </CardActions>

      <Box

        sx={{

          padding: 1,

          display: showComments ? 'flex' : 'none',

          flexDirection: 'column',

          gap: 1,

          width: '100%'

        }}

      >

        <CommentForm onSubmit={handleAddComment} />

        <CommentList comments={answerComments} onDelete={handleDeleteComment} />

      </Box>

    </Card>

  );

}