TW-1599 Refactoring according to comments

madfish-solutions · Dec 16, 2024 · 7730a79 · 7730a79
1 parent cd32a93
commit 7730a79
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 20 deletions.
diff --git a/src/app/pages/Rewards/index.tsx b/src/app/pages/Rewards/index.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import { capitalize, range } from 'lodash';
 import { useDispatch } from 'react-redux';
@@ -25,18 +25,31 @@ export const RewardsPage = memo(() => {
   const midnightTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const rpForTodayError = useRpForTodayErrorSelector(accountPkh);
   const rpForMonthsError = useRpForMonthsErrorSelector(accountPkh);
+  const [statsDate, setStatsDate] = useState(() => new Date());
+
+  const updateStatsDate = useCallback(() => {
+    const newStatsDate = new Date();
+    setStatsDate(newStatsDate);
+
+    return newStatsDate;
+  }, []);
 
   const updateRecentEarnings = useCallback(() => {
+    const newStatsDate = updateStatsDate();
     dispatch(loadTodayRewardsActions.submit({ account: accountPkh }));
     dispatch(
-      loadManyMonthsRewardsActions.submit({ account: accountPkh, monthYearIndexes: [toMonthYearIndex(new Date())] })
+      loadManyMonthsRewardsActions.submit({
+        account: accountPkh,
+        monthYearIndexes: [toMonthYearIndex(newStatsDate)]
+      })
     );
-  }, [accountPkh, dispatch]);
+  }, [accountPkh, dispatch, updateStatsDate]);
 
   useInterval(updateRecentEarnings, ONE_HOUR_MS, [updateRecentEarnings], false);
 
   useEffect(() => {
-    const currentMonthYearIndex = toMonthYearIndex(new Date());
+    const newStatsDate = updateStatsDate();
+    const currentMonthYearIndex = toMonthYearIndex(newStatsDate);
     dispatch(loadTodayRewardsActions.submit({ account: accountPkh }));
     dispatch(
       loadManyMonthsRewardsActions.submit({
@@ -45,7 +58,7 @@ export const RewardsPage = memo(() => {
       })
     );
 
-    const tomorrowDate = new Date();
+    const tomorrowDate = newStatsDate;
     tomorrowDate.setDate(tomorrowDate.getDate() + 1);
     tomorrowDate.setHours(0, 0, 0, 0);
     midnightTimeoutRef.current = setTimeout(() => {
@@ -59,7 +72,7 @@ export const RewardsPage = memo(() => {
       dailyInterval !== null && clearInterval(dailyInterval);
       midnightTimeout !== null && clearTimeout(midnightTimeout);
     };
-  }, [accountPkh, dispatch, updateRecentEarnings]);
+  }, [accountPkh, dispatch, updateRecentEarnings, updateStatsDate]);
 
   return (
     <PageLayout pageTitle={<PageTitle icon={<div />} title={capitalize(t('rewards'))} />}>
@@ -68,10 +81,10 @@ export const RewardsPage = memo(() => {
           {(rpForTodayError || rpForMonthsError) && (
             <Alert type="error" description={<T id="somethingWentWrong" />} autoFocus />
           )}
-          <RecentEarnings />
+          <RecentEarnings statsDate={statsDate} />
           <ActiveFeatures />
           <Achievements />
-          <LifetimeEarnings />
+          <LifetimeEarnings statsDate={statsDate} />
         </div>
       </div>
     </PageLayout>

diff --git a/src/app/pages/Rewards/lifetime-earnings/index.tsx b/src/app/pages/Rewards/lifetime-earnings/index.tsx
@@ -22,16 +22,20 @@ import { Section } from '../section';
 import { RewardsPageSelectors } from '../selectors';
 import { formatRpAmount, getMonthName } from '../utils';
 
-// August 2024
+/** August 2024 */
 const firstMonthWithCompleteStatsIndex = toMonthYearIndex(7, 2024);
 
-export const LifetimeEarnings = memo(() => {
+interface Props {
+  statsDate: Date;
+}
+
+export const LifetimeEarnings = memo<Props>(({ statsDate }) => {
   const dispatch = useDispatch();
   const accountPkh = useAccountPkh();
   const earliestLoadedMonthYearIndex = useEarliestLoadedMonthYearIndex(accountPkh);
   const rpForMonthsLoading = useRpForMonthsLoadingSelector(accountPkh);
   const rpForMonthsError = useRpForMonthsErrorSelector(accountPkh);
-  const lifetimeEarnings = useLifetimeEarnings(accountPkh, new Date());
+  const lifetimeEarnings = useLifetimeEarnings(accountPkh, statsDate);
   const firstActivityDate = useFirstActivityDateSelector(accountPkh);
   const failedToLoadAnyData = rpForMonthsError && lifetimeEarnings.length === 0;
 
@@ -42,19 +46,19 @@ export const LifetimeEarnings = memo(() => {
 
     return firstActivityDate
       ? Math.max(toMonthYearIndex(new Date(firstActivityDate)), firstMonthWithCompleteStatsIndex)
-      : toMonthYearIndex(new Date());
-  }, [failedToLoadAnyData, firstActivityDate]);
+      : toMonthYearIndex(statsDate);
+  }, [failedToLoadAnyData, firstActivityDate, statsDate]);
 
   const loadMore = useCallback(() => {
     dispatch(
       loadManyMonthsRewardsActions.submit({
         account: accountPkh,
         monthYearIndexes: range(1, 4)
-          .map(i => (earliestLoadedMonthYearIndex ?? toMonthYearIndex(new Date()) + 1) - i)
+          .map(i => (earliestLoadedMonthYearIndex ?? toMonthYearIndex(statsDate) + 1) - i)
           .filter(monthYearIndex => monthYearIndex >= earliestMonthYearIndexToLoad)
       })
     );
-  }, [accountPkh, dispatch, earliestLoadedMonthYearIndex, earliestMonthYearIndexToLoad]);
+  }, [accountPkh, dispatch, earliestLoadedMonthYearIndex, earliestMonthYearIndexToLoad, statsDate]);
 
   const showLoadMoreButton = useMemo(
     () =>
@@ -94,7 +98,7 @@ export const LifetimeEarnings = memo(() => {
 
       {lifetimeEarnings.length === 0 &&
         rpForMonthsError &&
-        range(1, 4).map(i => <HistoryEntry key={i} monthYearIndex={toMonthYearIndex(new Date()) - i} />)}
+        range(1, 4).map(i => <HistoryEntry key={i} monthYearIndex={toMonthYearIndex(statsDate) - i} />)}
 
       {lifetimeEarnings.map(([monthYearIndex, data]) => (
         <HistoryEntry key={monthYearIndex} monthYearIndex={monthYearIndex} data={data} />

diff --git a/src/app/pages/Rewards/recent-earnings/index.tsx b/src/app/pages/Rewards/recent-earnings/index.tsx
@@ -16,11 +16,15 @@ import { getMonthName } from '../utils';
 
 import { StatsCard } from './stats-card';
 
-export const RecentEarnings = memo(() => {
+interface Props {
+  statsDate: Date;
+}
+
+export const RecentEarnings = memo<Props>(({ statsDate }) => {
   const accountPkh = useAccountPkh();
   const rpForToday = useRpForTodaySelector(accountPkh);
   const rpForTodayError = useRpForTodayErrorSelector(accountPkh);
-  const rpForMonth = useRpForMonthSelector(accountPkh, toMonthYearIndex(new Date()));
+  const rpForMonth = useRpForMonthSelector(accountPkh, toMonthYearIndex(statsDate));
   const rpForMonthsError = useRpForMonthsErrorSelector(accountPkh);
 
   return (
@@ -38,7 +42,7 @@ export const RecentEarnings = memo(() => {
           testID={RewardsPageSelectors.todayStatsCard}
         />
         <StatsCard
-          periodName={getMonthName(new Date())}
+          periodName={getMonthName(statsDate)}
           data={rpForMonth}
           error={rpForMonthsError}
           background="bluish"

diff --git a/src/app/store/rewards/epics.ts b/src/app/store/rewards/epics.ts
@@ -27,7 +27,7 @@ const loadManyMonthsRewardsEpic: Epic = action$ =>
         map(values =>
           loadManyMonthsRewardsActions.success({
             ...payload,
-            firstActivityDate: values[0].firstActivityDate,
+            firstActivityDate: values.at(0)!.firstActivityDate,
             values: Object.fromEntries(
               values.map(({ firstActivityDate, ...value }, i): [string, RpStatsResponse] => [
                 String(monthYearIndexes[i]),