Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'

import { useDispatch, useSelector } from 'react-redux'

import { debounce } from '../../utils'

import { addNotification } from '../../redux/notification/notification.actions'

import { searchEntities } from '../../services/items'

import Spinner from '../../components/UI/Spinner'

import SearchBar from '../../components/UI/SearchBar'

import ProfileItem from '../../components/profile/ProfileItem'

import TitleSection from '../../components/UI/TitleSection'

import EmptySection from '../../components/UI/EmptySection'

import PaginationComponent from '../../components/UI/PaginationComponent'

import LoaderContainer from '../../components/UI/LoaderContainer'

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} />

      <SearchBar onChange={handleSearch} />

      {loading ? (

        <LoaderContainer>

          <Spinner />

        </LoaderContainer>

      ) : (

        <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