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

Merge remote-tracking branch 'origin/main'

Browse Source
This commit is contained in:
Milan Paunovic
2024-12-30 11:37:19 +03:00
parent 28110b88cc 7b809d826c
commit 8b6171a819
12 changed files with 201 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/(auth)/_layout.tsx
View File

@ -159,6 +159,8 @@ export default function TabLayout() {
return (
<View marginR-16 row centerV>
{Device.deviceType === DeviceType.TABLET && isCalendarPage && <View flex-1 center><CalendarHeader />
</View>}
{isCalendarPage && (
<View marginR-16><RefreshButton onRefresh={onRefresh} isSyncing={isLoading} /></View>
)}

6
components/pages/calendar/DetailedCalendar.tsx
View File

@ -9,7 +9,9 @@ import {useFormattedEvents} from "@/components/pages/calendar/useFormattedEvents
import {useCalendarControls} from "@/components/pages/calendar/useCalendarControls";
import {EventCell} from "@/components/pages/calendar/EventCell";
import {isToday} from "date-fns";
import {View} from "react-native-ui-lib";
import { View } from "react-native-ui-lib";
import { DeviceType } from "expo-device";
import * as Device from "expo-device"
import {useAtomCallback} from 'jotai/utils'
interface EventCalendarProps {
@ -112,7 +114,7 @@ export const DetailedCalendar: React.FC<EventCalendarProps> = React.memo((
{...bodyProps}
renderEvent={renderEvent}
/>
<View marginB-0/>
{Device.deviceType === DeviceType.TABLET && <View style={{backgroundColor: 'white', height: '9%', width: '100%'}}/>}
</CalendarContainer>
);
});

2
components/pages/calendar/MonthCalendar.tsx
View File

@ -255,7 +255,7 @@ export const MonthCalendar: React.FC<EventCalendarProps> = React.memo(
ampm
// renderCustomDateForMonth={renderCustomDateForMonth}
/>
{/*<View style={{backgroundColor: 'white', height: 50, width: '100%'}}/>*/}
{Device.deviceType === DeviceType.TABLET && <View style={{backgroundColor: 'white', height: '9%', width: '100%'}}/>}
</>
);

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

@ -1,33 +1,43 @@
import { Text, TextField, TextFieldRef, View } from "react-native-ui-lib";
import React, { useEffect, useRef } from "react";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import React, { useEffect, useRef, useState } from "react";
import { GroceryCategory, GroceryFrequency, useGroceryContext } from "@/contexts/GroceryContext";
import { Dropdown } from "react-native-element-dropdown";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { findNodeHandle, StyleSheet, UIManager } from "react-native";
import {Alert, findNodeHandle, StyleSheet, UIManager} from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon";
import { AntDesign } from "@expo/vector-icons";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
interface IEditGrocery {
id?: string;
title: string;
category: GroceryCategory;
setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void;
setSubmit?: (value: boolean) => void;
closeEdit?: () => void;
handleEditSubmit?: Function;
}
const defaultGroceryItem = {
id: "",
title: "",
category: GroceryCategory.None,
approved: false,
recurring: false,
frequency: GroceryFrequency.Never,
bought: false,
};
const EditGroceryItem = ({
editGrocery,
onInputFocus,
closeEdit
}: {
editGrocery: IEditGrocery;
editGrocery?: IGrocery;
onInputFocus: (y: number) => void;
closeEdit?: Function
}) => {
const { fuzzyMatchGroceryCategory } = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null);
const containerRef = useRef(null);
const { profileData } = useAuthContext();
const {
updateGroceryItem,
addGrocery,
} = useGroceryContext();
const [grocery, setGrocery] = useState(editGrocery ?? defaultGroceryItem);
const handleFocus = () => {
if (containerRef.current) {
@ -57,29 +67,47 @@ const EditGroceryItem = ({
})
);
const handleClose = () => {
setGrocery(defaultGroceryItem);
}
const handleSubmit = () => {
inputRef?.current?.blur();
if (editGrocery.setSubmit) {
editGrocery.setSubmit(true);
if (validateGrocery()) {
if (grocery?.id === "") {
addGrocery({...grocery, approved: profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.CAREGIVER});
} else {
updateGroceryItem(grocery);
}
setGrocery(defaultGroceryItem);
if (closeEdit) {
closeEdit();
}
} else {
return;
}
}
const validateGrocery = () => {
if (!grocery?.title || grocery?.title === "") {
Alert.alert('Alert', 'Title field cannot be empty');
return false;
} else if (grocery.title?.length < 3 || grocery.title?.length > 25) {
Alert.alert('Alert', 'Title should be between 3 and 25 characters');
return false;
}
if (!grocery?.category || grocery?.category === "") {
Alert.alert('Alert', 'Category cannot be empty');
return false;
}
return true;
}
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
title: editGrocery.title,
category: editGrocery.category,
});
}
if (editGrocery.closeEdit) {
editGrocery.closeEdit();
}
};
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
console.log(editGrocery.category);
}, []);
return (
@ -100,37 +128,36 @@ const EditGroceryItem = ({
ref={inputRef}
onFocus={handleFocus}
placeholder="Grocery"
value={editGrocery.title}
value={grocery?.title}
onSubmitEditing={handleSubmit}
numberOfLines={1}
returnKeyType="done"
onChangeText={(value) => {
editGrocery.setTitle(value);
let groceryCategory = fuzzyMatchGroceryCategory(value);
if (editGrocery.setCategory) {
editGrocery.setCategory(groceryCategory);
}
setGrocery((oldData) => ({...oldData, title: value, category: groceryCategory}));
}}
maxLength={25}
/>
{(editGrocery.title || editGrocery.title !== "") && <View row centerV>
<AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={handleSubmit}
/>
<CloseXIcon
onPress={() => {
if (editGrocery.closeEdit) {
editGrocery.closeEdit();
{(grocery?.title !== "") &&
<View row centerV>
{grocery.title?.length > 2 && grocery.title?.length <= 25 &&
<AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={handleSubmit}
/>
}
}}
/>
</View>}
<CloseXIcon
onPress={() => {
handleClose();
}}
/>
</View>
}
</View>
<Dropdown
style={{ marginTop: 15 }}
@ -143,7 +170,7 @@ const EditGroceryItem = ({
}}
labelField="label"
valueField="value"
value={editGrocery.category}
value={grocery?.category ?? GroceryCategory.None}
iconColor="white"
activeColor={"#fd1775"}
containerStyle={styles.dropdownStyle}
@ -154,7 +181,7 @@ const EditGroceryItem = ({
<DropdownIcon
style={{ marginRight: 8 }}
color={
editGrocery.category == GroceryCategory.None
grocery?.category == GroceryCategory.None
? "#7b7b7b"
: "#fd1775"
}
@ -168,17 +195,7 @@ const EditGroceryItem = ({
);
}}
onChange={(item) => {
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
category: item.value,
});
if (editGrocery.closeEdit) editGrocery.closeEdit();
} else {
if (editGrocery.setCategory) {
editGrocery.setCategory(item.value);
}
}
setGrocery((oldData) => ({...oldData, category: item.value}));
}}
/>
</View>

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

@ -1,7 +1,7 @@
import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, { useState } from "react";
import { AntDesign } from "@expo/vector-icons";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import { useGroceryContext } from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem";
import { ImageBackground, StyleSheet } from "react-native";
@ -32,10 +32,6 @@ const GroceryItem = ({
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>(item.title ?? "");
const [category, setCategory] = useState<GroceryCategory>(
item.category ?? GroceryCategory.None
);
const closeEdit = () => setIsEditingTitle(false);
@ -72,15 +68,9 @@ const GroceryItem = ({
{isEditingTitle ? (
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
category: category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: closeEdit,
}}
editGrocery={item}
onInputFocus={onInputFocus}
closeEdit={closeEdit}
/>
) : (
<View flex>

47
components/pages/grocery/GroceryList.tsx
View File

@ -2,11 +2,10 @@ import { ActivityIndicator, Dimensions, FlatList, StyleSheet } from "react-nativ
import React, { useEffect, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import { GroceryCategory, GroceryFrequency, useGroceryContext } from "@/contexts/GroceryContext";
import { useGroceryContext } from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { AntDesign } from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import Ionicons from '@expo/vector-icons/Ionicons';
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
@ -28,24 +27,14 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
const {
groceries,
updateGroceryItem,
isAddingGrocery,
setIsAddingGrocery,
addGrocery,
} = useGroceryContext();
const { profileData } = useAuthContext();
const [approvedGroceries, setApprovedGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => item.approved)
);
const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => !item.approved)
);
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None
);
const [title, setTitle] = useState<string>("");
const [submit, setSubmitted] = useState<boolean>(false);
const [pendingVisible, setPendingVisible] = useState<boolean>(true);
const [approvedVisible, setApprovedVisible] = useState<boolean>(true);
@ -74,37 +63,11 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
{}
);
useEffect(() => {
if (submit) {
if (title?.length > 2 && title?.length <= 25) {
addGrocery({
id: "",
title: title,
category: category,
approved: profileData?.userType === ProfileType.PARENT || profileData?.userType === ProfileType.CAREGIVER,
recurring: false,
frequency: GroceryFrequency.Never,
bought: false,
});
setIsAddingGrocery(false);
setSubmitted(false);
setTitle("");
}
}
}, [submit]);
useEffect(() => {
setApprovedGroceries(groceries?.filter((item) => item.approved));
setPendingGroceries(groceries?.filter((item) => !item.approved));
}, [groceries]);
const handleCancelAddGrocery = () => {
setIsAddingGrocery(false);
setTitle("");
setCategory(GroceryCategory.None)
}
return (
<>
{!groceries &&
@ -260,14 +223,6 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
</View>
<View style={{marginTop: 8}}>
<EditGroceryItem
editGrocery={{
title: title,
setCategory: setCategory,
category: category,
setTitle: setTitle,
setSubmit: setSubmitted,
closeEdit: handleCancelAddGrocery
}}
onInputFocus={onInputFocus}
/>
</View>

1
components/pages/grocery/GroceryWrapper.tsx
View File

@ -1,7 +1,6 @@
import { Dimensions, ScrollView, Keyboard, Platform } from "react-native";
import { View } from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import AddGroceryItem from "./AddGroceryItem";
import GroceryList from "./GroceryList";
import { useGroceryContext } from "@/contexts/GroceryContext";

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

@ -77,7 +77,7 @@ const ToDosPage = () => {
{pageIndex == 2 && <UserChoresProgress setPageIndex={setPageIndex} />}
</View>
</ScrollView>
<AddChore />
{pageIndex === 0 && <AddChore />}
</>
);
};

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

@ -1,78 +1,74 @@
import React from "react";
import React, {useEffect, useState} from "react";
import { BarChart } from "react-native-gifted-charts";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
const FamilyChart = () => {
// Define the data for the bars
const data = [
{
value: 600, // Total value of the bar
stacks: [
{ value: 290, color: "#e7d526" }, // First part of the bar
{ value: 310, color: "#00a8b6" }, // Second part of the bar
],
label: "M",
},
{
value: 400,
stacks: [
{ value: 190, color: "#e7d526" },
{ value: 210, color: "#00a8b6" },
],
label: "Tu",
},
{
value: 400,
stacks: [
{ value: 210, color: "#e7d526" },
{ value: 190, color: "#00a8b6" },
],
label: "W",
},
{
value: 800,
stacks: [
{ value: 410, color: "#e7d526" },
{ value: 390, color: "#00a8b6" },
],
label: "Th",
},
{
value: 600,
stacks: [
{ value: 220, color: "#e7d526" },
{ value: 380, color: "#00a8b6" },
],
label: "F",
},
{
value: 200,
stacks: [
{ value: 160, color: "#e7d526" },
{ value: 40, color: "#00a8b6" },
],
label: "Sa",
},
{
value: 200,
stacks: [
{ value: 160, color: "#e7d526" },
{ value: 40, color: "#00a8b6" },
],
label: "Su",
},
];
const FamilyChart = ({ children }: {
children: Array<UserProfile>;
}) => {
const [dataList, setDataList] = useState([]);
useEffect(() => {
let dayPointsMap = {
Monday: {},
Tuesday: {},
Wednesday: {},
Thursday: {},
Friday: {},
Saturday: {},
Sunday: {},
};
children?.forEach((child) => {
let weeklyDayPoints = child.weeklyDayPoints || {
Monday: 0,
Tuesday: 0,
Wednesday: 0,
Thursday: 0,
Friday: 0,
Saturday: 0,
Sunday: 0,
};
Object.keys(weeklyDayPoints).forEach((day) => {
dayPointsMap = {
...dayPointsMap,
[day]: {
...dayPointsMap[day],
[child.uid]: weeklyDayPoints[day]
}
}
})
})
const data = Object.keys(dayPointsMap).map((day) => {
const userMap = dayPointsMap[day];
let stacks = Object.keys(userMap).map((userId) => {
let userProfile = children?.find((child) => child.uid === userId);
return {
value: userMap[userId],
color: userProfile.eventColor
}
});
return {
stacks: stacks,
label: day,
}
});
setDataList(data);
}, [children])
return (
<BarChart
stackData={data}
stackData={dataList}
width={250}
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", "100", "200", "300", "400", "500"]} // Custom Y-axis labels
hideRules={false} // Show the horizontal lines
rulesType="solid"
rulesThickness={1.2}

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

@ -1,5 +1,5 @@
import { View, Text } from "react-native-ui-lib";
import React from "react";
import React, {useCallback} from "react";
import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
@ -7,17 +7,25 @@ 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";
const FamilyChoresProgress = ({
setPageIndex,
}: {
setPageIndex: (value: number) => void;
}) => {
const { data: familyMembers } = useGetFamilyMembers();
const { data: familyMembers, refetch: refetchFamilyMembers } = useGetFamilyMembers();
const children = familyMembers?.filter(
(member) => member.userType === ProfileType.CHILD
);
useFocusEffect(
useCallback(() => {
refetchFamilyMembers();
}, [refetchFamilyMembers])
);
return (
<View marginT-20 marginH-5 marginB-100>
<ScrollView>
@ -47,35 +55,37 @@ const FamilyChoresProgress = ({
Points earned this week
</Text>
<View row>
{children?.map((child, index) => (
<View
key={child.uid}
style={styles.pfpSmall}
backgroundColor={child.eventColor || "#05a8b6"}
center
>
{child.pfp ? (
<ImageBackground
source={{ uri: child.pfp }}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<Text color="white" style={{fontSize: 15}}>
{child.firstName.at(0)}
{child.lastName.at(0)}
</Text>
)}
</View>
))}
{children?.map((child: UserProfile) => {
return child.weeklyPoints && child.weeklyPoints > 0 ? (
<View
key={child.uid}
style={styles.pfpSmall}
backgroundColor={child.eventColor || "#05a8b6"}
center
>
{child.pfp ? (
<ImageBackground
source={{ uri: child.pfp }}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<Text color="white" style={{fontSize: 15}}>
{child.firstName.at(0)}
{child.lastName.at(0)}
</Text>
)}
</View>
) : null
})}
</View>
</View>
<View style={styles.card} paddingL-10>
<FamilyChart />
<FamilyChart children={children} />
</View>
<Text
text70

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

@ -31,13 +31,13 @@ const UserChoresProgress = ({
style={{fontFamily: "Poppins_400Regular", fontSize: 14.71}}
color="#979797"
>
Return to To Do's
Return to To Dos
</Text>
</View>
</TouchableOpacity>
<View>
<Text style={{fontFamily: "Manrope_700Bold", fontSize: 20}}>
Your To Do's Progress Report
Your To Dos Progress Report
</Text>
</View>
<View row spread marginT-25 marginB-5>

11
hooks/firebase/useUpdateTodo.ts
View File

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