Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2994 | Rev 2997 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 2994 Rev 2995
Línea 1... Línea 1...
1 
import React, { useState } from 'react'
 1 
import React, { useEffect, useState } from 'react'
2 
import { Link } from 'react-router-dom'
 2 
import { Link } from 'react-router-dom'
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux'
4 
import {
 4 
import {
5 
  Grid,
 5 
  Grid,
6 
  IconButton,
 6 
  IconButton,
Línea 20... Línea 20...
20 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
 20 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
21 
import EmptySection from '@components/UI/EmptySection'
 21 
import EmptySection from '@components/UI/EmptySection'
22 
import ConfirmModal from '@components/modals/ConfirmModal'
 22 
import ConfirmModal from '@components/modals/ConfirmModal'
Línea 23... Línea 23...
23 
 
 23 
 
24 
const NotificationsPage = () => {
 - 
 
25 
  const { data: notifications } = useFetch('/notifications', [])
 24 
const NotificationsPage = () => {
- 
 
 25 
  const { data: user } = useFetch('/helpers/menu')
26 
  const { data: user } = useFetch('/helpers/menu')
 26 
  const { data: fetchedNotifications } = useFetch('/notifications', [])
27 
  const [setNotifications] = useState([])
 27 
  const [notifications, setNotifications] = useState([])
- 
 
 28 
  const [deleteModalState, setDeleteModalState] = useState({
- 
 
 29 
    show: false,
- 
 
 30 
    type: 'multiple',
- 
 
 31 
    url: null
28 
  const [confirmModalShow, setConfirmModalShow] = useState(false)
 32 
  })
Línea 29... Línea 33...
29 
  const dispatch = useDispatch()
 33 
  const dispatch = useDispatch()
Línea 30... Línea 34...
30 
 
 34 
 
31 
  useFetch('/notifications/mark-all-read')
 35 
  // useFetch('/notifications/mark-all-read') POST request needed
32 
 
 36 
 
33 
  const deleteAllNotifications = () => {
 37 
  const deleteAllNotifications = () => {
34 
    axios
 - 
 
35 
      .post('/notifications/clear')
 - 
 
36 
      .then(({ data: responseData }) => {
 38 
    axios
37 
        const { data, success } = responseData
 39 
      .post('/notifications/clear')
38 
 
 - 
 
39 
        if (!success) {
 - 
 
40 
          throw new Error(data)
 - 
 
41 
        }
 40 
      .then(({ data: { data, success } }) => {
- 
 
 41 
        if (!success)
42 
 
 42 
          throw new Error('Error al borrar todas las notificaciones')
43 
        dispatch(addNotification({ style: 'success', msg: data }))
 43 
        setNotifications([])
44 
        setNotifications([])
 44 
        dispatch(addNotification({ style: 'success', msg: data }))
45 
      })
 45 
      })
46 
      .catch((err) => {
 46 
      .catch((err) => {
Línea 47... Línea 47...
47 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 47 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
48 
      })
 48 
      })
49 
  }
 49 
  }
50 
 
 50 
 
51 
  const deleteNotification = (url) => {
 - 
 
52 
    axios
 - 
 
53 
      .post(url)
 - 
 
54 
      .then(({ data: responseData }) => {
 51 
  const deleteNotification = (url) => {
55 
        const { data, success } = responseData
 - 
 
56 
 
 - 
 
57 
        if (!success) {
 52 
    axios
58 
          throw new Error(data)
 53 
      .post(url)
59 
        }
 54 
      .then(({ data: { data, success } }) => {
60 
 
 - 
 
61 
        const newNotifications = notifications.filter(
 55 
        if (!success) throw new Error('Error al borrar la notificacion')
62 
          ({ link_delete }) => link_delete !== url
 56 
        const newNotifications = notifications.filter(
63 
        )
 57 
          ({ link_delete }) => link_delete !== url
64 
 
 58 
        )
65 
        setNotifications(newNotifications)
 59 
        setNotifications(newNotifications)
66 
        dispatch(addNotification({ style: 'success', msg: data }))
 60 
        dispatch(addNotification({ style: 'success', msg: data }))
67 
      })
 61 
      })
Línea 68... Línea 62...
68 
      .catch((err) => {
 62 
      .catch((err) => {
69 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 63 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
- 
 
 64 
      })
- 
 
 65 
  }
- 
 
 66 
 
- 
 
 67 
  const handleDelete = (url) => {
70 
      })
 68 
    setDeleteModalState({
Línea -... Línea 69...
- 
 
 69 
      show: true,
- 
 
 70 
      type: url ? 'single' : 'multiple',
- 
 
 71 
      url
- 
 
 72 
    })
- 
 
 73 
  }
- 
 
 74 
 
- 
 
 75 
  const handleDeleteAccept = () => {
- 
 
 76 
    if (deleteModalState.type === 'multiple') {
- 
 
 77 
      deleteAllNotifications()
- 
 
 78 
    } else {
- 
 
 79 
      deleteNotification(deleteModalState.url)
- 
 
 80 
    }
- 
 
 81 
    setDeleteModalState({
- 
 
 82 
      show: false,
- 
 
 83 
      type: 'multiple'
- 
 
 84 
    })
- 
 
 85 
  }
- 
 
 86 
 
- 
 
 87 
  const handleDeleteCancel = () => {
- 
 
 88 
    setDeleteModalState({
- 
 
 89 
      show: false,
- 
 
 90 
      type: 'multiple'
- 
 
 91 
    })
- 
 
 92 
  }
- 
 
 93 
 
71 
  }
 94 
  useEffect(() => {
72 
 
 95 
    if (fetchedNotifications) {
73 
  const toggleConfirmModal = () => {
 96 
      setNotifications(fetchedNotifications)
74 
    setConfirmModalShow(!confirmModalShow)
 97 
    }
75 
  }
 98 
  }, [fetchedNotifications])
Línea 84... Línea 107...
84 
          <Widget>
 107 
          <Widget>
85 
            <Widget.Header
 108 
            <Widget.Header
86 
              title='Notificaciones'
 109 
              title='Notificaciones'
87 
              renderAction={() => (
 110 
              renderAction={() => (
88 
                <Options>
 111 
                <Options>
89 
                  <Options.Item onClick={toggleConfirmModal}>
 112 
                  <Options.Item onClick={handleDelete}>
90 
                    Borrar notificaciones
 113 
                    Borrar notificaciones
91 
                  </Options.Item>
 114 
                  </Options.Item>
92 
                </Options>
 115 
                </Options>
93 
              )}
 116 
              )}
94 
            />
 117 
            />
95 
            <Widget.Body>
 118 
            <Widget.Body>
96 
              {notifications.length === 0 && (
 119 
              {notifications.length === 0 ? (
97 
                <EmptySection message='No hay notificaciones' align='center' />
 120 
                <EmptySection message='No hay notificaciones' align='center' />
- 
 
 121 
              ) : (
- 
 
 122 
                <List sx={{ maxHeight: '60vh', overflow: 'auto' }}>
- 
 
 123 
                  {notifications.map(
- 
 
 124 
                    ({ link_delete, link, message, time_elapsed }) => (
- 
 
 125 
                      <ListItem
- 
 
 126 
                        key={link}
- 
 
 127 
                        secondaryAction={
- 
 
 128 
                          <IconButton onClick={() => handleDelete(link_delete)}>
- 
 
 129 
                            <Delete />
- 
 
 130 
                          </IconButton>
- 
 
 131 
                        }
- 
 
 132 
                      >
- 
 
 133 
                        <ListItemButton LinkComponent={Link} to={link}>
- 
 
 134 
                          <ListItemText
- 
 
 135 
                            primary={message}
- 
 
 136 
                            secondary={time_elapsed}
- 
 
 137 
                          />
- 
 
 138 
                        </ListItemButton>
- 
 
 139 
                      </ListItem>
- 
 
 140 
                    )
- 
 
 141 
                  )}
- 
 
 142 
                </List>
98 
              )}
 143 
              )}
99 
 
 - 
 
100 
              <List>
 - 
 
101 
                {notifications.map(({ link, message, time_elapsed }) => (
 - 
 
102 
                  <ListItem
 - 
 
103 
                    key={link}
 - 
 
104 
                    secondaryAction={
 - 
 
105 
                      <IconButton onClick={deleteNotification}>
 - 
 
106 
                        <Delete />
 - 
 
107 
                      </IconButton>
 - 
 
108 
                    }
 - 
 
109 
                  >
 - 
 
110 
                    <ListItemButton LinkComponent={Link} to={link}>
 - 
 
111 
                      <ListItemText
 - 
 
112 
                        primary={message}
 - 
 
113 
                        secondary={time_elapsed}
 - 
 
114 
                      />
 - 
 
115 
                    </ListItemButton>
 - 
 
116 
                  </ListItem>
 - 
 
117 
                ))}
 - 
 
118 
              </List>
 - 
 
119 
            </Widget.Body>
 144 
            </Widget.Body>
120 
          </Widget>
 145 
          </Widget>
121 
        </Grid>
 146 
        </Grid>
122 
      </Grid>
 147 
      </Grid>
123 
 
 - 
 
124 
      <ConfirmModal
 148 
      <ConfirmModal
125 
        show={confirmModalShow}
 149 
        show={deleteModalState.show}
126 
        onClose={toggleConfirmModal}
 150 
        onClose={handleDeleteCancel}
127 
        onAccept={() => {
 151 
        onAccept={handleDeleteAccept}
128 
          deleteAllNotifications()
 - 
 
129 
          toggleConfirmModal()
 - 
 
130 
        }}
 - 
 
131 
      />
 152 
      />
132 
    </>
 153 
    </>
133 
  )
 154 
  )
134 
}
 155 
}