ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-07-09 22:57:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Dejan
2024-12-30 21:01:59 +01:00
parent 49be903553 a4e27f9dc8
commit 0f07e46a82
13 changed files with 266 additions and 182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/pages/(tablet_pages)/chores/SingleUserChoreList.tsx
View File

@ -1,5 +1,5 @@
import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
import React, { useState } from "react";
import React, {useEffect, useState} from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import {
addDays,
@ -20,7 +20,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
const dateB = b.date === null ? new Date() : b.date;
return dateA - dateB;
});
return sortedTodos.reduce(
(groups, toDo) => {
let dateKey;
@ -44,7 +44,7 @@ const groupToDosByDate = (toDos: IToDo[]) => {
today.setHours(0, 0, 0, 0);
return date < today;
};
if (isOverdue(toDo.date) && !toDo.done) {
dateKey = "Overdue";
} else if (toDo.date === null || isToday(toDo.date)) {
@ -95,8 +95,18 @@ const filterToDosByUser = (toDos: IToDo[], uid: string | undefined) => {
const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
const { toDos } = useToDosContext();
const userTodos = filterToDosByUser(toDos, user.uid);
const groupedToDos = groupToDosByDate(userTodos);
const [localTodos, setLocalTodos] = useState([]);
const [groupedToDos, setGroupedToDos] = useState([]);
useEffect(() => {
const userTodos = filterToDosByUser(toDos, user.uid);
setLocalTodos(userTodos);
}, [toDos, user]);
useEffect(() => {
const grouped = groupToDosByDate(localTodos);
setGroupedToDos(grouped);
}, [localTodos]);
const [expandedGroups, setExpandedGroups] = useState<{
[key: string]: boolean;
@ -186,7 +196,12 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
</View>
{sortedItems.map((item) => (
<ToDoItem key={item.id} item={item} is7Days={false} />
<ToDoItem
key={item.id}
item={item}
is7Days={false}
localTodos={localTodos}
setLocalTodos={setLocalTodos}/>
))}
</View>
);
@ -235,6 +250,8 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
key={item.id}
item={item}
is7Days={dateKey === "Next 7 Days"}
localTodos={localTodos}
setLocalTodos={setLocalTodos}
/>
))}
</View>
@ -278,7 +295,7 @@ const SingleUserChoreList = ({ user }: { user: UserProfile }) => {
{expandNoDate &&
noDateToDos
.sort((a, b) => Number(a.done) - Number(b.done))
.map((item) => <ToDoItem key={item.id} item={item} />)}
.map((item) => <ToDoItem key={item.id} item={item} localTodos={localTodos} setLocalTodos={setLocalTodos} />)}
</View>
)}

2
components/pages/grocery/EditGroceryItem.tsx
View File

@ -68,7 +68,7 @@ const EditGroceryItem = ({
);
const handleClose = () => {
setGrocery(defaultGroceryItem);
closeEdit();
}
const handleSubmit = () => {

190
components/pages/grocery/GroceryItem.tsx
View File

@ -39,6 +39,7 @@ const GroceryItem = ({
return `${firstName.charAt(0).toUpperCase()}${lastName.charAt(0).toUpperCase()}`;
};
const isEditable = (isParent || isCaregiver) && item.approved && !item.bought;
return (
<View
key={item.id}
@ -49,109 +50,108 @@ const GroceryItem = ({
overflow: "hidden",
}}
>
<View
row
spread
centerV
style={{
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
minHeight: 44.64,
}}
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => setOpenFreqEdit(false)}
/>
{isEditingTitle ? (
<EditGroceryItem
editGrocery={item}
onInputFocus={onInputFocus}
closeEdit={closeEdit}
<TouchableOpacity onPress={isEditable ? () => setIsEditingTitle(true) : null}>
<View
row
spread
centerV
style={{
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
minHeight: 44.64,
}}
>
<EditGroceryFrequency
visible={openFreqEdit}
key={item.id}
item={item}
onClose={() => setOpenFreqEdit(false)}
/>
) : (
<View flex>
{(isParent || isCaregiver) && !item.bought ? (
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
{isEditingTitle ? (
<EditGroceryItem
editGrocery={item}
onInputFocus={onInputFocus}
closeEdit={closeEdit}
/>
) : (
<View flex>
{(isParent || isCaregiver) && !item.bought ? (
<Text
text70T
style={[
styles.title,
{
textDecorationLine: item.bought ? "line-through" : "none",
},
]}
>
{item.title}
</Text>
) : (
<Text
text70T
style={[
styles.title,
{
textDecorationLine: item.bought ? "line-through" : "none",
},
]}
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
>
{item.title}
</Text>
</TouchableOpacity>
) : (
<Text
text70T
style={[styles.title, { textDecorationLine: item.bought ? "line-through" : "none", }]}
>
{item.title}
</Text>
)}
</View>
)}
)}
</View>
)}
{!item.approved ? (
<View row centerV>
{(isParent || isCaregiver) && (
<>
<AntDesign
name="check"
size={24}
style={{ color: "blue", marginRight: 15 }}
onPress={() =>
handleItemApproved(item.id, { approved: true })
{!item.approved ? (
<View row centerV>
{(isParent || isCaregiver) && (
<>
<AntDesign
name="check"
size={24}
style={{ color: "blue", marginRight: 15 }}
onPress={() =>
handleItemApproved(item.id, { approved: true })
}
/>
<AntDesign
name="close"
size={24}
style={{ color: "red" }}
onPress={() => {
handleItemApproved(item.id, { approved: false });
deleteGrocery(item.id);
}}
/>
</>
)}
</View>
) : (
!isEditingTitle &&
(isParent || isCaregiver) && (
<View row>
{item.bought &&
<AntDesign
name="close"
size={24}
style={{ color: "grey", marginRight: 10 }}
onPress={() => deleteGrocery(item.id)}
/>
}
/>
<AntDesign
name="close"
size={24}
style={{ color: "red" }}
onPress={() => {
handleItemApproved(item.id, { approved: false });
deleteGrocery(item.id);
}}
/>
</>
)}
</View>
) : (
!isEditingTitle &&
(isParent || isCaregiver) && (
<View row>
{item.bought &&
<AntDesign
name="close"
size={24}
style={{ color: "grey", marginRight: 10 }}
onPress={() => deleteGrocery(item.id)}
/>
}
<Checkbox
value={item.bought}
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
style={styles.checked}
borderRadius={50}
color="#fd1575"
hitSlop={20}
onValueChange={() => {
const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
setApprovedGroceries(updatedApprovedGroceries);
updateGroceryItem({ id: item.id, bought: !item.bought })
}}
/>
</View>
)
)}
</View>
<Checkbox
value={item.bought}
containerStyle={[styles.checkbox, { borderRadius: 50 }]}
style={styles.checked}
borderRadius={50}
color="#fd1575"
hitSlop={20}
onValueChange={() => {
const updatedApprovedGroceries = approvedGroceries.map((grocery) => grocery.id === item.id ? {...grocery, bought: !item.bought} : grocery);
setApprovedGroceries(updatedApprovedGroceries);
updateGroceryItem({ id: item.id, bought: !item.bought })
}}
/>
</View>
)
)}
</View>
</TouchableOpacity>
{!item.approved && (
<>

24
components/pages/todos/ProgressCard.tsx
View File

@ -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 {ProgressBar} from "react-native-ui-lib/src/components/progressBar";
import {useToDosContext} from "@/contexts/ToDosContext";
import { ProgressBar } from "react-native-ui-lib/src/components/progressBar";
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 {maxPoints} = useToDosContext();
const { profileData } = useAuthContext();
const weeklyPoints = profileData?.weeklyPoints ?? 0;
const transformedWeeklyPoints = transformNumber(weeklyPoints, PROGRESS_LIMIT);
return (
<View
backgroundColor="white"
@ -16,11 +26,11 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
<View row centerV>
<FireworksOrangeIcon/>
<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>
</View>
<ProgressBar
progress={50}
progress={transformedWeeklyPoints}
progressColor="#ea156c"
style={{
height: 21,
@ -31,7 +41,7 @@ const ProgressCard = ({children}: { children?: React.ReactNode }) => {
/>
<View row spread>
<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 centerV centerH>
{children}

1
components/pages/todos/ToDosPage.tsx
View File

@ -27,6 +27,7 @@ const ToDosPage = () => {
</Text>
</TouchableOpacity>
);
return (
<>
<ScrollView

3
components/pages/todos/family-chores/FamilyChart.tsx
View File

@ -1,6 +1,7 @@
import React, {useEffect, useState} from "react";
import { BarChart } from "react-native-gifted-charts";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import {chartDayMap} from "@/constants/common";
const FamilyChart = ({ children }: {
children: Array<UserProfile>;
@ -52,7 +53,7 @@ const FamilyChart = ({ children }: {
return {
stacks: stacks,
label: day,
label: chartDayMap[day],
}
});
setDataList(data);

10
components/pages/todos/family-chores/FamilyChoresProgress.tsx
View File

@ -7,8 +7,8 @@ import { Ionicons } from "@expo/vector-icons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ProfileType } from "@/contexts/AuthContext";
import { ScrollView } from "react-native-gesture-handler";
import {useFocusEffect} from "@react-navigation/core";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import { useFocusEffect } from "@react-navigation/core";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
const FamilyChoresProgress = ({
setPageIndex,
@ -47,7 +47,7 @@ const FamilyChoresProgress = ({
</TouchableOpacity>
<View centerH>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 23 }}>
Family Chores Progress Report
Family Todos Progress Report
</Text>
</View>
<View row spread marginT-35 marginB-20>
@ -92,7 +92,7 @@ const FamilyChoresProgress = ({
style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}
marginV-20
>
Chore Tracker
Todos Tracker
</Text>
{children?.map((child) => (
<View
@ -133,7 +133,7 @@ const FamilyChoresProgress = ({
</Text>
<View centerV>
<Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
{`${child?.weeklyCompletedTodos ?? 0}/y chores completed`}
{`${child?.weeklyCompletedTodos ?? 0} todos completed`}
</Text>
</View>
</View>

84
components/pages/todos/user-chores/UserChart.tsx
View File

@ -1,57 +1,53 @@
import React from "react";
import React, {useEffect, useState} from "react";
import { BarChart } from "react-native-gifted-charts";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import {chartDayMap, weekOrder} from "@/constants/common";
const UserChart = () => {
const barColor = "#05a8b6"
const data = [
{
value: 290, // Direct value of the bar
frontColor: barColor, // Color of the bar
label: "M",
},
{
value: 190,
frontColor: barColor,
label: "Tu",
},
{
value: 210,
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",
},
];
const UserChart = ({ profileData }: {
profileData: UserProfile | undefined;
}) => {
const [dataList, setDataList] = useState([]);
const barColor = "#05a8b6";
useEffect(() => {
let weeklyDayPoints = profileData?.weeklyDayPoints || {
Monday: 0,
Tuesday: 0,
Wednesday: 0,
Thursday: 0,
Friday: 0,
Saturday: 0,
Sunday: 0,
};
// Sort by day
const sortedWeeklyPoints = Object.fromEntries(
weekOrder.map(day => [day, weeklyDayPoints[day]])
);
const data = Object.keys(sortedWeeklyPoints).map((day) => {
const value = weeklyDayPoints[day];
return {
value: value,
frontColor: barColor,
label: chartDayMap[day],
}
});
setDataList(data);
}, [])
return (
<BarChart
data={data}
data={dataList}
width={255}
height={150} // Height of the chart
barWidth={20} // Width of each bar
noOfSections={5} // Number of horizontal sections (for 0 to 1000 in steps of 200)
maxValue={1000} // Max value on the chart
stepValue={200} // Step size for horizontal lines
maxValue={500} // Max value on the chart
stepValue={100} // Step size for horizontal lines
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
rulesColor="#dadada" // Color for the horizontal lines
barBorderTopLeftRadius={5} // Round the bars

55
components/pages/todos/user-chores/UserChoresProgress.tsx
View File

@ -1,18 +1,37 @@
import {Button, ButtonSize, Dialog, ProgressBar, Text, TouchableOpacity, View,} from "react-native-ui-lib";
import React, {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 from "../ProgressCard";
import {AntDesign, Ionicons} from "@expo/vector-icons";
import {ScrollView} from "react-native-gesture-handler";
import ProgressCard, {transformNumber} from "../ProgressCard";
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 { useSpendPoints } from "@/hooks/firebase/useUpdateUserData";
const UserChoresProgress = ({
setPageIndex,
}: {
setPageIndex: (value: number) => void;
}) => {
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);
useEffect(() => {
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
@ -52,7 +71,7 @@ const UserChoresProgress = ({
</Text>
</View>
<View style={styles.card} paddingL-10>
<UserChart/>
<UserChart profileData={profileData}/>
</View>
<View row spread marginT-20 marginB-8 centerV>
<Text text70 style={{fontFamily: "Manrope_600SemiBold"}}>
@ -86,11 +105,11 @@ const UserChoresProgress = ({
text70
style={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
>
You have 1200 points saved!
You have {allTimePoints} points saved!
</Text>
</View>
<ProgressBar
progress={80}
progress={transformedAllTimePoints}
progressColor="#ff9900"
style={{
height: 21,
@ -101,7 +120,7 @@ const UserChoresProgress = ({
/>
<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>
@ -114,12 +133,13 @@ const UserChoresProgress = ({
How would you like to spend your points?
</Text>
<Button
label="Skip a Chore Cor a Day - 150 pts"
label="Skip a Todo For a Day - 150 pts"
text70
marginB-15
backgroundColor="#05a8b6"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(150)}
/>
<Button
label="Extra Screen Time - 100 pts"
@ -128,6 +148,7 @@ const UserChoresProgress = ({
backgroundColor="#ea156c"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(100)}
/>
<Button
label="Movie Night - 50 pts"
@ -136,6 +157,7 @@ const UserChoresProgress = ({
backgroundColor="#7305d4"
size={ButtonSize.large}
labelStyle={styles.bigButtonText}
onPress={() => onClickSpendPoints(50)}
/>
<Button
label="Ice Cream Treat - 25 pts"
@ -144,6 +166,7 @@ const UserChoresProgress = ({
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'}}>

11
constants/common.ts Normal file
View File

@ -0,0 +1,11 @@
export const chartDayMap = {
Monday: "M",
Tuesday: "Tu",
Wednesday: "W",
Thursday: "Th",
Friday: "F",
Saturday: "Sa",
Sunday: "Su",
}
export const weekOrder = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];

2
hooks/firebase/useGetTodos.ts
View File

@ -11,7 +11,7 @@ export const useGetTodos = () => {
queryFn: async () => {
let snapshot;
if (profileData?.userType === ProfileType.PARENT) {
if (profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.FAMILY_DEVICE) {
snapshot = await firestore()
.collection("Todos")
.where("familyId", "==", profileData?.familyId)

8
hooks/firebase/useUpdateTodo.ts
View File

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

27
hooks/firebase/useUpdateUserData.ts
View File

@ -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!`);
},
});
}