ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-10 07:07:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

- Todos point logic and User progress UI

Browse Source
This commit is contained in:
Dejan
2024-12-30 12:09:12 +01:00
parent 7b809d826c
commit 239a08d4aa
6 changed files with 74 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/pages/todos/ProgressCard.tsx
View File

@ -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 (
<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}

1
components/pages/todos/ToDosPage.tsx
View File

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

4
components/pages/todos/family-chores/FamilyChart.tsx
View File

@ -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
stepValue={100} // Step size for horizontal lines
maxValue={1000} // Max value on the chart
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

6
components/pages/todos/family-chores/FamilyChoresProgress.tsx
View File

@ -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 {UserProfile} from "@/hooks/firebase/types/profileTypes";
import { useFocusEffect } from "@react-navigation/core";
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>

72
components/pages/todos/user-chores/UserChart.tsx
View File

@ -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,
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: "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",
},
];
label: day,
}
});
setDataList(data);
}, [])
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

29
components/pages/todos/user-chores/UserChoresProgress.tsx
View File

@ -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<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,