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 from 'react';
 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
 2 
import { useSelector } from 'react-redux';
3 
import { useLocation } from 'react-router-dom';
 3 
import { useLocation } from 'react-router-dom';
4 
import Search from '@mui/icons-material/Search';
 4 
import Search from '@mui/icons-material/Search';
5 
import { Grid } from '@mui/material';
 5 
import { Grid } from '@mui/material';
6 
 
 6 
 
7 
import { debounce } from '@utils';
 7 
import { debounce } from '@utils';
8 
import { useFetch, useSearchQuery } from '@hooks';
 8 
import { useFetch, useSearchQuery } from '@hooks';
9 
 
 9 
 
10 
import Input from '@components/UI/inputs/Input';
 10 
import Input from '@components/UI/inputs/Input';
11 
import Spinner from '@components/UI/Spinner';
 11 
import Spinner from '@components/UI/Spinner';
12 
import Pagination from '@components/common/Pagination';
 12 
import Pagination from '@components/common/Pagination';
13 
import SearchList from '@components/search/SearchList';
 13 
import SearchList from '@components/search/SearchList';
14 
import SearchFilters from '@components/search/SearchFilters';
 14 
import SearchFilters from '@components/search/SearchFilters';
15 
 
 15 
 
16 
const SearchPage = () => {
 16 
const SearchPage = () => {
17 
  const { search, pathname } = useLocation();
 17 
  const { search, pathname } = useLocation();
18 
  const labels = useSelector(({ intl }) => intl.labels);
 18 
  const labels = useSelector(({ intl }) => intl.labels);
19 
 
 19 
 
20 
  const { isLoading, data } = useFetch(pathname + search, {
 20 
  const { isLoading, data } = useFetch(pathname + search, {
21 
    current: { items: [] },
 21 
    current: { items: [] },
22 
    total: {
 22 
    total: {
23 
      pages: 1
 23 
      pages: 1
24 
    }
 24 
    }
25 
  });
 25 
  });
26 
 
 26 
 
27 
  const { setParam, getParam } = useSearchQuery();
 27 
  const { setParam, getParam } = useSearchQuery();
28 
 
 28 
 
29 
  const handleSearch = debounce((e) => setParam('keyword', e.target.value));
 29 
  const handleSearch = debounce((e) => setParam('keyword', e.target.value));
30 
 
 30 
 
31 
  return (
 31 
  return (
32 
    <>
 32 
    <>
33 
      <Input
 33 
      <Input
34 
        icon={<Search />}
 34 
        icon={<Search />}
35 
        variant='search'
 35 
        variant='search'
36 
        onChange={handleSearch}
 36 
        onChange={handleSearch}
37 
        placeholder={labels.search}
 37 
        placeholder={labels.search}
38 
        defaultValue={getParam('keyword')}
 38 
        defaultValue={getParam('keyword')}
39 
      />
 39 
      />
40 
 
 40 
 
41 
      <Grid container spacing={1}>
 41 
      <Grid container spacing={1}>
42 
        <Grid item xs={12} md={4} display='flex' direction='column' gap={1}>
 42 
        <Grid size={{ xs: 12, md: 4 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
43 
          <SearchFilters />
 43 
          <SearchFilters />
44 
        </Grid>
 44 
        </Grid>
45 
 
 45 
 
46 
        <Grid item xs={12} md={8} display='flex' direction='column' gap={1}>
 46 
        <Grid size={{ xs: 12, md: 8 }} sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
47 
          {isLoading ? (
 47 
          {isLoading ? (
48 
            <Spinner />
 48 
            <Spinner />
49 
          ) : (
 49 
          ) : (
50 
            <>
 50 
            <>
51 
              <SearchList items={data.current.items} />
 51 
              <SearchList items={data.current.items} />
52 
              <Pagination
 52 
              <Pagination
53 
                page={data.current?.page}
 53 
                page={data.current?.page}
54 
                pages={data.total.pages}
 54 
                pages={data.total.pages}
55 
                onChange={(page) => setParam('page', page)}
 55 
                onChange={(page) => setParam('page', page)}
56 
              />
 56 
              />
57 
            </>
 57 
            </>
58 
          )}
 58 
          )}
59 
        </Grid>
 59 
        </Grid>
60 
      </Grid>
 60 
      </Grid>
61 
    </>
 61 
    </>
62 
  );
 62 
  );
63 
};
 63 
};
64 
 
 64 
 
65 
export default SearchPage;
 65 
export default SearchPage;