Añadir nuevo filtro de transacciones al backoffice

Sigue las indicaciones a continuación para poder añadir nuevos filtros a las transacciones en Backoffice.

Backend

Dirigirse a src/routes/transaction/getAllTransaction.js

1. Destructurar el filtro que enviarás por query desde el Backoffice. En este caso usamos de ejemplo newFfilter.
2. Dentro del objeto where: {} de la configuración del Transaction.findAll(), añadir el nuevo filtro de esta forma ...(newFilter && { newFilter }).

const {
    ...,
    // agregas esta nueva línea
    newFilter,
} = req.query;

const transactions = await Transaction.findAll({
      limit: LIMIT,
      offset: LIMIT * page,
      where: {
        ...,
        // agregas esta nueva línea
        ...(newFilter && { newFilter }),
      },
      order: [[hasIncident ? 'updatedAt' : 'createdAt', dateSortOrder]],
    });

Backoffice

Dirigirse a src/screens/Backoffice/transfers/index.js

Añadir el nuevo filtro en el useEffect de la siguiente forma:

const newFilter = searchParams.get('newFilter')
  ? Boolean(searchParams.get('newFilter'))
  : false;

useEffect(() => {
  ...
  // agregas esta nueva línea
  const newFilter = searchParams.get('newFilter')
    ? Boolean(searchParams.get('newFilter'))
    : false;
  const controller = new AbortController();
  const { signal } = controller;
  const fetchTransfers = async () => {
    const response = await getAllTransfers({
      ...,
      newFilter,
    });
    setTransfers(response);
    setLoader(false);
  };
  fetchTransfers();
  return () => {
    controller.abort();
  };
}, [page, isPro, updater, getAllTransfers, searchParams]);

Luego, añadir el objeto para el botón que controlará el filtro. Lo puede añadir dentro del array de tagItems o specialFilters. Al estar mappeados con JSX, el solo crear el objeto y introducirlo en el array, hará que se renderice el botón en pantalla.

{
    key: 'newFilter',
    name: 'New Filter',
    value: !Boolean(searchParams.get('newFilter')),
    color: 'bg-gray-400',
}

Después, dentro de la función handleFilter agregar lo siguiente dentro de la condición del if():

(key === 'newFilter' && Boolean(searchParams.get('newFilter'))) ||

const handleFilter = (key, value) => {
    const updatedSearchParams = new URLSearchParams(searchParams.toString());
    if (
    ... ||
    // agregas esta nueva línea
    (key === 'newFilter' && Boolean(searchParams.get('newFilter'))) ||
    ...
    ) {
    updatedSearchParams.delete(key);
    } else {
    updatedSearchParams.set(key, value);
    }
    updatedSearchParams.set('page', 0);
    setPage(0);
    setSearchParams(updatedSearchParams);
};

Finalmente, dirigirse al archivo src/services/index.js y en concreto, el servicio getAllTransfers() para añadir el soporte de enviar el nuevo filtro al backend.

getAllTransfers: useCallback(
    async ({
    ...,
    // agregas esta nueva línea
    newFilter,
    }) => {
    ...
    // agregas esta nueva línea
    if (newFilter) queryString += `&newFilter=${newFilter}`;
    const client = await axiosClient();
    return client
        .get(`/list-transactions?${queryString}`, {
        signal,
        })
        .then((res) => res.data);
    },
    [axiosClient],
),