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 styled from 'styled-components'

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 SearchBar = styled(SearchInput)`

  background-color: var(--bg-color) !important;

`

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 = () => {

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

  }

  useEffect(() => {

    loadEntities()

  }, [keyword])

  return (

    <>

      <Container as="main">

        <SearchBar

          as="form"

          onSubmit={onSubmitHandler}

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

          value={entity}

          placeholder="¿Que desea encontrar?"

        />

        <Row className="main-section-data 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