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 searchEntities = () => {
    setLoading(true)

    axios
      .get(`${pathname}?${params.toString()}`, {
        timeout: 2000
      })
      .then(({ data: responseData }) => {
        const { success, data } = responseData

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

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

  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(() => {
    searchEntities()
  }, [search, pathname])

  return (
    <>
      <Container as='main'>
        <Input
          icon={Search}
          onChange={(e) => onChangeKeyword(e.target.value)}
          defaultValue={keyword}
          placeholder={labels.search}
        />

        <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}>
            <div className='posts-section'>
              {loading ? (
                <LoaderContainer>
                  <Spinner />
                </LoaderContainer>
              ) : (
                <>
                  <EntitiesList entities={entities} />
                  <PaginationComponent
                    pages={pages}
                    currentActivePage={currentPage}
                    onChangePage={onChangePage}
                    isRow
                  />
                </>
              )}
            </div>
          </Grid>
        </Grid>
      </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