Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'

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

import { Typography } from '@mui/material'

import { usePurposes } from '@hooks'

import Widget from '@components/UI/Widget'

import Options from '@components/UI/Option'

import ConfirmModal from '@components/modals/ConfirmModal'

export default function PurposeItem({

  purpose: { id, name, description, actions }

}) {

  const [show, setShow] = useState(false)

  const navigate = useNavigate()

  const { deletePurpose } = usePurposes()

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

  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>

                <ConfirmModal

                  show={show}

                  onClose={toggleConfirmModal}

                  title='Borrar'

                  message='¿Estás seguro de que quieres borrar este propósito?'

                  onAccept={() => deletePurpose(id)}

                />

              </>

            )}

          </Options>

        )}

      />

      <Widget.Body>

        <Typography>{description}</Typography>

      </Widget.Body>

    </Widget>

  )

}