- Implemented spending of the saved points

components/pages/todos/user-chores/UserChoresProgress.tsx

@@ -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 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 {useAuthContext} from "@/contexts/AuthContext";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { useSpendPoints } from "@/hooks/firebase/useUpdateUserData";
 
 const PROGRESS_LIMIT = 5000;
 
 const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) => void; }) => {
     const [modalVisible, setModalVisible] = useState<boolean>(false);
     const { profileData, refreshProfileData } = useAuthContext();
+    const { mutateAsync: spendPoints } = useSpendPoints();
 
     const allTimePoints = profileData?.allTimePoints ?? 0;
     let transformedAllTimePoints = transformNumber(allTimePoints, PROGRESS_LIMIT);
@@ -21,6 +23,15 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
         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 (
         <View marginT-20 paddingB-20>
             <ScrollView
@@ -68,7 +79,6 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                     </Text>
                     <Button
                         size={ButtonSize.small}
-                        disabled
                         label="Spend my points"
                         color="#50be0c"
                         backgroundColor="#ebf2e4"
@@ -110,7 +120,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                     />
                     <View row spread>
                         <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>
             </ScrollView>
@@ -129,6 +139,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                             backgroundColor="#05a8b6"
                             size={ButtonSize.large}
                             labelStyle={styles.bigButtonText}
+                            onPress={() => onClickSpendPoints(150)}
                         />
                         <Button
                             label="Extra Screen Time - 100 pts"
@@ -137,6 +148,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                             backgroundColor="#ea156c"
                             size={ButtonSize.large}
                             labelStyle={styles.bigButtonText}
+                            onPress={() => onClickSpendPoints(100)}
                         />
                         <Button
                             label="Movie Night - 50 pts"
@@ -145,6 +157,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                             backgroundColor="#7305d4"
                             size={ButtonSize.large}
                             labelStyle={styles.bigButtonText}
+                            onPress={() => onClickSpendPoints(50)}
                         />
                         <Button
                             label="Ice Cream Treat - 25 pts"
@@ -153,6 +166,7 @@ const UserChoresProgress = ({ setPageIndex }: { setPageIndex: (value: number) =>
                             backgroundColor="#e28800"
                             size={ButtonSize.large}
                             labelStyle={styles.bigButtonText}
+                            onPress={() => onClickSpendPoints(25)}
                         />
                         <TouchableOpacity onPress={() => setModalVisible(false)}>
                             <Text text70 marginT-20 center color="#999999" style={{fontFamily: 'Manrope_500Medium'}}>

hooks/firebase/useUpdateTodo.ts

@@ -140,7 +140,7 @@ export const useUpdateTodo = () => {
                                     Sunday: 0,
                                 };
 
-                                const currentDay = getCurrentDay(todoUpdate.date);
+                                const currentDay = getSelectedDateDay(todoUpdate.date);
                                 const updatedPointsPerDay = todoData.done
                                     ? 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);
     const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
     return days[selectedDate.getDay()];

hooks/firebase/useUpdateUserData.ts

@@ -3,6 +3,7 @@ import {FirebaseAuthTypes} from "@react-native-firebase/auth";
 import {useMutation, useQueryClient} from "@tanstack/react-query";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {UserProfile} from "@/hooks/firebase/types/profileTypes";
+import {Alert} from "react-native";
 
 export const useUpdateUserData = () => {
     const {user: currentUser, refreshProfileData} = useAuthContext();
@@ -54,4 +55,28 @@ export const useUpdateUserData = () => {
             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!`);
+        },
+    });
+}