mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
- Todos point logic and User progress UI
This commit is contained in:
@ -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 React from "react";
|
||||||
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
|
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
|
||||||
import {useToDosContext} from "@/contexts/ToDosContext";
|
|
||||||
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
|
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 ProgressCard = ({children}: { children?: React.ReactNode }) => {
|
||||||
const {maxPoints} = useToDosContext();
|
const { profileData } = useAuthContext();
|
||||||
|
|
||||||
|
const weeklyPoints = profileData?.weeklyPoints ?? 0;
|
||||||
|
const transformedWeeklyPoints = transformNumber(weeklyPoints, PROGRESS_LIMIT);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View
|
<View
|
||||||
backgroundColor="white"
|
backgroundColor="white"
|
||||||
@ -16,11 +26,11 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
|
|||||||
<View row centerV>
|
<View row centerV>
|
||||||
<FireworksOrangeIcon/>
|
<FireworksOrangeIcon/>
|
||||||
<Text marginL-15 text70 style={{fontFamily: 'Manrope_600SemiBold', fontSize: 14}}>
|
<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>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
progress={50}
|
progress={transformedWeeklyPoints}
|
||||||
progressColor="#ea156c"
|
progressColor="#ea156c"
|
||||||
style={{
|
style={{
|
||||||
height: 21,
|
height: 21,
|
||||||
@ -31,7 +41,7 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
|
|||||||
/>
|
/>
|
||||||
<View row spread>
|
<View row spread>
|
||||||
<Text style={{fontSize: 13, color: '#858585'}}>0</Text>
|
<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>
|
||||||
<View centerV centerH>
|
<View centerV centerH>
|
||||||
{children}
|
{children}
|
||||||
|
@ -27,6 +27,7 @@ const ToDosPage = () => {
|
|||||||
</Text>
|
</Text>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
|
@ -65,8 +65,8 @@ const FamilyChart = ({ children }: {
|
|||||||
height={150} // Height of the chart
|
height={150} // Height of the chart
|
||||||
barWidth={20} // Width of each bar
|
barWidth={20} // Width of each bar
|
||||||
noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
|
noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
|
||||||
maxValue={500} // Max value on the chart
|
maxValue={1000} // Max value on the chart
|
||||||
stepValue={100} // Step size for horizontal lines
|
stepValue={200} // Step size for horizontal lines
|
||||||
yAxisThickness={0} // Hide the Y-axis line
|
yAxisThickness={0} // Hide the Y-axis line
|
||||||
// yAxisLabelTexts={["0", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
|
// yAxisLabelTexts={["0", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
|
||||||
hideRules={false} // Show the horizontal lines
|
hideRules={false} // Show the horizontal lines
|
||||||
|
@ -133,7 +133,7 @@ const FamilyChoresProgress = ({
|
|||||||
</Text>
|
</Text>
|
||||||
<View centerV>
|
<View centerV>
|
||||||
<Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
|
<Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
|
||||||
{`${child?.weeklyCompletedTodos ?? 0}/y chores completed`}
|
{`${child?.weeklyCompletedTodos ?? 0} chores completed`}
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
@ -1,49 +1,39 @@
|
|||||||
import React from "react";
|
import React, {useEffect, useState} from "react";
|
||||||
import { BarChart } from "react-native-gifted-charts";
|
import { BarChart } from "react-native-gifted-charts";
|
||||||
|
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
|
||||||
|
|
||||||
const UserChart = () => {
|
const UserChart = ({ profileData }: {
|
||||||
const barColor = "#05a8b6"
|
profileData: UserProfile | undefined;
|
||||||
const data = [
|
}) => {
|
||||||
{
|
const [dataList, setDataList] = useState([]);
|
||||||
value: 290, // Direct value of the bar
|
|
||||||
frontColor: barColor, // Color of the bar
|
const barColor = "#05a8b6";
|
||||||
label: "M",
|
useEffect(() => {
|
||||||
},
|
let weeklyDayPoints = profileData?.weeklyDayPoints || {
|
||||||
{
|
Monday: 0,
|
||||||
value: 190,
|
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,
|
frontColor: barColor,
|
||||||
label: "Tu",
|
label: day,
|
||||||
},
|
}
|
||||||
{
|
});
|
||||||
value: 210,
|
setDataList(data);
|
||||||
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",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BarChart
|
<BarChart
|
||||||
data={data}
|
data={dataList}
|
||||||
width={255}
|
width={255}
|
||||||
height={150} // Height of the chart
|
height={150} // Height of the chart
|
||||||
barWidth={20} // Width of each bar
|
barWidth={20} // Width of each bar
|
||||||
@ -51,7 +41,7 @@ const UserChart = () => {
|
|||||||
maxValue={1000} // Max value on the chart
|
maxValue={1000} // Max value on the chart
|
||||||
stepValue={200} // Step size for horizontal lines
|
stepValue={200} // Step size for horizontal lines
|
||||||
yAxisThickness={0} // Hide the Y-axis line
|
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
|
hideRules={false} // Show the horizontal lines
|
||||||
rulesColor="#dadada" // Color for the horizontal lines
|
rulesColor="#dadada" // Color for the horizontal lines
|
||||||
barBorderTopLeftRadius={5} // Round the bars
|
barBorderTopLeftRadius={5} // Round the bars
|
||||||
|
@ -1,18 +1,26 @@
|
|||||||
import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
|
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 {StyleSheet} from "react-native";
|
||||||
import UserChart from "./UserChart";
|
import UserChart from "./UserChart";
|
||||||
import ProgressCard from "../ProgressCard";
|
import ProgressCard, {transformNumber} from "../ProgressCard";
|
||||||
import {AntDesign, Ionicons} from "@expo/vector-icons";
|
import {AntDesign, Ionicons} from "@expo/vector-icons";
|
||||||
import {ScrollView} from "react-native-gesture-handler";
|
import {ScrollView} from "react-native-gesture-handler";
|
||||||
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
|
import FireworksOrangeIcon from "@/assets/svgs/FireworksOrangeIcon";
|
||||||
|
import {useAuthContext} from "@/contexts/AuthContext";
|
||||||
|
|
||||||
const UserChoresProgress = ({
|
const PROGRESS_LIMIT = 5000;
|
||||||
setPageIndex,
|
|
||||||
}: {
|
const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => {
|
||||||
setPageIndex: (value: number) => void;
|
|
||||||
}) => {
|
|
||||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||||
|
const { profileData, refreshProfileData } = useAuthContext();
|
||||||
|
|
||||||
|
const allTimePoints = profileData?.allTimePoints ?? 0;
|
||||||
|
let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refreshProfileData();
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View marginT-20 paddingB-20>
|
<View marginT-20 paddingB-20>
|
||||||
<ScrollView
|
<ScrollView
|
||||||
@ -52,7 +60,7 @@ const UserChoresProgress = ({
|
|||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.card} paddingL-10>
|
<View style={styles.card} paddingL-10>
|
||||||
<UserChart/>
|
<UserChart profileData={profileData}/>
|
||||||
</View>
|
</View>
|
||||||
<View row spread marginT-20 marginB-8 centerV>
|
<View row spread marginT-20 marginB-8 centerV>
|
||||||
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
|
||||||
@ -60,6 +68,7 @@ const UserChoresProgress = ({
|
|||||||
</Text>
|
</Text>
|
||||||
<Button
|
<Button
|
||||||
size={ButtonSize.small}
|
size={ButtonSize.small}
|
||||||
|
disabled
|
||||||
label="Spend my points"
|
label="Spend my points"
|
||||||
color="#50be0c"
|
color="#50be0c"
|
||||||
backgroundColor="#ebf2e4"
|
backgroundColor="#ebf2e4"
|
||||||
@ -86,11 +95,11 @@ const UserChoresProgress = ({
|
|||||||
text70
|
text70
|
||||||
style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||||
>
|
>
|
||||||
You have 1200 points saved!
|
You have {allTimePoints} points saved!
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<ProgressBar
|
<ProgressBar
|
||||||
progress={80}
|
progress={transformedAllTimePoints}
|
||||||
progressColor="#ff9900"
|
progressColor="#ff9900"
|
||||||
style={{
|
style={{
|
||||||
height: 21,
|
height: 21,
|
||||||
|
Reference in New Issue
Block a user