Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Search } from '@mui/icons-material'

import { debounce } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import { searchEntities } from '../../services/items'

import Spinner from '../../components/UI/Spinner'
import Input from '../../components/UI/inputs/Input'
import ProfileItem from '../../components/profile/ProfileItem'
import TitleSection from '../../components/UI/TitleSection'
import EmptySection from '../../components/UI/EmptySection'
import PaginationComponent from '../../components/UI/PaginationComponent'

const PeopleViewedMyProfilePage = () => {
  const [peopleViewedMyProfile, setPeopleViewedMyProfile] = useState([])
  const [loading, setLoading] = useState(false)
  const [search, setSearch] = useState('')
  const [currentpage, setCurrentPage] = useState(1)
  const [totalPages, setTotalPages] = useState(1)

  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const getPeopleVieweMyProfile = async (search = '') => {
    setLoading(true)
    try {
      const { success, data } = await searchEntities(
        'profile/people-viewed-profile',
        search
      )

      if (!success) {
        dispatch(addNotification({ style: 'danger', msg: data }))
        setLoading(false)
        return
      }

      setPeopleViewedMyProfile(data.current.items)
      setCurrentPage(data.current.page)
      setTotalPages(data.total.pages)
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    } finally {
      setLoading(false)
    }
  }

  const handleSearch = debounce((value) => setSearch(value), 500)

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

  useEffect(() => {
    getPeopleVieweMyProfile(search)
  }, [search])

  return (
    <main className='companies-info container'>
      <TitleSection title={labels.who_has_seen_my_profile} />
      <Input icon={<Search />} onChange={handleSearch} variant='search' />
      {loading ? (
        <Spinner />
      ) : (
        <ul className='companies-list'>
          {peopleViewedMyProfile.length ? (
            peopleViewedMyProfile.map(
              ({ id, link_edit, link_delete, ...rest }) => (
                <ProfileItem
                  key={id}
                  {...rest}
                  fetchCallback={getPeopleVieweMyProfile}
                />
              )
            )
          ) : (
            <EmptySection
              align='left'
              message={labels.datatable_szerorecords}
            />
          )}
        </ul>
      )}
      <PaginationComponent
        isRow
        pages={totalPages}
        currentActivePage={currentpage}
        onChangePage={handlePagination}
      />
    </main>
  )
}

export default PeopleViewedMyProfilePage