- Implemented spending of the saved points

This commit is contained in:
Dejan
2024-12-30 13:20:58 +01:00
parent ffe8cc72a1
commit 141337d2ce
3 changed files with 50 additions and 11 deletions

View File

@ -1,18 +1,20 @@
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, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {StyleSheet} from "react-native"; import {Alert, StyleSheet } from "react-native";
import UserChart from "./UserChart"; import UserChart from "./UserChart";
import ProgressCard, {transformNumber} 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"; import { useAuthContext } from "@/contexts/AuthContext";
import { useSpendPoints } from "@/hooks/firebase/useUpdateUserData";
const PROGRESS_LIMIT = 5000; const PROGRESS_LIMIT = 5000;
const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => { const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => {
const [modalVisible, setModalVisible] = useState<boolean>(false); const [modalVisible, setModalVisible] = useState<boolean>(false);
const { profileData, refreshProfileData } = useAuthContext(); const { profileData, refreshProfileData } = useAuthContext();
const { mutateAsync: spendPoints } = useSpendPoints();
const allTimePoints = profileData?.allTimePoints ?? 0; const allTimePoints = profileData?.allTimePoints ?? 0;
let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT); let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT);
@ -21,6 +23,15 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
refreshProfileData(); refreshProfileData();
}, []) }, [])
const onClickSpendPoints = (pointsToSpend: number) => {
if (allTimePoints < pointsToSpend) {
Alert.alert("Not Enough Points", "You do not have enough points to spend.");
return;
} else {
spendPoints(pointsToSpend).then(() => setModalVisible(false)).then(refreshProfileData);
}
}
return ( return (
<View marginT-20 paddingB-20> <View marginT-20 paddingB-20>
<ScrollView <ScrollView
@ -68,7 +79,6 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
</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"
@ -110,7 +120,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
/> />
<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"}}>5000</Text> <Text style={{fontSize: 13, color: "#858585"}}>{PROGRESS_LIMIT}</Text>
</View> </View>
</View> </View>
</ScrollView> </ScrollView>
@ -129,6 +139,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
backgroundColor="#05a8b6" backgroundColor="#05a8b6"
size={ButtonSize.large} size={ButtonSize.large}
labelStyle={styles.bigButtonText} labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(150)}
/> />
<Button <Button
label="Extra Screen Time - 100 pts" label="Extra Screen Time - 100 pts"
@ -137,6 +148,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
backgroundColor="#ea156c" backgroundColor="#ea156c"
size={ButtonSize.large} size={ButtonSize.large}
labelStyle={styles.bigButtonText} labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(100)}
/> />
<Button <Button
label="Movie Night - 50 pts" label="Movie Night - 50 pts"
@ -145,6 +157,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
backgroundColor="#7305d4" backgroundColor="#7305d4"
size={ButtonSize.large} size={ButtonSize.large}
labelStyle={styles.bigButtonText} labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(50)}
/> />
<Button <Button
label="Ice Cream Treat - 25 pts" label="Ice Cream Treat - 25 pts"
@ -153,6 +166,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
backgroundColor="#e28800" backgroundColor="#e28800"
size={ButtonSize.large} size={ButtonSize.large}
labelStyle={styles.bigButtonText} labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(25)}
/> />
<TouchableOpacity onPress={() => setModalVisible(false)}> <TouchableOpacity onPress={() => setModalVisible(false)}>
<Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}> <Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}>

View File

@ -140,7 +140,7 @@ export const useUpdateTodo = () => {
Sunday: 0, Sunday: 0,
}; };
const currentDay = getCurrentDay(todoUpdate.date); const currentDay = getSelectedDateDay(todoUpdate.date);
const updatedPointsPerDay = todoData.done const updatedPointsPerDay = todoData.done
? pointsPerDay[currentDay] + todoUpdate.points ? pointsPerDay[currentDay] + todoUpdate.points
: pointsPerDay[currentDay] - todoUpdate.points; : pointsPerDay[currentDay] - todoUpdate.points;
@ -185,7 +185,7 @@ export const useUpdateTodo = () => {
}) })
}; };
const getCurrentDay = (date) => { const getSelectedDateDay = (date) => {
let selectedDate = new Date(date.seconds * 1000); let selectedDate = new Date(date.seconds * 1000);
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
return days[selectedDate.getDay()]; return days[selectedDate.getDay()];

View File

@ -3,6 +3,7 @@ import {FirebaseAuthTypes} from "@react-native-firebase/auth";
import {useMutation, useQueryClient} from "@tanstack/react-query"; import {useMutation, useQueryClient} from "@tanstack/react-query";
import {useAuthContext} from "@/contexts/AuthContext"; import {useAuthContext} from "@/contexts/AuthContext";
import {UserProfile} from "@/hooks/firebase/types/profileTypes"; import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import {Alert} from "react-native";
export const useUpdateUserData = () => { export const useUpdateUserData = () => {
const {user: currentUser, refreshProfileData} = useAuthContext(); const {user: currentUser, refreshProfileData} = useAuthContext();
@ -54,4 +55,28 @@ export const useUpdateUserData = () => {
queryClient.invalidateQueries({queryKey: ["events"]}) queryClient.invalidateQueries({queryKey: ["events"]})
}, },
}); });
}; };
export const useSpendPoints = () => {
const { user: currentUser } = useAuthContext();
return useMutation({
mutationKey: ["spendPoints"],
mutationFn: async (pointsToSpend: number) => {
const userRef = firestore().collection("Profiles").doc(currentUser?.uid);
let userSnapshot = await userRef.get();
let userData = userSnapshot.data() as UserProfile;
if (!userData) return;
const allTimePoints = userData.allTimePoints || 0;
if (allTimePoints < pointsToSpend) {
return;
}
await userRef.update({...userData,allTimePoints: allTimePoints - pointsToSpend,})
Alert.alert("Success", `You spent ${pointsToSpend} points!`);
},
});
}