Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1617 | Rev 1620 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1617 Rev 1619
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react'
 1 
import React from 'react'
2 
import { axios, debounce, jsonToParams } from '../../utils'
 2 
import { debounce } from '../../utils'
3 
import { Container } from '@mui/material'
 3 
import { Container } from '@mui/material'
4 
import { useSelector } from 'react-redux'
 4 
import { useSelector } from 'react-redux'
Línea 5... Línea 5...
5 
 
 5 
 
6 
import Spinner from '../../components/UI/Spinner'
 6 
import Spinner from '../../components/UI/Spinner'
7 
import SearchBar from '../../components/UI/SearchBar'
 7 
import SearchBar from '../../components/UI/SearchBar'
8 
import ProfileItem from '../../components/profile/ProfileItem'
 8 
import ProfileItem from '../../components/profile/ProfileItem'
9 
import EmptySection from '../../components/UI/EmptySection'
 9 
import EmptySection from '../../components/UI/EmptySection'
10 
import TitleSection from '../../components/UI/TitleSection'
 10 
import TitleSection from '../../components/UI/TitleSection'
11 
import LoaderContainer from '../../components/UI/LoaderContainer'
 11 
import LoaderContainer from '../../components/UI/LoaderContainer'
- 
 
 12 
import PaginationComponent from '../../components/UI/PaginationComponent'
- 
 
 13 
import useSearchParams from '@app/hooks/useSearchParams'
Línea 12... Línea 14...
12 
import PaginationComponent from '../../components/UI/PaginationComponent'
 14 
import useFetch from '@app/hooks/useFetch'
13 
 
 - 
 
14 
const ImpersonatePage = () => {
 15 
 
15 
  const [users, setUsers] = useState([])
 - 
 
16 
  const [search, setSearch] = useState('')
 - 
 
17 
  const [currentPage, setCurrentPage] = useState(1)
 16 
const ImpersonatePage = () => {
18 
  const [pages, setPages] = useState(1)
 17 
  const { setParams, params } = useSearchParams()
Línea 19... Línea 18...
19 
  const [loading, setLoading] = useState(false)
 18 
  const { data, isLoading } = useFetch(`/impersonate`, {}, params)
Línea 20... Línea 19...
20 
  const labels = useSelector(({ intl }) => intl.labels)
 19 
  const labels = useSelector(({ intl }) => intl.labels)
21 
 
 20 
 
- 
 
 21 
  const handleSearch = debounce((value) => setParams('keyword', value), 500)
Línea 22... Línea -...
22 
  const handleSearch = debounce((value) => setSearch(value), 500)
 - 
 
23 
 
 - 
 
24 
  const fetchUsers = async (page = 1, keyword = '') => {
 - 
 
25 
    setLoading(true)
 - 
 
26 
 
 - 
 
27 
    setCurrentPage(page)
 - 
 
28 
    const urlParams = {
 - 
 
29 
      page,
 - 
 
30 
      keyword
 - 
 
31 
    }
 - 
 
32 
 
 - 
 
33 
    await axios
 - 
 
34 
      .get(`/impersonate?${jsonToParams(urlParams)}`)
 - 
 
35 
      .then((response) => {
 - 
 
36 
        const { success, data } = response.data
 - 
 
37 
        if (success) {
 - 
 
38 
          setUsers(data.current.items)
 - 
 
39 
          setPages(data.total.pages)
 - 
 
40 
        }
 - 
 
41 
      })
 22 
 
42 
    setLoading(false)
 - 
 
Línea 43... Línea -...
43 
  }
 - 
 
44 
 
 - 
 
45 
  useEffect(() => {
 - 
 
46 
    fetchUsers(currentPage, search)
 - 
 
47 
  }, [currentPage, search])
 - 
 
48 
 
 23 
  return (
49 
  return (
 24 
    <Container>
50 
    <>
 25 
      <TitleSection title='Usuarios disponibles a personalizar' />
51 
      <Container component='main' className='companies-info '>
 26 
 
52 
        <TitleSection title='Usuarios disponibles a personalizar' />
 27 
      <SearchBar onChange={handleSearch} />
53 
        <SearchBar onChange={handleSearch} />
 28 
 
54 
        {loading ? (
 29 
      {isLoading ? (
55 
          <LoaderContainer>
 30 
        <LoaderContainer>
56 
            <Spinner />
 31 
          <Spinner />
57 
          </LoaderContainer>
 32 
        </LoaderContainer>
58 
        ) : (
 33 
      ) : (
59 
          <ul className='companies-list mt-3'>
 34 
        <ul className='companies-list mt-3'>
60 
            {users.length > 0 ? (
 35 
          {data.current.items.length > 0 ? (
61 
              users.map(
 36 
            data.current.items.map(
62 
                ({ image, name, email, network, link_impersonate }, id) => (
 37 
              ({ image, name, email, network, link_impersonate }, id) => (
63 
                  <ProfileItem
 38 
                <ProfileItem
64 
                    isTopData
 39 
                  isTopData
65 
                    key={id}
 40 
                  key={id}
66 
                    image={image}
 - 
 
67 
                    name={name}
 41 
                  image={image}
- 
 
 42 
                  name={name}
68 
                    email={email}
 43 
                  email={email}
69 
                    network={network}
 44 
                  network={network}
70 
                    link_impersonate={link_impersonate}
 45 
                  link_impersonate={link_impersonate}
71 
                  />
 46 
                />
72 
                )
 47 
              )
73 
              )
 48 
            )
74 
            ) : (
 49 
          ) : (
75 
              <EmptySection
 50 
            <EmptySection
76 
                align='left'
 51 
              align='left'
77 
                message={labels.datatable_szerorecords}
 52 
              message={labels.datatable_szerorecords}
78 
              />
 53 
            />
79 
            )}
 54 
          )}
80 
          </ul>
 55 
        </ul>
81 
        )}
 56 
      )}
82 
        <PaginationComponent
 57 
      <PaginationComponent
83 
          pages={pages}
 - 
 
84 
          currentActivePage={currentPage}
 58 
        pages={data.total.pages}
85 
          onChangePage={fetchUsers}
 59 
        currentActivePage={data.current.page}
Línea 86... Línea 60...
86 
          isRow
 60 
        onChangePage={(newPage) => setParams('page', newPage)}