Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 649 Rev 650
Línea 1... Línea 1...
1 
import React, { useState, useRef, useEffect } from 'react'
 1 
import React, { useState, useRef, useEffect } from 'react'
2 
import { axios, debounce, jsonToParams } from '../../utils'
 2 
import { useDispatch } from 'react-redux'
- 
 
 3 
import { addNotification } from '../../redux/notification/notification.actions'
3 
import { Col, Container, Row } from 'react-bootstrap'
 4 
import { Col, Container, Row } from 'react-bootstrap'
4 
import { useHistory, useLocation } from 'react-router-dom'
 5 
import { useHistory, useLocation, useParams } from 'react-router-dom'
- 
 
 6 
import { axios, debounce, jsonToParams } from '../../utils'
5 
import SearchIcon from '@mui/icons-material/Search'
 7 
import SearchIcon from '@mui/icons-material/Search'
Línea 6... Línea 8...
6 
 
 8 
 
7 
import Spinner from '../../components/UI/Spinner'
 9 
import Input from 'components/UI/Input'
8 
import SearchItem from '../../components/search/SearchItem'
 10 
import Spinner from 'components/UI/Spinner'
9 
import Input from '../../components/UI/Input'
 11 
import SearchItem from 'components/search/SearchItem'
10 
import EmptySection from '../../components/UI/EmptySection'
 - 
 
11 
import PaginationComponent from '../../components/UI/PaginationComponent'
 12 
import EmptySection from 'components/UI/EmptySection'
12 
import FiltersSidebar from '../../components/search/FiltersSidebar'
 13 
import FiltersSidebar from 'components/search/FiltersSidebar'
13 
import CategoryFilter from '../../components/search/CategoryFilter'
 14 
import CategoryFilter from 'components/search/CategoryFilter'
14 
import LocationFilter from '../../components/search/LocationFilter'
 - 
 
15 
import { useDispatch } from 'react-redux'
 15 
import LocationFilter from 'components/search/LocationFilter'
Línea 16... Línea 16...
16 
import { addNotification } from '../../redux/notification/notification.actions'
 16 
import PaginationComponent from 'components/UI/PaginationComponent'
17 
 
 17 
 
18 
const SearchPage = () => {
 18 
const SearchPage = () => {
19 
  const [entities, setEntities] = useState([])
 19 
  const [entities, setEntities] = useState([])
20 
  const [loading, setLoading] = useState(true)
 20 
  const [loading, setLoading] = useState(true)
21 
  const [category, setCategory] = useState('user')
 21 
  const [category, setCategory] = useState('user')
22 
  const [entity, setEntity] = useState('')
 22 
  const [entity, setEntity] = useState('')
23 
  const [address, setAddress] = useState({})
 23 
  const [address, setAddress] = useState({})
24 
  const [currentPage, setCurrentPage] = useState(1)
 - 
 
25 
  const [pages, setPages] = useState(1)
 24 
  const [currentPage, setCurrentPage] = useState(1)
- 
 
 25 
  const [pages, setPages] = useState(1)
26 
  const activeFilters = useRef([])
 26 
  const { search } = useLocation()
27 
  const { search } = useLocation()
 27 
  const { category: categoryParam } = useParams()
Línea 28... Línea 28...
28 
  const history = useHistory()
 28 
  const history = useHistory()
29 
  const dispatch = useDispatch()
 29 
  const dispatch = useDispatch()
Línea 37... Línea 37...
37 
    category = 'user',
 37 
    category = 'user',
38 
    address = {}
 38 
    address = {}
39 
  ) => {
 39 
  ) => {
40 
    setLoading(true)
 40 
    setLoading(true)
41 
    const urlParams = { page, keyword }
 41 
    const urlParams = { page, keyword }
42 
 
 - 
 
43 
    Object.entries(address).forEach(([key, value]) => (urlParams[key] = value))
 42 
    Object.entries(address).forEach(([key, value]) => (urlParams[key] = value))
Línea 44... Línea -...
44 
 
 - 
 
45 
    activeFilters.current.forEach(
 43 
 
46 
      ({ name, value }) => (urlParams[name] = value)
 44 
    const url = `/search/entity/${category}?${jsonToParams(urlParams)}`
- 
 
 45 
 
Línea 47... Línea 46...
47 
    )
 46 
    history.replace(url)
48 
 
 47 
 
49 
    axios
 48 
    axios
50 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
 49 
      .get(url)
Línea 51... Línea 50...
51 
      .then(({ data: responseData }) => {
 50 
      .then(({ data: responseData }) => {
52 
        const { success, data } = responseData
 51 
        const { success, data } = responseData
Línea 62... Línea 61...
62 
        dispatch(addNotification({ style: 'danger', msg: err }))
 61 
        dispatch(addNotification({ style: 'danger', msg: err }))
63 
      })
 62 
      })
64 
      .finally(() => setLoading(false))
 63 
      .finally(() => setLoading(false))
65 
  }
 64 
  }
Línea 66... Línea -...
66 
 
 - 
 
67 
  const onChangePageHandler = (currentPage) => {
 - 
 
68 
    setCurrentPage(currentPage)
 - 
 
69 
  }
 - 
 
70 
 
 - 
 
71 
  const addressHandler = (address) => {
 - 
 
72 
    setAddress(address)
 - 
 
73 
  }
 - 
 
74 
 
 - 
 
75 
  const changeCategory = (newCategory) => {
 - 
 
76 
    const urlParams = { keyword }
 - 
 
77 
 
 - 
 
78 
    activeFilters.current.forEach(({ name, value }) => {
 - 
 
79 
      urlParams[name] = value
 - 
 
80 
    })
 - 
 
81 
 
 - 
 
82 
    setCategory(newCategory)
 - 
 
83 
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)
 - 
 
84 
  }
 - 
 
85 
 
 65 
 
Línea 86... Línea 66...
86 
  const onSearch = debounce((value) => setEntity(value), 500)
 66 
  const onSearch = debounce((value) => setEntity(value), 500)
87 
 
 67 
 
88 
  useEffect(() => {
 68 
  useEffect(() => {
Línea 89... Línea 69...
89 
    searchEntities(currentPage, entity, category, address)
 69 
    searchEntities(currentPage, entity, category, address)
90 
  }, [entity, category, currentPage, address])
 70 
  }, [entity, category, currentPage, address])
- 
 
 71 
 
91 
 
 72 
  useEffect(() => {
Línea 92... Línea 73...
92 
  useEffect(() => {
 73 
    setEntity(keyword)
93 
    setEntity(keyword)
 74 
    setCategory(categoryParam)
94 
  }, [])
 75 
  }, [])
95 
 
 76 
 
96 
  return (
 77 
  return (
97 
    <>
 78 
    <>
98 
      <Container as='main'>
 79 
      <Container as='main'>
99 
        <Input
 80 
        <Input
100 
          icon={SearchIcon}
 81 
          icon={SearchIcon}
101 
          onChange={(e) => onSearch(e.target.value)}
 82 
          onChange={(e) => onSearch(e.target.value)}
102 
          value={entity}
 83 
          defaultValue={entity}
- 
 
 84 
        />
103 
        />
 85 
        <Row className='mt-3'>
- 
 
 86 
          <Col as='aside' md='4'>
- 
 
 87 
            <FiltersSidebar>
104 
        <Row className='mt-3'>
 88 
              <CategoryFilter
- 
 
 89 
                onChange={(newCategory) => setCategory(newCategory)}
105 
          <Col as='aside' md='4'>
 90 
              />
106 
            <FiltersSidebar>
 91 
              <LocationFilter
107 
              <CategoryFilter onChange={changeCategory} />
 92 
                onChange={(newAddress) => setAddress(newAddress)}
108 
              <LocationFilter onChange={addressHandler} />
 93 
              />
109 
            </FiltersSidebar>
 94 
            </FiltersSidebar>
Línea 120... Línea 105...
120 
              )}
 105 
              )}
121 
            </div>
 106 
            </div>
122 
            <PaginationComponent
 107 
            <PaginationComponent
123 
              pages={pages}
 108 
              pages={pages}
124 
              currentActivePage={currentPage}
 109 
              currentActivePage={currentPage}
125 
              onChangePage={onChangePageHandler}
 110 
              onChangePage={(newCurrentPage) => setCurrentPage(newCurrentPage)}
126 
              isRow
 111 
              isRow
127 
            />
 112 
            />
128 
          </Col>
 113 
          </Col>
129 
        </Row>
 114 
        </Row>
130 
      </Container>
 115 
      </Container>