From 239a08d4aa19ddd7c430807bb8537a8c47359160 Mon Sep 17 00:00:00 2001 From: Dejan Date: Mon, 30 Dec 2024 12:09:12 +0100 Subject: [PATCH] - Todos point logic and User progress UI --- components/pages/todos/ProgressCard.tsx | 24 ++++-- components/pages/todos/ToDosPage.tsx | 1 + .../pages/todos/family-chores/FamilyChart.tsx | 4 +- .../family-chores/FamilyChoresProgress.tsx | 6 +- .../pages/todos/user-chores/UserChart.tsx | 74 ++++++++----------- .../todos/user-chores/UserChoresProgress.tsx | 29 +++++--- 6 files changed, 74 insertions(+), 64 deletions(-) diff --git a/components/pages/todos/ProgressCard.tsx b/components/pages/todos/ProgressCard.tsx index d73d8c9..28c9efc 100644 --- a/components/pages/todos/ProgressCard.tsx +++ b/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 {useToDosContext} from "@/contexts/ToDosContext"; +import { ProgressBar } from "react-native-ui-lib/src/components/progressBar"; 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 ( { - You have earned XX points this week!{" "} + You have earned {weeklyPoints} points this week!{" "} { /> 0 - {maxPoints} + {PROGRESS_LIMIT} {children} diff --git a/components/pages/todos/ToDosPage.tsx b/components/pages/todos/ToDosPage.tsx index 2ad5b54..f4b6745 100644 --- a/components/pages/todos/ToDosPage.tsx +++ b/components/pages/todos/ToDosPage.tsx @@ -27,6 +27,7 @@ const ToDosPage = () => { ); + return ( <> - {`${child?.weeklyCompletedTodos ?? 0}/y chores completed`} + {`${child?.weeklyCompletedTodos ?? 0} chores completed`} diff --git a/components/pages/todos/user-chores/UserChart.tsx b/components/pages/todos/user-chores/UserChart.tsx index eeed824..379f682 100644 --- a/components/pages/todos/user-chores/UserChart.tsx +++ b/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 barColor = "#05a8b6" - const data = [ - { - value: 290, // Direct value of the bar - frontColor: barColor, // Color of the bar - label: "M", - }, - { - value: 190, - frontColor: barColor, - label: "Tu", - }, - { - value: 210, - frontColor: barColor, - label: "W", - }, - { - value: 410, - frontColor: barColor, - label: "Th", - }, - { - value: 220, - frontColor: barColor, - label: "F", - }, - { - value: 160, - frontColor: barColor, - label: "Sa", - }, - { - value: 160, - frontColor: barColor, - label: "Su", - }, - ]; +const UserChart = ({ profileData }: { + profileData: UserProfile | undefined; +}) => { + const [dataList, setDataList] = useState([]); + + const barColor = "#05a8b6"; + useEffect(() => { + let weeklyDayPoints = profileData?.weeklyDayPoints || { + Monday: 0, + Tuesday: 0, + Wednesday: 0, + Thursday: 0, + Friday: 0, + Saturday: 0, + Sunday: 0, + }; + + const data = Object.keys(weeklyDayPoints).map((day) => { + const value = weeklyDayPoints[day]; + + return { + value: value, + frontColor: barColor, + label: day, + } + }); + setDataList(data); + }, []) return ( { 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 diff --git a/components/pages/todos/user-chores/UserChoresProgress.tsx b/components/pages/todos/user-chores/UserChoresProgress.tsx index c3bb793..059345e 100644 --- a/components/pages/todos/user-chores/UserChoresProgress.tsx +++ b/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 = ({ - setPageIndex, - }: { - setPageIndex: (value: number) => void; -}) => { +const PROGRESS_LIMIT = 5000; + +const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => { const [modalVisible, setModalVisible] = useState(false); + const { profileData, refreshProfileData } = useAuthContext(); + + const allTimePoints = profileData?.allTimePoints ?? 0; + let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT); + + useEffect(() => { + refreshProfileData(); + }, []) + return ( - + @@ -60,6 +68,7 @@ const UserChoresProgress = ({