mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 07:07:16 +00:00
- Todos point logic and Family progress UI
This commit is contained in:
@ -77,7 +77,7 @@ const ToDosPage = () => {
|
||||
{pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
|
||||
</View>
|
||||
</ScrollView>
|
||||
<AddChore />
|
||||
{pageIndex === 0 && <AddChore />}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -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}
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user