Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect, useRef } from 'react'
import { axios, debounce } from '../../utils'
import { useDispatch, useSelector } from 'react-redux'
import { useHistory, useLocation, useParams } from 'react-router-dom'
import { addNotification } from '../../redux/notification/notification.actions'
import { Search } from '@mui/icons-material'
import { Container, Grid } from '@mui/material'

import Input from 'components/UI/Input'
import Spinner from 'components/UI/Spinner'
import SearchItem from 'components/search/SearchItem'
import EmptySection from 'components/UI/EmptySection'
import FiltersSidebar from 'components/search/FiltersSidebar'
import CategoryFilter from 'components/search/CategoryFilter'
import LocationFilter from 'components/search/LocationFilter'
import PaginationComponent from 'components/UI/PaginationComponent'
import LoaderContainer from 'components/UI/LoaderContainer'

const SearchPage = () => {
  const [entities, setEntities] = useState([])
  const [pages, setPages] = useState(1)
  const [loading, setLoading] = useState(true)
  const { search, pathname } = useLocation()
  const { category } = useParams()
  const addressRef = useRef({})
  const history = useHistory()
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

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

  const onChangeKeyword = debounce((value = '') => {
    params.set('page', '1')
    params.set('keyword', value)
    history.replace(`${pathname}?${params.toString()}`)
  }, 500)

  const onChangePage = (currentPage = 1) => {
    params.set('page', `${currentPage}`)
    history.replace(`${pathname}?${params.toString()}`)
  }

  const onChangeCategory = (newCategory = 'user') => {
    params.set('page', '1')
    history.replace(`/search/entity/${newCategory}?${params.toString()}`)
  }

  const onChangeAddress = (address = {}) => {
    params.set('page', '1')
    Object.entries(addressRef.current).forEach(([key]) => {
      if (!['page', 'keyword'].includes(key)) params.delete(key)
    })

    addressRef.current = address

    Object.entries(address).forEach(
      ([key, value]) => value && params.set(key, value)
    )

    history.replace(`${pathname}?${params.toString()}`)
  }

  useEffect(() => {
    const searchEntities = async () => {
      setLoading(true)
      try {
        const { data: responseData } = await axios.get(
          `${pathname}?${params.toString()}`
        )
        const { success, data } = responseData

        if (!success) {
          throw new Error(data)
        }

        console.log(data)
        setEntities(data.current.items)
        setPages(data.total.pages)
      } catch (error) {
        dispatch(addNotification({ style: 'danger', msg: error.message }))
      } finally {
        setLoading(false)
      }
    }

    searchEntities()
  }, [search, pathname])

  return (
    <>
      <Container as='main'></Container>
    </>
  )
}

const EntitiesList = ({ entities = [] }) => {
  if (!entities.length) {
    return <EmptySection message='No hay resultados' />
  }

  return (
    <>
      {entities.map((entity) => (
        <SearchItem key={entity.id} entity={entity} />
      ))}
    </>
  )
}

export default SearchPage