- Todos point logic and Family progress UI

This commit is contained in:
Dejan
2024-12-29 23:01:24 +01:00
parent afa1046d02
commit 7b809d826c
3 changed files with 100 additions and 94 deletions

View File

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

View File

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

View File

@ -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,35 +55,37 @@ const FamilyChoresProgress = ({
Points earned this week
</Text>
<View row>
{children?.map((child, index) => (
<View
key={child.uid}
style={styles.pfpSmall}
backgroundColor={child.eventColor || "#05a8b6"}
center
>
{child.pfp ? (
<ImageBackground
source={{ uri: child.pfp }}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<Text color="white" style={{fontSize: 15}}>
{child.firstName.at(0)}
{child.lastName.at(0)}
</Text>
)}
</View>
))}
{children?.map((child: UserProfile) => {
return child.weeklyPoints && child.weeklyPoints > 0 ? (
<View
key={child.uid}
style={styles.pfpSmall}
backgroundColor={child.eventColor || "#05a8b6"}
center
>
{child.pfp ? (
<ImageBackground
source={{ uri: child.pfp }}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<Text color="white" style={{fontSize: 15}}>
{child.firstName.at(0)}
{child.lastName.at(0)}
</Text>
)}
</View>
) : null
})}
</View>
</View>
<View style={styles.card} paddingL-10>
<FamilyChart />
<FamilyChart children={children} />
</View>
<Text
text70