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