Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 4x 12x 12x 12x 4x 4x 12x 3x 12x 4x 12x 5x 5x 5x 5x 5x 12x 11x | import { events } from 'app';
import { useEffect, useState } from 'react';
import { Events } from 'types';
import * as S from './styles';
const RelationsListFilter = () => {
const [options, setOptions] = useState<string[]>([]);
const [selected, setSelected] = useState('');
const handleSelect = (option: string) => () => {
const value = option === selected ? '' : option;
events.relations.filter(value);
};
const handleSetOptions = (event: CustomEvent<string[]>) =>
setOptions(event.detail);
const handleSetSeleted = (event: CustomEvent<string>) =>
setSelected(event.detail);
useEffect(() => {
events.on(Events.RELATIONS_FILTER_OPTIONS, handleSetOptions);
events.on(Events.RELATIONS_FILTER, handleSetSeleted);
return () => {
events.off(Events.RELATIONS_FILTER_OPTIONS, handleSetOptions);
events.off(Events.RELATIONS_FILTER, handleSetSeleted);
};
}, []);
return options.length ? (
<S.Container>
<S.Label>Filter by</S.Label>
<S.Content>
{options.map(option => (
<S.Option
selected={option === selected}
onClick={handleSelect(option)}
key={option}
>
{option}
</S.Option>
))}
</S.Content>
</S.Container>
) : null;
};
export { RelationsListFilter };
|