Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useRef, useEffect } from 'react'

import { axios, debounce, jsonToParams } from '../../utils'

import { Col, Container, Row } from 'react-bootstrap'

import { useHistory, useLocation } from 'react-router-dom'

import SearchIcon from '@mui/icons-material/Search'

import Spinner from '../../components/UI/Spinner'

import SearchItem from '../../components/search/SearchItem'

import Input from '../../components/UI/Input'

import EmptySection from '../../components/UI/EmptySection'

import PaginationComponent from '../../components/UI/PaginationComponent'

import FiltersSidebar from '../../components/search/FiltersSidebar'

import CategoryFilter from '../../components/search/CategoryFilter'

import LocationFilter from '../../components/search/LocationFilter'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../redux/notification/notification.actions'

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 activeFilters = useRef([])

  const { search } = useLocation()

  const history = useHistory()

  const dispatch = useDispatch()

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

    activeFilters.current.forEach(

      ({ name, value }) => (urlParams[name] = value)

    )

    axios

      .get(`/search/entity/${category}?${jsonToParams(urlParams)}`)

      .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 }))

      })

      .finally(() => setLoading(false))

  }

  const onChangePageHandler = (currentPage) => {

    setCurrentPage(currentPage)

  }

  const addressHandler = (address) => {

    setAddress(address)

  }

  const changeCategory = (newCategory) => {

    const urlParams = { keyword }

    activeFilters.current.forEach(({ name, value }) => {

      urlParams[name] = value

    })

    setCategory(newCategory)

    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)

  }

  const onSearch = debounce((value) => setEntity(value), 500)

  useEffect(() => {

    searchEntities(currentPage, entity, category, address)

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

  useEffect(() => {

    setEntity(keyword)

  }, [])

  return (

    <>

      <Container as='main'>

        <Input

          icon={SearchIcon}

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

          value={entity}

        />

        <Row className='mt-3'>

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

            <FiltersSidebar>

              <CategoryFilter onChange={changeCategory} />

              <LocationFilter onChange={addressHandler} />

            </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={onChangePageHandler}

              isRow

            />

          </Col>

        </Row>

      </Container>

    </>

  )

}

export default SearchPage