Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2995 | Rev 2998 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2995 stevensc 1 
import React, { useEffect, useState } from 'react'
2992 stevensc 2 
import { Link } from 'react-router-dom'
5 stevensc 3 
import { useDispatch } from 'react-redux'
2992 stevensc 4 
import {
5 
  Grid,
6 
  IconButton,
7 
  List,
8 
  ListItem,
9 
  ListItemButton,
10 
  ListItemText
11 
} from '@mui/material'
12 
import { Delete } from '@mui/icons-material'
5 stevensc 13 
 
2992 stevensc 14 
import { axios } from '@utils'
15 
import { useFetch } from '@hooks'
16 
import { addNotification } from '@store/notification/notification.actions'
1469 stevensc 17 
 
2992 stevensc 18 
import Widget from '@components/UI/Widget'
19 
import Options from '@components/UI/Option'
20 
import ProfileInfo from '@components/widgets/default/ProfileWidget'
21 
import EmptySection from '@components/UI/EmptySection'
22 
import ConfirmModal from '@components/modals/ConfirmModal'
5 stevensc 23 
 
24 
const NotificationsPage = () => {
2992 stevensc 25 
  const { data: user } = useFetch('/helpers/menu')
2995 stevensc 26 
  const { data: fetchedNotifications } = useFetch('/notifications', [])
27 
  const [notifications, setNotifications] = useState([])
28 
  const [deleteModalState, setDeleteModalState] = useState({
29 
    show: false,
30 
    type: 'multiple',
31 
    url: null
32 
  })
5 stevensc 33 
  const dispatch = useDispatch()
34 
 
2995 stevensc 35 
  // useFetch('/notifications/mark-all-read') POST request needed
5 stevensc 36 
 
37 
  const deleteAllNotifications = () => {
38 
    axios
39 
      .post('/notifications/clear')
2995 stevensc 40 
      .then(({ data: { data, success } }) => {
41 
        if (!success)
42 
          throw new Error('Error al borrar todas las notificaciones')
43 
        setNotifications([])
5 stevensc 44 
        dispatch(addNotification({ style: 'success', msg: data }))
45 
      })
46 
      .catch((err) => {
670 stevensc 47 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
5 stevensc 48 
      })
49 
  }
50 
 
51 
  const deleteNotification = (url) => {
52 
    axios
53 
      .post(url)
2995 stevensc 54 
      .then(({ data: { data, success } }) => {
55 
        if (!success) throw new Error('Error al borrar la notificacion')
5 stevensc 56 
        const newNotifications = notifications.filter(
57 
          ({ link_delete }) => link_delete !== url
58 
        )
59 
        setNotifications(newNotifications)
60 
        dispatch(addNotification({ style: 'success', msg: data }))
61 
      })
62 
      .catch((err) => {
670 stevensc 63 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
5 stevensc 64 
      })
65 
  }
66 
 
2995 stevensc 67 
  const handleDelete = (url) => {
68 
    setDeleteModalState({
69 
      show: true,
70 
      type: url ? 'single' : 'multiple',
71 
      url
72 
    })
5 stevensc 73 
  }
74 
 
2995 stevensc 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 
 
94 
  useEffect(() => {
95 
    if (fetchedNotifications) {
96 
      setNotifications(fetchedNotifications)
97 
    }
98 
  }, [fetchedNotifications])
99 
 
5 stevensc 100 
  return (
101 
    <>
2806 stevensc 102 
      <Grid container spacing={2}>
2997 stevensc 103 
        <Grid item xs md={4}>
2994 stevensc 104 
          <ProfileInfo {...user} />
2806 stevensc 105 
        </Grid>
2997 stevensc 106 
        <Grid item xs md={8}>
2992 stevensc 107 
          <Widget>
108 
            <Widget.Header
109 
              title='Notificaciones'
110 
              renderAction={() => (
111 
                <Options>
2995 stevensc 112 
                  <Options.Item onClick={handleDelete}>
2992 stevensc 113 
                    Borrar notificaciones
114 
                  </Options.Item>
115 
                </Options>
116 
              )}
117 
            />
118 
            <Widget.Body>
2995 stevensc 119 
              {notifications.length === 0 ? (
2806 stevensc 120 
                <EmptySection message='No hay notificaciones' align='center' />
2995 stevensc 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>
2806 stevensc 143 
              )}
2992 stevensc 144 
            </Widget.Body>
145 
          </Widget>
1469 stevensc 146 
        </Grid>
2806 stevensc 147 
      </Grid>
5 stevensc 148 
      <ConfirmModal
2995 stevensc 149 
        show={deleteModalState.show}
150 
        onClose={handleDeleteCancel}
151 
        onAccept={handleDeleteAccept}
5 stevensc 152 
      />
153 
    </>
154 
  )
155 
}
156 
 
157 
export default NotificationsPage