SELF-1144 - use real points on home screen and improve points screen (#1361)

* fix whitespace

* move effects for fetching points and incoming points to hooks, add items to deps array so that they refresh when we expect points to change.

* cleanup

Author: aaronmgdr

app/src/components/NavBar/Points.tsx

@@ -11,6 +11,7 @@ import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { PointHistoryList } from '@/components/PointHistoryList';
+import { useIncomingPoints, usePoints } from '@/hooks/usePoints';
 import BellWhiteIcon from '@/images/icons/bell_white.svg';
 import ClockIcon from '@/images/icons/clock.svg';
 import LockWhiteIcon from '@/images/icons/lock_white.svg';
@@ -36,24 +37,17 @@ import {
 } from '@/utils/notifications/notificationService';
 import {
   formatTimeUntilDate,
-  getIncomingPoints,
-  getPointsAddress,
-  getTotalPoints,
-  type IncomingPoints,
   recordBackupPointEvent,
   recordNotificationPointEvent,
 } from '@/utils/points';
 
 const Points: React.FC = () => {
-  const [selfPoints, setSelfPoints] = useState(0);
   const { bottom } = useSafeAreaInsets();
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const [isNovaSubscribed, setIsNovaSubscribed] = useState(false);
   const [isEnabling, setIsEnabling] = useState(false);
-  const [incomingPoints, setIncomingPoints] = useState<IncomingPoints | null>(
-    null,
-  );
+  const incomingPoints = useIncomingPoints();
   const loadEvents = usePointEventStore(state => state.loadEvents);
   const { hasCompletedBackupForPoints, setBackupForPointsCompleted } =
     useSettingStore();
@@ -85,14 +79,7 @@ const Points: React.FC = () => {
     loadEvents();
   }, [loadEvents]);
 
-  useEffect(() => {
-    const fetchPoints = async () => {
-      const address = await getPointsAddress();
-      const points = await getTotalPoints(address);
-      setSelfPoints(points);
-    };
-    fetchPoints();
-  }, []);
+  const points = usePoints();
 
   useEffect(() => {
     const checkSubscription = async () => {
@@ -102,14 +89,6 @@ const Points: React.FC = () => {
     checkSubscription();
   }, []);
 
-  useEffect(() => {
-    const fetchIncomingPoints = async () => {
-      const incoming = await getIncomingPoints();
-      setIncomingPoints(incoming);
-    };
-    fetchIncomingPoints();
-  }, []);
-
   const handleContentLayout = () => {
     if (!isContentReady) {
       setIsContentReady(true);
@@ -211,15 +190,12 @@ const Points: React.FC = () => {
 
     setIsBackingUp(true);
     try {
+      // this will add event to store and the new event will then trigger useIncomingPoints hook to refetch incoming points
       const response = await recordBackupPointEvent();
 
       if (response.success) {
         setBackupForPointsCompleted();
 
-        const address = await getPointsAddress();
-        const points = await getTotalPoints(address);
-        setSelfPoints(points);
-
         if (listRefreshRef.current) {
           await listRefreshRef.current();
         }
@@ -296,22 +272,14 @@ const Points: React.FC = () => {
             <XStack gap={4} alignItems="center">
               <Text
                 color={black}
+                textAlign="center"
                 fontFamily="DIN OT"
                 fontWeight="500"
                 fontSize={32}
                 lineHeight={32}
                 letterSpacing={-1}
               >
-                {`${selfPoints} Self `}
-              </Text>
-              <Text
-                fontFamily="DIN OT"
-                fontWeight="500"
-                fontSize={32}
-                lineHeight={32}
-                letterSpacing={-1}
-              >
-                points
+                {`${points} Self points`}
               </Text>
             </XStack>
             <Text

app/src/components/PointHistoryList.tsx

@@ -348,6 +348,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: 20,
+    paddingTop: 5,
   },
 });
 

app/src/hooks/usePoints.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+
+import { usePointEventStore } from '@/stores/pointEventStore';
+import {
+  getIncomingPoints,
+  getNextSundayNoonUTC,
+  getPointsAddress,
+  getTotalPoints,
+  type IncomingPoints,
+} from '@/utils/points';
+
+/*
+ * Hook to fetch incoming points for the user. It refetches the incoming points when there is a new event in the point events store.
+ */
+export const useIncomingPoints = (): IncomingPoints | null => {
+  const [incomingPoints, setIncomingPoints] = useState<null | IncomingPoints>(
+    null,
+  );
+  const pointEvents = usePointEventStore(state => state.events);
+  const pointEventsCount = pointEvents.length;
+
+  useEffect(() => {
+    const fetchIncomingPoints = async () => {
+      try {
+        const points = await getIncomingPoints();
+        setIncomingPoints(points);
+      } catch (error) {
+        console.error('Error fetching incoming points:', error);
+      }
+    };
+    fetchIncomingPoints();
+    // when we record a new point event, we want to refetch incoming points
+  }, [pointEventsCount]);
+
+  return incomingPoints;
+};
+
+/*
+ * Hook to fetch total points for the user. It refetches the total points when the next points update time is reached (each Sunday noon UTC).
+ */
+export const usePoints = () => {
+  const [truePoints, setTruePoints] = useState({
+    points: 0,
+  });
+  const nextPointsUpdate = getNextSundayNoonUTC().getTime();
+
+  useEffect(() => {
+    const fetchPoints = async () => {
+      try {
+        const address = await getPointsAddress();
+        const points = await getTotalPoints(address);
+        setTruePoints({ points });
+      } catch (error) {
+        console.error('Error fetching total points:', error);
+      }
+    };
+    fetchPoints();
+    // refresh when points update time changes as its the only time points can change
+  }, [nextPointsUpdate]);
+
+  return truePoints.points;
+};

app/src/screens/home/HomeScreen.tsx

@@ -24,6 +24,7 @@ import IdCardLayout from '@/components/homeScreen/idCard';
 import { useAppUpdates } from '@/hooks/useAppUpdates';
 import useConnectionModal from '@/hooks/useConnectionModal';
 import { useEarnPointsFlow } from '@/hooks/useEarnPointsFlow';
+import { usePoints } from '@/hooks/usePoints';
 import { useReferralConfirmation } from '@/hooks/useReferralConfirmation';
 import { useTestReferralFlow } from '@/hooks/useTestReferralFlow';
 import LogoInversed from '@/images/logo_inversed.svg';
@@ -52,7 +53,8 @@ const HomeScreen: React.FC = () => {
     Record<string, { data: IDDocument; metadata: DocumentMetadata }>
   >({});
   const [loading, setLoading] = useState(true);
-  const [selfPoints] = useState(312);
+
+  const selfPoints = usePoints();
 
   // Calculate card dimensions exactly like IdCardLayout does
   const { width: screenWidth } = Dimensions.get('window');