This describes the transactionService and viewTransactions for paginated transactions.

gistfile1.txt

export const getAllTransactions = async (params) => {
  const token = selectToken;

  return await axiosWithAuth(token)
    .get("/treasury/transactions?include=source,beneficiary,bank", { params })
    .catch(function (error) {
      if (error.response.status === 401) {
        logout();
      }
    });
};

The above code refers to the handler and uses params. 

  const queryPage = useLocation().search.match(/page=([0-9]+)/, "");
  const currentPage = Number(queryPage && queryPage[1] ? queryPage[1] : 1);
  const [page, setPage] = useState(currentPage);

the above snippet, manages the state of the page and tracks whenever a new page is clicked. 

  const getRequestParams = (page) => {
    let params = {};

    if (page) {
      params[`page[number]`] = page - 0;
    }

    return params;
  };

The above function popilates the params. 

  useEffect(() => {
    const retrieveTransactions = async () => {
      const params = getRequestParams(page);
      set_showOverlay(true);
      set_loading(true);
      await TransactionDataService.getAllTransactions(params)
        .then((response) => {
          set_pages(response.data.data.transactions.meta.last_page);
          set_transactions(response.data.data.transactions.data);
        })
        .finally(function () {
          set_showOverlay(false);
          set_loading(false);
        })
        .catch((e) => {
          console.log(e);
        });
    };

    retrieveTransactions();
  }, [page]);

This useEffect is used to fire the getAllTransactions on every page change