Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 486 Rev 649
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, jsonToParams } from '../../utils'
 2 
import { axios, debounce, jsonToParams } from '../../utils'
3 
import { Col, Container, Row } from 'react-bootstrap'
 3 
import { Col, Container, Row } from 'react-bootstrap'
4 
import { useHistory, useLocation } from 'react-router-dom'
 4 
import { useHistory, useLocation } from 'react-router-dom'
5 
import SearchIcon from '@mui/icons-material/Search'
 5 
import SearchIcon from '@mui/icons-material/Search'
Línea 6... Línea 6...
6 
 
 6 
 
Línea 10... Línea 10...
10 
import EmptySection from '../../components/UI/EmptySection'
 10 
import EmptySection from '../../components/UI/EmptySection'
11 
import PaginationComponent from '../../components/UI/PaginationComponent'
 11 
import PaginationComponent from '../../components/UI/PaginationComponent'
12 
import FiltersSidebar from '../../components/search/FiltersSidebar'
 12 
import FiltersSidebar from '../../components/search/FiltersSidebar'
13 
import CategoryFilter from '../../components/search/CategoryFilter'
 13 
import CategoryFilter from '../../components/search/CategoryFilter'
14 
import LocationFilter from '../../components/search/LocationFilter'
 14 
import LocationFilter from '../../components/search/LocationFilter'
- 
 
 15 
import { useDispatch } from 'react-redux'
- 
 
 16 
import { addNotification } from '../../redux/notification/notification.actions'
Línea 15... Línea 17...
15 
 
 17 
 
16 
const SearchPage = () => {
 18 
const SearchPage = () => {
17 
  const [entities, setEntities] = useState([])
 19 
  const [entities, setEntities] = useState([])
18 
  const [loading, setLoading] = useState(true)
 20 
  const [loading, setLoading] = useState(true)
19 
  const [category, setCategory] = useState('user')
 21 
  const [category, setCategory] = useState('user')
20 
  const [entity, setEntity] = useState('')
 22 
  const [entity, setEntity] = useState('')
21 
  const [address, setAddress] = useState({})
 23 
  const [address, setAddress] = useState({})
22 
  const [currentPage, setCurrentPage] = useState(1)
 24 
  const [currentPage, setCurrentPage] = useState(1)
23 
  const [pages, setPages] = useState(1)
 25 
  const [pages, setPages] = useState(1)
24 
  const activeFilters = useRef([])
 - 
 
25 
 
 26 
  const activeFilters = useRef([])
26 
  const { search, pathname } = useLocation()
 27 
  const { search } = useLocation()
- 
 
 28 
  const history = useHistory()
Línea 27... Línea 29...
27 
  const history = useHistory()
 29 
  const dispatch = useDispatch()
28 
 
 30 
 
Línea 29... Línea 31...
29 
  const params = new URLSearchParams(search)
 31 
  const params = new URLSearchParams(search)
- 
 
 32 
  const keyword = params.get('keyword')
- 
 
 33 
 
- 
 
 34 
  const searchEntities = (
- 
 
 35 
    page = 1,
- 
 
 36 
    keyword = '',
30 
  const keyword = params.get('keyword')
 37 
    category = 'user',
31 
 
 - 
 
32 
  const loadEntities = async (page = 1, keyword = '', category = 'user') => {
 - 
 
33 
    setLoading(true)
 38 
    address = {}
Línea 34... Línea 39...
34 
    setCurrentPage(page)
 39 
  ) => {
35 
 
 - 
 
36 
    const urlParams = { page, keyword }
 - 
 
Línea 37... Línea 40...
37 
 
 40 
    setLoading(true)
38 
    Object.entries(address).forEach(([key, value]) => {
 41 
    const urlParams = { page, keyword }
39 
      urlParams[key] = value
 42 
 
Línea 40... Línea 43...
40 
    })
 43 
    Object.entries(address).forEach(([key, value]) => (urlParams[key] = value))
41 
 
 44 
 
42 
    activeFilters.current.forEach(({ name, value }) => {
 45 
    activeFilters.current.forEach(
43 
      urlParams[name] = value
 46 
      ({ name, value }) => (urlParams[name] = value)
Línea 44... Línea 47...
44 
    })
 47 
    )
45 
 
 - 
 
46 
    await axios
 48 
 
47 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
 49 
    axios
- 
 
 50 
      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)
- 
 
 51 
      .then(({ data: responseData }) => {
- 
 
 52 
        const { success, data } = responseData
48 
      .then((response) => {
 53 
 
- 
 
 54 
        if (!success) {
- 
 
 55 
          throw new Error(data)
- 
 
 56 
        }
49 
        const { success, data } = response.data
 57 
 
50 
 
 58 
        setEntities(data.current.items)
Línea 51... Línea 59...
51 
        if (success) {
 59 
        setPages(data.total.pages)
52 
          setEntities(data.current.items)
 60 
      })
53 
          setPages(data.total.pages)
 61 
      .catch((err) => {
Línea 54... Línea 62...
54 
        }
 62 
        dispatch(addNotification({ style: 'danger', msg: err }))
55 
      })
 63 
      })
56 
    setLoading(false)
 64 
      .finally(() => setLoading(false))
Línea 57... Línea -...
57 
  }
 - 
 
58 
 
 - 
 
59 
  const onChangePageHandler = (currentPage) => {
 - 
 
60 
    setCurrentPage(currentPage)
 - 
 
61 
  }
 - 
 
62 
 
 - 
 
63 
  const addressHandler = (address) => {
 - 
 
64 
    setAddress(address)
 - 
 
65 
  }
 65 
  }
66 
 
 66 
 
Línea 67... Línea 67...
67 
  const onSearch = (e) => {
 67 
  const onChangePageHandler = (currentPage) => {
68 
    if (e.key !== 'Enter') {
 68 
    setCurrentPage(currentPage)
Línea 81... Línea 81...
81 
 
 81 
 
82 
    setCategory(newCategory)
 82 
    setCategory(newCategory)
83 
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)
 83 
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)
Línea -... Línea 84...
- 
 
 84 
  }
- 
 
 85 
 
- 
 
 86 
  const onSearch = debounce((value) => setEntity(value), 500)
- 
 
 87 
 
- 
 
 88 
  useEffect(() => {
- 
 
 89 
    searchEntities(currentPage, entity, category, address)
84 
  }
 90 
  }, [entity, category, currentPage, address])
85 
 
 - 
 
86 
  useEffect(() => {
 91 
 
87 
    loadEntities(currentPage, keyword, category)
 - 
 
88 
    setEntity(keyword)
 - 
 
89 
    return () => {
 - 
 
90 
      setCategory('user')
 - 
 
91 
      setEntity('')
 92 
  useEffect(() => {
92 
      activeFilters.current = []
 - 
 
Línea 93... Línea 93...
93 
    }
 93 
    setEntity(keyword)
94 
  }, [keyword, category, currentPage, address])
 94 
  }, [])
95 
 
 95 
 
96 
  return (
 96 
  return (
97 
    <>
 97 
    <>
98 
      <Container as="main">
 - 
 
99 
        <Input
 98 
      <Container as='main'>
100 
          icon={SearchIcon}
 99 
        <Input
101 
          onKeyDown={onSearch}
 100 
          icon={SearchIcon}
102 
          onChange={(e) => setEntity(e.target.value)}
 101 
          onChange={(e) => onSearch(e.target.value)}
103 
          value={entity}
 102 
          value={entity}
104 
        />
 103 
        />
105 
        <Row className="mt-3">
 104 
        <Row className='mt-3'>
106 
          <Col as="aside" md="4">
 105 
          <Col as='aside' md='4'>
107 
            <FiltersSidebar>
 106 
            <FiltersSidebar>
108 
              <CategoryFilter onChange={changeCategory} />
 107 
              <CategoryFilter onChange={changeCategory} />
109 
              <LocationFilter onChange={addressHandler} />
 108 
              <LocationFilter onChange={addressHandler} />
110 
            </FiltersSidebar>
 109 
            </FiltersSidebar>
111 
          </Col>
 110 
          </Col>
112 
          <Col as="section" md="8">
 111 
          <Col as='section' md='8'>
113 
            <div className="posts-section">
 112 
            <div className='posts-section'>
114 
              {loading && <Spinner />}
 - 
 
115 
              {entities.length ? (
 113 
              {loading && <Spinner />}
116 
                entities.map((entity) => (
 - 
 
117 
                  <SearchItem
 - 
 
118 
                    key={entity.id}
 - 
 
119 
                    onChangePage={onChangePageHandler}
 114 
              {entities.length ? (
120 
                    {...entity}
 115 
                entities.map((entity) => (
121 
                  />
 116 
                  <SearchItem key={entity.id} {...entity} />
122 
                ))
 117 
                ))
123 
              ) : (
 118 
              ) : (
124 
                <EmptySection message="No hay resultados" />
 119 
                <EmptySection message='No hay resultados' />
125 
              )}
 120 
              )}
126 
            </div>
 121 
            </div>
127 
            <PaginationComponent
 122 
            <PaginationComponent
128 
              pages={pages}
 123 
              pages={pages}
129 
              currentActivePage={currentPage}
 124 
              currentActivePage={currentPage}
130 
              onChangePage={loadEntities}
 125 
              onChangePage={onChangePageHandler}
131 
              isRow
 126 
              isRow
132 
            />
 127 
            />