Proyectos de Subversion LeadersLinked - SPA

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

import { axios, 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'

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, pathname } = useLocation()

  const history = useHistory()

  const params = new URLSearchParams(search)

  const keyword = params.get('keyword')

  const loadEntities = async (page = 1, keyword = '', category = 'user') => {

    setLoading(true)

    setCurrentPage(page)

    const urlParams = { page, keyword }

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

      urlParams[key] = value

    })

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

      urlParams[name] = value

    })

    await axios

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

      .then((response) => {

        const { success, data } = response.data

        if (success) {

          setEntities(data.current.items)

          setPages(data.total.pages)

        }

      })

    setLoading(false)

  }

  const onChangePageHandler = (currentPage) => {

    setCurrentPage(currentPage)

  }

  const addressHandler = (address) => {

    setAddress(address)

  }

  const onSearch = (e) => {

    if (e.key !== 'Enter') {

      return

    }

    history.push({ pathname, search: `?keyword=${entity}` })

  }

  const changeCategory = (newCategory) => {

    const urlParams = { keyword }

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

      urlParams[name] = value

    })

    setCategory(newCategory)

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

  }

  useEffect(() => {

    loadEntities(currentPage, keyword, category)

    setEntity(keyword)

    return () => {

      setCategory('user')

      setEntity('')

      activeFilters.current = []

    }

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

  return (

    <>

      <Container as="main">

        <Input

          icon={SearchIcon}

          onKeyDown={onSearch}

          onChange={(e) => setEntity(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}

                    onChangePage={onChangePageHandler}

                    {...entity}

                  />

                ))

              ) : (

                <EmptySection message="No hay resultados" />

              )}

            </div>

            <PaginationComponent

              pages={pages}

              currentActivePage={currentPage}

              onChangePage={loadEntities}

              isRow

            />

          </Col>

        </Row>

      </Container>

    </>

  )

}

export default SearchPage