Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3416 Rev 3432
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";
 4 
import { Search } from '@mui/icons-material'
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'
Línea 15... Línea 15...
15 
 
 15 
 
16 
const SearchPage = () => {
 16 
const SearchPage = () => {
17 
  const { search, pathname } = useLocation();
 17 
  const { search, pathname } = useLocation()
Línea 18... Línea 18...
18 
  const labels = useSelector(({ intl }) => intl.labels);
 18 
  const labels = useSelector(({ intl }) => intl.labels)
19 
 
 19 
 
20 
  const { loading, 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
Línea 24... Línea 24...
24 
    },
 24 
    }
Línea 25... Línea 25...
25 
  });
 25 
  })
Línea 26... Línea 26...
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 />}
Línea 35... Línea 35...
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')}
Línea 39... Línea 39...
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 item xs={12} md={4} display='flex' direction='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 item xs={12} md={8} display='flex' direction='column' gap={1}>
47 
          {loading ? (
 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 
              />
Línea 57... Línea 57...
57 
            </>
 57 
            </>