Proyectos de Subversion LeadersLinked - Antes de SPA

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

import FiltersSidebar from '../components/FiltersSidebar'
import SearchByCategory from '../components/filters/SearchByCategory'
import SearchByLocation from '../components/filters/SearchByLocation'
import Spinner from '../../shared/loading-spinner/Spinner'
import EntityTemplate from '../components/entity-template/EntityTemplate'
import EmptySection from '../../shared/empty-section/EmptySection'
import PaginationComponent from '../../shared/pagination/PaginationComponent'

const SearchGrid = ({ filters }) => {
  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 addressKeys = useRef([])

  const location = useLocation()

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

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

  const getAddressHandler = (addresObject) => {
    const { address_components } = addresObject
    if (address_components) {
      addressKeys.current = []
      address_components.map((address_component) => {
        const address_component_name = address_component.long_name
        const address_component_type = address_component.types[0]
        switch (address_component_type) {
          case 'route':
            addressKeys.current = [
              ...addressKeys.current,
              { type: 'route', name: address_component_name },
            ]
            break
          case 'sublocality':
            addressKeys.current = [
              ...addressKeys.current,
              { type: 'sublocality', name: address_component_name },
            ]
            break
          case 'locality':
            addressKeys.current = [
              ...addressKeys.current,
              { type: 'locality', name: address_component_name },
            ]
            break
          case 'administrative_area_level_2':
            addressKeys.current = [
              ...addressKeys.current,
              {
                type: 'administrative_area_level_2',
                name: address_component_name,
              },
            ]
            break
          case 'administrative_area_level_1':
            addressKeys.current = [
              ...addressKeys.current,
              {
                type: 'administrative_area_level_1',
                name: address_component_name,
              },
            ]
            break
          case 'country':
            addressKeys.current = [
              ...addressKeys.current,
              { type: 'country', name: address_component_name },
            ]
            break
          case 'postal_code':
            addressKeys.current = [
              ...addressKeys.current,
              { type: 'postal_code', name: address_component_name },
            ]
            break
          default:
            break
        }
      })
      loadEntities()
    } else {
      if (addressKeys.current.length) {
        loadEntities()
      }
    }
  }

  const loadEntities = async (page = 1) => {
    setLoading(true)
    setCurrentPage(page)
    const urlParams = {
      page,
      keyword,
    }
    addressKeys.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 responseData = response.data
        if (responseData.success) {
          setEntities(responseData.data.current.items)
          setPages(responseData.data.total.pages)
        }
      })
    setLoading(false)
  }

  const onChangePageHandler = (currentPage) => {
    setCurrentPage(currentPage)
  }

  return (
    <main className="main-section-data container px-0 mt-3">
      <FiltersSidebar>
        {() => (
          <>
            <SearchByCategory
              allowSearchCompany={filters.allowSearchCompany}
              onChange={(value) => setCategory(value)}
            />
            <SearchByLocation onChange={getAddressHandler} />
          </>
        )}
      </FiltersSidebar>
      <div className="main-ws-sec">
        <div className="posts-section">
          {loading && <Spinner />}
          {entities.length ? (
            entities.map((entity) => (
              <EntityTemplate
                entity={entity}
                key={entity.id}
                onChangePage={onChangePageHandler}
              />
            ))
          ) : (
            <EmptySection message="No hay resultados" />
          )}
        </div>
        <PaginationComponent
          pages={pages}
          currentActivePage={currentPage}
          onChangePage={loadEntities}
        />
      </div>
      <div className="right-sidebar" />
    </main>
  )
}

export default SearchGrid