Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3150 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3150 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useState } from 'react';
2 
import { useNavigate } from 'react-router-dom'
 2 
import { useNavigate } from 'react-router-dom';
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux';
4 
import { Typography } from '@mui/material'
 4 
import { Typography } from '@mui/material';
5 
 
 5 
 
6 
import { usePurposes } from '@hooks'
 6 
import { usePurposes } from '@hooks';
7 
import { deletePurpose } from '@services/habits/purposes'
 7 
import { deletePurpose } from '@services/habits/purposes';
8 
import { addNotification } from '@store/notification/notification.actions'
 8 
import { addNotification } from '@store/notification/notification.actions';
9 
 
 9 
 
10 
import Widget from '@components/UI/Widget'
 10 
import Widget from '@components/UI/Widget';
11 
import Options from '@components/UI/Option'
 11 
import Options from '@components/UI/Option';
12 
import ConfirmModal from '@components/modals/ConfirmModal'
 12 
import ConfirmModal from '@components/modals/ConfirmModal';
13 
 
 13 
 
14 
export default function PurposeItem({
 - 
 
15 
  purpose: { id, name, description, actions }
 14 
export default function PurposeItem({ purpose: { id, name, description, actions } }) {
16 
}) {
 - 
 
17 
  const [show, setShow] = useState(false)
 15 
  const [show, setShow] = useState(false);
18 
  const navigate = useNavigate()
 16 
  const navigate = useNavigate();
19 
  const dispatch = useDispatch()
 17 
  const dispatch = useDispatch();
20 
 
 18 
 
21 
  const { removePurpose, getPurposeById } = usePurposes()
 19 
  const { removePurpose, getPurposeById } = usePurposes();
22 
  const currentPurpose = getPurposeById(id)
 20 
  const currentPurpose = getPurposeById(id);
23 
 
 21 
 
24 
  const toggleConfirmModal = () => setShow(!show)
 22 
  const toggleConfirmModal = () => setShow(!show);
25 
 
 23 
 
26 
  const handleDelete = async () => {
 24 
  const handleDelete = async () => {
27 
    try {
 25 
    try {
28 
      const response = await deletePurpose(currentPurpose.actions.link_delete)
 26 
      const response = await deletePurpose(currentPurpose.actions.link_delete);
29 
      dispatch(addNotification({ style: 'success', msg: response }))
 27 
      dispatch(addNotification({ style: 'success', msg: response }));
30 
      removePurpose(id)
 28 
      removePurpose(id);
31 
    } catch (error) {
 29 
    } catch (error) {
32 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 30 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
33 
    }
 31 
    }
34 
  }
 32 
  };
35 
 
 33 
 
36 
  return (
 34 
  return (
37 
    <>
 35 
    <>
38 
      <Widget>
 36 
      <Widget>
39 
        <Widget.Header
 37 
        <Widget.Header
40 
          title={name}
 38 
          title={name}
41 
          renderAction={() => (
 39 
          renderAction={() => (
42 
            <Options>
 40 
            <Options>
43 
              {actions.link_edit && (
 41 
              {actions.link_edit && (
44 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>
 42 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>Editar</Options.Item>
45 
                  Editar
 - 
 
46 
                </Options.Item>
 - 
 
47 
              )}
 43 
              )}
48 
              {actions.link_delete && (
 44 
              {actions.link_delete && (
49 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
 45 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
50 
              )}
 46 
              )}
51 
            </Options>
 47 
            </Options>
52 
          )}
 48 
          )}
53 
        />
 49 
        />
54 
 
 50 
 
55 
        <Widget.Body>
 51 
        <Widget.Body>
56 
          <Typography>{description}</Typography>
 52 
          <Typography>{description}</Typography>
57 
        </Widget.Body>
 53 
        </Widget.Body>
58 
      </Widget>
 54 
      </Widget>
59 
      <ConfirmModal
 55 
      <ConfirmModal
60 
        show={show}
 56 
        show={show}
61 
        onClose={toggleConfirmModal}
 57 
        onClose={toggleConfirmModal}
62 
        title='Borrar'
 58 
        title='Borrar'
63 
        message='¿Estás seguro de que quieres borrar este propósito?'
 59 
        message='¿Estás seguro de que quieres borrar este propósito?'
64 
        onAccept={handleDelete}
 60 
        onAccept={handleDelete}
65 
      />
 61 
      />
66 
    </>
 62 
    </>
67 
  )
 63 
  );
68 
}
 64 
}