Proyectos de Subversion LeadersLinked - Antes de 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 Spinner from '../../components/UI/Spinner'
import SearchItem from '../../components/search/SearchItem'
import SearchInput from '../../components/UI/SearchInput'
import EmptySection from '../../components/UI/EmptySection'
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 [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)
  const activeFilters = useRef([])
  const addressFilter = useRef([])

  const { search, pathname } = useLocation()
  const history = useHistory()

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

  const loadEntities = async (page = 1) => {
    setLoading(true)
    setCurrentPage(page)

    const urlParams = { page, keyword }

    addressFilter.current.forEach(({ name, type }) => {
      urlParams[type] = name
    })
    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 onSubmitHandler = (e) => {
    e.preventDefault()
    history.push({ pathname, search: `?keyword=${entity}` })
  }

  useEffect(() => {
    loadEntities()
  }, [keyword])

  return (
    <>
      <Container as="main">
        <SearchInput
          as="form"
          onSubmit={onSubmitHandler}
          onChange={(e) => setEntity(e.target.value)}
          value={entity}
          placeholder="¿Que desea encontrar?"
          style={{ backgroundColor: 'var(--bg-color)' }}
        />
        <Row className="mt-3">
          <Col as="aside" md="4">
            <div></div>
          </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