Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5933 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3198 stevensc 1
/* eslint-disable react/prop-types */
5373 stevensc 2
import React, { useState, useLayoutEffect, useRef } from 'react'
3
import { BiDotsVerticalRounded } from 'react-icons/bi'
4633 stevensc 4
import DeleteOutline from '@mui/icons-material/DeleteOutline'
5373 stevensc 5
import { axios } from '../utils'
4203 stevensc 6
 
5373 stevensc 7
import SocialNetworks from '../dashboard/components/home-section/SocialNetworks'
8
import ConfirmModal from '../shared/confirm-modal/ConfirmModal'
4203 stevensc 9
 
5373 stevensc 10
import { useDispatch } from 'react-redux'
11
import { addNotification } from '../redux/notification/notification.actions'
5380 stevensc 12
import ProfileInfo from '../dashboard/components/home-section/ProfileInfo'
1307 steven 13
 
2470 stevensc 14
const Notifications = ({ backendVars }) => {
5933 stevensc 15
  const { image, fullName, country, visits, connections, description } =
16
    backendVars
3277 stevensc 17
  const [notifications, setNotifications] = useState([])
18
  const [displayOption, setDisplayOption] = useState(false)
5373 stevensc 19
  const [confirmModalShow, setConfirmModalShow] = useState(false)
3313 stevensc 20
  const dispatch = useDispatch()
3277 stevensc 21
  const menuOptions = useRef(null)
2468 stevensc 22
 
3311 stevensc 23
  const handleConfirmModalShow = () => setConfirmModalShow(!confirmModalShow)
24
 
3315 stevensc 25
  const handleAccept = () => {
26
    deleteAllNotifications()
27
    handleConfirmModalShow()
28
  }
4201 stevensc 29
 
1309 steven 30
  const handleNotifications = async () => {
1310 steven 31
    try {
3277 stevensc 32
      const _notifications = await axios.get('/notifications')
1310 steven 33
      setNotifications(_notifications.data.data)
34
    } catch (error) {
35
      console.log('>>: error > ', error)
36
    }
1309 steven 37
  }
2468 stevensc 38
 
3278 stevensc 39
  const deleteAllNotifications = () => {
5933 stevensc 40
    axios
41
      .post('/notifications/clear')
3277 stevensc 42
      .then(({ data }) => {
5933 stevensc 43
        if (!data.success)
44
          dispatch(addNotification({ style: 'danger', msg: data.data }))
3313 stevensc 45
        dispatch(addNotification({ style: 'success', msg: data.data }))
3277 stevensc 46
        setNotifications([])
47
      })
5933 stevensc 48
      .catch((err) =>
49
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
50
      )
3277 stevensc 51
  }
52
 
4633 stevensc 53
  const deleteNotification = (url) => {
5933 stevensc 54
    axios
55
      .post(url)
4635 stevensc 56
      .then(({ data: response }) => {
57
        if (!response.success) {
5933 stevensc 58
          return dispatch(
59
            addNotification({ style: 'danger', msg: response.data })
60
          )
4633 stevensc 61
        }
4635 stevensc 62
        dispatch(addNotification({ style: 'success', msg: response.data }))
5933 stevensc 63
        setNotifications((prevNotifications) =>
64
          prevNotifications.filter(
65
            (notification) => notification.link_delete !== url
66
          )
67
        )
4633 stevensc 68
      })
5933 stevensc 69
      .catch((err) =>
70
        dispatch(addNotification({ style: 'danger', msg: `Error: ${err}` }))
71
      )
4633 stevensc 72
  }
73
 
1309 steven 74
  useLayoutEffect(() => {
3277 stevensc 75
    const handleClickOutside = (event) => {
76
      if (menuOptions.current && !menuOptions.current.contains(event.target)) {
77
        setDisplayOption(false)
78
      }
79
    }
5373 stevensc 80
    document.addEventListener('mousedown', handleClickOutside)
3277 stevensc 81
 
82
    return () => {
5373 stevensc 83
      document.removeEventListener('mousedown', handleClickOutside)
84
    }
85
  }, [menuOptions])
3277 stevensc 86
 
87
  useLayoutEffect(() => {
88
    handleNotifications()
5373 stevensc 89
  }, [])
2468 stevensc 90
 
1307 steven 91
  return (
3311 stevensc 92
    <>
5933 stevensc 93
      <main className="notifications-grid container px-0">
94
        <aside className="main-left-sidebar d-none d-md-flex">
5380 stevensc 95
          <ProfileInfo
96
            image={image}
97
            fullName={fullName}
98
            description={description}
99
            visits={visits}
100
            country={country}
101
            connections={connections}
102
          />
103
        </aside>
104
        <div className="notification-list">
105
          <div className="notification-header">
106
            <h2>Notificaciones</h2>
107
            <div className="cursor-pointer d-flex align-items-center">
108
              <BiDotsVerticalRounded
109
                onClick={() => setDisplayOption(!displayOption)}
110
                style={{ fontSize: '1.5rem' }}
111
              />
5933 stevensc 112
              <div
113
                className={`feed-options ${displayOption ? 'active' : ''}`}
114
                ref={menuOptions}
115
              >
5380 stevensc 116
                <ul>
117
                  <li>
118
                    <button
119
                      className="option-btn"
120
                      onClick={handleConfirmModalShow}
121
                    >
122
                      <i className="fa fa-trash-o mr-1" />
123
                      Borrar notificaciones
124
                    </button>
125
                  </li>
126
                </ul>
3277 stevensc 127
              </div>
1311 steven 128
            </div>
5380 stevensc 129
          </div>
130
          <ul>
5933 stevensc 131
            {notifications.length ? (
132
              [...notifications].reverse().map((element, index) => (
5380 stevensc 133
                <li key={index}>
134
                  <div className="notification-item">
5933 stevensc 135
                    <div
136
                      className="d-flex align-items-center justify-content-between"
137
                      style={{ gap: '.5rem' }}
138
                    >
139
                      <a href={element.link}>{element.message}</a>
140
                      <DeleteOutline
141
                        className="cursor-pointer"
142
                        onClick={() => deleteNotification(element.link_delete)}
143
                      />
4232 stevensc 144
                    </div>
5933 stevensc 145
                    <span>{element.time_elapsed}</span>
5380 stevensc 146
                  </div>
147
                </li>
5933 stevensc 148
              ))
149
            ) : (
150
              <div className="empty-section">
5380 stevensc 151
                <h2>No hay notificaciones</h2>
152
              </div>
5933 stevensc 153
            )}
5380 stevensc 154
          </ul>
1309 steven 155
        </div>
5380 stevensc 156
      </main>
3311 stevensc 157
      <ConfirmModal
158
        show={confirmModalShow}
159
        onClose={handleConfirmModalShow}
3315 stevensc 160
        onAccept={handleAccept}
5933 stevensc 161
        acceptLabel="Aceptar"
3311 stevensc 162
      />
163
    </>
1307 steven 164
  )
165
}
3276 stevensc 166
 
5373 stevensc 167
export default Notifications