Vamos começar fazendo o uso dos filtros que temos dentro de ComplementFilters

const ComplementFilters = () => {
  const [category, setCategory] = useState("");
  const queryContext = useContext(QueryContext);

Agora nós iremos criar os fields, para que a gente tenha a manipulação de valor do input

const [fields, setFields] = useState({
  minPrice: "",
  maxPrice: "",
});

E com isso feito, nós vamos criar as funções que vamos usar para colocar os filtros

const handleMinPrice = () => {
  queryContext.addFilter(`minPrice=${fields.minPrice}`);
};

const handleMaxPrice = () => {
  queryContext.addFilter(`maxPrice=${fields.maxPrice}`);
};

Ao ter feito isso nós podemos então criar a função que será chamada quando o usuário clicar em aplicar os filtros.

const handleSearchFiltered = () => {
  if (fields.minPrice) {
    handleMinPrice();
  }
  if (fields.maxPrice) {
    handleMaxPrice();
  }
};

E aí a gente fazendo isso vai conseguir verificar se está preenchido os fields, e caso não esteja, ele não vai chamar a função. Nós vamos também nessa função chamar o “showFilters” para que ao usar os filtros, ele ser fechado

Para isso precisamos passar o state para o componente

{!showFilters ? null : (
  <ComplementFilters setShowFilters={setShowFilters} />
)}

Vamos receber o state no componente para usarmos na função

interface Props {
  setShowFilters: React.Dispatch<SetStateAction<boolean>>;
}

const ComplementFilters = ({ setShowFilters }: Props) => {

E agora podemos deixar como falso para manipular o estado

const handleSearchFiltered = () => {
  if (fields.minPrice) {
    handleMinPrice();
  }
  if (fields.maxPrice) {
    handleMaxPrice();
  }

	setShowFilters(false);
};

Já que está tudo configurado, vamos usar ele agora, e poderemos testar ele colocando as informações de preço mínimo e máximo.

<ApllyButton onPress={handleSearchFiltered}>
	<ButtonText>APLICAR</ButtonText>
</ApllyButton>

Vamos aproveitar para colocar a função de limpar, para isso, iremos lá em search, e abaixo da função de addFilter, vamos colocar a função que deixa os filtros apenas com a query original

const resetFilter = () => {
	setFilters([query]);
};

const queryContextValue = {
	filters,
  addFilter,
  resetFilter,
};

Precisamos então, passar também esse resetFilter para o context, para que ele reconheça em qualquer lugar, vamos para queryContext

import React from "react";

interface QueryType {
  filters: string[];
  addFilter: (filter: string) => void;
  resetFilter: () => void;
}

export const QueryContext = React.createContext<QueryType>({
  filters: [],
  addFilter: () => {},
  resetFilter: () => {},
});

Agora, basta usarmos isso lá no nosso botão de limpar,

const handleCleanFilters = () => {
  queryContext.resetFilter();
  setShowFilters(false);
};

{/* Outros códigos */}

<CleanButton onPress={handleCleanFilters}>
	<ButtonText>LIMPAR</ButtonText>
</CleanButton>

Dessa forma, quando o usuário clicar em limpar os filtros, nós vamos fechar os filtros também e vamos limpar tudo na query