Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5122 Rev 5388
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from 'react'
 - 
 
3 
import { useState, useRef, useEffect } from 'react'
 2 
import React, { useState, useRef, useEffect } from 'react'
4 
import { useLocation } from 'react-router-dom'
 3 
import { useLocation } from 'react-router-dom'
5 
import { useForm } from 'react-hook-form'
 4 
import { useForm } from 'react-hook-form'
6 
import { FaPlus, FaMinus } from 'react-icons/fa'
 5 
import { FaPlus, FaMinus } from 'react-icons/fa'
7 
import { axios, jsonToParams } from '../../../utils'
 6 
import { axios, jsonToParams } from '../../../utils'
8 
import styled from 'styled-components'
 - 
 
9 
import Filters from './filters/Filters'
 7 
import Filters from './filters/Filters'
10 
import Spinner from '../../../shared/loading-spinner/Spinner'
 8 
import Spinner from '../../../shared/loading-spinner/Spinner'
11 
import EntityTemplate from '../entity-template/EntityTemplate'
 9 
import EntityTemplate from '../entity-template/EntityTemplate'
12 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
 10 
import PaginationComponent from '../../../shared/pagination/PaginationComponent'
13 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
 11 
import UbicationInput from '../../../shared/ubication-input/UbicationInput'
14 
 
 - 
 
15 
const SpinnerStyled = styled.div`
 12 
import EmptySection from '../../../shared/empty-section/EmptySection'
16 
  width: 100%;
 - 
 
17 
  height: 100%;
 - 
 
18 
  display: flex;
 - 
 
19 
  justify-content: center;
 - 
 
20 
  align-items: center;
 - 
 
21 
`
 - 
 
Línea 22... Línea 13...
22 
 
 13 
 
23 
const MainSection = (props) => {
 14 
const MainSection = (props) => {
24 
  // states
 15 
  // states
25 
  const [entities, setEntities] = useState([])
 16 
  const [entities, setEntities] = useState([])
26 
  const [loading, setLoading] = useState(true)
 17 
  const [loading, setLoading] = useState(true)
27 
  const [displayFilters, setDisplayFilters] = useState(false)
 - 
 
28 
  const [error, setError] = useState('')
 18 
  const [displayFilters, setDisplayFilters] = useState(false)
29 
  const [searchType, setSearchType] = useState('user')
 19 
  const [searchType, setSearchType] = useState('user')
30 
  const [currentPage, setCurrentPage] = useState(1)
 20 
  const [currentPage, setCurrentPage] = useState(1)
31 
  const [pages, setPages] = useState(1)
 21 
  const [pages, setPages] = useState(1)
32 
  // refs
 22 
  // refs
Línea 85... Línea 75...
85 
    }
 75 
    }
86 
  }
 76 
  }
Línea 87... Línea 77...
87 
 
 77 
 
88 
  const loadEntities = async (page = 1) => {
 78 
  const loadEntities = async (page = 1) => {
89 
    setLoading(true)
 - 
 
90 
    setError(false)
 79 
    setLoading(true)
91 
    setCurrentPage(page)
 80 
    setCurrentPage(page)
92 
    const urlParams = {
 81 
    const urlParams = {
93 
      page,
 82 
      page,
94 
      keyword
 83 
      keyword
Línea 104... Línea 93...
104 
      .then((response) => {
 93 
      .then((response) => {
105 
        const responseData = response.data
 94 
        const responseData = response.data
106 
        if (responseData.success) {
 95 
        if (responseData.success) {
107 
          setEntities(responseData.data.current.items)
 96 
          setEntities(responseData.data.current.items)
108 
          setPages(responseData.data.total.pages)
 97 
          setPages(responseData.data.total.pages)
109 
        } else {
 - 
 
110 
          const newError = responseData.data
 - 
 
111 
          setError(newError)
 - 
 
112 
        }
 98 
        }
113 
      })
 99 
      })
114 
    setLoading(false)
 100 
    setLoading(false)
115 
  }
 101 
  }
Línea 186... Línea 172...
186 
  const onChangePageHandler = (currentPage) => {
 172 
  const onChangePageHandler = (currentPage) => {
187 
    setCurrentPage(currentPage)
 173 
    setCurrentPage(currentPage)
188 
  }
 174 
  }
Línea 189... Línea 175...
189 
 
 175 
 
190 
  return (
 - 
 
191 
    <div>
 - 
 
192 
      <main>
 - 
 
193 
        <div className="main-section">
 - 
 
194 
          <div className="container">
 176 
  return (
195 
            <div className="main-section-data">
 177 
    <main className="main-section-data container">
196 
              <form
 178 
      <form
197 
                name="form-filter"
 179 
        name="form-filter"
198 
                id="form-filter"
 180 
        id="form-filter"
199 
                ref={formRef}
 181 
        ref={formRef}
200 
                onSubmit={(e) => {
 182 
        onSubmit={(e) => {
201 
                  e.preventDefault()
 183 
          e.preventDefault()
202 
                }}
 184 
        }}
203 
              >
 185 
      >
204 
                <div className="py-2 d-flex" style={{ gap: '10px' }}>
 186 
        <div className="py-2 d-flex" style={{ gap: '10px' }}>
205 
                  <h2 className="font-weight-bold search-title">Filtros</h2>
 187 
          <h2 className="font-weight-bold search-title">Filtros</h2>
206 
                  <div className="show_filters">
 188 
          <div className="show_filters">
207 
                    {
 189 
            {
208 
                      displayFilters
 190 
              displayFilters
209 
                        ? <FaMinus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />
 191 
                ? <FaMinus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />
210 
                        : <FaPlus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />
 192 
                : <FaPlus className="cursor-pointer" onClick={() => setDisplayFilters(!displayFilters)} />
211 
                    }
 193 
            }
212 
                  </div>
 194 
          </div>
213 
                </div>
 195 
        </div>
214 
                <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
 196 
        <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
215 
                  <div className="filter-heading m-0">
 197 
          <div className="filter-heading m-0">
216 
                    <h3 className="text-dark font-weight-bold">Buscar por</h3>
 198 
            <h3 className="text-dark font-weight-bold">Buscar por</h3>
217 
                  </div>
 - 
 
218 
                  {/* <!--filter-heading end--> */}
 199 
          </div>
219 
                  <div className="paddy">
 200 
          <div className="paddy">
220 
                    <div className="filter-dd">
 201 
            <div className="filter-dd">
221 
                      <ul className="avail-checks avail-checks-search-type">
 202 
              <ul className="avail-checks avail-checks-search-type">
222 
                        <li>
 203 
                <li>
223 
                          <a
 204 
                  <a
224 
                            href="#"
 205 
                    href="#"
225 
                            onClick={(e) => {
 206 
                    onClick={(e) => {
226 
                              e.preventDefault
 207 
                      e.preventDefault
227 
                              setSearchType('user')
 - 
 
228 
                            }}
 - 
 
229 
                            className={(searchType && searchType === 'user' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
230 
                          >
 - 
 
231 
                            Personas
 - 
 
232 
                          </a>
 - 
 
233 
                        </li>
 - 
 
234 
                        {filters.allowSearchCompany &&
 - 
 
235 
                          <li>
 - 
 
236 
                            <a
 - 
 
237 
                              className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
238 
                              href="#"
 - 
 
239 
                              onClick={(e) => {
 - 
 
240 
                                e.preventDefault
 - 
 
241 
                                setSearchType('job')
 - 
 
242 
                              }}
 - 
 
243 
                            >
 - 
 
244 
                              Trabajos
 - 
 
245 
                            </a>
 - 
 
246 
                          </li>
 - 
 
247 
                        }
 - 
 
248 
                        {filters.allowSearchCompany &&
 - 
 
249 
                          <li>
 - 
 
250 
                            <a
 - 
 
251 
                              className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
252 
                              href="#"
 - 
 
253 
                              onClick={(e) => {
 - 
 
254 
                                e.preventDefault
 - 
 
255 
                                // searchType.current = "company";
 - 
 
256 
                                setSearchType('company')
 - 
 
257 
                              }}
 - 
 
258 
                            >
 - 
 
259 
                              Empresas
 - 
 
260 
                            </a>
 - 
 
261 
                          </li>
 208 
                      setSearchType('user')
262 
                        }
 - 
 
263 
                        <li>
 - 
 
264 
                          <a
 209 
                    }}
265 
                            className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}
 - 
 
266 
                            href="#"
 - 
 
267 
                            onClick={(e) => {
 - 
 
268 
                              e.preventDefault
 - 
 
269 
                              setSearchType('group')
 - 
 
270 
                            }}
 - 
 
271 
                          >
 - 
 
272 
                            Grupos
 - 
 
273 
                          </a>
 - 
 
274 
                        </li>
 - 
 
275 
                      </ul>
 - 
 
276 
                    </div>
 - 
 
277 
                  </div>
 - 
 
278 
                </div>
 - 
 
279 
                <div className={displayFilters ? 'show_filters' : 'hidden_filters'}>
 - 
 
280 
                  {(searchType === 'user' && filters.allowViewConnectionLevelFilter) &&
 - 
 
281 
                    <Filters
 - 
 
282 
                      filters={filters}
 - 
 
283 
                      searchType={searchType}
 - 
 
284 
                      onCheck={onCheckHandler}
 - 
 
285 
                      onUncheckAll={onUncheckAllHandler}
 - 
 
286 
                      register={register}
 - 
 
287 
                    />
 - 
 
288 
                  }
 - 
 
289 
                </div>
 - 
 
290 
                <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
 - 
 
291 
                  <div className="filter-heading">
 - 
 
292 
                    <h3 className="text-dark font-weight-bold">Ubicación</h3>
 - 
 
293 
                  </div>
 - 
 
294 
                  <div
 - 
 
295 
                    className="container mb-2"
 210 
                    className={(searchType && searchType === 'user' ? 'search-item-selected' : '') + ' text-dark'}
296 
                  >
 - 
 
297 
                    <UbicationInput
 - 
 
298 
                      onGetAddress={getAddressHandler}
 - 
 
299 
                      placeholder="Buscar un lugar"
 211 
                  >
300 
                    />
 212 
                    Personas
301 
                  </div>
 213 
                  </a>
302 
                </div>
 - 
 
303 
              </form>
 - 
 
304 
              <div className="main-ws-sec">
 - 
 
305 
                <div className="posts-section">
 214 
                </li>
306 
                  {/* <!--post-bar end--> */}
 - 
 
307 
                  {loading
 215 
                {filters.allowSearchCompany &&
308 
                    ? (
 - 
 
309 
                    <SpinnerStyled>
 - 
 
310 
                      <Spinner />
 - 
 
311 
                    </SpinnerStyled>
 216 
                  <li>
312 
                      )
 - 
 
313 
                    : error
 - 
 
314 
                      ? (
 - 
 
315 
                    <div>{error}</div>
 - 
 
316 
                        )
 217 
                    <a
317 
                      : entities && entities.length
 218 
                      className={(searchType && searchType === 'job' ? 'search-item-selected' : '') + ' text-dark'}
318 
                        ? (
 - 
 
319 
                            entities.map((entity) => (
 - 
 
320 
                      <EntityTemplate
 219 
                      href="#"
321 
                        entity={entity}
 220 
                      onClick={(e) => {
322 
                        key={entity.id}
 - 
 
323 
                        onChangePage={onChangePageHandler}
 - 
 
324 
                      />
 - 
 
325 
                            ))
 - 
 
326 
                          )
 - 
 
327 
                        : (
 - 
 
328 
                    <div
 - 
 
329 
                      style={{
 221 
                        e.preventDefault
330 
                        display: 'flex',
 - 
 
331 
                        justifyContent: 'center',
 - 
 
332 
                        alignItems: 'center',
 - 
 
333 
                        padding: '1rem 0 3rem 0'
 222 
                        setSearchType('job')
334 
                      }}
 223 
                      }}
335 
                    >
 224 
                    >
336 
                      No hay resultados
 225 
                      Trabajos
337 
                    </div>
 226 
                    </a>
338 
                          )}
 227 
                  </li>
339 
                </div>
 228 
                }
- 
 
 229 
                {filters.allowSearchCompany &&
- 
 
 230 
                  <li>
- 
 
 231 
                    <a
340 
                <PaginationComponent
 232 
                      className={(searchType && searchType === 'company' ? 'search-item-selected' : '') + ' text-dark'}
341 
                  pages={pages}
 233 
                      href="#"
342 
                  currentActivePage={currentPage}
 234 
                      onClick={(e) => {
- 
 
 235 
                        e.preventDefault
- 
 
 236 
                        // searchType.current = "company";
- 
 
 237 
                        setSearchType('company')
- 
 
 238 
                      }}
- 
 
 239 
                    >
- 
 
 240 
                      Empresas
- 
 
 241 
                    </a>
343 
                  onChangePage={loadEntities}
 242 
                  </li>
- 
 
 243 
                }
- 
 
 244 
                <li>
344 
                />
 245 
                  <a
345 
                {/* <div className="process-comm" id="paginator-process-comm">
 246 
                    className={(searchType && searchType === 'group' ? 'search-item-selected' : '') + ' text-dark'}
346 
                      <div className="spinner">
 247 
                    href="#"
347 
                        <div className="bounce1"></div>
 248 
                    onClick={(e) => {
348 
                        <div className="bounce2"></div>
 249 
                      e.preventDefault
349 
                        <div className="bounce3"></div>
 250 
                      setSearchType('group')
350 
                      </div>
 251 
                    }}
351 
                    </div> */}
 252 
                  >
352 
                {/* <!--process-comm end-->
 253 
                    Grupos
353 
              <!--posts-section end--> */}
 254 
                  </a>
354 
              </div>
 255 
                </li>
355 
              <div className="right-sidebar"></div>
 256 
              </ul>
356 
            </div>
 257 
            </div>
357 
          </div>
 258 
          </div>
- 
 
 259 
        </div>
- 
 
 260 
        <div className={displayFilters ? 'show_filters' : 'hidden_filters'}>
- 
 
 261 
          {(searchType === 'user' && filters.allowViewConnectionLevelFilter) &&
- 
 
 262 
            <Filters
- 
 
 263 
              filters={filters}
- 
 
 264 
              searchType={searchType}
- 
 
 265 
              onCheck={onCheckHandler}
- 
 
 266 
              onUncheckAll={onUncheckAllHandler}
- 
 
 267 
              register={register}
- 
 
 268 
            />
- 
 
 269 
          }
- 
 
 270 
        </div>
- 
 
 271 
        <div className={`filter-secs border-gray border-radius ${displayFilters ? 'show_filters' : 'hidden_filters'}`}>
- 
 
 272 
          <div className="filter-heading">
- 
 
 273 
            <h3 className="text-dark font-weight-bold">Ubicación</h3>
- 
 
 274 
          </div>
- 
 
 275 
          <div
- 
 
 276 
            className="container mb-2"
- 
 
 277 
          >
- 
 
 278 
            <UbicationInput
- 
 
 279 
              onGetAddress={getAddressHandler}
- 
 
 280 
              placeholder="Buscar un lugar"
- 
 
 281 
            />
- 
 
 282 
          </div>
358 
        </div>
 283 
        </div>
- 
 
 284 
      </form>
- 
 
 285 
      <div className="main-ws-sec">
- 
 
 286 
        <div className="posts-section">
- 
 
 287 
          {loading && <Spinner />}
- 
 
 288 
          {entities.length
- 
 
 289 
            ? entities.map((entity) => (
- 
 
 290 
                <EntityTemplate
- 
 
 291 
                  entity={entity}
- 
 
 292 
                  key={entity.id}
- 
 
 293 
                  onChangePage={onChangePageHandler}
- 
 
 294 
                />
- 
 
 295 
            ))
- 
 
 296 
            : <EmptySection message='No hay resultados' />
- 
 
 297 
          }
- 
 
 298 
        </div>
- 
 
 299 
        <PaginationComponent
- 
 
 300 
          pages={pages}
- 
 
 301 
          currentActivePage={currentPage}
- 
 
 302 
          onChangePage={loadEntities}
359 
      </main>
 303 
        />
- 
 
 304 
      </div>
- 
 
 305 
      <div className="right-sidebar" />
360 
    </div>
 306 
    </main>
361 
  )
 307 
  )
Línea 362... Línea 308...
362 
}
 308 
}