Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 969 Rev 970
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from 'react'
2 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useDispatch, useSelector } from 'react-redux'
3 
import { addNotification } from '../../redux/notification/notification.actions'
 3 
import { addNotification } from '../../redux/notification/notification.actions'
4 
import { Col, Container, Row } from 'react-bootstrap'
 4 
import { Col, Container, Row } from 'react-bootstrap'
5 
import { useHistory, useLocation, useParams } from 'react-router-dom'
 5 
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
6 
import { axios, debounce, jsonToParams } from '../../utils'
 6 
import { axios, debounce } from '../../utils'
7 
import SearchIcon from '@mui/icons-material/Search'
 7 
import SearchIcon from '@mui/icons-material/Search'
Línea 8... Línea 8...
8 
 
 8 
 
9 
import Input from 'components/UI/Input'
 9 
import Input from 'components/UI/Input'
10 
import Spinner from 'components/UI/Spinner'
 10 
import Spinner from 'components/UI/Spinner'
Línea 16... Línea 16...
16 
import PaginationComponent from 'components/UI/PaginationComponent'
 16 
import PaginationComponent from 'components/UI/PaginationComponent'
Línea 17... Línea 17...
17 
 
 17 
 
18 
const SearchPage = () => {
 18 
const SearchPage = () => {
19 
  const [entities, setEntities] = useState([])
 19 
  const [entities, setEntities] = useState([])
20 
  const [loading, setLoading] = useState(true)
 - 
 
21 
  const [category, setCategory] = useState('user')
 - 
 
22 
  const [entity, setEntity] = useState('')
 20 
  const [loading, setLoading] = useState(true)
23 
  const [address, setAddress] = useState({})
 - 
 
24 
  const [currentPage, setCurrentPage] = useState(1)
 21 
  const [address, setAddress] = useState({})
25 
  const [pages, setPages] = useState(1)
 22 
  const [pages, setPages] = useState(1)
26 
  const labels = useSelector(({ intl }) => intl.labels)
 23 
  const labels = useSelector(({ intl }) => intl.labels)
27 
  const { category: categoryParam } = useParams()
 24 
  const { url } = useRouteMatch()
28 
  const { search } = useLocation()
 25 
  const { search, pathname } = useLocation()
29 
  const dispatch = useDispatch()
 26 
  const dispatch = useDispatch()
Línea 30... Línea 27...
30 
  const history = useHistory()
 27 
  const history = useHistory()
31 
 
 28 
 
- 
 
 29 
  const params = new URLSearchParams(search)
Línea 32... Línea 30...
32 
  const params = new URLSearchParams(search)
 30 
  const keyword = params.get('keyword')
33 
  const keyword = params.get('keyword')
 - 
 
34 
 
 - 
 
35 
  const searchEntities = (
 - 
 
36 
    page = 1,
 - 
 
37 
    keyword = '',
 - 
 
38 
    category = 'user',
 31 
  const currentPage = params.get('page')
39 
    address = {}
 - 
 
40 
  ) => {
 - 
 
41 
    setLoading(true)
 - 
 
42 
    const urlParams = { page, keyword }
 - 
 
43 
    Object.entries(address).forEach(([key, value]) => (urlParams[key] = value))
 - 
 
44 
 
 - 
 
Línea 45... Línea 32...
45 
    const url = `/search/entity/${category}?${jsonToParams(urlParams)}`
 32 
 
46 
 
 33 
  const searchEntities = (address = {}) => {
47 
    history.replace(url)
 34 
    setLoading(true)
48 
 
 35 
 
Línea 62... Línea 49...
62 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
 49 
        dispatch(addNotification({ style: 'danger', msg: err.message }))
63 
      })
 50 
      })
64 
      .finally(() => setLoading(false))
 51 
      .finally(() => setLoading(false))
65 
  }
 52 
  }
Línea 66... Línea 53...
66 
 
 53 
 
- 
 
 54 
  const onChangeKeyword = debounce((value) => {
Línea 67... Línea 55...
67 
  const onSearch = debounce((value) => setEntity(value), 500)
 55 
    params.set('page', '1')
- 
 
 56 
 
- 
 
 57 
    if (value) {
- 
 
 58 
      params.set('keyword', value)
- 
 
 59 
    } else {
- 
 
 60 
      params.delete('keyword')
68 
 
 61 
    }
- 
 
 62 
 
- 
 
 63 
    history.replace(`${pathname}?${params.toString()}`)
69 
  useEffect(() => {
 64 
  }, 500)
- 
 
 65 
 
- 
 
 66 
  const onChangePage = (currentPage = 1) => {
- 
 
 67 
    params.set('page', `${currentPage}`)
- 
 
 68 
    history.replace(`${pathname}?${params.toString()}`)
- 
 
 69 
  }
- 
 
 70 
 
- 
 
 71 
  const onChangeCategory = (newCategory = 'user') => {
- 
 
 72 
    params.set('page', '1')
Línea 70... Línea 73...
70 
    searchEntities(currentPage, entity, category, address)
 73 
    history.replace(`/search/entity/${newCategory}?${params.toString()}`)
71 
  }, [entity, category, currentPage, address])
 74 
  }
72 
 
 - 
 
73 
  useEffect(() => {
 75 
 
Línea 74... Línea 76...
74 
    setEntity(keyword)
 76 
  useEffect(() => {
75 
    setCategory(categoryParam)
 77 
    searchEntities(address)
76 
  }, [keyword, categoryParam])
 78 
  }, [address, url])
77 
 
 79 
 
78 
  return (
 80 
  return (
79 
    <>
 81 
    <>
80 
      <Container as='main'>
 82 
      <Container as='main'>
81 
        <Input
 83 
        <Input
82 
          icon={SearchIcon}
 84 
          icon={SearchIcon}
- 
 
 85 
          onChange={(e) => onChangeKeyword(e.target.value)}
83 
          onChange={(e) => onSearch(e.target.value)}
 86 
          defaultValue={keyword}
84 
          defaultValue={entity}
 87 
          placeholder={labels.search}
85 
          placeholder={labels.search}
 88 
        />
86 
        />
 - 
 
87 
        <Row className='mt-3'>
 89 
 
88 
          <Col as='aside' md='4'>
 90 
        <Row className='mt-3'>
89 
            <FiltersSidebar>
 91 
          <Col as='aside' md='4'>
90 
              <CategoryFilter
 92 
            <FiltersSidebar>
91 
                onChange={(newCategory) => setCategory(newCategory)}
 93 
              <CategoryFilter onChange={onChangeCategory} />
92 
              />
 94 
 
93 
              <LocationFilter
 95 
              <LocationFilter
- 
 
 96 
                onChange={(newAddress) => setAddress(newAddress)}
94 
                onChange={(newAddress) => setAddress(newAddress)}
 97 
              />
95 
              />
 98 
            </FiltersSidebar>
96 
            </FiltersSidebar>
 99 
          </Col>
97 
          </Col>
 100 
 
98 
          <Col as='section' md='8'>
 101 
          <Col as='section' md='8'>
Línea 107... Línea 110...
107 
              )}
 110 
              )}
108 
            </div>
 111 
            </div>
109 
            <PaginationComponent
 112 
            <PaginationComponent
110 
              pages={pages}
 113 
              pages={pages}
111 
              currentActivePage={currentPage}
 114 
              currentActivePage={currentPage}
112 
              onChangePage={(newCurrentPage) => setCurrentPage(newCurrentPage)}
 115 
              onChangePage={onChangePage}
113 
              isRow
 116 
              isRow
114 
            />
 117 
            />
115 
          </Col>
 118 
          </Col>
116 
        </Row>
 119 
        </Row>
117 
      </Container>
 120 
      </Container>