- Todos point logic and Family progress UI

components/pages/todos/ToDosPage.tsx

@@ -77,7 +77,7 @@ const ToDosPage = () => {
           {pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
         </View>
       </ScrollView>
-      <AddChore />
+      {pageIndex === 0 && <AddChore />}
     </>
   );
 };

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

@@ -1,78 +1,74 @@
-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 FamilyChart = () => {
+const FamilyChart = ({ children }: {
-  // Define the data for the bars
+  children: Array<UserProfile>;
-  const data = [
+}) => {
-    {
+  const [dataList, setDataList] = useState([]);
-      value: 600, // Total value of the bar
+
-      stacks: [
+  useEffect(() => {
-        { value: 290, color: "#e7d526" }, // First part of the bar
+    let dayPointsMap = {
-        { value: 310, color: "#00a8b6" }, // Second part of the bar
+      Monday: {},
-      ],
+      Tuesday: {},
-      label: "M",
+      Wednesday: {},
-    },
+      Thursday: {},
-    {
+      Friday: {},
-      value: 400,
+      Saturday: {},
-      stacks: [
+      Sunday: {},
-        { value: 190, color: "#e7d526" },
+    };
-        { value: 210, color: "#00a8b6" },
+    children?.forEach((child) => {
-      ],
+      let weeklyDayPoints = child.weeklyDayPoints || {
-      label: "Tu",
+        Monday: 0,
-    },
+        Tuesday: 0,
-    {
+        Wednesday: 0,
-      value: 400,
+        Thursday: 0,
-      stacks: [
+        Friday: 0,
-        { value: 210, color: "#e7d526" },
+        Saturday: 0,
-        { value: 190, color: "#00a8b6" },
+        Sunday: 0,
-      ],
+      };
-      label: "W",
+
-    },
+      Object.keys(weeklyDayPoints).forEach((day) => {
-    {
+        dayPointsMap = {
-      value: 800,
+          ...dayPointsMap,
-      stacks: [
+          [day]: {
-        { value: 410, color: "#e7d526" },
+            ...dayPointsMap[day],
-        { value: 390, color: "#00a8b6" },
+            [child.uid]: weeklyDayPoints[day]
-      ],
+          }
-      label: "Th",
+        }
-    },
+      })
-    {
+    })
-      value: 600,
+
-      stacks: [
+    const data = Object.keys(dayPointsMap).map((day) => {
-        { value: 220, color: "#e7d526" },
+      const userMap = dayPointsMap[day];
-        { value: 380, color: "#00a8b6" },
+      let stacks = Object.keys(userMap).map((userId) => {
-      ],
+
-      label: "F",
+        let userProfile = children?.find((child) => child.uid === userId);
-    },
+        return {
-    {
+          value: userMap[userId],
-      value: 200,
+          color: userProfile.eventColor
-      stacks: [
+        }
-        { value: 160, color: "#e7d526" },
+      });
-        { value: 40, color: "#00a8b6" },
+
-      ],
+      return {
-      label: "Sa",
+        stacks: stacks,
-    },
+        label: day,
-    {
+      }
-      value: 200,
+    });
-      stacks: [
+    setDataList(data);
-        { value: 160, color: "#e7d526" },
+  }, [children])
-        { value: 40, color: "#00a8b6" },
-      ],
-      label: "Su",
-    },
-  ];
 
   return (
     <BarChart
-      stackData={data}
+      stackData={dataList}
       width={250}
       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={1000} // Max value on the chart
+      maxValue={500} // Max value on the chart
-      stepValue={200} // Step size for horizontal lines
+      stepValue={100} // 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", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
       hideRules={false} // Show the horizontal lines
       rulesType="solid"
       rulesThickness={1.2}

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

@@ -1,5 +1,5 @@
 import { View, Text } from "react-native-ui-lib";
-import React from "react";
+import React, {useCallback} from "react";
 import { ImageBackground, StyleSheet } from "react-native";
 import FamilyChart from "./FamilyChart";
 import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
@@ -7,17 +7,25 @@ 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 {UserProfile} from "@/hooks/firebase/types/profileTypes";
 
 const FamilyChoresProgress = ({
   setPageIndex,
 }: {
   setPageIndex: (value: number) => void;
 }) => {
-  const { data: familyMembers } = useGetFamilyMembers();
+  const { data: familyMembers, refetch: refetchFamilyMembers } = useGetFamilyMembers();
   const children = familyMembers?.filter(
     (member) => member.userType === ProfileType.CHILD
   );
 
+  useFocusEffect(
+      useCallback(() => {
+        refetchFamilyMembers();
+      }, [refetchFamilyMembers])
+  );
+
   return (
     <View marginT-20 marginH-5 marginB-100>
       <ScrollView>
@@ -47,7 +55,8 @@ const FamilyChoresProgress = ({
             Points earned this week
           </Text>
           <View row>
-            {children?.map((child, index) => (
+            {children?.map((child: UserProfile) => {
+              return child.weeklyPoints && child.weeklyPoints > 0 ? (
                   <View
                       key={child.uid}
                       style={styles.pfpSmall}
@@ -71,11 +80,12 @@ const FamilyChoresProgress = ({
                         </Text>
                     )}
                   </View>
-            ))}
+              ) : null
+            })}
           </View>
         </View>
         <View style={styles.card} paddingL-10>
-          <FamilyChart />
+          <FamilyChart children={children} />
         </View>
         <Text
           text70