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, useParams } from 'react-router-dom'

import { axios, debounce, jsonToParams } 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 [category, setCategory] = useState('user')

  const [entity, setEntity] = useState('')

  const [address, setAddress] = useState({})

  const [currentPage, setCurrentPage] = useState(1)

  const [pages, setPages] = useState(1)

  const labels = useSelector(({ intl }) => intl.labels)

  const { category: categoryParam } = useParams()

  const { search } = useLocation()

  const dispatch = useDispatch()

  const history = useHistory()

  const params = new URLSearchParams(search)

  const keyword = params.get('keyword')

  const searchEntities = (

    page = 1,

    keyword = '',

    category = 'user',

    address = {}

  ) => {

    setLoading(true)

    const urlParams = { page, keyword }

    Object.entries(address).forEach(([key, value]) => (urlParams[key] = value))

    const url = `/search/entity/${category}?${jsonToParams(urlParams)}`

    history.replace(url)

    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 onSearch = debounce((value) => setEntity(value), 500)

  useEffect(() => {

    searchEntities(currentPage, entity, category, address)

  }, [entity, category, currentPage, address])

  useEffect(() => {

    setEntity(keyword)

    setCategory(categoryParam)

  }, [keyword, categoryParam])

  return (

    <>

      <Container as='main'>

        <Input

          icon={SearchIcon}

          onChange={(e) => onSearch(e.target.value)}

          defaultValue={entity}

          placeholder={labels.search}

        />

        <Row className='mt-3'>

          <Col as='aside' md='4'>

            <FiltersSidebar>

              <CategoryFilter

                onChange={(newCategory) => setCategory(newCategory)}

              />

              <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={(newCurrentPage) => setCurrentPage(newCurrentPage)}

              isRow

            />

          </Col>

        </Row>

      </Container>

    </>

  )

}

export default SearchPage