Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6693 Rev 6694
Línea 1... Línea -...
1 
/* eslint-disable camelcase */
 - 
 
2 
/* eslint-disable react/prop-types */
 - 
 
3 
import React, { useEffect, useRef, useState } from 'react'
 1 
import React, { Suspense, lazy, useEffect, useState } from 'react'
4 
import { axios, useWindowSize } from '../../../utils'
 2 
import { axios } from '../../../utils'
5 
import { useForm } from 'react-hook-form'
 - 
 
Línea 6... Línea -...
6 
 
 - 
 
7 
import SearchIcon from '@mui/icons-material/Search'
 3 
 
8 
import HomeIcon from '@mui/icons-material/Home'
 4 
import HomeIcon from '@mui/icons-material/Home'
9 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
 5 
import BusinessCenterIcon from '@mui/icons-material/BusinessCenter'
10 
import SellIcon from '@mui/icons-material/Sell'
 6 
import SellIcon from '@mui/icons-material/Sell'
11 
import PeopleIcon from '@mui/icons-material/People'
 7 
import PeopleIcon from '@mui/icons-material/People'
Línea 16... Línea 12...
16 
 
 12 
 
17 
import HeaderOptions from './HeaderOptions'
 13 
import HeaderOptions from './HeaderOptions'
Línea 18... Línea 14...
18 
import UserOptions from './UserOptions'
 14 
import UserOptions from './UserOptions'
- 
 
 15 
 
- 
 
 16 
import './Header.scss'
19 
 
 17 
import NavSearch from './nav-search/NavSearch'
Línea 20... Línea 18...
20 
import './Header.scss'
 18 
import useWindowSize from '../../../hooks/useWindowSize'
21 
let MenuDrawer
 19 
const MenuDrawer = lazy(() => import('./Drawer'))
22 
 
 20 
 
23 
const ICON_OPTIONS = [
 21 
const ICON_OPTIONS = [
Línea 47... Línea 45...
47 
  const [notificationsCount, setNotificationsCount] = useState(0)
 45 
  const [notificationsCount, setNotificationsCount] = useState(0)
48 
  const [aditionalItems, setAditionalItems] = useState([])
 46 
  const [aditionalItems, setAditionalItems] = useState([])
49 
  const [messagesCount, setMessagesCount] = useState(0)
 47 
  const [messagesCount, setMessagesCount] = useState(0)
50 
  const [userImage, setUserImage] = useState(image)
 48 
  const [userImage, setUserImage] = useState(image)
Línea 51... Línea -...
51 
 
 - 
 
52 
  const [showMobileSearch, setShowMobileSearch] = useState(false)
 49 
 
53 
  const [showDrawer, setShowDrawer] = useState(false)
 50 
  const [showDrawer, setShowDrawer] = useState(false)
Línea 54... Línea 51...
54 
  const [loading, setLoading] = useState(false)
 51 
  const [loading, setLoading] = useState(false)
Línea 55... Línea -...
55 
 
 - 
 
56 
  const [innerWidth] = useWindowSize()
 - 
 
57 
 
 - 
 
58 
  const searchInput = useRef(null)
 - 
 
59 
 
 - 
 
60 
  const { handleSubmit, register } = useForm()
 - 
 
61 
 
 - 
 
62 
  const handleOnSubmit = (data) =>
 52 
 
63 
    window.location.replace(`/search/entity/user?keyword=${data.keyword}`)
 53 
  const [innerWidth] = useWindowSize()
64 
 
 54 
 
65 
  const checkUserImage = async () => {
 55 
  const checkUserImage = async () => {
66 
    setLoading(true)
 56 
    setLoading(true)
Línea 86... Línea 76...
86 
    } catch (error) {
 76 
    } catch (error) {
87 
      console.log(error)
 77 
      console.log(error)
88 
    }
 78 
    }
89 
  }
 79 
  }
Línea 90... Línea -...
90 
 
 - 
 
91 
  const handleDisplayMobileSearch = () => {
 - 
 
92 
    if (window.innerWidth < 992) {
 - 
 
93 
      setShowMobileSearch(true)
 - 
 
94 
    }
 - 
 
95 
  }
 - 
 
96 
 
 80 
 
97 
  const getKnowledgeRoutes = () => {
 81 
  const getKnowledgeRoutes = () => {
98 
    const childs = [{ label: 'Mi Coach', href: '/my-coach' }]
 82 
    const childs = [{ label: 'Mi Coach', href: '/my-coach' }]
99 
    if (linkKnowledgeArea) {
 83 
    if (linkKnowledgeArea) {
100 
      childs.push({
 84 
      childs.push({
Línea 123... Línea 107...
123 
      setMenuItems(menu.splice(0, 5))
 107 
      setMenuItems(menu.splice(0, 5))
124 
      setAditionalItems(menu.splice(menu.length - 5))
 108 
      setAditionalItems(menu.splice(menu.length - 5))
125 
    }
 109 
    }
126 
  }, [])
 110 
  }, [])
Línea 127... Línea -...
127 
 
 - 
 
128 
  useEffect(() => {
 - 
 
129 
    if (innerWidth < 992) {
 - 
 
130 
      MenuDrawer = React.lazy(() => import('./Drawer'))
 - 
 
131 
    }
 - 
 
132 
  }, [innerWidth])
 - 
 
133 
 
 - 
 
134 
  useEffect(() => {
 - 
 
135 
    const handleClickOutside = (event) => {
 - 
 
136 
      if (
 - 
 
137 
        searchInput?.current &&
 - 
 
138 
        !searchInput?.current?.contains(event.target)
 - 
 
139 
      ) {
 - 
 
140 
        setShowMobileSearch(false)
 - 
 
141 
      }
 - 
 
142 
    }
 - 
 
143 
    document.addEventListener('mousedown', handleClickOutside)
 - 
 
144 
 
 - 
 
145 
    return () => {
 - 
 
146 
      document.removeEventListener('mousedown', handleClickOutside)
 - 
 
147 
    }
 - 
 
148 
  }, [searchInput])
 - 
 
149 
 
 111 
 
150 
  return (
 112 
  return (
151 
    <>
 113 
    <>
152 
      <div className="header">
 114 
      <div className="header">
153 
        <div className="container px-0">
 115 
        <div className="container px-0">
154 
          <div className="header__nav">
 116 
          <div className="header__nav">
155 
            <div className={`header__left ${showMobileSearch && 'show'}`}>
 117 
            <div className={`header__left ${innerWidth < 992 && 'show'}`}>
156 
              <a href="/">
 118 
              <a href="/">
157 
                <img src={logoForNavbar} alt="Logo" />
 119 
                <img src={logoForNavbar} alt="Logo" />
158 
              </a>
 - 
 
159 
 
 - 
 
160 
              <form
 - 
 
161 
                className="header__search show"
 - 
 
162 
                onClick={handleDisplayMobileSearch}
 - 
 
163 
                onSubmit={handleSubmit(handleOnSubmit)}
 - 
 
164 
                ref={searchInput}
 - 
 
165 
              >
 120 
              </a>
166 
                <SearchIcon />
 - 
 
167 
                <input
 - 
 
168 
                  type="text"
 - 
 
169 
                  placeholder="Search"
 - 
 
170 
                  name="keyword"
 - 
 
171 
                  ref={register}
 - 
 
172 
                />
 - 
 
173 
              </form>
 121 
              <NavSearch />
174 
            </div>
 - 
 
175 
 
 122 
            </div>
176 
            <nav className={`header__right ${showMobileSearch && 'd-none'}`}>
 123 
            <nav className={`header__right ${innerWidth < 992 && 'd-none'}`}>
177 
              <ul>
 124 
              <ul>
178 
                {menuItems.map((item, index) => {
 125 
                {menuItems.map((item, index) => {
179 
                  return (
 126 
                  return (
180 
                    <HeaderOptions
 127 
                    <HeaderOptions
Línea 235... Línea 182...
235 
              </ul>
 182 
              </ul>
236 
            </nav>
 183 
            </nav>
237 
          </div>
 184 
          </div>
238 
        </div>
 185 
        </div>
239 
      </div>
 186 
      </div>
240 
      {MenuDrawer && (
 - 
 
241 
        <React.Suspense fallback={null}>
 187 
      <Suspense fallback={null}>
242 
          <MenuDrawer
 188 
        <MenuDrawer
243 
            items={[
 189 
          items={[
244 
              ...menuItems,
 190 
            ...menuItems,
245 
              {
 191 
            {
246 
                label: 'Conocimiento',
 192 
              label: 'Conocimiento',
247 
                href: 'Conocimiento',
 193 
              href: 'Conocimiento',
248 
                img: '/images/navbar/market-place.svg',
 194 
              img: '/images/navbar/market-place.svg',
249 
                ajax: 0,
 195 
              ajax: 0,
250 
                childs: getKnowledgeRoutes(),
 196 
              childs: getKnowledgeRoutes(),
251 
              },
 197 
            },
252 
            ]}
 198 
          ]}
253 
            icons={ICON_OPTIONS}
 199 
          icons={ICON_OPTIONS}
254 
            isOpen={showDrawer}
 200 
          isOpen={showDrawer}
255 
            closeDrawer={() => setShowDrawer(false)}
 201 
          closeDrawer={() => setShowDrawer(false)}
256 
          />
 202 
        />
257 
        </React.Suspense>
 203 
      </Suspense>
258 
      )}
 - 
 
259 
    </>
 204 
    </>
260 
  )
 205 
  )
261 
}
 206 
}
Línea 262... Línea 207...
262 
 
 207