Proyectos de Subversion LeadersLinked - SPA

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

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

import { useDispatch } from 'react-redux';

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

import { useHabitProgress } from '@hooks';

import { deleteProgress } from '@services/habits/habits';

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

import Widget from '@components/UI/Widget';

import Options from '@components/UI/Option';

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

export default function ProgressItem({ progress }) {

  const [show, setShow] = useState(false);

  const navigate = useNavigate();

  const dispatch = useDispatch();

  const { id, date, quantitative_value, qualitative_description, actions } = progress;

  const { removeItem, getItemById } = useHabitProgress();

  const currentRegister = getItemById(id);

  const formatDate = useMemo(() => {

    const intlDate = new Intl.DateTimeFormat('es', {

      dateStyle: 'full',

      timeStyle: 'medium',

      timeZone: 'America/Bogota'

    }).format(new Date(date));

    return intlDate;

  }, [date]);

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

  const handleDelete = async () => {

    try {

      const response = await deleteProgress(currentRegister?.actions.link_delete);

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

      removeItem(id);

    } catch (error) {

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

    }

  };

  return (

    <>

      <Widget>

        <Widget.Header

          title={formatDate}

          subheader={quantitative_value}

          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>{qualitative_description}</Typography>

        </Widget.Body>

      </Widget>

      <ConfirmModal

        show={show}

        title='Borrar'

        message='¿Estás seguro de que deseas borrar este registro?'

        onAccept={handleDelete}

        onClose={toggleConfirmModal}

      />

    </>

  );

}