1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
import React, { useContext } from 'react';
import { useHistory } from 'react-router-dom';
import _ from 'lodash';
import hooks from '../hooks/useAPIClient';
import useQuery from '../hooks/useQuery';
import ServiceContext, { Filter } from './ServiceContext';
import { SelectBase } from '../components/Select';
const getOptionLabel = (item: any, filter: Filter) => {
const value = _.get(item, filter.as || filter.key);
return filter.transform ? filter.transform(value) : value;
};
const ServiceFilters: React.FC = () => {
const service = useContext(ServiceContext);
const { query, setQuery } = useQuery();
const history = useHistory();
const { data } = hooks[service.route].useList('', { revalidateOnMount: !_.isEmpty(query) });
const filters = service.filters?.map(filter => {
const options = _
.uniqBy(data, filter.key)
.map((item: any) => ({
key: _.get(item, filter.key),
label: getOptionLabel(item, filter),
}));
// Add default option
options?.unshift({
key: '-',
label: filter.label,
});
const value = _.get(query, filter.key) || '-';
return { ...filter, options, value };
});
const handleFilterChange = (key: string) => (event: React.ChangeEvent<HTMLSelectElement>) => {
const { value } = event.target;
const updatedQuery = { ...query, [key]: value };
if (value === '-') delete updatedQuery[key];
setQuery(updatedQuery);
};
const resetFilters = () => history.push(service.route);
return (
<div className="mr-6 flex items-center">
{filters && !_.isEmpty(query) && (
<span
onClick={resetFilters}
role="presentation"
className="underline mr-2 cursor-pointer"
>
Сбросить фильтры
</span>
)}
{filters?.map(filter => (
<SelectBase
key={filter.key}
options={filter.options || []}
value={filter.value}
onChange={handleFilterChange(filter.key)}
/>
))}
</div>
);
};
export default ServiceFilters;
|
