Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 976 Rev 979
Línea 1... Línea 1...
1 
import React, { useState, useEffect } from 'react'
 1 
import React, { useState, useEffect } from 'react'
- 
 
 2 
import { axios, debounce } from '../../utils'
2 
import { useDispatch, useSelector } from 'react-redux'
 3 
import { useDispatch, useSelector } from 'react-redux'
3 
import { addNotification } from '../../redux/notification/notification.actions'
 - 
 
4 
import { Col, Container, Row } from 'react-bootstrap'
 - 
 
5 
import { useHistory, useLocation, useParams } from 'react-router-dom'
 4 
import { useHistory, useLocation, useParams } from 'react-router-dom'
6 
import { axios, debounce } from '../../utils'
 5 
import { addNotification } from '../../redux/notification/notification.actions'
7 
import SearchIcon from '@mui/icons-material/Search'
 6 
import { Search } from '@mui/icons-material'
- 
 
 7 
import { Container, Grid } from '@mui/material'
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'
11 
import SearchItem from 'components/search/SearchItem'
 11 
import SearchItem from 'components/search/SearchItem'
12 
import EmptySection from 'components/UI/EmptySection'
 12 
import EmptySection from 'components/UI/EmptySection'
13 
import FiltersSidebar from 'components/search/FiltersSidebar'
 13 
import FiltersSidebar from 'components/search/FiltersSidebar'
14 
import CategoryFilter from 'components/search/CategoryFilter'
 14 
import CategoryFilter from 'components/search/CategoryFilter'
15 
import LocationFilter from 'components/search/LocationFilter'
 15 
import LocationFilter from 'components/search/LocationFilter'
- 
 
 16 
import PaginationComponent from 'components/UI/PaginationComponent'
Línea 16... Línea 17...
16 
import PaginationComponent from 'components/UI/PaginationComponent'
 17 
import LoaderContainer from 'components/UI/LoaderContainer'
17 
 
 18 
 
18 
const SearchPage = () => {
 19 
const SearchPage = () => {
19 
  const [entities, setEntities] = useState([])
 20 
  const [entities, setEntities] = useState([])
20 
  const [loading, setLoading] = useState(true)
 21 
  const [loading, setLoading] = useState(true)
21 
  const [address, setAddress] = useState({})
 - 
 
22 
  const [pages, setPages] = useState(1)
 - 
 
23 
 
 22 
  const [address, setAddress] = useState({})
24 
  const labels = useSelector(({ intl }) => intl.labels)
 23 
  const [pages, setPages] = useState(1)
25 
  const { search, pathname } = useLocation()
 - 
 
26 
  const { category } = useParams()
 24 
  const { search, pathname } = useLocation()
- 
 
 25 
  const { category } = useParams()
- 
 
 26 
  const history = useHistory()
Línea 27... Línea 27...
27 
  const dispatch = useDispatch()
 27 
  const labels = useSelector(({ intl }) => intl.labels)
28 
  const history = useHistory()
 28 
  const dispatch = useDispatch()
29 
 
 29 
 
Línea 74... Línea 74...
74 
 
 74 
 
75 
  return (
 75 
  return (
76 
    <>
 76 
    <>
77 
      <Container as='main'>
 77 
      <Container as='main'>
78 
        <Input
 78 
        <Input
79 
          icon={SearchIcon}
 79 
          icon={Search}
80 
          onChange={(e) => onChangeKeyword(e.target.value)}
 80 
          onChange={(e) => onChangeKeyword(e.target.value)}
81 
          defaultValue={keyword}
 81 
          defaultValue={keyword}
82 
          placeholder={labels.search}
 82 
          placeholder={labels.search}
Línea 83... Línea 83...
83 
        />
 83 
        />
84 
 
 84 
 
85 
        <Row className='mt-3'>
 85 
        <Grid container spacing={2}>
86 
          <Col as='aside' md='4'>
 86 
          <Grid item display='flex' direction='column' gap={2}>
87 
            <FiltersSidebar>
 87 
            <FiltersSidebar>
88 
              <CategoryFilter
 88 
              <CategoryFilter
89 
                currentCategory={category}
 89 
                currentCategory={category}
Línea 90... Línea 90...
90 
                onChange={onChangeCategory}
 90 
                onChange={onChangeCategory}
91 
              />
 91 
              />
92 
 
 92 
 
93 
              <LocationFilter
 93 
              <LocationFilter
94 
                onChange={(newAddress) => setAddress(newAddress)}
 94 
                onChange={(newAddress) => setAddress(newAddress)}
Línea 95... Línea 95...
95 
              />
 95 
              />
96 
            </FiltersSidebar>
 96 
            </FiltersSidebar>
97 
          </Col>
 97 
          </Grid>
98 
 
 98 
 
99 
          <Col as='section' md='8'>
 99 
          <Grid item display='flex' direction='column' gap={2}>
100 
            <div className='posts-section'>
 - 
 
101 
              {loading && <Spinner />}
 100 
            <div className='posts-section'>
102 
              {entities.length ? (
 101 
              {loading ? (
103 
                entities.map((entity) => (
 102 
                <LoaderContainer>
104 
                  <SearchItem key={entity.id} {...entity} />
 103 
                  <Spinner />
105 
                ))
 104 
                </LoaderContainer>
Línea 106... Línea 105...
106 
              ) : (
 105 
              ) : (
107 
                <EmptySection message='No hay resultados' />
 106 
                <EntitiesList entities={entities} />
108 
              )}
 107 
              )}
109 
            </div>
 108 
            </div>
110 
 
 109 
 
111 
            <PaginationComponent
 110 
            <PaginationComponent
112 
              pages={pages}
 111 
              pages={pages}
113 
              currentActivePage={currentPage}
 112 
              currentActivePage={currentPage}
114 
              onChangePage={onChangePage}
 113 
              onChangePage={onChangePage}
115 
              isRow
 114 
              isRow
116 
            />
 115 
            />
117 
          </Col>
 116 
          </Grid>
Línea -... Línea 117...
- 
 
 117 
        </Grid>
- 
 
 118 
      </Container>
- 
 
 119 
    </>
- 
 
 120 
  )
- 
 
 121 
}
- 
 
 122 
 
- 
 
 123 
const EntitiesList = ({ entities = [] }) => {
- 
 
 124 
  if (!entities.length) {
- 
 
 125 
    return <EmptySection message='No hay resultados' />
- 
 
 126 
  }
- 
 
 127 
 
- 
 
 128 
  return (
- 
 
 129 
    <>
- 
 
 130 
      {entities.map((entity) => (
118 
        </Row>
 131 
        <SearchItem key={entity.id} entity={entity} />