Para a categoria, nós vamos criar a sua função, e chamar ela no handle, que nem fizemos com os outros, só que não precisamos dela como field.
const handleCategory = () => {
queryContext.addFilter(`category=${category}`);
};
const handleSearchFiltered = () => {
if (fields.minPrice) {
handleMinPrice();
}
if (fields.maxPrice) {
handleMaxPrice();
}
if (category) {
handleCategory();
}
setShowFilters(false);
};
Com isso feito, criamos o filtro de categoria tranquilamente. Vamos criar agora o de endereço, nele, nós iremos criar o field, e aí podemos criar aqui também a função certinha
const ComplementFilters = ({ setShowFilters }: Props) => {
const [category, setCategory] = useState("");
const queryContext = useContext(QueryContext);
const [fields, setFields] = useState({
minPrice: "",
maxPrice: "",
address: "",
});
const handleMinPrice = () => {
queryContext.addFilter(`minPrice=${fields.minPrice}`);
};
const handleMaxPrice = () => {
queryContext.addFilter(`maxPrice=${fields.maxPrice}`);
};
const handleCategory = () => {
queryContext.addFilter(`category=${category}`);
};
const handleAddress = () => {
queryContext.addFilter(`location=${fields.address}`);
};
const handleSearchFiltered = () => {
if (fields.minPrice) {
handleMinPrice();
}
if (fields.maxPrice) {
handleMaxPrice();
}
if (category) {
handleCategory();
}
if (fields.address) {
handleAddress();
}
setShowFilters(false);
};
Agora, basta a gente colocar o field dentro do campo nos filtros, e vamos aproveitar para modificar e colocar apenas um por vez, para que a pesquisa aconteça corretamente
<LocationInputContainer>
<Input
placeholder="Bairro, Cidade e/ou Estado (Apenas um por vez)"
placeholderTextColor="white"
value={fields.address}
onChangeText={(val) => {
setFields({
...fields,
address: val,
});
}}
/>
</LocationInputContainer>
Dessa forma, nós podemos agora pesquisar com todos os filtros e vamos poder agora pesquisar e limpar de acordo com o que precisarmos