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 { url } = useRouteMatch()

  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(url)

      .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, url])

  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