Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Typography } from '@mui/material';

import { useGoals } from '@hooks';
import { deleteGoal } from '@services/habits/goals';
import { addNotification } from '@store/notification/notification.actions';

import Widget from '@app/components/UI/Widget';
import Options from '@components/UI/Option';
import ConfirmModal from '@components/modals/ConfirmModal';

export default function GoalItem({
  goal: {
    id = 1,
    name = 'Test',
    description = 'Prueba',
    actions = {
      link_edit:
        'https://dev-services.leaderslinked.com/habits/goals/edit/cfede10c-f576-4a06-bbba-282ee88011fd',
      link_delete:
        'https://dev-services.leaderslinked.com/habits/goals/delete/cfede10c-f576-4a06-bbba-282ee88011fd'
    }
  }
}) {
  const [show, setShow] = useState(false);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { deleteGoal: removeGoal, getGoalById } = useGoals();
  const currentGoal = getGoalById(id);

  const toggleConfirmModal = () => setShow(!show);

  const handleDelete = async () => {
    try {
      const response = await deleteGoal(currentGoal.actions.link_delete);
      dispatch(addNotification({ style: 'success', msg: response }));
      removeGoal(id);
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  return (
    <>
      <Widget>
        <Widget.Header
          title={name}
          renderAction={() => (
            <Options>
              {actions.link_edit && (
                <Options.Item onClick={() => navigate(`edit/${id}`)}>Editar</Options.Item>
              )}
              {actions.link_delete && (
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
              )}
            </Options>
          )}
        />
        <Widget.Body>
          <Typography>{description}</Typography>
        </Widget.Body>
      </Widget>
      <ConfirmModal
        show={show}
        onClose={toggleConfirmModal}
        title='Borrar'
        message='¿Estás seguro de que quieres borrar esta meta?'
        onAccept={handleDelete}
      />
    </>
  );
}