Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 2964 Rev 3070
Línea 1... Línea -...
1 
import React, { useState, useEffect, useRef } from 'react'
 - 
 
2 
import { axios, debounce } from '../../utils'
 1 
import React from 'react'
3 
import { useDispatch, useSelector } from 'react-redux'
 2 
import { useSelector } from 'react-redux'
4 
import { useNavigate, useLocation, useParams } from 'react-router-dom'
 3 
import { useLocation } from 'react-router-dom'
5 
import { addNotification } from '../../redux/notification/notification.actions'
 - 
 
6 
import { Search } from '@mui/icons-material'
 4 
import { Search } from '@mui/icons-material'
7 
import { Grid } from '@mui/material'
 5 
import { Grid } from '@mui/material'
Línea 8... Línea 6...
8 
 
 6 
 
9 
import Spinner from 'components/UI/Spinner'
 - 
 
10 
import SearchItem from 'components/search/SearchItem'
 7 
import { debounce } from '@utils'
11 
import EmptySection from 'components/UI/EmptySection'
 - 
 
12 
import FiltersSidebar from 'components/search/FiltersSidebar'
 - 
 
13 
import CategoryFilter from 'components/search/CategoryFilter'
 - 
 
- 
 
 8 
import { useFetch, useSearchQuery } from '@hooks'
14 
import LocationFilter from 'components/search/LocationFilter'
 9 
 
- 
 
 10 
import Input from '@components/UI/inputs/Input'
15 
import Input from '@components/UI/inputs/Input'
 11 
import Spinner from '@components/UI/Spinner'
- 
 
 12 
import Pagination from '@components/common/Pagination'
- 
 
 13 
import SearchList from '@components/search/SearchList'
Línea 16... Línea 14...
16 
import Pagination from '@components/common/Pagination'
 14 
import SearchFilters from '@components/search/SearchFilters'
17 
 
 - 
 
18 
const SearchPage = () => {
 - 
 
19 
  const [entities, setEntities] = useState([])
 - 
 
20 
  const [pages, setPages] = useState(1)
 15 
 
21 
  const [loading, setLoading] = useState(true)
 - 
 
22 
  const { search, pathname } = useLocation()
 - 
 
23 
  const { category } = useParams()
 - 
 
24 
  const addressRef = useRef({})
 16 
const SearchPage = () => {
25 
  const navigate = useNavigate()
 - 
 
26 
  const labels = useSelector(({ intl }) => intl.labels)
 - 
 
Línea 27... Línea 17...
27 
  const dispatch = useDispatch()
 17 
  const { search, pathname } = useLocation()
28 
  const params = new URLSearchParams(search)
 - 
 
29 
 
 - 
 
30 
  const onChangeKeyword = debounce((value = '') => {
 - 
 
31 
    const params = new URLSearchParams(search)
 - 
 
32 
    params.set('page', '1')
 - 
 
33 
    params.set('keyword', value)
 - 
 
34 
    navigate(`${pathname}?${params.toString()}`)
 - 
 
35 
  }, 500)
 - 
 
36 
 
 - 
 
37 
  const onChangePage = (currentPage = 1) => {
 - 
 
38 
    const params = new URLSearchParams(search)
 - 
 
39 
    params.set('page', `${currentPage}`)
 - 
 
40 
    navigate(`${pathname}?${params.toString()}`)
 - 
 
41 
  }
 - 
 
42 
 
 - 
 
43 
  const onChangeCategory = (newCategory = 'user') => {
 - 
 
44 
    const params = new URLSearchParams(search)
 - 
 
45 
    params.set('page', '1')
 - 
 
46 
    navigate(`/search/entity/${newCategory}?${params.toString()}`)
 - 
 
47 
  }
 - 
 
48 
 
 - 
 
49 
  const onChangeAddress = (address = {}) => {
 - 
 
50 
    const params = new URLSearchParams(search)
 - 
 
51 
    params.set('page', '1')
 - 
 
52 
    Object.entries(addressRef.current).forEach(([key]) => {
 - 
 
53 
      if (!['page', 'keyword'].includes(key)) params.delete(key)
 - 
 
54 
    })
 - 
 
55 
 
 - 
 
56 
    addressRef.current = address
 - 
 
57 
 
 - 
 
58 
    Object.entries(address).forEach(
 - 
 
59 
      ([key, value]) => value && params.set(key, value)
 - 
 
60 
    )
 - 
 
61 
 
 - 
 
62 
    navigate(`${pathname}?${params.toString()}`)
 - 
 
63 
  }
 - 
 
64 
 
 18 
  const labels = useSelector(({ intl }) => intl.labels)
65 
  useEffect(() => {
 19 
 
66 
    const searchEntities = async () => {
 - 
 
67 
      setLoading(true)
 - 
 
68 
      try {
 - 
 
69 
        const { data: responseData } = await axios.get(`${pathname}${search}`)
 - 
 
70 
        const { success, data } = responseData
 - 
 
71 
 
 20 
  const { isLoading, data } = useFetch(pathname + search, {
72 
        if (!success) {
 - 
 
73 
          throw new Error(data)
 - 
 
74 
        }
 - 
 
75 
 
 - 
 
76 
        setEntities(data.current.items)
 - 
 
77 
        setPages(data.total.pages)
 - 
 
78 
      } catch (error) {
 - 
 
79 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
 - 
 
80 
      } finally {
 21 
    current: { items: [] },
- 
 
 22 
    total: {
- 
 
 23 
      pages: 1
- 
 
 24 
    }
Línea 81... Línea -...
81 
        setLoading(false)
 - 
 
82 
      }
 25 
  })
Línea 83... Línea 26...
83 
    }
 26 
 
84 
 
 27 
  const { setParam } = useSearchQuery()
85 
    searchEntities()
 28 
 
86 
  }, [search, pathname])
 29 
  const handleSearch = debounce((e) => setParam('keyword', e.target.value))
87 
 
 - 
 
88 
  return (
 - 
 
89 
    <>
 - 
 
90 
      <Input
 30 
 
- 
 
 31 
  return (
- 
 
 32 
    <>
91 
        icon={<Search />}
 33 
      <Input
Línea 92... Línea 34...
92 
        onChange={(e) => onChangeKeyword(e.target.value)}
 34 
        icon={<Search />}
93 
        placeholder={labels.search}
 35 
        variant='search'
94 
        defaultValue={params.get('keyword')}
 - 
 
95 
        variant='search'
 36 
        onChange={handleSearch}
96 
      />
 - 
 
97 
 
 - 
 
98 
      <Grid container spacing={2} mt={2}>
 - 
 
99 
        <Grid item xs={12} md={4} display='flex' direction='column' gap={2}>
 - 
 
100 
          <FiltersSidebar>
 - 
 
101 
            <CategoryFilter
 - 
 
102 
              currentCategory={category}
 37 
        placeholder={labels.search}
Línea 103... Línea 38...
103 
              onChange={onChangeCategory}
 38 
      />
104 
            />
 39 
 
105 
 
 40 
      <Grid container spacing={2}>
106 
            <LocationFilter onChange={onChangeAddress} />
 41 
        <Grid item xs={12} md={4} display='flex' direction='column' gap={2}>
107 
          </FiltersSidebar>
 42 
          <SearchFilters />
108 
        </Grid>
 43 
        </Grid>
109 
 
 44 
 
110 
        <Grid item xs={12} md={8} display='flex' direction='column' gap={2}>
 45 
        <Grid item xs={12} md={8} display='flex' direction='column' gap={2}>
111 
          {loading ? (
 46 
          {isLoading ? (
112 
            <Spinner />
 47 
            <Spinner />
113 
          ) : (
 48 
          ) : (
114 
            <>
 49 
            <>
115 
              <EntitiesList entities={entities} />
 50 
              <SearchList items={data.current.items} />
116 
              <Pagination
 51 
              <Pagination
117 
                page={+params.get('page')}
 52 
                page={data.current?.page}
118 
                pages={pages}
 53 
                pages={data.total.pages}
119 
                onChange={onChangePage}
 54 
                onChange={(page) => setParam('page', page)}
120 
              />
 55 
              />
Línea 121... Línea -...
121 
            </>
 - 
 
122 
          )}
 - 
 
123 
        </Grid>
 - 
 
124 
      </Grid>
 - 
 
125 
    </>
 - 
 
126 
  )
 - 
 
127 
}
 - 
 
128 
 
 - 
 
129 
const EntitiesList = ({ entities = [] }) => {
 - 
 
130 
  if (!entities.length) {
 - 
 
131 
    return <EmptySection message='No hay resultados' />
 - 
 
132 
  }
 - 
 
133 
 
 - 
 
134 
  return (
 - 
 
135 
    <>
 56 
            </>