Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 4924 | Rev 4947 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 4924 Rev 4946
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useEffect, useRef, useState } from 'react'
 2 
import React, { useEffect, useRef, useState } from 'react'
3 
import SearchIcon from '@mui/icons-material/Search'
 3 
import SearchIcon from '@mui/icons-material/Search'
4 
import HomeIcon from '@mui/icons-material/Home'
 4 
import HomeIcon from '@mui/icons-material/Home'
5 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
 5 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
6 
import SellIcon from '@mui/icons-material/Sell';
 6 
import SellIcon from '@mui/icons-material/Sell'
7 
import PeopleIcon from '@mui/icons-material/People';
 7 
import PeopleIcon from '@mui/icons-material/People'
8 
import GroupsIcon from '@mui/icons-material/Groups';
 8 
import GroupsIcon from '@mui/icons-material/Groups'
9 
import HeaderOptions from './HeaderOptions'
 9 
import HeaderOptions from './HeaderOptions'
10 
import ChatIcon from '@mui/icons-material/Chat'
 10 
import ChatIcon from '@mui/icons-material/Chat'
11 
import NotificationsIcon from '@mui/icons-material/Notifications'
 11 
import NotificationsIcon from '@mui/icons-material/Notifications'
12 
import MenuIcon from '@mui/icons-material/Menu'
 12 
import MenuIcon from '@mui/icons-material/Menu'
13 
import UserOptions from './UserOptions'
 13 
import UserOptions from './UserOptions'
14 
import { useForm } from 'react-hook-form';
 14 
import { useForm } from 'react-hook-form'
15 
import NotificationsOption from './NotificationsOption';
 15 
import NotificationsOption from './NotificationsOption'
16 
import ComunicationOptions from './ComunicationOptions';
 16 
import ComunicationOptions from './ComunicationOptions'
17 
import MenuDrawer from './Drawer';
 17 
let MenuDrawer
Línea 18... Línea 18...
18 
 
 18 
 
- 
 
 19 
import './Header.scss'
Línea 19... Línea 20...
19 
import './Header.scss'
 20 
import { axios } from '../../../utils'
20 
 
 21 
 
21 
const ICON_OPTIONS = [
 22 
const ICON_OPTIONS = [
22 
  HomeIcon,
 23 
  HomeIcon,
Línea 36... Línea 37...
36 
  //companyVars,
 37 
  //companyVars,
37 
  //isChatPage,
 38 
  //isChatPage,
38 
  routeCheckSession,
 39 
  routeCheckSession,
39 
}) => {
 40 
}) => {
40 
  const [menuItems, setMenuItems] = useState(menu || [])
 41 
  const [menuItems, setMenuItems] = useState(menu || [])
- 
 
 42 
  const [notifications, setNotifications] = useState([])
- 
 
 43 
  const [notificationsCount, setNotificationsCount] = useState(0)
41 
  const [aditionalItems, setAditionalItems] = useState([])
 44 
  const [aditionalItems, setAditionalItems] = useState([])
- 
 
 45 
  const [messagesCount, setMessagesCount] = useState(0)
42 
  const [userImage, setUserImage] = useState(image)
 46 
  const [userImage, setUserImage] = useState(image)
- 
 
 47 
 
43 
  const [showMobileSearch, setShowMobileSearch] = useState(false)
 48 
  const [showMobileSearch, setShowMobileSearch] = useState(false)
44 
  const [showDrawer, setShowDrawer] = useState(false)
 49 
  const [showDrawer, setShowDrawer] = useState(false)
45 
  const [loading, setLoading] = useState(false);
 50 
  const [loading, setLoading] = useState(false)
- 
 
 51 
 
46 
  const searchInput = useRef(null);
 52 
  const searchInput = useRef(null)
Línea 47... Línea 53...
47 
 
 53 
 
- 
 
 54 
  const { handleSubmit, register } = useForm()
48 
  const { handleSubmit, register } = useForm()
 55 
 
Línea 49... Línea 56...
49 
  const handleOnSubmit = (data) => window.location.replace(`/search/entity/user?keyword=${data.keyword}`)
 56 
  const handleOnSubmit = (data) => window.location.replace(`/search/entity/user?keyword=${data.keyword}`)
50 
 
 57 
 
51 
  const checkUserImage = async () => {
 58 
  const checkUserImage = async () => {
52 
    setLoading(true);
 59 
    setLoading(true)
53 
    const session_image = sessionStorage.getItem('user_session_image')
 60 
    const session_image = sessionStorage.getItem('user_session_image')
54 
    if (session_image) {
 61 
    if (session_image) {
55 
      await setUserImage(session_image)
 62 
      await setUserImage(session_image)
56 
      sessionStorage.removeItem('user_session_image')
 63 
      sessionStorage.removeItem('user_session_image')
- 
 
 64 
    }
- 
 
 65 
    setLoading(false)
- 
 
 66 
  }
- 
 
 67 
 
- 
 
 68 
  const checkSession = async () => {
- 
 
 69 
    try {
- 
 
 70 
      setLoading(true)
- 
 
 71 
      const { data: response } = await axios.get(routeCheckSession)
- 
 
 72 
      const { total_messages, total_notifications } = response.data
- 
 
 73 
 
- 
 
 74 
      if (response.success) {
- 
 
 75 
        setMessagesCount(Number(total_messages))
- 
 
 76 
        setNotificationsCount(Number(total_notifications))
- 
 
 77 
      }
- 
 
 78 
      setLoading(false)
- 
 
 79 
    } catch (error) {
57 
    }
 80 
      console.log(error)
Línea 58... Línea 81...
58 
    setLoading(false);
 81 
    }
59 
  }
 82 
  }
60 
 
 83 
 
61 
  const handleDisplayMobileSearch = () => {
 84 
  const handleDisplayMobileSearch = () => {
62 
    if (window.innerWidth < 992) {
 85 
    if (window.innerWidth < 992) {
Línea 63... Línea 86...
63 
      setShowMobileSearch(true)
 86 
      setShowMobileSearch(true)
64 
    }
 87 
    }
65 
  }
 88 
  }
66 
 
 89 
 
- 
 
 90 
  useEffect(() => {
- 
 
 91 
    let timer
- 
 
 92 
    if (!loading) {
67 
  useEffect(() => {
 93 
      timer = setTimeout(() => {
68 
    let timer;
 94 
        checkUserImage()
69 
    if (!loading) {
 95 
        checkSession()
70 
      timer = setTimeout(() => checkUserImage(), 1000);
 96 
      }, 1000)
71 
    }
 97 
    }
Línea 72... Línea 98...
72 
    return () => {
 98 
    return () => {
73 
      clearTimeout(timer);
 99 
      clearTimeout(timer)
74 
    };
 100 
    }
Línea 85... Línea 111...
85 
    const handleClickOutside = (event) => {
 111 
    const handleClickOutside = (event) => {
86 
      if (searchInput?.current && !searchInput?.current?.contains(event.target)) {
 112 
      if (searchInput?.current && !searchInput?.current?.contains(event.target)) {
87 
        setShowMobileSearch(false)
 113 
        setShowMobileSearch(false)
88 
      }
 114 
      }
89 
    }
 115 
    }
90 
    document.addEventListener("mousedown", handleClickOutside);
 116 
    document.addEventListener("mousedown", handleClickOutside)
Línea 91... Línea 117...
91 
 
 117 
 
92 
    return () => {
 118 
    return () => {
93 
      document.removeEventListener("mousedown", handleClickOutside);
 119 
      document.removeEventListener("mousedown", handleClickOutside)
94 
    };
 120 
    }
Línea 95... Línea 121...
95 
  }, [searchInput]);
 121 
  }, [searchInput])
96 
 
 122 
 
97 
  return (
 123 
  return (
98 
    <>
 124 
    <>
Línea 136... Línea 162...
136 
                  Icon={NotificationsIcon}
 162 
                  Icon={NotificationsIcon}
137 
                  title='Notificaciones'
 163 
                  title='Notificaciones'
138 
                  url='/notifications'
 164 
                  url='/notifications'
139 
                  sessionLink={routeCheckSession}
 165 
                  sessionLink={routeCheckSession}
140 
                />
 166 
                />
141 
                <ComunicationOptions
 167 
                <HeaderOptions
142 
                  sessionLink={routeCheckSession}
 168 
                  badgeCount={messagesCount}
143 
                  Icon={ChatIcon}
 169 
                  Icon={ChatIcon}
144 
                  title='Comunicación'
 170 
                  title='Comunicación'
145 
                  url=''
 - 
 
146 
                  childs={[
 171 
                  childs={[
147 
                    ...aditionalItems,
 172 
                    ...aditionalItems,
148 
                    { label: 'Inmail', href: '/inmail' },
 173 
                    { label: 'Inmail', href: '/inmail', count: messagesCount },
149 
                    { label: 'Chat', href: '/chat' }
 174 
                    { label: 'Chat', href: '/chat' }
150 
                  ]}
 175 
                  ]}
- 
 
 176 
                  isMobile={true}
151 
                />
 177 
                />
152 
                <UserOptions
 178 
                <UserOptions
153 
                  image={userImage}
 179 
                  image={userImage}
154 
                  name={fullName}
 180 
                  name={fullName}
155 
                  adminUrl={linkAdmin}
 181 
                  adminUrl={linkAdmin}