Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
5112 stevensc 1 
/* eslint-disable camelcase */
4250 stevensc 2 
/* eslint-disable react/prop-types */
3 
/* eslint-disable react/jsx-key */
5110 stevensc 4 
import React, { useEffect, useState } from 'react'
5 
import axios from '../../../../utils/axios'
6 
import { connect } from 'react-redux'
7 
import { HiOutlineTag } from 'react-icons/hi'
8 
import { addNotification } from '../../../../redux/notification/notification.actions'
4250 stevensc 9 
 
10 
const ICON_OPTIONS = [
11 
  <img src="/images/icons/home.png" className="img-icon lg" />,
12 
  <img src="/images/icons/conecctions.png" className="img-icon lg" />,
13 
  <img src="/images/icons/company.png" className="img-icon lg" />,
14 
  <img src="/images/icons/groups.png" className="img-icon lg" />,
7236 stevensc 15 
  <HiOutlineTag />,
4250 stevensc 16 
]
17 
 
5464 stevensc 18 
const ADD_OPTIONS = [<i className="fa fa-calendar img-icon lg" />]
4250 stevensc 19 
 
20 
const NavLinks = ({ menuData, sessionLink, addNotification }) => {
21 
  const [menuItems, setMenuItems] = useState(menuData || [])
22 
  const [aditionalItems, setAditionalItems] = useState([])
23 
  const [notifications, setNotifications] = useState([])
24 
  const [notificationsCount, setNotificationsCount] = useState(0)
25 
  const [totalMessages, setTotalMessages] = useState(0)
5110 stevensc 26 
  const [loading, setLoading] = useState(false)
4250 stevensc 27 
 
28 
  useEffect(() => {
29 
    handleNotifications()
30 
  }, [notificationsCount])
31 
 
32 
  useEffect(() => {
33 
    if (menuData.length > 5) {
34 
      setMenuItems(menuData.splice(0, 5))
35 
      setAditionalItems(menuData.splice(menuData.length - 5))
36 
    }
37 
  }, [])
38 
 
39 
  useEffect(() => {
5110 stevensc 40 
    let timer
4250 stevensc 41 
    if (!loading) {
5110 stevensc 42 
      timer = setTimeout(() => checkSession(), 1000)
4250 stevensc 43 
    }
44 
    return () => {
5110 stevensc 45 
      clearTimeout(timer)
46 
    }
4250 stevensc 47 
  }, [loading])
48 
 
49 
  const checkSession = async () => {
50 
    try {
51 
      setLoading(true)
52 
 
53 
      const { data: response } = await axios.get(sessionLink)
54 
      const { total_messages, total_notifications } = response.data
55 
 
56 
      if (response.success) {
57 
        setNotificationsCount(Number(total_notifications))
58 
        setTotalMessages(Number(total_messages))
59 
      }
60 
 
61 
      setLoading(false)
62 
    } catch (error) {
63 
      console.log(error)
64 
    }
65 
  }
66 
 
67 
  const readNotification = (link_read, link_notification) => {
5464 stevensc 68 
    axios
69 
      .post(link_read)
4250 stevensc 70 
      .then(({ data }) =>
71 
        data.success
72 
          ? window.open(link_notification, '_blank').focus()
5464 stevensc 73 
          : addNotification({ style: 'danger', msg: data.data })
74 
      )
4250 stevensc 75 
  }
76 
 
77 
  const deleteNotification = (link_delete) => {
5464 stevensc 78 
    axios.post(link_delete).then(({ data }) => {
79 
      !data.success && addNotification({ style: 'danger', msg: data.data })
80 
      setNotificationsCount((prev) => prev - 1)
81 
      setNotifications(
82 
        notifications.filter(
83 
          (notification) => notification.link_delete !== link_delete
84 
        )
85 
      )
86 
      addNotification({ style: 'success', msg: data.data })
87 
    })
4250 stevensc 88 
  }
89 
 
90 
  const handleNotifications = () => {
5464 stevensc 91 
    axios
92 
      .get('/notifications/unreads')
4250 stevensc 93 
      .then(({ data }) => {
94 
        if (data.success) {
5110 stevensc 95 
          const notifications = new Set(data.data.notifications)
4250 stevensc 96 
          setNotifications([...notifications])
97 
        }
98 
      })
5464 stevensc 99 
      .catch((err) => {
4250 stevensc 100 
        addNotification({
5110 stevensc 101 
          style: 'error',
7236 stevensc 102 
          msg: 'Disculpe, ha ocurrido un error buscando notificaciones',
4250 stevensc 103 
        })
104 
        console.log('>>: err > ', err)
105 
      })
106 
  }
107 
 
5004 stevensc 108 
  const handleAjaxRequest = async (url) => {
109 
    try {
110 
      const { data } = await axios.get(url)
111 
      if (data.success) window.open(data.data, '_backend')
112 
    } catch (error) {
113 
      console.log('>>: error > ', error)
114 
    }
115 
  }
116 
 
4250 stevensc 117 
  return (
118 
    <ul>
5464 stevensc 119 
      {menuItems.map((item, index) => (
4250 stevensc 120 
        <li key={index}>
121 
          <a
5145 stevensc 122 
            href={`/${item.href}`}
5004 stevensc 123 
            onClick={(e) => {
124 
              if (item.ajax) {
125 
                e.preventDefault()
126 
                handleAjaxRequest(item.href)
127 
              }
128 
              if (item.childs.length) {
129 
                e.preventDefault()
130 
              }
131 
            }}
4250 stevensc 132 
          >
133 
            {ICON_OPTIONS[index]}
134 
            <p>{item.label}</p>
135 
          </a>
5464 stevensc 136 
          {!!item.childs.length && (
137 
            <nav className="navLinkDropdown">
4250 stevensc 138 
              <ul>
5464 stevensc 139 
                {item.childs.map((_element, _i) => (
4250 stevensc 140 
                  <li key={_i}>
5145 stevensc 141 
                    <a
142 
                      href={`/${_element.href}`}
5464 stevensc 143 
                      target="framename"
5145 stevensc 144 
                      onClick={(e) => {
145 
                        if (_element.childs?.length) e.preventDefault()
5464 stevensc 146 
                      }}
147 
                    >
5145 stevensc 148 
                      {_element.label}
149 
                    </a>
5464 stevensc 150 
                    {!!_element.childs?.length && (
4250 stevensc 151 
                      <>
152 
                        <i className="fa fa-angle-right" />
5464 stevensc 153 
                        <nav className="navigation-level_three">
4250 stevensc 154 
                          <ul>
5464 stevensc 155 
                            {_element.childs?.map((levelThree, index) => (
4250 stevensc 156 
                              <li key={index}>
5145 stevensc 157 
                                <a href={`/${levelThree.href}`}>
4250 stevensc 158 
                                  {levelThree.label}
159 
                                </a>
160 
                              </li>
5464 stevensc 161 
                            ))}
4250 stevensc 162 
                          </ul>
163 
                        </nav>
164 
                      </>
5464 stevensc 165 
                    )}
4250 stevensc 166 
                  </li>
5464 stevensc 167 
                ))}
4250 stevensc 168 
              </ul>
169 
            </nav>
5464 stevensc 170 
          )}
4250 stevensc 171 
        </li>
5464 stevensc 172 
      ))}
4250 stevensc 173 
      <li>
174 
        <a href="/inmail">
175 
          <i className="fa fa-envelope-o" />
176 
          <p>Inmail</p>
177 
          <span className={`badge ${totalMessages ? 'd-block' : 'd-none'}`}>
178 
            {totalMessages}
179 
          </span>
180 
        </a>
181 
      </li>
5464 stevensc 182 
      <li className="d-md-none">
4250 stevensc 183 
        <a href="/chat">
184 
          <i className="fa fa-comment-o" />
185 
          <p>Chat</p>
186 
          <span className="badge" />
187 
        </a>
188 
      </li>
5464 stevensc 189 
      {!!aditionalItems.length && (
4250 stevensc 190 
        <li>
5464 stevensc 191 
          <a href={'#'} onClick={(e) => e.preventDefault()}>
4250 stevensc 192 
            <i className="fa fa-inbox img-icon lg" />
193 
            <p>Comunicación</p>
194 
          </a>
195 
          <div className="aditional_links">
196 
            <ul>
5464 stevensc 197 
              {aditionalItems.map((item, index) => (
4250 stevensc 198 
                <li key={index}>
5145 stevensc 199 
                  <a href={`/${item.href}`}>
4250 stevensc 200 
                    {ADD_OPTIONS[index] || null}
201 
                    <p>{item.label}</p>
202 
                  </a>
203 
                </li>
5464 stevensc 204 
              ))}
4250 stevensc 205 
              <li>
206 
                <a href="/notifications">
207 
                  <img src="/images/icons/bell.png" className="img-icon lg" />
208 
                  <p>Notificaciones</p>
7236 stevensc 209 
                  <span
210 
                    className={`badge ${
211 
                      notificationsCount ? 'd-block' : 'd-none'
212 
                    }`}
213 
                  >
4250 stevensc 214 
                    {notificationsCount}
215 
                  </span>
216 
                </a>
5464 stevensc 217 
                {!!notifications.length && (
218 
                  <nav className="navigation-level_three">
4250 stevensc 219 
                    <ul>
5464 stevensc 220 
                      {[...notifications].reverse().map((element) => {
4250 stevensc 221 
                        return (
5463 stevensc 222 
                          <li key={element.message}>
5464 stevensc 223 
                            <div className="d-flex flex-column">
4250 stevensc 224 
                              <a
225 
                                href={element.link}
226 
                                onClick={(e) => {
227 
                                  e.preventDefault()
7236 stevensc 228 
                                  readNotification(
229 
                                    element.link_mark_read,
230 
                                    element.link
231 
                                  )
4250 stevensc 232 
                                }}
233 
                              >
234 
                                {element.message}
235 
                              </a>
5464 stevensc 236 
                              <small style={{ fontSize: '.85rem' }}>
237 
                                {element.time_elapsed}
238 
                              </small>
4250 stevensc 239 
                            </div>
5464 stevensc 240 
                            <i
241 
                              className="ml-3 fa fa-trash-o cursor-pointer"
7236 stevensc 242 
                              onClick={() =>
243 
                                deleteNotification(element.link_delete)
244 
                              }
5464 stevensc 245 
                            />
4250 stevensc 246 
                          </li>
247 
                        )
5464 stevensc 248 
                      })}
4250 stevensc 249 
                    </ul>
250 
                  </nav>
5464 stevensc 251 
                )}
4250 stevensc 252 
              </li>
253 
            </ul>
254 
          </div>
255 
        </li>
5464 stevensc 256 
      )}
4250 stevensc 257 
    </ul>
5110 stevensc 258 
  )
259 
}
4250 stevensc 260 
 
261 
const mapDispatchToProps = {
7236 stevensc 262 
  addNotification: (notification) => addNotification(notification),
5110 stevensc 263 
}
4250 stevensc 264 
 
5110 stevensc 265 
export default connect(null, mapDispatchToProps)(NavLinks)