Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 stevensc 1 
import React, { useState } from 'react';
2 
import { useNavigate } from 'react-router-dom';
3 
import Add from '@mui/icons-material/Add';
4 
import Remove from '@mui/icons-material/Remove';
5 
import { FormControlLabel, IconButton, Radio, RadioGroup, styled, Typography } from '@mui/material';
6 
 
7 
import { useSearchQuery } from '@hooks';
8 
 
9 
import Widget from '@components/UI/Widget';
10 
import UbicationInput from '@components/UI/inputs/UbicationInput';
11 
 
12 
const FiltersHeader = styled('div')(({ theme }) => ({
13 
  display: 'flex',
14 
  alignItems: 'center',
15 
  gap: theme.spacing(0.5),
16 
  [theme.breakpoints.up('md')]: {
17 
    '& button': {
18 
      display: 'none'
19 
    }
20 
  }
21 
}));
22 
 
23 
const CATEGORIES = [
24 
  {
25 
    label: 'Personas',
26 
    value: 'user'
27 
  },
28 
  {
29 
    label: 'Trabajos',
30 
    value: 'job'
31 
  },
32 
  {
33 
    label: 'Empresas',
34 
    value: 'company'
35 
  },
36 
  {
37 
    label: 'Grupos',
38 
    value: 'group'
39 
  }
40 
];
41 
 
42 
export default function SearchFilters({ allowSearchCompany = false }) {
43 
  const [show, setShow] = useState(true);
44 
  const navigate = useNavigate();
45 
 
46 
  const { getStringParams, setParam, getParam } = useSearchQuery();
47 
 
48 
  const handleCategoryChange = (event) => {
49 
    const category = event.target.value;
50 
    navigate(`/search/entity/${category}` + getStringParams());
51 
  };
52 
 
53 
  const onChangeAddress = (address = {}) => {
54 
    Object.entries(address).forEach(([key, value]) => setParam(key, value));
55 
  };
56 
 
57 
  const toggleShow = () => setShow(!show);
58 
 
59 
  return (
60 
    <>
61 
      <FiltersHeader>
62 
        <Typography variant='h2'>Filtros</Typography>
63 
 
64 
        <IconButton onClick={toggleShow}>{show ? <Remove /> : <Add />}</IconButton>
65 
      </FiltersHeader>
66 
 
67 
      {show && (
68 
        <>
69 
          <Widget>
70 
            <Widget.Header title='Buscar por' />
71 
            <Widget.Body>
72 
              <RadioGroup name='category' onChange={handleCategoryChange}>
73 
                {CATEGORIES.map(({ label, value }) => {
74 
                  if (['company', 'job'].includes(value) && !allowSearchCompany) {
75 
                    return null;
76 
                  }
77 
 
78 
                  return (
79 
                    <FormControlLabel key={value} value={value} control={<Radio />} label={label} />
80 
                  );
81 
                })}
82 
              </RadioGroup>
83 
            </Widget.Body>
84 
          </Widget>
85 
 
86 
          <Widget>
87 
            <Widget.Header title='Ubicación' />
88 
 
89 
            <Widget.Body>
90 
              <UbicationInput
91 
                settedQuery={getParam('formatted_address')}
92 
                onGetAddress={onChangeAddress}
93 
                placeholder='Buscar un lugar'
94 
              />
95 
            </Widget.Body>
96 
          </Widget>
97 
        </>
98 
      )}
99 
    </>
100 
  );
101 
}