mirror of
https://github.com/urosran/cally.git
synced 2025-07-10 15:17:17 +00:00
- Implemented spending of the saved points
This commit is contained in:
@ -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'}}>
|
||||||
|
@ -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()];
|
||||||
|
@ -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!`);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
Reference in New Issue
Block a user