Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3394 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 { useHabits } from '@hooks'
 6 
import { useHabits } from '@hooks';
7 
import { deleteHabit } from '@services/habits/habits'
 7 
import { deleteHabit } from '@services/habits/habits';
8 
import { INTELLIGENCES } from '@constants/habits'
 8 
import { INTELLIGENCES } from '@constants/habits';
9 
import { addNotification } from '@store/notification/notification.actions'
 9 
import { addNotification } from '@store/notification/notification.actions';
10 
 
 10 
 
11 
import Widget from '@components/UI/Widget'
 11 
import Widget from '@components/UI/Widget';
12 
import Options from '@components/UI/Option'
 12 
import Options from '@components/UI/Option';
13 
import ConfirmModal from '@components/modals/ConfirmModal'
 13 
import ConfirmModal from '@components/modals/ConfirmModal';
14 
 
 14 
 
15 
export default function HabitItem({
 15 
export default function HabitItem({
16 
  habit: {
 16 
  habit: {
17 
    id,
 17 
    id,
18 
    name = '',
 18 
    name = '',
19 
    description = '',
 19 
    description = '',
20 
    intelligence = '',
 20 
    intelligence = '',
21 
    actions = {
 21 
    actions = {
22 
      link_edit: '',
 22 
      link_edit: '',
23 
      link_delete: ''
 23 
      link_delete: ''
24 
    }
 24 
    }
25 
  }
 25 
  }
26 
}) {
 26 
}) {
27 
  const [show, setShow] = useState(false)
 27 
  const [show, setShow] = useState(false);
28 
  const navigate = useNavigate()
 28 
  const navigate = useNavigate();
29 
  const dispatch = useDispatch()
 29 
  const dispatch = useDispatch();
30 
 
 30 
 
31 
  const { removeHabit, getHabitById } = useHabits()
 31 
  const { removeHabit, getHabitById } = useHabits();
32 
  const currentParadigm = getHabitById(id)
 32 
  const currentParadigm = getHabitById(id);
33 
  const intelligenceLabel = INTELLIGENCES.find((i) => i.value === intelligence)
 33 
  const intelligenceLabel = INTELLIGENCES.find((i) => i.value === intelligence);
34 
 
 34 
 
35 
  const toggleConfirmModal = () => setShow(!show)
 35 
  const toggleConfirmModal = () => setShow(!show);
36 
 
 36 
 
37 
  const handleDelete = async () => {
 37 
  const handleDelete = async () => {
38 
    try {
 38 
    try {
39 
      const response = await deleteHabit(currentParadigm.actions.link_delete)
 39 
      const response = await deleteHabit(currentParadigm.actions.link_delete);
40 
      dispatch(addNotification({ style: 'success', msg: response }))
 40 
      dispatch(addNotification({ style: 'success', msg: response }));
41 
      removeHabit(id)
 41 
      removeHabit(id);
42 
    } catch (error) {
 42 
    } catch (error) {
43 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 43 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
44 
    }
 44 
    }
45 
  }
 45 
  };
46 
 
 46 
 
47 
  return (
 47 
  return (
48 
    <>
 48 
    <>
49 
      <Widget>
 49 
      <Widget>
50 
        <Widget.Header
 50 
        <Widget.Header
51 
          title={name}
 51 
          title={name}
52 
          subheader={intelligenceLabel?.name ?? ''}
 52 
          subheader={intelligenceLabel?.name ?? ''}
53 
          renderAction={() => (
 53 
          renderAction={() => (
54 
            <Options>
 54 
            <Options>
55 
              {actions.link_edit && (
 55 
              {actions.link_edit && (
56 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>
 56 
                <Options.Item onClick={() => navigate(`edit/${id}`)}>Editar</Options.Item>
57 
                  Editar
 - 
 
58 
                </Options.Item>
 - 
 
59 
              )}
 57 
              )}
60 
              {actions.link_delete && (
 58 
              {actions.link_delete && (
61 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
 59 
                <Options.Item onClick={toggleConfirmModal}>Borrar</Options.Item>
62 
              )}
 60 
              )}
63 
            </Options>
 61 
            </Options>
64 
          )}
 62 
          )}
65 
        />
 63 
        />
66 
        <Widget.Body>
 64 
        <Widget.Body>
67 
          <Typography>{description}</Typography>
 65 
          <Typography>{description}</Typography>
68 
        </Widget.Body>
 66 
        </Widget.Body>
69 
      </Widget>
 67 
      </Widget>
70 
      <ConfirmModal
 68 
      <ConfirmModal
71 
        show={show}
 69 
        show={show}
72 
        onClose={toggleConfirmModal}
 70 
        onClose={toggleConfirmModal}
73 
        title='Borrar'
 71 
        title='Borrar'
74 
        message='¿Estás seguro de que quieres borrar este hábito o competencia?'
 72 
        message='¿Estás seguro de que quieres borrar este hábito o competencia?'
75 
        onAccept={handleDelete}
 73 
        onAccept={handleDelete}
76 
      />
 74 
      />
77 
    </>
 75 
    </>
78 
  )
 76 
  );
79 
}
 77 
}