Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6694 Rev 6753
Línea 1... Línea 1...
1 
import React, { Suspense, lazy, useEffect, useState } from 'react'
 1 
import React, { Suspense, lazy, useState } from 'react'
2 
import { axios } from '../../../utils'
 - 
 
3 
 
 - 
 
4 
import HomeIcon from '@mui/icons-material/Home'
 2 
import HomeIcon from '@mui/icons-material/Home'
5 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
 3 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
6 
import SellIcon from '@mui/icons-material/Sell'
 4 
import SellIcon from '@mui/icons-material/Sell'
7 
import PeopleIcon from '@mui/icons-material/People'
 5 
import PeopleIcon from '@mui/icons-material/People'
8 
import GroupsIcon from '@mui/icons-material/Groups'
 6 
import GroupsIcon from '@mui/icons-material/Groups'
9 
import ChatIcon from '@mui/icons-material/Chat'
 - 
 
10 
import MenuIcon from '@mui/icons-material/Menu'
 7 
import MenuIcon from '@mui/icons-material/Menu'
11 
import SchoolIcon from '@mui/icons-material/School'
 8 
import SchoolIcon from '@mui/icons-material/School'
- 
 
 9 
import ChatIcon from '@mui/icons-material/Chat'
Línea 12... Línea -...
12 
 
 - 
 
13 
import HeaderOptions from './HeaderOptions'
 10 
 
- 
 
 11 
import UserOptions from './UserOptions'
- 
 
 12 
import HeaderOptions from './HeaderOptions'
Línea 14... Línea 13...
14 
import UserOptions from './UserOptions'
 13 
import NavSearch from './nav-search/NavSearch'
15 
 
 - 
 
16 
import './Header.scss'
 - 
 
- 
 
 14 
 
17 
import NavSearch from './nav-search/NavSearch'
 15 
import './Header.scss'
Línea 18... Línea 16...
18 
import useWindowSize from '../../../hooks/useWindowSize'
 16 
 
19 
const MenuDrawer = lazy(() => import('./Drawer'))
 17 
const MenuDrawer = lazy(() => import('./Drawer'))
20 
 
 18 
 
21 
const ICON_OPTIONS = [
 19 
const ICON_OPTIONS = [
22 
  HomeIcon,
 20 
  HomeIcon,
23 
  PeopleIcon,
 21 
  PeopleIcon,
24 
  BusinessCenterIcon,
 22 
  BusinessCenterIcon,
- 
 
 23 
  GroupsIcon,
25 
  GroupsIcon,
 24 
  SellIcon,
Línea 26... Línea 25...
26 
  SellIcon,
 25 
  SchoolIcon,
27 
  SchoolIcon,
 26 
  ChatIcon,
28 
]
 27 
]
29 
 
 28 
 
30 
const Header = ({
 29 
const Header = ({
31 
  menu,
 30 
  menu = [],
32 
  image = '',
 31 
  image = '',
33 
  logoForNavbar = '',
 32 
  logoForNavbar = '',
34 
  fullName,
 33 
  fullName,
35 
  linkAdmin,
 - 
 
36 
  linkImpersonate,
 - 
 
37 
  linkKnowledgeArea,
 - 
 
38 
  routeKnowledgeArea,
 34 
  linkAdmin,
- 
 
 35 
  linkImpersonate,
- 
 
 36 
  linkKnowledgeArea,
39 
  // companyVars,
 37 
  routeKnowledgeArea,
40 
  // isChatPage,
 - 
 
41 
  routeCheckSession,
 - 
 
42 
  defaultNetwork,
 - 
 
43 
}) => {
 - 
 
44 
  const [menuItems, setMenuItems] = useState(menu || [])
 - 
 
45 
  const [notificationsCount, setNotificationsCount] = useState(0)
 - 
 
46 
  const [aditionalItems, setAditionalItems] = useState([])
 38 
  defaultNetwork,
47 
  const [messagesCount, setMessagesCount] = useState(0)
 - 
 
48 
  const [userImage, setUserImage] = useState(image)
 - 
 
49 
 
 - 
 
50 
  const [showDrawer, setShowDrawer] = useState(false)
 - 
 
51 
  const [loading, setLoading] = useState(false)
 - 
 
52 
 
 - 
 
53 
  const [innerWidth] = useWindowSize()
 - 
 
54 
 
 - 
 
55 
  const checkUserImage = async () => {
 - 
 
56 
    setLoading(true)
 - 
 
57 
    const session_image = sessionStorage.getItem('user_session_image')
 - 
 
58 
    if (session_image) {
 - 
 
59 
      await setUserImage(session_image)
 - 
 
60 
      sessionStorage.removeItem('user_session_image')
 - 
 
61 
    }
 - 
 
62 
    setLoading(false)
 - 
 
63 
  }
 - 
 
64 
 
 - 
 
65 
  const checkSession = async () => {
 - 
 
66 
    try {
 - 
 
67 
      setLoading(true)
 - 
 
68 
      const { data: response } = await axios.get(routeCheckSession)
 - 
 
69 
      const { total_messages, total_notifications } = response.data
 - 
 
70 
 
 - 
 
71 
      if (response.success) {
 - 
 
72 
        setMessagesCount(Number(total_messages))
 - 
 
73 
        setNotificationsCount(Number(total_notifications))
 - 
 
74 
      }
 - 
 
75 
      setLoading(false)
 - 
 
76 
    } catch (error) {
 - 
 
77 
      console.log(error)
 - 
 
78 
    }
 - 
 
79 
  }
 - 
 
80 
 
 - 
 
81 
  const getKnowledgeRoutes = () => {
 - 
 
82 
    const childs = [{ label: 'Mi Coach', href: '/my-coach' }]
 - 
 
83 
    if (linkKnowledgeArea) {
 - 
 
84 
      childs.push({
 - 
 
85 
        label: 'Área de conocimiento',
 - 
 
86 
        href: routeKnowledgeArea,
 - 
 
87 
      })
 - 
 
88 
    }
 - 
 
89 
    return childs
 - 
 
90 
  }
 - 
 
91 
 
 - 
 
92 
  useEffect(() => {
 - 
 
93 
    let timer
 - 
 
94 
    if (!loading) {
 - 
 
95 
      timer = setTimeout(() => {
 - 
 
96 
        checkUserImage()
 - 
 
97 
        checkSession()
 - 
 
98 
      }, 2000)
 - 
 
99 
    }
 - 
 
100 
    return () => {
 - 
 
101 
      clearTimeout(timer)
 - 
 
102 
    }
 - 
 
103 
  }, [loading])
 - 
 
104 
 
 - 
 
105 
  useEffect(() => {
 - 
 
106 
    if (menu.length > 5) {
 - 
 
Línea 107... Línea 39...
107 
      setMenuItems(menu.splice(0, 5))
 39 
  notificationsCount,
108 
      setAditionalItems(menu.splice(menu.length - 5))
 40 
  messagesCount,
109 
    }
 41 
}) => {
110 
  }, [])
 42 
  const [showDrawer, setShowDrawer] = useState(false)
111 
 
 43 
 
112 
  return (
 44 
  return (
113 
    <>
 45 
    <>
114 
      <div className="header">
 46 
      <div className="header">
115 
        <div className="container px-0">
 47 
        <div className="container px-0">
116 
          <div className="header__nav">
 48 
          <div className="header__nav">
117 
            <div className={`header__left ${innerWidth < 992 && 'show'}`}>
 49 
            <div className="header__left">
118 
              <a href="/">
 50 
              <a href="/">
119 
                <img src={logoForNavbar} alt="Logo" />
 51 
                <img src={logoForNavbar} alt="Logo" />
120 
              </a>
 52 
              </a>
121 
              <NavSearch />
 53 
              <NavSearch />
122 
            </div>
 54 
            </div>
123 
            <nav className={`header__right ${innerWidth < 992 && 'd-none'}`}>
 55 
            <nav className="header__right">
124 
              <ul>
 56 
              <ul>
125 
                {menuItems.map((item, index) => {
 57 
                {menu.map((item, index) => {
126 
                  return (
 58 
                  return (
127 
                    <HeaderOptions
 59 
                    <HeaderOptions
128 
                      key={index}
 60 
                      key={index}
- 
 
 61 
                      Icon={ICON_OPTIONS[index]}
- 
 
 62 
                      title={item.label}
- 
 
 63 
                      url={item.href}
- 
 
 64 
                      childs={item.childs}
- 
 
 65 
                      ajaxRequest={item.ajax}
- 
 
 66 
                      isMobile={['Conocimiento', 'Comunicación'].includes(
- 
 
 67 
                        item.label
129 
                      Icon={ICON_OPTIONS[index]}
 68 
                      )}
130 
                      title={item.label}
 69 
                      badgeCount={
131 
                      url={item.href}
 70 
                        item.label === 'Comunicación' &&
132 
                      childs={item.childs}
 - 
 
133 
                      ajaxRequest={item.ajax}
 - 
 
134 
                    />
 - 
 
135 
                  )
 - 
 
136 
                })}
 - 
 
137 
                <HeaderOptions
 - 
 
138 
                  Icon={SchoolIcon}
 - 
 
139 
                  title="Conocimiento"
 - 
 
140 
                  url={routeKnowledgeArea}
 - 
 
141 
                  childs={getKnowledgeRoutes()}
 - 
 
142 
                />
 - 
 
143 
                <HeaderOptions
 - 
 
144 
                  Icon={ChatIcon}
 - 
 
145 
                  title="Comunicación"
 - 
 
146 
                  badgeCount={notificationsCount || messagesCount}
 - 
 
147 
                  childs={[
 - 
 
148 
                    ...aditionalItems,
 - 
 
149 
                    { label: 'Inmail', href: '/inmail', count: messagesCount },
 - 
 
150 
                    { label: 'Chat', href: '/chat' },
 - 
 
151 
                    {
 - 
 
152 
                      label: 'Notificaciones',
 - 
 
153 
                      href: '/notifications',
 - 
 
154 
                      count: notificationsCount,
 71 
                        (notificationsCount || messagesCount)
155 
                    },
 72 
                      }
156 
                  ]}
 73 
                    />
157 
                  isMobile={true}
 74 
                  )
158 
                />
 75 
                })}
159 
                <UserOptions
 76 
                <UserOptions
160 
                  image={userImage}
 77 
                  image={image}
Línea 185... Línea 102...
185 
        </div>
 102 
        </div>
186 
      </div>
 103 
      </div>
187 
      <Suspense fallback={null}>
 104 
      <Suspense fallback={null}>
188 
        <MenuDrawer
 105 
        <MenuDrawer
189 
          items={[
 106 
          items={[
190 
            ...menuItems,
 107 
            ...menu,
191 
            {
 108 
            {
192 
              label: 'Conocimiento',
 109 
              label: 'Conocimiento',
193 
              href: 'Conocimiento',
 110 
              href: 'Conocimiento',
194 
              img: '/images/navbar/market-place.svg',
 111 
              img: '/images/navbar/market-place.svg',
195 
              ajax: 0,
 112 
              ajax: 0,
196 
              childs: getKnowledgeRoutes(),
 113 
              childs: [],
197 
            },
 114 
            },
198 
          ]}
 115 
          ]}
199 
          icons={ICON_OPTIONS}
 116 
          icons={ICON_OPTIONS}
200 
          isOpen={showDrawer}
 117 
          isOpen={showDrawer}
201 
          closeDrawer={() => setShowDrawer(false)}
 118 
          closeDrawer={() => setShowDrawer(false)}