Update points and streak when Home Screen is re-focused

FYP-2024-IQMA · Oct 27, 2024 · 4e60821 · 4e60821
1 parent 2b4288a
commit 4e60821
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/backend/src/chatbot/__pycache__/app.cpython-311.pyc b/backend/src/chatbot/__pycache__/app.cpython-311.pyc
diff --git a/frontend/iQMA-Skills-Builder/app/screens/Home.tsx b/frontend/iQMA-Skills-Builder/app/screens/Home.tsx
@@ -17,7 +17,7 @@ import {
     View,
 } from 'react-native';
 import ProgressPath, {ProgressPathProps} from '@/components/ProgressPath';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {AuthContext} from '@/context/AuthContext';
@@ -30,7 +30,7 @@ import SectionCard from '@/components/SectionCard';
 import TopStats from '@/components/TopStats';
 import {globalStyles} from '@/constants/styles';
 import {packageFeedback} from '@/helpers/feedbackEndpoints';
-import {router} from 'expo-router';
+import {router, useFocusEffect} from 'expo-router';
 import {useContext} from 'react';
 
 const HomeScreen: React.FC = () => {
@@ -45,7 +45,6 @@ const HomeScreen: React.FC = () => {
     const [loading, setLoading] = useState(true);
     const [completedFinals, setCompletedFinals] = useState<boolean>(false);
     const [showButton, setShowButton] = useState(false);
-    const [userPoints, setUserPoints] = useState<number>(0);
 
     const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
         const yOffset = event.nativeEvent.contentOffset.y;
@@ -317,6 +316,7 @@ const HomeScreen: React.FC = () => {
         return iconsStatus;
     };
 
+
     useEffect(() => {
         (async () => {
             try {
@@ -330,12 +330,12 @@ const HomeScreen: React.FC = () => {
                     currentUser.sub
                 );
                 console.log('Current Section Outside:', currentSection);
+                console.log('check streak update: ');
 
                 const gamificationData = await gamificationEndpoints.getStreak(
                     currentUser.sub
                 );
                 console.log(gamificationData);
-                setUserPoints(gamificationData.points);
 
                 if (currentSection > sectionDetails.length) {
                     currentSection = sectionDetails.length;
@@ -450,7 +450,6 @@ const HomeScreen: React.FC = () => {
                 {/* Top Stats */}
                 <TopStats
                     circularProgress={sectionCircularProgress}
-                    points={userPoints}
                 />
 
                 {allSectionDetails.length > 0 ? (

diff --git a/frontend/iQMA-Skills-Builder/components/TopStats.tsx b/frontend/iQMA-Skills-Builder/components/TopStats.tsx
@@ -3,21 +3,24 @@
 import * as gamificationEndpoints from '@/helpers/gamificationEndpoints';
 
 import {Image, StyleSheet, Text, View} from 'react-native';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 
 import {AuthContext} from '@/context/AuthContext';
 import CircularProgress from './CircularProgress';
 import {Colors} from '@/constants/Colors';
 import {useContext} from 'react';
+import {useFocusEffect} from 'expo-router';
 
 interface TopStatsProps {
     circularProgress: number;
-    points: number;
 }
 
-const TopStats: React.FC<TopStatsProps> = ({circularProgress, points}) => {
+const TopStats: React.FC<TopStatsProps> = ({circularProgress}) => {
     const {currentUser, isLoading} = useContext(AuthContext);
     const [updatedStreak, setUpdatedStreak] = useState<number>(0);
+    const [updatedPoints, setUpdatedPoints] = useState<number>(0);
+    const [key, setKey] = useState(0);
+
 
     useEffect(() => {
         const updateStreak = async () => {
@@ -30,13 +33,24 @@ const TopStats: React.FC<TopStatsProps> = ({circularProgress, points}) => {
                 );
                 console.log(getStreak);
                 setUpdatedStreak(getStreak.streaks);
+                setUpdatedPoints(getStreak.points);
             } catch (error) {
                 console.error('Error updating streak:', error);
             }
         };
 
         updateStreak();
-    }, [currentUser]);
+    }, [currentUser, key]);
+
+    useFocusEffect(
+        useCallback(() => {
+            // Change the key to force a re-render
+            setKey((prevKey) => prevKey + 1);
+        }, [])
+    );
+
+
+
     return (
         <View style={styles.statsContainer}>
             <View style={[styles.statBox]}>
@@ -62,7 +76,7 @@ const TopStats: React.FC<TopStatsProps> = ({circularProgress, points}) => {
                         />
                     </View>
                     <View>
-                        <Text style={styles.statNumber}>{points}</Text>
+                        <Text style={styles.statNumber}>{updatedPoints}</Text>
                         <Text style={styles.statLabel}>Total XP</Text>
                     </View>
                 </View>