Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3694 Rev 3719
Línea 1... Línea 1...
1
import React, { useState } from 'react';
1
import React from 'react';
2
import Search from '@mui/icons-material/Search';
2
import Search from '@mui/icons-material/Search';
3
import { Box, styled } from '@mui/material';
-
 
4
import { useSelector } from 'react-redux';
3
import { useSelector } from 'react-redux';
5
 
4
 
6
import { debounce } from '@utils';
5
import { debounce } from '@utils';
7
import { useFetch, useSearchQuery } from '@hooks';
6
import { useFetch, useSearchQuery } from '@hooks';
8
 
7
 
9
import Input from '@components/UI/inputs/Input';
8
import Input from '@components/UI/inputs/Input';
10
import TitleSection from '@components/UI/TitleSection';
9
import TitleSection from '@components/UI/TitleSection';
11
import Pagination from '@components/common/Pagination';
10
import Pagination from '@components/common/Pagination';
12
import PeopleYouMayKnowList from '@components/connections/PeopleYouMayKnowList';
11
import PeopleYouMayKnowList from '@components/connections/PeopleYouMayKnowList';
13
 
12
 
14
const PeopleYouMayKnowPage = () => {
13
const PeopleYouMayKnowPage = () => {
15
  const labels = useSelector(({ intl }) => intl.labels);
14
  const labels = useSelector(({ intl }) => intl.labels);
16
 
15
 
17
  const { getStringParams, setParam } = useSearchQuery();
16
  const { getStringParams, setParam } = useSearchQuery();
18
  const { data, isLoading, refetch } = useFetch(
17
  const { data, isLoading, refetch } = useFetch(
19
    '/connection/people-you-may-know' + getStringParams()
18
    '/connection/people-you-may-know' + getStringParams()
20
  );
19
  );
21
 
20
 
22
  const handleSearch = debounce((e) => setParam('search', e.target.value));
21
  const handleSearch = debounce((e) => setParam('search', e.target.value));
23
 
22
 
24
  return (
23
  return (
25
    <>
24
    <>
26
      <TitleSection title={labels.people_you_may_know} />
25
      <TitleSection title={labels.people_you_may_know} />
27
      <Input icon={<Search />} onChange={handleSearch} variant='search' />
26
      <Input icon={<Search />} onChange={handleSearch} variant='search' />
28
      <PeopleYouMayKnowList
27
      <PeopleYouMayKnowList
29
        connections={data.current?.items}
28
        connections={data.current?.items}
30
        loading={isLoading}
29
        loading={isLoading}
31
        onComplete={refetch}
30
        onComplete={refetch}
32
      />
31
      />
33
 
32
 
34
      <Pagination
33
      <Pagination
35
        pages={data.total?.pages}
34
        pages={data.total?.pages}
36
        page={data.current?.page}
35
        page={data.current?.page}
37
        onChange={(page) => setParam('page', page)}
36
        onChange={(page) => setParam('page', page)}
38
      />
37
      />
39
    </>
38
    </>
40
  );
39
  );
41
};
40
};
42
 
41
 
43
export default PeopleYouMayKnowPage;
42
export default PeopleYouMayKnowPage;