SDP-786: State refactor: statistics (#25)

* State refactor: statistics

* Keep 5 min token check

src/apiQueries/useStatistics.ts

@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/react-query";
+import { API_URL } from "constants/settings";
+import { fetchApi } from "helpers/fetchApi";
+import { formatStatistics } from "helpers/formatStatistics";
+import { ApiStatistics, AppError } from "types";
+
+export const useStatistics = (isAuthenticated: boolean) => {
+  const query = useQuery<ApiStatistics, AppError>({
+    queryKey: ["statistics"],
+    queryFn: async () => {
+      return await fetchApi(`${API_URL}/statistics`);
+    },
+    enabled: Boolean(isAuthenticated),
+  });
+
+  return {
+    ...query,
+    data: query.data ? formatStatistics(query.data) : undefined,
+  };
+};

src/components/DashboardAnalytics.tsx

@@ -1,24 +1,21 @@
-import { useEffect } from "react";
-import { useDispatch } from "react-redux";
 import { Card, Notification } from "@stellar/design-system";
 import { InfoTooltip } from "components/InfoTooltip";
 import { AssetAmount } from "components/AssetAmount";
 
+import { useStatistics } from "apiQueries/useStatistics";
 import { percent } from "helpers/formatIntlNumber";
 import { renderNumberOrDash } from "helpers/renderNumberOrDash";
 import { useRedux } from "hooks/useRedux";
-import {
-  clearStatisticsAction,
-  getStatisticsAction,
-} from "store/ducks/statistics";
-import { AppDispatch } from "store";
 
 export const DashboardAnalytics = () => {
-  const { statistics, userAccount } = useRedux("statistics", "userAccount");
-  const { stats } = statistics;
-  const dispatch: AppDispatch = useDispatch();
+  const { userAccount } = useRedux("userAccount");
 
-  const apiErrorStats = statistics.status === "ERROR" && statistics.errorString;
+  const {
+    data: stats,
+    error,
+    isLoading,
+    isFetching,
+  } = useStatistics(userAccount.isAuthenticated);
 
   const calculateRate = () => {
     if (stats?.paymentsSuccessfulCounts && stats?.paymentsTotalCount) {
@@ -28,24 +25,22 @@ export const DashboardAnalytics = () => {
     return 0;
   };
 
-  useEffect(() => {
-    if (userAccount.isAuthenticated) {
-      dispatch(getStatisticsAction());
-    }
-
-    return () => {
-      dispatch(clearStatisticsAction());
-    };
-  }, [dispatch, userAccount.isAuthenticated]);
-
-  if (apiErrorStats) {
+  if (error) {
     return (
       <Notification variant="error" title="Error">
-        {apiErrorStats}
+        {error.message}
       </Notification>
     );
   }
 
+  if (isLoading || isFetching) {
+    return (
+      <div className="StatCards StatCards--home">
+        <div className="Note">Loading…</div>
+      </div>
+    );
+  }
+
   return (
     <div className="StatCards StatCards--home">
       {/* TODO: add disbursement volume chart */}
@@ -122,7 +117,10 @@ export const DashboardAnalytics = () => {
               {stats?.assets.map((a) => (
                 <div className="StatCards__card--flexCols" key={a.assetCode}>
                   <div>
-                    <AssetAmount amount={a.success || "0"} assetCode={a.assetCode} />
+                    <AssetAmount
+                      amount={a.success || "0"}
+                      assetCode={a.assetCode}
+                    />
                   </div>
                   <div>
                     <AssetAmount amount={a.average} assetCode={a.assetCode} />

src/helpers/fetchApi.ts

@@ -35,6 +35,7 @@ export const fetchApi = async (
       sessionExpired();
     } else if (minRemaining < 5) {
       token = await refreshToken(token);
+      localStorageSessionToken.set(token);
     }
 
     config.headers = {

src/helpers/formatStatistics.ts

@@ -0,0 +1,21 @@
+import { ApiStatistics, HomeStatistics } from "types";
+
+export const formatStatistics = (statistics: ApiStatistics): HomeStatistics => {
+  return {
+    paymentsSuccessfulCounts: statistics.payment_counters.success,
+    paymentsFailedCount: statistics.payment_counters.failed,
+    paymentsRemainingCount: Number(
+      statistics.payment_counters.total -
+        statistics.payment_counters.success -
+        statistics.payment_counters.failed,
+    ),
+    paymentsTotalCount: statistics.payment_counters.total,
+    walletsTotalCount: statistics.receiver_wallets_counters.total,
+    individualsTotalCount: statistics.total_receivers,
+    assets: statistics.payment_amounts_by_asset.map((a) => ({
+      assetCode: a.asset_code,
+      success: a.payment_amounts.success.toString(),
+      average: a.payment_amounts.average.toString(),
+    })),
+  };
+};

src/store/index.ts

@@ -19,7 +19,6 @@ import { reducer as organization } from "store/ducks/organization";
 import { reducer as profile } from "store/ducks/profile";
 import { reducer as receiverDetails } from "store/ducks/receiverDetails";
 import { reducer as receiverPayments } from "store/ducks/receiverPayments";
-import { reducer as statistics } from "store/ducks/statistics";
 import { reducer as userAccount } from "store/ducks/userAccount";
 import { reducer as users } from "store/ducks/users";
 import { reducer as wallets } from "store/ducks/wallets";
@@ -49,7 +48,6 @@ const reducers = combineReducers({
   profile,
   receiverDetails,
   receiverPayments,
-  statistics,
   userAccount,
   users,
   wallets,

src/types/index.ts

@@ -114,12 +114,6 @@ export type ForgotPasswordInitialState = {
   errorExtras?: AnyObject;
 };
 
-export type StatisticsInitialState = {
-  stats: HomeStatistics | undefined;
-  status: ActionStatus | undefined;
-  errorString?: string;
-};
-
 export type ReceiverDetailsInitialState = {
   id: string;
   phoneNumber: string;
@@ -207,7 +201,6 @@ export interface Store {
   profile: ProfileInitialState;
   receiverDetails: ReceiverDetailsInitialState;
   receiverPayments: ReceiverPaymentsInitialState;
-  statistics: StatisticsInitialState;
   userAccount: UserAccountInitialState;
   users: UsersInitialState;
   wallets: WalletsInitialState;