Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

import { useNavigate, useParams } from 'react-router-dom';

import { useDispatch } from 'react-redux';

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

import { Delete, Block, Reply } from '@mui/icons-material';

import { useInmail } from '@hooks';

import { deleteInmail } from '@app/services/inmail';

import { showReportModal } from '@app/redux/report/report.actions';

import { addNotification } from '@app/redux/notification/notification.actions';

import ComposeButton from './compose-button';

import ReplyModal from './reply-modal';

import ConfirmModal from '@components/modals/ConfirmModal';

import ReportModal from '@components/modals/ReportModal';

export default function ActionsRow() {

  const { uuid } = useParams();

  const { selectedMessage, messages, selectMessage, replyMessage } = useInmail();

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const dispatch = useDispatch();

  const navigate = useNavigate();

  const navigateToImbox = () => navigate('/inmail');

  const handleDelete = async () => {

    try {

      const result = await deleteInmail(selectedMessage.delete_link);

      dispatch(addNotification({ style: 'success', msg: result }));

      navigateToImbox();

    } catch (error) {

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

    }

  };

  const handleReport = () => {

    dispatch(

      showReportModal({

        reportUrl: selectedMessage?.block_link,

        type: 'Inmail',

        onComplete: navigateToImbox

      })

    );

  };

  const toggleConfirmModal = () => setShowConfirmModal(!showConfirmModal);

  useEffect(() => {

    if (selectedMessage) return;

    const currentMessage = messages.find((message) => message.email_id === uuid);

    selectMessage(currentMessage);

  }, [selectedMessage, messages, uuid]);

  return (

    <>

      <Box

        sx={{

          display: 'flex',

          alignItems: 'center',

          justifyContent: 'space-between',

          gap: 0.5,

          mb: 1

        }}

      >

        <ComposeButton />

        {uuid && selectedMessage ? (

          <ButtonGroup>

            <IconButton onClick={() => replyMessage(selectedMessage)}>

              <Reply />

            </IconButton>

            <ReplyModal />

            <IconButton onClick={toggleConfirmModal}>

              <Delete />

            </IconButton>

            <IconButton onClick={handleReport}>

              <Block />

            </IconButton>

          </ButtonGroup>

        ) : null}

      </Box>

      <ConfirmModal show={showConfirmModal} onAccept={handleDelete} onClose={toggleConfirmModal} />

      <ReportModal />

    </>

  );

}