Cache total in transactions in Redux as heavy request

Author: gabriel-hahn

app/src/interfaces/transaction.ts

@@ -16,8 +16,9 @@ export interface TransactionsActionsInterface {
     transactions: TransactionInterface[],
     transaction?: TransactionInterface,
     dateRange?: TransactionsRangeDateInterface,
-    error?: string,
     range?: TransactionsRangeDateInterface,
+    total?: number,
+    error?: string,
   },
 }
 
@@ -48,6 +49,7 @@ export interface TransactionLoading {
 export interface TransactionStateInterface {
   transactionSelected?: TransactionInterface | null,
   currentDateRange?: TransactionsRangeDateInterface | null,
+  totalAllTransactions: number | null,
   data: TransactionInterface[];
   loading: TransactionLoading;
   modalOpen: boolean;

app/src/pages/Dashboard/Overview/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import api from '../../../services/api';
 
 import { StoreInterface } from '../../../interfaces/store';
@@ -8,6 +8,7 @@ import { globalVariables } from '../../../styles/variables';
 import Amount from '../../../components/Amount';
 import TransactionTable from '../../../components/TransactionTable';
 
+import { Creators as TransactionsActions } from '../../../store/ducks/transactions';
 import { Container, AmountContainer, TransactionsContainer } from './styles';
 import { TransactionInterface, TransactionType } from '../../../interfaces/transaction';
 
@@ -20,6 +21,7 @@ const Overview = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [totalLoading, setTotalLoading] = useState<boolean>(true);
   const [totalTransactions, setTotalTransactions] = useState<number>(0);
+  const dispatch = useDispatch();
 
   const transactions = useSelector((state: StoreInterface) => state.transactions);
 
@@ -34,9 +36,17 @@ const Overview = () => {
   const currentBalance = memoizedTotalCredit - memoizedTotalDebit;
 
   const handleTransactionsTotalRequest = async () => {
+    if (transactions.totalAllTransactions) {
+      setTotalTransactions(transactions.totalAllTransactions);
+      setTotalLoading(false);
+
+      return;
+    }
+
     const { data } = await api.get<TotalTransactionInterface>('/transactions/completeCashFlow');
     const balance = data.credit - data.debit;
 
+    dispatch(TransactionsActions.addTotalTransactions(balance));
     setTotalTransactions(balance);
     setTotalLoading(false);
   };

app/src/store/ducks/transactions.ts

@@ -17,6 +17,8 @@ export const Types = {
   UPDATE_TRANSACTION_SUCCESS: '@transaction/UPDATE_TRANSACTION_SUCCESS',
   TRANSACTIONS_ERROR: '@transaction/TRANSACTIONS_ERROR',
   TRANSACTION_MODAL_TOGGLE: '@transaction/TRANSACTION_MODAL_TOGGLE',
+  ADD_TOTAL_TRANSACTIONS: '@transaction/ADD_TOTAL_TRANSACTIONS',
+  CLEAR_TOTAL_TRANSACTIONS: '@transaction/CLEAR_TOTAL_TRANSACTIONS',
 };
 
 export const LOADING_DEFAULT: TransactionLoading = {
@@ -29,6 +31,7 @@ export const LOADING_DEFAULT: TransactionLoading = {
 const INITIAL_STATE: TransactionStateInterface = {
   data: [],
   error: null,
+  totalAllTransactions: null,
   currentDateRange: null,
   transactionSelected: null,
   loading: LOADING_DEFAULT,
@@ -39,6 +42,10 @@ export default function Transactions(state = INITIAL_STATE, action: Transactions
   const { payload } = action;
 
   switch (action.type) {
+    case Types.ADD_TOTAL_TRANSACTIONS:
+      return { ...state, totalAllTransactions: payload.total };
+    case Types.CLEAR_TOTAL_TRANSACTIONS:
+      return { ...state, totalAllTransactions: null };
     case Types.GET_TRANSACTIONS_REQUEST:
       return {
         ...state,
@@ -65,12 +72,14 @@ export default function Transactions(state = INITIAL_STATE, action: Transactions
         error: null,
         loading: { ...state.loading, addLoading: false },
         data: [payload.transaction, ...state.data],
+        totalAllTransactions: null,
       };
     case Types.UPDATE_TRANSACTION_SUCCESS:
       return {
         ...state,
         error: null,
         transactionSelected: null,
+        totalAllTransactions: null,
         loading: { ...state.loading, editLoading: false },
         data: state.data.map(item => (
           payload.transaction && item.id === payload.transaction.id
@@ -80,6 +89,7 @@ export default function Transactions(state = INITIAL_STATE, action: Transactions
     case Types.DELETE_TRANSACTION_SUCCESS:
       return {
         ...state,
+        totalAllTransactions: null,
         loading: { ...state.loading, deleteLoading: false },
         data: state.data.filter(item => payload.transaction && item.id !== payload.transaction.id),
       };
@@ -134,4 +144,11 @@ export const Creators = {
     type: Types.TRANSACTION_MODAL_TOGGLE,
     payload: { transaction },
   }),
+  addTotalTransactions: (total: number) => ({
+    type: Types.ADD_TOTAL_TRANSACTIONS,
+    payload: { total },
+  }),
+  clearTotalTransactions: () => ({
+    type: Types.CLEAR_TOTAL_TRANSACTIONS,
+  }),
 };