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}

      />

    </>

  )

}