Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useState, useRef, useEffect } from 'react'
import { Container } from 'react-bootstrap'
import { useLocation } from 'react-router-dom'
import { useForm } from 'react-hook-form'
import { axios, jsonToParams } from '../../utils'

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 [currentPage, setCurrentPage] = useState(1)
  const [pages, setPages] = useState(1)

  const activeFilters = useRef([])
  const addressFilter = useRef([])

  const { search, pathname } = useLocation()
  const { register, handleSubmit, setValue, getValues } = useForm()

  // getting keyword
  const locationParams = new URLSearchParams(search)
  const keyword = locationParams.get('keyword')

  useEffect(() => {
    loadEntities()
  }, [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)
  }

  useEffect(() => {
    setValue('keyword', keyword)
    register('keyword')
  }, [])

  const onSubmitHandler = handleSubmit(({ keyword }) => {
    history.push({ pathname, search: `?keyword=${keyword}` })
  })

  return (
    <>
      <SearchInput
        as="form"
        onSubmit={onSubmitHandler}
        onChange={(e) => setValue('keyword', e.target.value)}
        value={getValues('keyword')}
      />
      <Container className="main-section-data mt-3">
        <div></div>
        <div className="main-ws-sec">
          <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
          />
        </div>
        <div className="right-sidebar" />
      </Container>
    </>
  )
}

export default SearchPage