Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import { Col, Container, Row } from 'react-bootstrap'
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
import { axios, debounce } from '../../utils'
import SearchIcon from '@mui/icons-material/Search'

import Input from 'components/UI/Input'
import Spinner from 'components/UI/Spinner'
import SearchItem from 'components/search/SearchItem'
import EmptySection from 'components/UI/EmptySection'
import FiltersSidebar from 'components/search/FiltersSidebar'
import CategoryFilter from 'components/search/CategoryFilter'
import LocationFilter from 'components/search/LocationFilter'
import PaginationComponent from 'components/UI/PaginationComponent'

const SearchPage = () => {
  const [entities, setEntities] = useState([])
  const [loading, setLoading] = useState(true)
  const [address, setAddress] = useState({})
  const [pages, setPages] = useState(1)
  const labels = useSelector(({ intl }) => intl.labels)
  const { search, pathname } = useLocation()
  const dispatch = useDispatch()
  const history = useHistory()

  const params = new URLSearchParams(search)
  const keyword = params.get('keyword')
  const currentPage = params.get('page')

  const searchEntities = (address = {}) => {
    setLoading(true)

    axios
      .get(`${pathname}?${params.toString()}`)
      .then(({ data: responseData }) => {
        const { success, data } = responseData

        if (!success) {
          throw new Error(data)
        }

        setEntities(data.current.items)
        setPages(data.total.pages)
      })
      .catch((err) => {
        dispatch(addNotification({ style: 'danger', msg: err.message }))
      })
      .finally(() => setLoading(false))
  }

  const onChangeKeyword = debounce((value) => {
    params.set('page', '1')

    if (value) {
      params.set('keyword', value)
    } else {
      params.delete('keyword')
    }

    history.replace(`${pathname}?${params.toString()}`)
  }, 500)

  const onChangePage = (currentPage = 1) => {
    params.set('page', `${currentPage}`)
    history.replace(`${pathname}?${params.toString()}`)
  }

  const onChangeCategory = (newCategory = 'user') => {
    params.set('page', '1')
    history.replace(`/search/entity/${newCategory}?${params.toString()}`)
  }

  useEffect(() => {
    searchEntities(address)
  }, [address, search])

  return (
    <>
      <Container as='main'>
        <Input
          icon={SearchIcon}
          onChange={(e) => onChangeKeyword(e.target.value)}
          defaultValue={keyword}
          placeholder={labels.search}
        />

        <Row className='mt-3'>
          <Col as='aside' md='4'>
            <FiltersSidebar>
              <CategoryFilter onChange={onChangeCategory} />

              <LocationFilter
                onChange={(newAddress) => setAddress(newAddress)}
              />
            </FiltersSidebar>
          </Col>

          <Col as='section' md='8'>
            <div className='posts-section'>
              {loading && <Spinner />}
              {entities.length ? (
                entities.map((entity) => (
                  <SearchItem key={entity.id} {...entity} />
                ))
              ) : (
                <EmptySection message='No hay resultados' />
              )}
            </div>
            <PaginationComponent
              pages={pages}
              currentActivePage={currentPage}
              onChangePage={onChangePage}
              isRow
            />
          </Col>
        </Row>
      </Container>
    </>
  )
}

export default SearchPage