Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 7003 | Rev 7005 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
7002 stevensc 1
import React, { useState, useRef, useEffect } from 'react'
2
import { axios, jsonToParams } from '../../utils'
7003 stevensc 3
import { Col, Container, Row } from 'react-bootstrap'
4
import { useHistory, useLocation } from 'react-router-dom'
7002 stevensc 5
 
6
import Spinner from '../../components/UI/Spinner'
7
import SearchItem from '../../components/search/SearchItem'
8
import SearchInput from '../../components/UI/SearchInput'
9
import EmptySection from '../../components/UI/EmptySection'
10
import PaginationComponent from '../../components/UI/PaginationComponent'
11
 
12
const SearchPage = () => {
13
  const [entities, setEntities] = useState([])
14
  const [loading, setLoading] = useState(true)
15
  const [category, setCategory] = useState('user')
7003 stevensc 16
  const [entity, setEntity] = useState('')
7002 stevensc 17
  const [currentPage, setCurrentPage] = useState(1)
18
  const [pages, setPages] = useState(1)
19
  const activeFilters = useRef([])
20
  const addressFilter = useRef([])
21
 
22
  const { search, pathname } = useLocation()
7003 stevensc 23
  const history = useHistory()
7002 stevensc 24
 
7003 stevensc 25
  const params = new URLSearchParams(search)
26
  const keyword = params.get('keyword')
7002 stevensc 27
 
28
  const loadEntities = async (page = 1) => {
29
    setLoading(true)
30
    setCurrentPage(page)
31
 
32
    const urlParams = { page, keyword }
33
 
34
    addressFilter.current.forEach(({ name, type }) => {
35
      urlParams[type] = name
36
    })
37
    activeFilters.current.forEach(({ name, value }) => {
38
      urlParams[name] = value
39
    })
40
 
41
    await axios
42
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
43
      .then((response) => {
44
        const { success, data } = response.data
7003 stevensc 45
 
7002 stevensc 46
        if (success) {
47
          setEntities(data.current.items)
48
          setPages(data.total.pages)
49
        }
50
      })
51
    setLoading(false)
52
  }
53
 
54
  const onChangePageHandler = (currentPage) => {
55
    setCurrentPage(currentPage)
56
  }
57
 
7003 stevensc 58
  const onSubmitHandler = () => {
59
    history.push({ pathname, search: `?keyword=${entity}` })
60
  }
61
 
7002 stevensc 62
  useEffect(() => {
7003 stevensc 63
    loadEntities()
64
  }, [keyword])
7002 stevensc 65
 
66
  return (
67
    <>
7003 stevensc 68
      <Container as="main">
7004 stevensc 69
        <SearchInput
7003 stevensc 70
          as="form"
71
          onSubmit={onSubmitHandler}
72
          onChange={(e) => setEntity(e.target.value)}
73
          value={entity}
74
          placeholder="¿Que desea encontrar?"
7004 stevensc 75
          style={{ backgroundColor: 'var(--bg-color)' }}
7003 stevensc 76
        />
77
        <Row className="main-section-data mt-3">
78
          <Col as="aside" md="4">
79
            <div></div>
80
          </Col>
81
          <Col as="section" md="8">
82
            <div className="posts-section">
83
              {loading && <Spinner />}
84
              {entities.length ? (
85
                entities.map((entity) => (
86
                  <SearchItem
87
                    key={entity.id}
88
                    onChangePage={onChangePageHandler}
89
                    {...entity}
90
                  />
91
                ))
92
              ) : (
93
                <EmptySection message="No hay resultados" />
94
              )}
95
            </div>
96
            <PaginationComponent
97
              pages={pages}
98
              currentActivePage={currentPage}
99
              onChangePage={loadEntities}
100
              isRow
101
            />
102
          </Col>
103
        </Row>
7002 stevensc 104
      </Container>
105
    </>
106
  )
107
}
108
 
109
export default SearchPage