Proyectos de Subversion LeadersLinked - SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3201 stevensc 1 
import React, { useEffect, useState } from 'react'
2 
import { connect } from 'react-redux'
3 
import { DeleteOutline } from '@mui/icons-material'
4 
 
5 
import { axios } from 'utils'
6 
import { useOutsideClick } from '@hooks'
7 
 
8 
import { addNotification } from '@app/redux/notification/notification.actions'
9 
 
10 
const NotificationsOption = ({
11 
  addNotification,
12 
  Icon,
13 
  title,
14 
  url,
15 
  notificationsCount,
16 
  setNotificationsCount
17 
}) => {
18 
  const [notifications, setNotifications] = useState([])
19 
  const [displayMenu, setDisplayMenu] = useState(false)
20 
 
21 
  const [menu] = useOutsideClick(() => setDisplayMenu(false))
22 
 
23 
  const readNotification = (link_read, link_notification) => {
24 
    axios
25 
      .post(link_read)
26 
      .then(({ data }) =>
27 
        data.success
28 
          ? window.open(link_notification, '_blank').focus()
29 
          : addNotification({ style: 'danger', msg: data.data })
30 
      )
31 
  }
32 
 
33 
  const deleteNotification = (link_delete) => {
34 
    axios.post(link_delete).then(({ data }) => {
35 
      !data.success && addNotification({ style: 'danger', msg: data.data })
36 
      setNotificationsCount(notificationsCount - 1)
37 
      setNotifications(
38 
        notifications.filter(
39 
          (notification) => notification.link_delete !== link_delete
40 
        )
41 
      )
42 
      addNotification({ style: 'success', msg: data.data })
43 
    })
44 
  }
45 
 
46 
  const handleNotifications = () => {
47 
    axios
48 
      .get('/notifications/unreads')
49 
      .then(({ data }) => {
50 
        if (data.success) {
51 
          const notifications = new Set(data.data.notifications)
52 
          setNotifications([...notifications])
53 
        }
54 
      })
55 
      .catch((err) => {
56 
        addNotification({
57 
          style: 'error',
58 
          msg: 'Disculpe, ha ocurrido un error buscando notificaciones'
59 
        })
60 
        console.log('>>: err > ', err)
61 
      })
62 
  }
63 
 
64 
  const handleClick = (e) => {
65 
    if (window.innerWidth > 768) {
66 
      e.preventDefault()
67 
      setDisplayMenu(!displayMenu)
68 
    }
69 
  }
70 
 
71 
  useEffect(() => {
72 
    handleNotifications()
73 
  }, [notificationsCount])
74 
 
75 
  return (
76 
    <li ref={menu}>
77 
      <a
78 
        href={url}
79 
        className={`header__option mobile ${displayMenu && 'active'}`}
80 
        target='framename'
81 
        onClick={handleClick}
82 
      >
83 
        {Icon && <Icon className='header__option-icon' />}
84 
        <span>{title}</span>
85 
        <span
86 
          className={`badge ${notificationsCount ? 'd-block' : 'd-none'}`}
87 
          style={{ top: '10px' }}
88 
        >
89 
          {notificationsCount}
90 
        </span>
91 
      </a>
92 
      {!!notifications.length && (
93 
        <nav
94 
          className={`nav__options-dropdown d-none d-md-block ${
95 
            displayMenu && 'show'
96 
          }`}
97 
          style={{ maxHeight: '300px', overflow: 'auto' }}
98 
        >
99 
          <ul>
100 
            {notifications.map(
101 
              (
102 
                { message, link_mark_read, link, link_delete, time_elapsed },
103 
                index
104 
              ) => (
105 
                <li key={index}>
106 
                  <div
107 
                    className='d-flex align-items-center justify-content-between'
108 
                    style={{ gap: '.5rem' }}
109 
                  >
110 
                    <a
111 
                      href={link}
112 
                      target='secondary'
113 
                      onClick={(e) => {
114 
                        e.preventDefault()
115 
                        readNotification(link_mark_read, link)
116 
                      }}
117 
                    >
118 
                      {message}
119 
                    </a>
120 
                    <DeleteOutline
121 
                      onClick={() => deleteNotification(link_delete)}
122 
                    />
123 
                  </div>
124 
                  <small style={{ fontSize: '.85rem' }}>{time_elapsed}</small>
125 
                </li>
126 
              )
127 
            )}
128 
          </ul>
129 
        </nav>
130 
      )}
131 
    </li>
132 
  )
133 
}
134 
 
135 
const mapDispatchToProps = {
136 
  addNotification: (notification) => addNotification(notification)
137 
}
138 
 
139 
export default connect(null, mapDispatchToProps)(NotificationsOption)