Proyectos de Subversion LeadersLinked - SPA

import React, { useState, useEffect, useRef } from 'react'
import { axios, debounce } from '../../utils'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate, useLocation, useParams } from 'react-router-dom'
import { addNotification } from '../../redux/notification/notification.actions'
import { Search } from '@mui/icons-material'
import { 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 navigate = useNavigate()
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()
  const params = new URLSearchParams(search)

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

  const onChangePage = (currentPage = 1) => {
    const params = new URLSearchParams(search)
    params.set('page', `${currentPage}`)
    navigate(`${pathname}?${params.toString()}`)
  }

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

  const onChangeAddress = (address = {}) => {
    const params = new URLSearchParams(search)
    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)
    )

    navigate(`${pathname}?${params.toString()}`)
  }

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

        if (!success) {
          throw new Error(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 (
    <>
      <Input
        icon={Search}
        onChange={(e) => onChangeKeyword(e.target.value)}
        placeholder={labels.search}
        defaultValue={params.get('keyword')}
      />

      <Grid container spacing={2} mt={2}>
        <Grid item xs={12} md={4} display='flex' direction='column' gap={2}>
          <FiltersSidebar>
            <CategoryFilter
              currentCategory={category}
              onChange={onChangeCategory}
            />

            <LocationFilter onChange={onChangeAddress} />
          </FiltersSidebar>
        </Grid>

        <Grid item xs={12} md={8} display='flex' direction='column' gap={2}>
          {loading ? (
            <LoaderContainer>
              <Spinner />
            </LoaderContainer>
          ) : (
            <>
              <EntitiesList entities={entities} />
              <PaginationComponent
                pages={pages}
                onChangePage={onChangePage}
                currentActivePage={+params.get('page')}
                isRow
              />
            </>
          )}
        </Grid>
      </Grid>
    </>
  )
}

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