Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 4952 Rev 5361
Línea 5... Línea 5...
5 
import { addNotification } from '../../../redux/notification/notification.actions'
 5 
import { addNotification } from '../../../redux/notification/notification.actions'
6 
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
 6 
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
7 
import useOutsideClick from '../../../hooks/useOutsideClick'
 7 
import useOutsideClick from '../../../hooks/useOutsideClick'
Línea 8... Línea 8...
8 
 
 8 
 
9 
const NotificationsOption = ({ addNotification, Icon, title, url, notificationsCount, setNotificationsCount }) => {
 9 
const NotificationsOption = ({ addNotification, Icon, title, url, notificationsCount, setNotificationsCount }) => {
10 
    const [notifications, setNotifications] = useState([])
 10 
  const [notifications, setNotifications] = useState([])
11 
    const [displayMenu, setDisplayMenu] = useState(false)
 11 
  const [displayMenu, setDisplayMenu] = useState(false)
12 
    const menu = useRef(null)
 12 
  const menu = useRef(null)
13 
    const outsideClick = useOutsideClick(menu)
 13 
  const outsideClick = useOutsideClick(menu)
14 
 
 14 
 
15 
    const readNotification = (link_read, link_notification) => {
 15 
  const readNotification = (link_read, link_notification) => {
16 
        axios.post(link_read)
 16 
    axios.post(link_read)
17 
            .then(({ data }) =>
 17 
      .then(({ data }) =>
18 
                data.success
 18 
        data.success
19 
                    ? window.open(link_notification, '_blank').focus()
 19 
          ? window.open(link_notification, '_blank').focus()
20 
                    : addNotification({ style: 'danger', msg: data.data }))
 20 
          : addNotification({ style: 'danger', msg: data.data }))
21 
    }
 21 
  }
22 
 
 22 
 
23 
    const deleteNotification = (link_delete) => {
 23 
  const deleteNotification = (link_delete) => {
24 
        axios.post(link_delete)
 24 
    axios.post(link_delete)
25 
            .then(({ data }) => {
 25 
      .then(({ data }) => {
26 
                !data.success && addNotification({ style: 'danger', msg: data.data })
 26 
        !data.success && addNotification({ style: 'danger', msg: data.data })
27 
                setNotificationsCount(notificationsCount - 1)
 27 
        setNotificationsCount(notificationsCount - 1)
28 
                setNotifications(notifications.filter(notification => notification.link_delete !== link_delete))
 28 
        setNotifications(notifications.filter(notification => notification.link_delete !== link_delete))
29 
                addNotification({ style: 'success', msg: data.data })
 29 
        addNotification({ style: 'success', msg: data.data })
30 
            })
 30 
      })
31 
    }
 31 
  }
32 
 
 32 
 
33 
    const handleNotifications = () => {
 33 
  const handleNotifications = () => {
34 
        axios.get('/notifications/unreads')
 34 
    axios.get('/notifications/unreads')
35 
            .then(({ data }) => {
 35 
      .then(({ data }) => {
36 
                if (data.success) {
 36 
        if (data.success) {
37 
                    let notifications = new Set(data.data.notifications)
 37 
          const notifications = new Set(data.data.notifications)
38 
                    setNotifications([...notifications])
 - 
 
39 
                }
 - 
 
40 
            })
 - 
 
41 
            .catch(err => {
 - 
 
42 
                addNotification({
 - 
 
43 
                    style: "error",
 - 
 
44 
                    msg: 'Disculpe, ha ocurrido un error buscando notificaciones',
 - 
 
45 
                })
 - 
 
46 
                console.log('>>: err > ', err)
 - 
 
47 
            })
 - 
 
48 
    }
 - 
 
49 
 
 - 
 
50 
    const handleClick = (e) => {
 - 
 
51 
        if (window.innerWidth > 768) {
 - 
 
52 
            e.preventDefault()
 - 
 
53 
            setDisplayMenu(!displayMenu)
 38 
          setNotifications([...notifications])
- 
 
 39 
        }
- 
 
 40 
      })
- 
 
 41 
      .catch(err => {
- 
 
 42 
        addNotification({
- 
 
 43 
          style: 'error',
- 
 
 44 
          msg: 'Disculpe, ha ocurrido un error buscando notificaciones'
- 
 
 45 
        })
- 
 
 46 
        console.log('>>: err > ', err)
- 
 
 47 
      })
- 
 
 48 
  }
- 
 
 49 
 
- 
 
 50 
  const handleClick = (e) => {
- 
 
 51 
    if (window.innerWidth > 768) {
- 
 
 52 
      e.preventDefault()
54 
        }
 53 
      setDisplayMenu(!displayMenu)
- 
 
 54 
    }
- 
 
 55 
  }
- 
 
 56 
 
- 
 
 57 
  useEffect(() => {
- 
 
 58 
    if (outsideClick) setDisplayMenu(false)
Línea 55... Línea 59...
55 
    }
 59 
  }, [outsideClick])
56 
 
 - 
 
57 
    useEffect(() => {
 - 
 
58 
        if (outsideClick) setDisplayMenu(false)
 - 
 
59 
    }, [outsideClick])
 - 
 
60 
 
 60 
 
61 
    useEffect(() => {
 61 
  useEffect(() => {
Línea 62... Línea 62...
62 
        handleNotifications()
 62 
    handleNotifications()
63 
    }, [notificationsCount])
 63 
  }, [notificationsCount])
64 
 
 64 
 
65 
    return (
 65 
  return (
66 
        <li ref={menu}>
 66 
        <li ref={menu}>
67 
            <a href={url} className={`header__option mobile ${displayMenu && 'active'}`} target='framename' onClick={handleClick}>
 67 
            <a href={url} className={`header__option mobile ${displayMenu && 'active'}`} target='framename' onClick={handleClick}>
Línea 73... Línea 73...
73 
            </a>
 73 
            </a>
74 
            {!!notifications.length &&
 74 
            {!!notifications.length &&
75 
                <nav className={`nav__options-dropdown d-none d-md-block ${displayMenu && 'show'}`} style={{ maxHeight: '300px', overflow: 'auto' }}>
 75 
                <nav className={`nav__options-dropdown d-none d-md-block ${displayMenu && 'show'}`} style={{ maxHeight: '300px', overflow: 'auto' }}>
76 
                    <ul>{notifications.map(({ message, link_mark_read, link, link_delete, time_elapsed }, index) =>
 76 
                    <ul>{notifications.map(({ message, link_mark_read, link, link_delete, time_elapsed }, index) =>
77 
                        <li key={index}>
 77 
                        <li key={index}>
78 
                            <div className="d-flex align-items-center" style={{ gap: '.5rem' }}>
 78 
                            <div className="d-flex align-items-center justify-content-between" style={{ gap: '.5rem' }}>
79 
                                <a
 79 
                                <a
80 
                                    href={link}
 80 
                                    href={link}
81 
                                    target='secondary'
 81 
                                    target='secondary'
82 
                                    onClick={(e) => {
 82 
                                    onClick={(e) => {
83 
                                        e.preventDefault()
 83 
                                      e.preventDefault()
84 
                                        readNotification(link_mark_read, link)
 84 
                                      readNotification(link_mark_read, link)
85 
                                    }}
 85 
                                    }}
86 
                                >
 86 
                                >
87 
                                    {message}
 87 
                                    {message}
88 
                                </a>
 88 
                                </a>
89 
                                <DeleteOutlineIcon onClick={() => deleteNotification(link_delete)} />
 89 
                                <DeleteOutlineIcon onClick={() => deleteNotification(link_delete)} />
Línea 95... Línea 95...
95 
                    )}
 95 
                    )}
96 
                    </ul>
 96 
                    </ul>
97 
                </nav>
 97 
                </nav>
98 
            }
 98 
            }
99 
        </li>
 99 
        </li>
100 
    )
 100 
  )
101 
}
 101 
}
Línea 102... Línea 102...
102 
 
 102 
 
103 
const mapDispatchToProps = {
 103 
const mapDispatchToProps = {
104 
    addNotification: (notification) => addNotification(notification),
 104 
  addNotification: (notification) => addNotification(notification)
Línea 105... Línea -...
105 
}
 - 
 
106 
 
 105 
}
- 
 
 106