Proyectos de Subversion LeadersLinked - Antes de SPA

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

import { axios, debounce, jsonToParams } from '../../utils'

import { Container } from '@mui/material'

import { useSelector } from 'react-redux'

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

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

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

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

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

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

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

const ImpersonatePage = () => {

  const [users, setUsers] = useState([])

  const [search, setSearch] = useState('')

  const [currentPage, setCurrentPage] = useState(1)

  const [pages, setPages] = useState(1)

  const [loading, setLoading] = useState(false)

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

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

  const fetchUsers = async (page = 1, keyword = '') => {

    setLoading(true)

    setCurrentPage(page)

    const urlParams = {

      page,

      keyword,

    }

    await axios

      .get(`/impersonate?${jsonToParams(urlParams)}`)

      .then((response) => {

        const { success, data } = response.data

        if (success) {

          setUsers(data.current.items)

          setPages(data.total.pages)

        }

      })

    setLoading(false)

  }

  useEffect(() => {

    fetchUsers(currentPage, search)

  }, [currentPage, search])

  return (

    <>

      <Container component="main" className="companies-info ">

        <TitleSection title="Usuarios disponibles a personalizar" />

        <SearchBar onChange={handleSearch} />

        {loading ? (

          <LoaderContainer>

            <Spinner />

          </LoaderContainer>

        ) : (

          <ul className="companies-list mt-3">

            {users.length > 0 ? (

              users.map(

                ({ image, name, email, network, link_impersonate }, id) => (

                  <ProfileItem

                    isTopData

                    key={id}

                    image={image}

                    name={name}

                    email={email}

                    network={network}

                    link_impersonate={link_impersonate}

                  />

                )

              )

            ) : (

              <EmptySection

                align="left"

                message={labels.datatable_szerorecords}

              />

            )}

          </ul>

        )}

        <PaginationComponent

          pages={pages}

          currentActivePage={currentPage}

          onChangePage={fetchUsers}

          isRow

        />

      </Container>

    </>

  )

}

export default ImpersonatePage