Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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