- Todos point logic and User progress UI

components/pages/todos/ProgressCard.tsx

@@ -1,11 +1,21 @@
-import {Text, View} from "react-native-ui-lib";
+import { Text, View } from "react-native-ui-lib";
 import React from "react";
-import {ProgressBar} from "react-native-ui-lib/src/components/progressBar";
+import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
-import {useToDosContext} from "@/contexts/ToDosContext";
 import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
+import { useAuthContext } from "@/contexts/AuthContext";
+
+export const transformNumber = (value: number, progressLimit: number) => {
+    return Math.floor((value / progressLimit) * 100);
+}
+
+const PROGRESS_LIMIT = 1000;
 
 const ProgressCard = ({children}: { children?: React.ReactNode }) => {
-    const {maxPoints} = useToDosContext();
+    const { profileData } = useAuthContext();
+
+    const weeklyPoints = profileData?.weeklyPoints ?? 0;
+    const transformedWeeklyPoints = transformNumber(weeklyPoints, PROGRESS_LIMIT);
+
     return (
         <View
             backgroundColor="white"
@@ -16,11 +26,11 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
             <View row centerV>
                 <FireworksOrangeIcon/>
                 <Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
-                    You have earned XX points this week!{" "}
+                    You have earned {weeklyPoints} points this week!{" "}
                 </Text>
             </View>
             <ProgressBar
-                progress={50}
+                progress={transformedWeeklyPoints}
                 progressColor="#ea156c"
                 style={{
                     height: 21,
@@ -31,7 +41,7 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
             />
             <View row spread>
                 <Text style={{fontSize: 13, color: '#858585'}}>0</Text>
-                <Text style={{fontSize: 13, color: '#858585'}}>{maxPoints}</Text>
+                <Text style={{fontSize: 13, color: '#858585'}}>{PROGRESS_LIMIT}</Text>
             </View>
             <View centerV centerH>
                 {children}

components/pages/todos/ToDosPage.tsx

@@ -27,6 +27,7 @@ const ToDosPage = () => {
       </Text>
     </TouchableOpacity>
   );
+
   return (
     <>
       <ScrollView

components/pages/todos/family-chores/FamilyChart.tsx

@@ -65,8 +65,8 @@ const FamilyChart = ({ children }: {
       height={150} // Height of the chart
       barWidth={20} // Width of each bar
       noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
-      maxValue={500} // Max value on the chart
+      maxValue={1000} // Max value on the chart
-      stepValue={100} // Step size for horizontal lines
+      stepValue={200} // Step size for horizontal lines
       yAxisThickness={0} // Hide the Y-axis line
       // yAxisLabelTexts={["0", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
       hideRules={false} // Show the horizontal lines

components/pages/todos/family-chores/FamilyChoresProgress.tsx

@@ -7,8 +7,8 @@ import { Ionicons } from "@expo/vector-icons";
 import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import { ProfileType } from "@/contexts/AuthContext";
 import { ScrollView } from "react-native-gesture-handler";
-import {useFocusEffect} from "@react-navigation/core";
+import { useFocusEffect } from "@react-navigation/core";
-import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import { UserProfile } from "@/hooks/firebase/types/profileTypes";
 
 const FamilyChoresProgress = ({
   setPageIndex,
@@ -133,7 +133,7 @@ const FamilyChoresProgress = ({
             </Text>
             <View centerV>
               <Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
-                {`${child?.weeklyCompletedTodos ?? 0}/y chores completed`}
+                {`${child?.weeklyCompletedTodos ?? 0} chores completed`}
               </Text>
             </View>
           </View>

components/pages/todos/user-chores/UserChart.tsx

@@ -1,49 +1,39 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
 import { BarChart } from "react-native-gifted-charts";
+import {UserProfile} from "@/hooks/firebase/types/profileTypes";
 
-const UserChart = () => {
+const UserChart = ({ profileData }: {
-    const barColor = "#05a8b6"
+  profileData: UserProfile | undefined;
-  const data = [
+}) => {
-    {
+  const [dataList, setDataList] = useState([]);
-      value: 290, // Direct value of the bar
+
-      frontColor: barColor, // Color of the bar
+  const barColor = "#05a8b6";
-      label: "M",
+  useEffect(() => {
-    },
+    let weeklyDayPoints = profileData?.weeklyDayPoints || {
-    {
+      Monday: 0,
-      value: 190,
+      Tuesday: 0,
-      frontColor: barColor,
+      Wednesday: 0,
-      label: "Tu",
+      Thursday: 0,
-    },
+      Friday: 0,
-    {
+      Saturday: 0,
-      value: 210,
+      Sunday: 0,
-      frontColor: barColor,
+    };
-      label: "W",
+
-    },
+    const data = Object.keys(weeklyDayPoints).map((day) => {
-    {
+      const value = weeklyDayPoints[day];
-      value: 410,
+
-      frontColor: barColor,
+      return {
-      label: "Th",
+        value: value,
-    },
+        frontColor: barColor,
-    {
+        label: day,
-      value: 220,
+      }
-      frontColor: barColor,
+    });
-      label: "F",
+    setDataList(data);
-    },
+  }, [])
-    {
-      value: 160,
-      frontColor: barColor,
-      label: "Sa",
-    },
-    {
-      value: 160,
-      frontColor: barColor,
-      label: "Su",
-    },
-  ];
 
   return (
     <BarChart
-      data={data}
+      data={dataList}
       width={255}
       height={150} // Height of the chart
       barWidth={20} // Width of each bar
@@ -51,7 +41,7 @@ const UserChart = () => {
       maxValue={1000} // Max value on the chart
       stepValue={200} // Step size for horizontal lines
       yAxisThickness={0} // Hide the Y-axis line
-      yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
+      // yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
       hideRules={false} // Show the horizontal lines
       rulesColor="#dadada" // Color for the horizontal lines
       barBorderTopLeftRadius={5} // Round the bars

components/pages/todos/user-chores/UserChoresProgress.tsx

@@ -1,18 +1,26 @@
 import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {StyleSheet} from "react-native";
 import UserChart from "./UserChart";
-import ProgressCard from "../ProgressCard";
+import ProgressCard, {transformNumber} from "../ProgressCard";
 import {AntDesign, Ionicons} from "@expo/vector-icons";
 import {ScrollView} from "react-native-gesture-handler";
 import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
+import {useAuthContext} from "@/contexts/AuthContext";
 
-const UserChoresProgress = ({
+const PROGRESS_LIMIT = 5000;
-                                setPageIndex,
+
-                            }: {
+const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => {
-    setPageIndex: (value: number) => void;
-}) => {
     const [modalVisible, setModalVisible] = useState<boolean>(false);
+    const { profileData, refreshProfileData } = useAuthContext();
+
+    const allTimePoints = profileData?.allTimePoints ?? 0;
+    let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT);
+
+    useEffect(() => {
+        refreshProfileData();
+    }, [])
+
     return (
         <View marginT-20 paddingB-20>
             <ScrollView
@@ -52,7 +60,7 @@ const UserChoresProgress = ({
                     </Text>
                 </View>
                 <View style={styles.card} paddingL-10>
-                    <UserChart/>
+                    <UserChart profileData={profileData}/>
                 </View>
                 <View row spread marginT-20 marginB-8 centerV>
                     <Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
@@ -60,6 +68,7 @@ const UserChoresProgress = ({
                     </Text>
                     <Button
                         size={ButtonSize.small}
+                        disabled
                         label="Spend my points"
                         color="#50be0c"
                         backgroundColor="#ebf2e4"
@@ -86,11 +95,11 @@ const UserChoresProgress = ({
                             text70
                             style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
                         >
-                            You have 1200 points saved!
+                            You have {allTimePoints} points saved!
                         </Text>
                     </View>
                     <ProgressBar
-                        progress={80}
+                        progress={transformedAllTimePoints}
                         progressColor="#ff9900"
                         style={{
                             height: 21,