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 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'
import FiltersSidebar from '../../components/search/FiltersSidebar'
import CategoryFilter from '../../components/search/CategoryFilter'
import LocationFilter from '../../components/search/LocationFilter'

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 addressKeys = useRef([])

  const { search, pathname } = useLocation()
  const history = useHistory()

  const params = new URLSearchParams(search)
  const keyword = params.get('keyword')

  const loadEntities = async (page = 1, keyword = '', category = 'user') => {
    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 { success, data } = response.data

        if (success) {
          setEntities(data.current.items)
          setPages(data.total.pages)
        }
      })
    setLoading(false)
  }

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

  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 onSubmitHandler = (e) => {
    e.preventDefault()
    history.push({ pathname, search: `?keyword=${entity}` })
  }

  const changeCategory = (newCategory) => {
    const urlParams = { keyword }

    activeFilters.current.forEach(({ name, value }) => {
      urlParams[name] = value
    })

    setCategory(newCategory)
    history.push(`/search/entity/${newCategory}?${jsonToParams(urlParams)}`)
  }

  useEffect(() => {
    loadEntities(currentPage, keyword, category)
    setEntity(keyword)
    return () => {
      setCategory('user')
      setEntity('')
      activeFilters.current = []
      addressKeys.current = []
    }
  }, [keyword, category, currentPage])

  return (
    <>
      <Container as="main">
        <SearchInput
          as="form"
          onSubmit={onSubmitHandler}
          onChange={(e) => setEntity(e.target.value)}
          value={entity}
          plackeyword
          style={{ backgroundColor: 'var(--bg-color)' }}
        />
        <Row className="mt-3">
          <Col as="aside" md="4">
            <FiltersSidebar>
              <CategoryFilter onChange={changeCategory} />
              <LocationFilter onChange={getAddressHandler} />
            </FiltersSidebar>
          </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