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])

  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