feat: cashflow account transactions infinity scroll loading.

src/hooks/query/cashflowAccounts.js

@@ -1,10 +1,12 @@
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient, useInfiniteQuery } from 'react-query';
 import { useRequestQuery } from '../useQueryRequest';
 import useApiRequest from '../useRequest';
 import t from './types';
 
 const commonInvalidateQueries = (queryClient) => {
-  // queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  // Invalidate accounts.
+  queryClient.invalidateQueries(t.ACCOUNTS);
+  queryClient.invalidateQueries(t.ACCOUNT);
   queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTION);
 };
 
@@ -22,13 +24,14 @@ export function useCashflowAccounts(query, props) {
     },
   );
 }
+
 /**
  * Retrieve account transactions list.
  */
 export function useCashflowTransactions(id, props) {
   return useRequestQuery(
     [t.CASH_FLOW_TRANSACTIONS, id],
-    { method: 'get', url: `cashflow/account/${1000}/transactions` },
+    { method: 'get', url: `cashflow/account/${id}/transactions` },
     {
       select: (res) => res.data.cashflow_transactions,
       defaultData: [],
@@ -73,3 +76,42 @@ export function useDeleteCashflowTransaction(props) {
     ...props,
   });
 }
+
+/**
+ * Retrieve account transactions infinity scrolling.
+ * @param {number} accountId
+ * @param {*} axios
+ * @returns
+ */
+export function useAccountTransactionsInfinity(
+  accountId,
+  query,
+  axios,
+  infinityProps,
+) {
+  const apiRequest = useApiRequest();
+
+  return useInfiniteQuery(
+    ['CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY', accountId],
+    async ({ pageParam = 1 }) => {
+      const response = await apiRequest.http({
+        ...axios,
+        method: 'get',
+        url: `/api/cashflow/account/${accountId}/transactions`,
+        params: { page: pageParam, ...query },
+      });
+      return response.data;
+    },
+    {
+      getPreviousPageParam: (firstPage) => firstPage.pagination.page - 1,
+      getNextPageParam: (lastPage) => {
+        const { pagination } = lastPage;
+
+        return pagination.total > pagination.page_size * pagination.page
+          ? lastPage.pagination.page + 1
+          : undefined;
+      },
+      ...infinityProps,
+    },
+  );
+}

src/hooks/utils/index.js

@@ -6,4 +6,5 @@ export * from './useUpdateEffect';
 export * from './useWatch';
 export * from './useWhen';
 export * from './useRequestPdf';
-export * from './useAsync';
+export * from './useAsync';
+export * from './useIntersectionObserver';

src/hooks/utils/useIntersectionObserver.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+export function useIntersectionObserver({
+  root,
+  target,
+  onIntersect,
+  threshold = 1.0,
+  rootMargin = '0px',
+  enabled = true,
+}) {
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) =>
+        entries.forEach((entry) => entry.isIntersecting && onIntersect()),
+      {
+        root: root && root.current,
+        rootMargin,
+        // threshold,
+        threshold: 0.25,
+      },
+    );
+    const el = target && target.current;
+
+    if (!el) {
+      return;
+    }
+    observer.observe(el);
+
+    return () => {
+      observer.unobserve(el);
+    };
+  }, [target.current, enabled, onIntersect, root]);
+}