diff --git a/components/pages/todos/user-chores/UserChoresProgress.tsx b/components/pages/todos/user-chores/UserChoresProgress.tsx index 059345e..622754a 100644 --- a/components/pages/todos/user-chores/UserChoresProgress.tsx +++ b/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 React, {useEffect, useState} from "react"; -import {StyleSheet} from "react-native"; +import { Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View, } from "react-native-ui-lib"; +import React, { useEffect, useState } from "react"; +import {Alert, StyleSheet } from "react-native"; import UserChart from "./UserChart"; import ProgressCard, {transformNumber} from "../ProgressCard"; -import {AntDesign, Ionicons} from "@expo/vector-icons"; -import {ScrollView} from "react-native-gesture-handler"; +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"; +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(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 (