ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 00:24:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
Milan Paunovic
2024-10-26 18:40:10 +02:00
parent bc54c902d9 c25ddfcdf5
commit eb04043264
26 changed files with 1567 additions and 775 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import {
DrawerItemList,
} from "@react-navigation/drawer";
import { Button, View, Text, ButtonSize } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { ImageBackground, StyleSheet } from "react-native";
import Feather from "@expo/vector-icons/Feather";
import DrawerButton from "@/components/shared/DrawerButton";
import {
@ -43,7 +43,16 @@ export default function TabLayout() {
drawerContent={(props) => {
return (
<DrawerContentScrollView {...props} style={{ height: "100%" }}>
<View centerH centerV margin-30>
<View centerV margin-30 row>
<ImageBackground
source={require("../../assets/images/splash.png")}
style={{
backgroundColor: "transparent",
height: 51.43,
aspectRatio: 1,
marginRight: 8,
}}
/>
<Text style={styles.title}>Welcome to Cally</Text>
</View>
<View
@ -203,7 +212,7 @@ const styles = StyleSheet.create({
label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
title: {
fontSize: 26.13,
fontFamily: 'Manrope_600SemiBold',
color: "#262627"
}
fontFamily: "Manrope_600SemiBold",
color: "#262627",
},
});

1
assets/svgs/CalendarIcon.tsx
View File

@ -4,6 +4,7 @@ const CalendarIcon: React.FC<SvgProps> = (props) => (
<Svg
width={props.width || 21}
height={props.height || 21}
viewBox="0 0 21 21"
fill="none"
{...props}
>

20
assets/svgs/ClockOIcon.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react"
import Svg, { SvgProps, Path } from "react-native-svg"
const ClockOIcon = (props: SvgProps) => (
<Svg
width={props.height || 22}
height={props.height || 22}
viewBox="0 0 22 22"
fill="none"
{...props}
>
<Path
stroke={props.color || "#919191"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M11 5.444V11l1.667 2.778M21 11c0 5.523-4.477 10-10 10S1 16.523 1 11 5.477 1 11 1s10 4.477 10 10Z"
/>
</Svg>
)
export default ClockOIcon

20
assets/svgs/DropdownIcon.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from "react";
import Svg, { SvgProps, Path } from "react-native-svg";
const DropdownIcon = (props: SvgProps) => (
<Svg
width={props.width || 15}
height={props.height || 11}
fill="none"
viewBox="0 0 15 11"
{...props}
>
<Path
stroke={props.color || "#FD1775"}
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={props.strokeWidth || 1.393}
d="M4.713 1.318h9.056m-9.056 4.18h9.056m-9.056 4.18h9.056M1.23 1.667h.697V.97H1.23v.696Zm0 4.18h.697V5.15H1.23v.696Zm0 4.18h.697V9.33H1.23v.696Z"
/>
</Svg>
);
export default DropdownIcon;

18
assets/svgs/RepeatIcon.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from "react"
import Svg, { SvgProps, Path } from "react-native-svg"
const RepeatIcon = (props: SvgProps) => (
<Svg
width={props.height || 13}
height={props.height || 13}
fill="none"
{...props}
>
<Path
stroke={props.color || "#858585"}
strokeLinecap="round"
strokeLinejoin="round"
d="M1.158 7.197a5.42 5.42 0 0 1 9.58-4.103m0 0V1.099m0 1.995v.037H8.705m3.21 2.71a5.42 5.42 0 0 1-9.444 4.263m0 .001v-.198h2.033m-2.033.198v1.835"
/>
</Svg>
)
export default RepeatIcon

210
components/pages/calendar/CalendarHeader.tsx
View File

@ -1,104 +1,134 @@
import React, {memo} from 'react';
import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
import {MaterialIcons} from "@expo/vector-icons";
import {modeMap, months} from './constants';
import {StyleSheet} from "react-native";
import {useAtom} from "jotai";
import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
import {isSameDay} from "date-fns";
import React, { memo } from "react";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
View,
} from "react-native-ui-lib";
import { MaterialIcons } from "@expo/vector-icons";
import { modeMap, months } from "./constants";
import { StyleSheet } from "react-native";
import { useAtom } from "jotai";
import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
import { isSameDay } from "date-fns";
import { useAuthContext } from "@/contexts/AuthContext";
export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
const { profileData } = useAuthContext();
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month");
}, 150);
}
};
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
if (selectedMode) {
setTimeout(() => {
setMode(selectedMode as "day" | "week" | "month");
}, 150);
}
};
const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month);
const handleMonthChange = (month: string) => {
const currentDay = selectedDate.getDate();
const currentYear = selectedDate.getFullYear();
const newMonthIndex = months.indexOf(month);
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
setSelectedDate(updatedDate);
};
const isSelectedDateToday = isSameDay(selectedDate, new Date())
const isSelectedDateToday = isSameDay(selectedDate, new Date());
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
return (
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 10,
paddingVertical: 8,
borderRadius: 20,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
backgroundColor: "white",
marginBottom: 10,
}}
>
<View row centerV gap-3>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
}}
>
<View row centerV gap-3>
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
{selectedDate.getFullYear()}
</Text>
<Picker
value={months[selectedDate.getMonth()]}
placeholder={"Select Month"}
style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
topBarProps={{
title: selectedDate.getFullYear().toString(),
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
}}
>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month}/>
))}
</Picker>
</View>
{months.map((month) => (
<Picker.Item key={month} label={month} value={month} />
))}
</Picker>
</View>
<View row>
{!isSelectedDateToday && (
<Button size={"small"} marginR-5 label={"Today"} onPress={() => {
setSelectedDate(new Date())
setMode("day")
}}/>
)}
<View row centerV>
{!isSelectedDateToday && (
<Button
size={"xSmall"}
marginR-0
avoidInnerPadding
padding-7
style={{
borderRadius: 5,
backgroundColor: "white",
borderWidth: 0.7,
borderColor: "#dadce0",
height: 30,
}}
labelStyle={{
fontSize: 12,
color: "black",
fontFamily: "Manrope_500Medium",
}}
label={new Date().toLocaleDateString("en-US", {
timeZone: profileData?.timeZone || "",
})}
onPress={() => {
setSelectedDate(new Date());
setMode("day");
console.log(profileData?.timeZone)
}}
/>
)}
<View>
<SegmentedControl
segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
</View>
<View>
<SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
backgroundColor="#ececec"
inactiveColor="#919191"
activeBackgroundColor="#ea156c"
activeColor="white"
outlineColor="white"
outlineWidth={3}
segmentLabelStyle={styles.segmentslblStyle}
onChangeIndex={handleSegmentChange}
initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
/>
</View>
)
;
</View>
</View>
);
});
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
});
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
});

214
components/pages/calendar/EventCalendar.tsx
View File

@ -1,32 +1,33 @@
import React, {useCallback, useEffect, useMemo, useState} from 'react';
import {Calendar} from "react-native-big-calendar";
import {ActivityIndicator, StyleSheet, View} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { Calendar } from "react-native-big-calendar";
import { ActivityIndicator, StyleSheet, View } from "react-native";
import { useGetEvents } from "@/hooks/firebase/useGetEvents";
import { useAtom, useSetAtom } from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom
editVisibleAtom,
eventForEditAtom,
modeAtom,
selectedDateAtom,
selectedNewEventDateAtom,
} from "@/components/pages/calendar/atoms";
import {useAuthContext} from "@/contexts/AuthContext";
import {CalendarEvent} from "@/components/pages/calendar/interfaces";
import { useAuthContext } from "@/contexts/AuthContext";
import { CalendarEvent } from "@/components/pages/calendar/interfaces";
interface EventCalendarProps {
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
calendarHeight: number;
// WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
calendarWidth: number;
}
const getTotalMinutes = () => {
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
}
const date = new Date();
return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
@ -35,113 +36,128 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
const [isRendering, setIsRendering] = useState(true);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes())
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
useEffect(() => {
if (events && mode) {
setIsRendering(true);
const timeout = setTimeout(() => {
setIsRendering(false);
}, 300);
return () => clearTimeout(timeout);
}
if (events && mode) {
setIsRendering(true);
const timeout = setTimeout(() => {
setIsRendering(false);
}, 300);
return () => clearTimeout(timeout);
}
}, [events, mode]);
const handlePressEvent = useCallback((event: CalendarEvent) => {
const handlePressEvent = useCallback(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event})
setEventForEdit(event);
setEditVisible(true);
console.log({ event });
setEventForEdit(event);
} else {
setMode("day")
setSelectedDate(event.start);
setMode("day");
setSelectedDate(event.start);
}
}, [setEditVisible, setEventForEdit, mode]);
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day")
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
},
[setEditVisible, setEventForEdit, mode]
);
const handleSwipeEnd = useCallback((date: Date) => {
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day");
setSelectedDate(date);
}
},
[mode, setSelectedNewEndDate, setSelectedDate]
);
const handleSwipeEnd = useCallback(
(date: Date) => {
setSelectedDate(date);
}, [setSelectedDate]);
},
[setSelectedDate]
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[]
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
[]
);
const memoizedWeekStartsOn = useMemo(
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
() => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
[profileData]
);
const memoizedHeaderContentStyle = useMemo(
() => (mode === "day" ? styles.dayModeHeader : {}),
[mode]
() => (mode === "day" ? styles.dayModeHeader : {}),
[mode]
);
const memoizedEvents = useMemo(() => events ?? [], [events]);
useEffect(() => {
setOffsetMinutes(getTotalMinutes())
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
if (isLoading || isRendering) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
</View>
);
}
return (
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
enableEnrichedEvents
mode={mode}
events={memoizedEvents}
eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={selectedDate}
date={selectedDate}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
/>
<Calendar
bodyContainerStyle={styles.calHeader}
swipeEnabled
enableEnrichedEvents
mode={mode}
events={memoizedEvents}
eventCellStyle={memoizedEventCellStyle}
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={selectedDate}
date={selectedDate}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
/>
);
});
}
);
const styles = StyleSheet.create({
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
},
loadingContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
segmentslblStyle: {
fontSize: 12,
fontFamily: "Manrope_600SemiBold",
},
calHeader: {
borderWidth: 0,
},
dayModeHeader: {
alignSelf: "flex-start",
justifyContent: "space-between",
alignContent: "center",
width: 38,
right: 42,
height: 13,
},
loadingContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
dayHeader: {
backgroundColor: "#4184f2",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
});

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

@ -21,7 +21,7 @@ export const InnerCalendar = () => {
return (
<>
<View
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60}}
style={{flex: 1, backgroundColor: "#fff", borderRadius: 30, marginBottom: 60, overflow: "hidden"}}
ref={calendarContainerRef}
onLayout={onLayout}
>

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

@ -1,74 +1,145 @@
import {Text, View} from "react-native";
import React, {useEffect, useRef, useState} from "react";
import {TextField, TextFieldRef} from "react-native-ui-lib";
import {GroceryCategory, useGroceryContext,} from "@/contexts/GroceryContext";
import CategoryDropdown from "./CategoryDropdown";
import { Text, View } from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import { TextField, TextFieldRef } from "react-native-ui-lib";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import { Dropdown } from "react-native-element-dropdown";
import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { StyleSheet } from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon";
interface IEditGrocery {
id?: string;
title: string;
category: GroceryCategory;
setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void;
setSubmit?: (value: boolean) => void;
closeEdit?: (value: boolean) => void;
handleEditSubmit?: Function
id?: string;
title: string;
category: GroceryCategory;
setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void;
setSubmit?: (value: boolean) => void;
closeEdit?: (value: boolean) => void;
handleEditSubmit?: Function;
}
const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
const {fuzzyMatchGroceryCategory} = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null);
const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
const { fuzzyMatchGroceryCategory } = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null);
useEffect(() => {
if (editGrocery.setCategory)
editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
}, [editGrocery.title]);
const groceryCategoryOptions = Object.values(GroceryCategory).map(
(category) => ({
label: category,
value: category,
})
);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField
}
console.log(editGrocery.category);
}, []);
return (
<View
style={{
backgroundColor: "white",
width: "100%",
borderRadius: 25,
paddingHorizontal: 13,
paddingVertical: 10,
marginTop: 0,
}}
>
<View row spread centerV>
<TextField
text70T
style={{}}
ref={inputRef}
placeholder="Grocery"
value={editGrocery.title}
onChangeText={(value) => {
editGrocery.setTitle(value);
}}
onSubmitEditing={() => {
if (editGrocery.setSubmit) {
editGrocery.setSubmit(true);
}
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
title: editGrocery.title,
category: editGrocery.category,
});
}
if (editGrocery.closeEdit) {
editGrocery.closeEdit(false);
}
}}
maxLength={25}
/>
<CloseXIcon
onPress={() => {
if (editGrocery.closeEdit) editGrocery.closeEdit(false);
}}
/>
</View>
<Dropdown
style={{marginTop: 15}}
data={groceryCategoryOptions}
placeholder="Select grocery category"
placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
labelField="label"
valueField="value"
value={
editGrocery.category == GroceryCategory.None
? null
: editGrocery.category
}
}, []);
return (
<View
style={{
backgroundColor: "white",
width: "100%",
borderRadius: 25,
padding: 15,
marginTop: 10
}}
>
<TextField
text70T
style={{fontWeight: "400"}}
ref={inputRef}
placeholder="Grocery"
value={editGrocery.title}
onChangeText={(value) => {
editGrocery.setTitle(value);
}}
onSubmitEditing={() => {
if (editGrocery.setSubmit) {
editGrocery.setSubmit(true);
}
if (editGrocery.setCategory) {
editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
}
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({id: editGrocery.id, title: editGrocery.title, category: editGrocery.category});
}
if (editGrocery.closeEdit) {
editGrocery.closeEdit(false);
}
}}
maxLength={25}
/>
<Text>{editGrocery.category}</Text>
</View>
);
iconColor="white"
activeColor={"#fd1775"}
containerStyle={styles.dropdownStyle}
itemTextStyle={styles.itemText}
itemContainerStyle={styles.itemStyle}
selectedTextStyle={styles.selectedText}
renderLeftIcon={() => (
<DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
)}
renderItem={(item) => {
return (
<View height={36.02} centerV>
<Text style={styles.itemText}>{item.label}</Text>
</View>
);
}}
onChange={(item) => {
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
category: item.value,
});
console.log("kategorija vo diropdown: " + item.value);
if (editGrocery.closeEdit) editGrocery.closeEdit(false);
} else {
if (editGrocery.setCategory) {
editGrocery.setCategory(item.value);
}
}
}}
/>
</View>
);
};
const styles = StyleSheet.create({
itemText: {
fontFamily: "Manrope_400Regular",
fontSize: 15.42,
paddingLeft: 15,
},
selectedText: {
fontFamily: "Manrope_500Medium",
fontSize: 13.2,
color: "#fd1775",
},
dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 },
itemStyle: { padding: 0, margin: 0 },
});
export default EditGroceryItem;

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

@ -1,13 +1,14 @@
import { Checkbox, Text, TouchableOpacity, View } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import { AntDesign } from "@expo/vector-icons";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import {Checkbox, Text, TouchableOpacity, View} from "react-native-ui-lib";
import React, {useEffect, useState} from "react";
import {AntDesign} from "@expo/vector-icons";
import {GroceryCategory, useGroceryContext} from "@/contexts/GroceryContext";
import EditGroceryFrequency from "./EditGroceryFrequency";
import EditGroceryItem from "./EditGroceryItem";
import { ImageBackground, StyleSheet } from "react-native";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import {ImageBackground, StyleSheet} from "react-native";
import {IGrocery} from "@/hooks/firebase/types/groceryData";
import firestore from "@react-native-firebase/firestore";
import { UserProfile } from "@/hooks/firebase/types/profileTypes";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
const GroceryItem = ({
item,
@ -17,6 +18,8 @@ const GroceryItem = ({
handleItemApproved: (id: string, changes: Partial<IGrocery>) => void;
}) => {
const { updateGroceryItem } = useGroceryContext();
const { profileData } = useAuthContext();
const isParent = profileData?.userType === ProfileType.PARENT;
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
@ -36,7 +39,7 @@ const GroceryItem = ({
useEffect(() => {
setNewTitle(item.title);
console.log(item);
getItemCreator(item?.creatorId);
}, []);
@ -53,14 +56,21 @@ const GroceryItem = ({
}
};
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
return (
<View
key={item.id}
style={{ borderRadius: 17, marginVertical: 5 }}
style={{
borderRadius: 17,
marginVertical: 5,
paddingHorizontal: isEditingTitle ? 0 : 13,
paddingVertical: isEditingTitle ? 0 : 10,
}}
backgroundColor="white"
centerV
paddingH-13
paddingV-10
>
<View row spread>
<EditGroceryFrequency
@ -73,56 +83,65 @@ const GroceryItem = ({
/>
{!isEditingTitle ? (
<View>
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
{ isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={styles.title}>
{item.title}
</Text>
</TouchableOpacity>
</TouchableOpacity> :
<Text text70T black style={styles.title}>
{item.title}
</Text>
}
</View>
) : (
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
category: category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: setIsEditingTitle,
handleEditSubmit: updateGroceryItem
}}
editGrocery={{
id: item.id,
title: newTitle,
category: item.category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: setIsEditingTitle,
handleEditSubmit: updateGroceryItem,
}}
/>
)}
{!item.approved ? (
<View row centerV marginB-10>
<AntDesign
name="check"
size={24}
style={{
color: item.approved ? "green" : "#aaaaaa",
marginRight: 15,
}}
onPress={() => {
handleItemApproved(item.id, { approved: true });
}}
{isParent && <><AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={() => {
isParent ? handleItemApproved(item.id, { approved: true }) : null
}}
/>
<AntDesign
<AntDesign
name="close"
size={24}
style={{ color: item.approved ? "#aaaaaa" : "red" }}
style={{ color: "red" }}
onPress={() => {
handleItemApproved(item.id, { approved: false });
}}
/>
isParent ? handleItemApproved(item.id, { approved: false }) : null
}}
/> </>}
</View>
) : (
<Checkbox
value={item.bought}
containerStyle={styles.checkbox}
hitSlop={20}
onValueChange={() =>
updateGroceryItem({ id: item.id, bought: !item.bought })
}
/>
!isEditingTitle && (
<Checkbox
value={item.bought}
containerStyle={[styles.checkbox, {borderRadius: 50}]}
style={styles.checked}
borderRadius={50}
color="#fd1575"
hitSlop={20}
onValueChange={() =>
updateGroceryItem({ id: item.id, bought: !item.bought })
}
/>
)
)}
</View>
{!item.approved && (
@ -131,17 +150,43 @@ const GroceryItem = ({
<View height={0.7} backgroundColor="#e7e7e7" width={"98%"} />
</View>
<View paddingL-0 paddingT-12 flexS row centerV>
<ImageBackground
style={{
width: 22.36,
aspectRatio: 1,
borderRadius: 50,
backgroundColor: "red",
marginRight: 10,
overflow: 'hidden'
}}
source={require('../../../assets/images/child-picture.png')}
/>
{profileData?.pfp ? <ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/> : <View
style={{
position: "relative",
width: 24.64,
aspectRatio: 1,
marginRight: 4
}}
>
<View
style={{
backgroundColor: "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape
width: "100%",
height: "100%",
}}
>
<Text
style={{
color: "#fff",
fontSize: 12,
fontWeight: "bold",
}}
>
{getInitials(itemCreator.firstName, itemCreator.lastName ?? "")}
</Text>
</View>
</View>}
<Text color="#858585" style={styles.authorTxt}>
Requested by {itemCreator?.firstName}
</Text>
@ -166,6 +211,9 @@ const styles = StyleSheet.create({
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
checked: {
borderRadius: 50,
},
});
export default GroceryItem;

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

@ -30,8 +30,9 @@ const GroceryList = () => {
groceries?.filter((item) => item.approved !== true)
);
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.Bakery
GroceryCategory.None
);
const [title, setTitle] = useState<string>("");
const [submit, setSubmitted] = useState<boolean>(false);

490
components/pages/settings/user_settings_views/MyProfile.tsx
View File

@ -1,250 +1,292 @@
import React, {useEffect, useRef, useState} from "react";
import {StyleSheet, TouchableOpacity} from "react-native";
import {ScrollView} from "react-native-gesture-handler";
import React, { useEffect, useRef, useState } from "react";
import { StyleSheet, TouchableOpacity } from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import * as ImagePicker from "expo-image-picker";
import {Colors, Image, Picker, Text, TextField, View} from "react-native-ui-lib";
import {
Colors,
Image,
Picker,
Text,
TextField,
View,
} from "react-native-ui-lib";
import Ionicons from "@expo/vector-icons/Ionicons";
import * as tz from "tzdata";
import * as Localization from "expo-localization";
import debounce from "debounce";
import {useAuthContext} from "@/contexts/AuthContext";
import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
import {useChangeProfilePicture} from "@/hooks/firebase/useChangeProfilePicture";
import { useAuthContext } from "@/contexts/AuthContext";
import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
import { colorMap } from "@/constants/colorMap";
const MyProfile = () => {
const {user, profileData} = useAuthContext();
const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
);
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>(
profileData?.firstName || ""
);
const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null);
const { user, profileData } = useAuthContext();
const [timeZone, setTimeZone] = useState<string>(
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
);
const [lastName, setLastName] = useState<string>(profileData?.lastName || "");
const [firstName, setFirstName] = useState<string>(
profileData?.firstName || ""
);
const [profileImage, setProfileImage] = useState<
string | ImagePicker.ImagePickerAsset | null
>(profileData?.pfp || null);
const {mutateAsync: updateUserData} = useUpdateUserData();
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture();
const isFirstRender = useRef(true);
const { mutateAsync: updateUserData } = useUpdateUserData();
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
const isFirstRender = useRef(true);
const handleUpdateUserData = async () => {
await updateUserData({newUserData: {firstName, lastName, timeZone}});
};
const handleUpdateUserData = async () => {
await updateUserData({ newUserData: { firstName, lastName, timeZone } });
};
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
debouncedUserDataUpdate();
}, [timeZone, lastName, firstName, profileImage]);
useEffect(() => {
if (isFirstRender.current) {
isFirstRender.current = false;
return;
}
debouncedUserDataUpdate();
}, [timeZone, lastName, firstName, profileImage]);
useEffect(() => {
if (profileData) {
setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null);
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
}
}, [profileData]);
useEffect(() => {
if (profileData) {
setFirstName(profileData.firstName || "");
setLastName(profileData.lastName || "");
// setProfileImage(profileData.pfp || null);
setTimeZone(
profileData.timeZone || Localization.getCalendars()[0].timeZone!
);
}
}, [profileData]);
const pickImage = async () => {
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert("Permission to access camera roll is required!");
return;
}
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
if (!result.canceled) {
setProfileImage(result.assets[0].uri);
changeProfilePicture(result.assets[0])
}
};
const handleClearImage = async () => {
await updateUserData({newUserData: {pfp: null}});
setProfileImage(null)
const pickImage = async () => {
const permissionResult =
await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!permissionResult.granted) {
alert("Permission to access camera roll is required!");
return;
}
const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 1,
});
return (
<ScrollView style={{paddingBottom: 100, flex: 1}}>
<View style={styles.card}>
<Text style={styles.subTit}>Your Profile</Text>
<View row spread paddingH-15 centerV marginV-15>
<TouchableOpacity onPress={pickImage}>
<Image
key={pfpUri}
style={styles.pfp}
source={pfpUri ? {uri: pfpUri} : null}
/>
</TouchableOpacity>
if (!result.canceled) {
setProfileImage(result.assets[0].uri);
changeProfilePicture(result.assets[0]);
}
};
<TouchableOpacity onPress={pickImage}>
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
{profileData?.pfp ? "Change" : "Add"} Photo
</Text>
</TouchableOpacity>
const handleClearImage = async () => {
await updateUserData({ newUserData: { pfp: null } });
setProfileImage(null);
};
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(value);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Last name
</Text>
<TextField
text70
placeholder="Last name"
style={styles.txtBox}
value={lastName}
onChangeText={async (value) => {
setLastName(value);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
editable={false}
text70
placeholder="Email address"
value={user?.email?.toString()}
style={styles.txtBox}
/>
</View>
</View>
const pfpUri =
profileImage && typeof profileImage === "object" && "uri" in profileImage
? profileImage.uri
: profileImage;
<View style={styles.card}>
<Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{alignSelf: "center"}}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
</ScrollView>
);
return (
<ScrollView style={{ paddingBottom: 100, flex: 1 }}>
<View style={styles.card}>
<Text style={styles.subTit}>Your Profile</Text>
<View row spread paddingH-15 centerV marginV-15>
<TouchableOpacity onPress={pickImage}>
{pfpUri ? (
<Image
key={pfpUri}
style={styles.pfp}
source={pfpUri ? { uri: pfpUri } : null}
/>
) : (
<View
center
style={{
aspectRatio: 1,
width: 65.54,
backgroundColor: profileData?.eventColor ?? colorMap.pink,
borderRadius: 20,
}}
>
<Text style={styles.pfpTxt}>
{user?.email?.at(0)}
{user?.email?.at(1)}
</Text>
</View>
)}
</TouchableOpacity>
<TouchableOpacity onPress={pickImage}>
<Text style={styles.photoSet} color="#50be0c" onPress={pickImage}>
{profileData?.pfp ? "Change" : "Add"} Photo
</Text>
</TouchableOpacity>
{profileData?.pfp && (
<TouchableOpacity onPress={handleClearImage}>
<Text style={styles.photoSet}>Remove Photo</Text>
</TouchableOpacity>
)}
</View>
<View paddingH-15>
<Text text80 marginT-10 marginB-7 style={styles.label}>
First name
</Text>
<TextField
text70
placeholder="First name"
style={styles.txtBox}
value={firstName}
onChangeText={async (value) => {
setFirstName(value);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Last name
</Text>
<TextField
text70
placeholder="Last name"
style={styles.txtBox}
value={lastName}
onChangeText={async (value) => {
setLastName(value);
}}
/>
<Text text80 marginT-10 marginB-7 style={styles.label}>
Email address
</Text>
<TextField
editable={false}
text70
placeholder="Email address"
value={user?.email?.toString()}
style={styles.txtBox}
/>
</View>
</View>
<View style={styles.card}>
<Text style={styles.subTit}>Settings</Text>
<Text style={styles.jakarta12}>Time Zone</Text>
<View style={styles.viewPicker}>
<Picker
value={timeZone}
onChange={(item) => setTimeZone(item as string)}
showSearch
floatingPlaceholder
style={styles.inViewPicker}
trailingAccessory={
<View
style={{
justifyContent: "center",
alignItems: "center",
height: "100%",
marginTop: -38,
paddingRight: 15,
}}
>
<Ionicons
name={"chevron-down"}
style={{ alignSelf: "center" }}
size={20}
color={"#000000"}
/>
</View>
}
>
{timeZoneItems}
</Picker>
</View>
</View>
</ScrollView>
);
};
const timeZoneItems = Object.keys(tz.zones)
.sort()
.map((zone) => (
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
));
.sort()
.map((zone) => (
<Picker.Item
key={zone}
label={zone.replace("/", " / ").replace("_", " ")}
value={zone}
/>
));
const styles = StyleSheet.create({
card: {
marginVertical: 15,
backgroundColor: "white",
width: "100%",
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 21,
},
pfp: {
aspectRatio: 1,
width: 65.54,
backgroundColor: "gray",
borderRadius: 20,
},
txtBox: {
backgroundColor: "#fafafa",
borderRadius: 50,
borderWidth: 2,
borderColor: "#cecece",
padding: 15,
height: 45,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
},
subTit: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
label: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1",
},
photoSet: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07,
},
jakarta12: {
paddingVertical: 10,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1",
},
viewPicker: {
borderRadius: 50,
backgroundColor: Colors.grey80,
marginBottom: 16,
borderColor: Colors.grey50,
borderWidth: 1,
marginTop: 0,
height: 40,
zIndex: 10,
},
inViewPicker: {
borderRadius: 50,
paddingVertical: 12,
paddingHorizontal: 16,
marginBottom: 16,
marginTop: -20,
height: 40,
zIndex: 10,
},
card: {
marginVertical: 15,
backgroundColor: "white",
width: "100%",
borderRadius: 12,
paddingHorizontal: 20,
paddingVertical: 21,
},
pfpTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 30,
color: "white",
},
pfp: {
aspectRatio: 1,
width: 65.54,
backgroundColor: "gray",
borderRadius: 20,
},
txtBox: {
backgroundColor: "#fafafa",
borderRadius: 50,
borderWidth: 2,
borderColor: "#cecece",
padding: 15,
height: 45,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
},
subTit: {
fontFamily: "Manrope_500Medium",
fontSize: 15,
},
label: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1",
},
photoSet: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13.07,
},
jakarta12: {
paddingVertical: 10,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 12,
color: "#a1a1a1",
},
viewPicker: {
borderRadius: 50,
backgroundColor: Colors.grey80,
marginBottom: 16,
borderColor: Colors.grey50,
borderWidth: 1,
marginTop: 0,
height: 40,
zIndex: 10,
},
inViewPicker: {
borderRadius: 50,
paddingVertical: 12,
paddingHorizontal: 16,
marginBottom: 16,
marginTop: -20,
height: 40,
zIndex: 10,
},
});
export default MyProfile;
export default MyProfile;

95
components/pages/todos/AddChore.tsx
View File

@ -1,56 +1,61 @@
import {StyleSheet} from "react-native";
import React, {useState} from "react";
import {Button, ButtonSize, Text, View} from "react-native-ui-lib";
import {AntDesign} from "@expo/vector-icons";
import { StyleSheet } from "react-native";
import React, { useState } from "react";
import { Button, ButtonSize, Text, View } from "react-native-ui-lib";
import { AntDesign } from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import AddChoreDialog from "./AddChoreDialog";
const AddChore = () => {
const [isVisible, setIsVisible] = useState<boolean>(false);
const [isVisible, setIsVisible] = useState<boolean>(false);
return (
<LinearGradient
colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
locations={[0, 0.5, 1]}
style={styles.gradient}
return (
<LinearGradient
colors={["#f9f8f700", "#f9f8f7", "#f9f8f700"]}
locations={[0, 0.5, 1]}
style={styles.gradient}
>
<View style={styles.buttonContainer}>
<Button
marginH-25
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
>
<View style={styles.buttonContainer}>
<Button
marginH-25
size={ButtonSize.large}
style={styles.button}
onPress={() => setIsVisible(!isVisible)}
>
<AntDesign name="plus" size={24} color="white"/>
<Text white text60R marginL-10>
Create new to do
</Text>
</Button>
</View>
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
</LinearGradient>
);
<AntDesign name="plus" size={24} color="white" />
<Text
white
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
marginL-10
>
Create new to do
</Text>
</Button>
</View>
{isVisible && <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />}
</LinearGradient>
);
};
export default AddChore;
const styles = StyleSheet.create({
gradient: {
height: 150,
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
buttonContainer: {
width: "100%",
alignItems: "center",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 30,
},
});
gradient: {
height: 150,
position: "absolute",
bottom: 0,
width: "100%",
justifyContent: "center",
alignItems: "center",
},
buttonContainer: {
width: "100%",
alignItems: "center",
},
button: {
backgroundColor: "rgb(253, 23, 117)",
paddingVertical: 15,
paddingHorizontal: 30,
borderRadius: 30,
width: 335,
},
});

149
components/pages/todos/AddChoreDialog.tsx
View File

@ -1,4 +1,4 @@
import {View, Text, Button, Switch, PickerModes} from "react-native-ui-lib";
import { View, Text, Button, Switch, PickerModes } from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import { repeatOptions, useToDosContext } from "@/contexts/ToDosContext";
@ -15,7 +15,12 @@ import { Dimensions, StyleSheet } from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { IToDo } from "@/hooks/firebase/types/todoData";
import AssigneesDisplay from "@/components/shared/AssigneesDisplay";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import ClockIcon from "@/assets/svgs/ClockIcon";
import ClockOIcon from "@/assets/svgs/ClockOIcon";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import RepeatFreq from "./RepeatFreq";
interface IAddChoreDialog {
isVisible: boolean;
@ -30,7 +35,8 @@ const defaultTodo = {
date: new Date(),
rotate: false,
repeatType: "Every week",
assignees: []
assignees: [],
repeatDays: []
};
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
@ -38,11 +44,13 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const [todo, setTodo] = useState<IToDo>(
addChoreDialogProps.selectedTodo ?? defaultTodo
);
const [selectedAssignees, setSelectedAssignees] = useState<string[]>(addChoreDialogProps?.selectedTodo?.assignees ?? []);
const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
addChoreDialogProps?.selectedTodo?.assignees ?? []
);
const { width, height } = Dimensions.get("screen");
const [points, setPoints] = useState<number>(todo.points);
const {data: members} = useGetFamilyMembers();
const { data: members } = useGetFamilyMembers();
const handleClose = () => {
setTodo(defaultTodo);
@ -60,6 +68,25 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}
};
const handleRepeatDaysChange = (day: string, set: boolean) => {
if (set) {
const updatedTodo = {
...todo,
repeatDays: [...todo.repeatDays, day]
}
setTodo(updatedTodo);
} else {
const array = todo.repeatDays ?? [];
let index = array.indexOf(day);
array.splice(index, 1);
const updatedTodo = {
...todo,
repeatDays: array
}
setTodo(updatedTodo);
}
}
return (
<Dialog
bottom={true}
@ -100,13 +127,18 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
onPress={() => {
try {
if (addChoreDialogProps.selectedTodo) {
updateToDo({ ...todo, points: points, assignees: selectedAssignees });
updateToDo({
...todo,
points: points,
assignees: selectedAssignees
});
} else {
addToDo({
...todo,
done: false,
points: points,
assignees: selectedAssignees
assignees: selectedAssignees,
repeatDays: todo.repeatDays ?? []
});
}
handleClose();
@ -133,11 +165,15 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
<View row marginB-10>
{todo?.date && (
<View row centerV>
<Feather name="calendar" size={25} color="#919191" />
<CalendarIcon color="#919191" width={24} height={24} />
<DateTimePicker
value={todo.date}
text70
marginL-8
style={{
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
marginL-12
onChange={(date) => {
setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
}}
@ -146,9 +182,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
)}
</View>
<View row centerV>
<AntDesign name="clockcircleo" size={24} color="#919191" />
<ClockOIcon />
<Picker
marginL-8
marginL-12
placeholder="Select Repeat Type"
value={todo?.repeatType}
onChange={(value) => {
@ -169,7 +205,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}
}}
topBarProps={{ title: "Repeat" }}
style={{ marginVertical: 5 }}
style={{
marginVertical: 5,
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
}}
>
{repeatOptions.map((option) => (
<Picker.Item
@ -180,60 +220,67 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
))}
</Picker>
</View>
{todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={todo.repeatDays ?? []}/>}
</View>
<View style={styles.divider} />
<View marginH-30 marginB-10 row centerV>
<Ionicons name="person-circle-outline" size={28} color="#919191" />
<Text text70R marginL-10>
<ProfileIcon color="#919191" />
<Text style={styles.sub} marginL-10>
Assignees
</Text>
<View flex-1/>
<View flex-1 />
<Picker
marginL-8
value={selectedAssignees}
onChange={(value) => {
setSelectedAssignees([...selectedAssignees, ...value]);
}}
style={{ marginVertical: 5 }}
mode={PickerModes.MULTI}
renderInput={() =>
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c"/>
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
/>
}
marginL-8
value={selectedAssignees}
onChange={(value) => {
setSelectedAssignees([...selectedAssignees, ...value]);
}}
style={{ marginVertical: 5 }}
mode={PickerModes.MULTI}
renderInput={() => (
<Button
size={ButtonSize.small}
paddingH-8
iconSource={() => (
<Ionicons name="add-outline" size={20} color="#ea156c" />
)}
style={{
marginLeft: "auto",
borderRadius: 8,
backgroundColor: "#ffe8f1",
borderColor: "#ea156c",
borderWidth: 1,
}}
color="#ea156c"
label="Assign"
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
/>
)}
>
{members?.map((member) => (
<Picker.Item
key={member.uid}
label={member?.firstName + " " + member?.lastName}
value={member?.uid!}
/>
<Picker.Item
key={member.uid}
label={member?.firstName + " " + member?.lastName}
value={member?.uid!}
/>
))}
</Picker>
</View>
<View row marginL-27 marginT-0>
<AssigneesDisplay selectedAttendees={selectedAssignees} setSelectedAttendees={setSelectedAssignees}/>
<AssigneesDisplay
selectedAttendees={selectedAssignees}
setSelectedAttendees={setSelectedAssignees}
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text text80>Take Turns</Text>
<Text style={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 16 }}>
Take Turns
</Text>
<Switch
onColor={"#ea156c"}
value={todo.rotate}
style={{ width: 43.06, height: 27.13 }}
marginL-10
onValueChange={(value) =>
setTodo((oldValue) => ({ ...oldValue, rotate: value }))
@ -243,7 +290,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
<View style={styles.divider} />
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Text text70BL marginL-10>
<Text style={styles.sub} marginL-10>
Reward Points
</Text>
</View>
@ -284,4 +331,8 @@ const styles = StyleSheet.create({
marginBottom: 10,
marginTop: 25,
},
sub: {
fontFamily: "Manrope_600SemiBold",
fontSize: 18,
},
});

59
components/pages/todos/RepeatFreq.tsx Normal file
View File

@ -0,0 +1,59 @@
import { View, Text, TouchableOpacity, Picker } from "react-native-ui-lib";
import React, { useEffect, useState } from "react";
import {DAYS_OF_WEEK_ENUM} from "@/hooks/firebase/types/todoData";
const RepeatFreq = ({ repeatDays, handleRepeatDaysChange }: { repeatDays: string[], handleRepeatDaysChange: Function }) => {
const [weeks, setWeeks] = useState<number>(1);
const weekOptions: number[] = Array.from({ length: 52 }, (_, i) => i + 1);
useEffect(() => {}, [weeks]);
return (
<View row centerV spread marginR-30>
<RepeatOption value={DAYS_OF_WEEK_ENUM.MONDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.TUESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.WEDNESDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.THURSDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.FRIDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.SATURDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
<RepeatOption value={DAYS_OF_WEEK_ENUM.SUNDAY} handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={repeatDays}/>
</View>
);
};
export default RepeatFreq;
const RepeatOption = ({ value, handleRepeatDaysChange, repeatDays }: { value: string, handleRepeatDaysChange: Function, repeatDays: string[] }) => {
const [isSet, setisSet] = useState(repeatDays.includes(value));
const handleDayChange = () => {
handleRepeatDaysChange(value, !isSet)
setisSet(!isSet);
}
return (
<TouchableOpacity onPress={handleDayChange}>
<View
center
marginT-8
marginB-4
width={28}
height={28}
style={{
backgroundColor: isSet ? "#fd1575" : "white",
borderRadius: 100,
}}
>
<Text
style={{
fontFamily: !isSet ? "Manrope_400Regular" : "Manrope_700Bold",
color: isSet ? "white" : "gray",
}}
>
{value.at(0)}
</Text>
</View>
</TouchableOpacity>
);
};

214
components/pages/todos/ToDoItem.tsx
View File

@ -1,11 +1,11 @@
import {
View,
Text,
Checkbox,
TouchableOpacity,
Dialog,
Button,
ButtonSize
View,
Text,
Checkbox,
TouchableOpacity,
Dialog,
Button,
ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
@ -15,10 +15,15 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
const {data: members} = useGetFamilyMembers();
const { data: members } = useGetFamilyMembers();
const { profileData } = useAuthContext();
const isParent = profileData?.userType === ProfileType.PARENT;
const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@ -33,11 +38,21 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
}
};
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
const selectedMembers = members?.filter((x) =>
props?.item?.assignees?.includes(x?.uid!)
);
let isTodoEditable;
if (isParent) {
isTodoEditable = true
} else {
isTodoEditable = props.item.creatorId === profileData?.uid;
}
const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
return (
<View
centerV
@ -50,24 +65,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
opacity: props.item.done ? 0.3 : 1,
}}
>
{visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>}
{visible && (
<AddChoreDialog
isVisible={visible}
setIsVisible={setVisible}
selectedTodo={props.item}
/>
)}
<View paddingB-8 row spread>
<Text
<Text
text70
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium",
fontSize: 15,
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium",
fontSize: 15,
}}
onPress={() => {
setVisible(true);
isTodoEditable ? setVisible(true) : null
}}
>
>
{props.item.title}
</Text>
</Text>
<Checkbox
value={props.item.done}
containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
containerStyle={{
borderWidth: 0.7,
borderRadius: 50,
borderColor: "gray",
height: 24.64,
width: 24.64,
}}
color="#fd1575"
onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done });
@ -86,62 +113,99 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
/>
</View>
<View centerV centerH marginT-8 row spread>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
if (props.isSettings) {
setPointsModalVisible(true);
}
}}
>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
{props.item.points} points
<View row>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
if (props.isSettings) {
setPointsModalVisible(true);
}
}}
>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text
color="#46a80a"
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
>
{props.item.points} points
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
{!(props.item.repeatType == "None") && (
<View row centerV marginL-8>
<RepeatIcon style={{ marginRight: 4 }} />
<Text
style={{
fontSize: 12,
fontFamily: "Manrope_500Medium",
color: "#858585",
}}
>
{(() => {
switch (props.item.repeatType) {
case "Once a month":
return "Monthly";
case "Every week":
return "Weekly";
case "Once a year":
return "Yearly";
default:
return props.item.repeatType;
}
})()}
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
<View row style={{ gap: 3 }}>
{selectedMembers?.map((member) => {
return member?.pfp ? (
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<View style={{
position: 'relative',
width: 24.64,
aspectRatio: 1
}}>
<View style={{
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100, // Circular shape
width: '100%',
height: '100%'
}}>
<Text style={{
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
}}>
{getInitials(member.firstName, member.lastName ?? "")}
</Text>
</View>
</View>
)}
)}
</View>
)}
</View>
<View row style={{ gap: 3 }}>
{selectedMembers?.map((member) => {
return member?.pfp ? (
<ImageBackground
source={{ uri: member.pfp }}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<View
style={{
position: "relative",
width: 24.64,
aspectRatio: 1,
}}
>
<View
style={{
backgroundColor: "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape
width: "100%",
height: "100%",
}}
>
<Text
style={{
color: "#fff",
fontSize: 12,
fontWeight: "bold",
}}
>
{getInitials(member.firstName, member.lastName ?? "")}
</Text>
</View>
</View>
);
})}
</View>
</View>
<Dialog
visible={pointsModalVisible}

32
components/pages/todos/ToDosList.tsx
View File

@ -2,7 +2,13 @@ import { View, Text, TouchableOpacity, Icon } from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
import ToDoItem from "./ToDoItem";
import { format, isToday, isTomorrow } from "date-fns";
import {
addDays,
format,
isToday,
isTomorrow,
isWithinInterval,
} from "date-fns";
import { AntDesign } from "@expo/vector-icons";
import { IToDo } from "@/hooks/firebase/types/todoData";
@ -11,12 +17,26 @@ const groupToDosByDate = (toDos: IToDo[]) => {
return sortedTodos.reduce((groups, toDo) => {
let dateKey;
const isNext7Days = (date: Date) => {
const today = new Date();
return isWithinInterval(date, { start: today, end: addDays(today, 7) });
};
const isNext30Days = (date: Date) => {
const today = new Date();
return isWithinInterval(date, { start: today, end: addDays(today, 30) });
};
if (toDo.date === null) {
dateKey = "No Date";
} else if (isToday(toDo.date)) {
dateKey = "Today • " + format(toDo.date, "EEE MMM dd");
dateKey = "Today";
} else if (isTomorrow(toDo.date)) {
dateKey = "Tomorrow • " + format(toDo.date, "EEE MMM dd");
dateKey = "Tomorrow";
} else if (isNext7Days(toDo.date)) {
dateKey = "Next 7 Days";
} else if (isNext30Days(toDo.date)) {
dateKey = "Next 30 Days";
} else {
dateKey = format(toDo.date, "EEE MMM dd");
}
@ -110,12 +130,12 @@ const ToDosList = ({ isSettings }: { isSettings?: boolean }) => {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 20,
marginVertical: 8,
paddingHorizontal: 0,
marginBottom: 4,
marginTop: 15,
}}
>
<Text
text70
style={{
fontFamily: "Manrope_700Bold",
fontSize: 15,

95
components/shared/HeaderTemplate.tsx
View File

@ -1,43 +1,70 @@
import {Image, Text, View} from "react-native-ui-lib";
import { Image, Text, View } from "react-native-ui-lib";
import React from "react";
import {useAuthContext} from "@/contexts/AuthContext";
import { useAuthContext } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { colorMap } from "@/constants/colorMap";
const HeaderTemplate = (props: {
message: string;
isWelcome: boolean;
children?: React.ReactNode;
link?: React.ReactNode;
message: string;
isWelcome: boolean;
children?: React.ReactNode;
link?: React.ReactNode;
}) => {
const {user, profileData} = useAuthContext();
const { user, profileData } = useAuthContext();
const headerHeight: number = 72;
return (
<View row centerV marginV-15>
<Image
source={{uri: profileData?.pfp}}
style={{
height: headerHeight,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
marginRight: 20,
}}
/>
<View gap-3>
{props.isWelcome && (
<Text text70L style={{
fontSize: 19,
fontFamily: "Manrope_400Regular"
}}>Welcome, {profileData?.firstName}!</Text>
)}
<Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
const headerHeight: number = 72;
const styles = StyleSheet.create({
pfp: {
height: headerHeight,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
marginRight: 20,
backgroundColor: profileData?.eventColor ?? colorMap.pink,
},
pfpTxt: {
fontFamily: "Manrope_500Medium",
fontSize: 30,
color: 'white',
},
});
return (
<View row centerV marginV-15>
{profileData?.pfp ? (
<Image source={{ uri: profileData.pfp }} style={styles.pfp} />
) : (
<View style={styles.pfp} center>
<Text style={styles.pfpTxt}>
{user?.email?.at(0)}
{user?.email?.at(1)}
</Text>
</View>
);
)}
<View gap-3>
{props.isWelcome && (
<Text
text70L
style={{
fontSize: 19,
fontFamily: "Manrope_400Regular",
}}
>
Welcome, {profileData?.firstName}!
</Text>
)}
<Text
text70B
style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
</View>
);
};
export default HeaderTemplate;

2
contexts/ToDosContext.tsx
View File

@ -1,8 +1,6 @@
import { createContext, FC, ReactNode, useContext, useState } from "react";
import {IToDo} from "@/hooks/firebase/types/todoData";
import {useGetGroceries} from "@/hooks/firebase/useGetGroceries";
import {useGetTodos} from "@/hooks/firebase/useGetTodos";
import {useCreateGrocery} from "@/hooks/firebase/useCreateGrocery";
import {useCreateTodo} from "@/hooks/firebase/useCreateTodo";
import {useUpdateTodo} from "@/hooks/firebase/useUpdateTodo";

40
hooks/firebase/types/todoData.ts
View File

@ -1,12 +1,32 @@
export interface IToDo {
id: string;
title: string;
done: boolean;
date: Date | null;
points: number;
rotate: boolean;
repeatType: string;
creatorId?: string,
familyId?: string,
assignees?: string[]; // Optional list of assignees
id: string;
title: string;
done: boolean;
date: Date | null;
points: number;
rotate: boolean;
repeatType: string;
repeatDays?: string[];
repeatWeeks?: number;
creatorId?: string;
familyId?: string;
assignees?: string[]; // Optional list of assignees
connectedTodoId?: string;
}
export const DAYS_OF_WEEK_ENUM = {
MONDAY: "Monday",
TUESDAY: "Tuesday",
WEDNESDAY: "Wednesday",
THURSDAY: "Thursday",
FRIDAY: "Friday",
SATURDAY: "Saturday",
SUNDAY: "Sunday"
}
export const REPEAT_TYPE = {
NONE: "None",
EVERY_WEEK: "Every week",
ONCE_A_MONTH: "Once a month",
ONCE_A_YEAR: "Once a year"
}

3
hooks/firebase/useCreateEvent.ts
View File

@ -30,9 +30,10 @@ export const useCreateEvent = () => {
return;
}
}
const newDoc = firestore().collection('Events').doc();
await firestore()
.collection("Events")
.add({...eventData, creatorId: currentUser?.uid, familyId: profileData?.familyId});
.add({...eventData, id: newDoc.id, creatorId: currentUser?.uid, familyId: profileData?.familyId});
} catch (e) {
console.error(e);
}

95
hooks/firebase/useCreateTodo.ts
View File

@ -1,7 +1,17 @@
import { useMutation, useQueryClient } from "react-query";
import {useMutation, useQueryClient} from "react-query";
import firestore from "@react-native-firebase/firestore";
import { useAuthContext } from "@/contexts/AuthContext";
import { IToDo } from "@/hooks/firebase/types/todoData";
import {useAuthContext} from "@/contexts/AuthContext";
import {DAYS_OF_WEEK_ENUM, IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
import {addDays, addMonths, addWeeks, addYears, compareAsc, format, subDays} from "date-fns";
export const daysOfWeek = [
DAYS_OF_WEEK_ENUM.MONDAY,
DAYS_OF_WEEK_ENUM.TUESDAY,
DAYS_OF_WEEK_ENUM.WEDNESDAY,
DAYS_OF_WEEK_ENUM.THURSDAY,
DAYS_OF_WEEK_ENUM.FRIDAY,
DAYS_OF_WEEK_ENUM.SATURDAY,
DAYS_OF_WEEK_ENUM.SUNDAY];
export const useCreateTodo = () => {
const { user: currentUser, profileData } = useAuthContext();
@ -11,10 +21,81 @@ export const useCreateTodo = () => {
mutationKey: ["createTodo"],
mutationFn: async (todoData: Partial<IToDo>) => {
try {
const newDoc = firestore().collection('Todos').doc();
await firestore()
.collection("Todos")
.add({...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid})
if (todoData.repeatType === REPEAT_TYPE.NONE) {
const newDoc = firestore().collection('Todos').doc();
let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid}
await firestore()
.collection("Todos")
.add(originalTodo);
} else {
// Create the one original to do
const newDoc = firestore().collection('Todos').doc();
let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid, connectedTodoId: newDoc.id};
await firestore()
.collection("Todos")
.add(originalTodo);
const batch = firestore().batch();
if (todoData.repeatType === REPEAT_TYPE.EVERY_WEEK) {
let date = originalTodo.date;
let repeatDays = originalTodo.repeatDays;
const dates = [];
const originalDateDay = format(date, 'EEEE');
const originalNumber = daysOfWeek.indexOf(originalDateDay);
repeatDays?.forEach((day) => {
let number = daysOfWeek.indexOf(day);
let newDate;
if (originalNumber > number) {
let diff = originalNumber - number;
newDate = subDays(date, diff);
} else {
let diff = number - originalNumber;
newDate = addDays(date, diff);
}
dates.push(newDate);
});
// TODO: for the next 52 weeks
for (let i = 0; i < 4; i++) {
dates?.forEach((dateToAdd) => {
let newTodoDate = addWeeks(dateToAdd, i);
if (compareAsc(newTodoDate, originalTodo.date) !== 0) {
let docRef = firestore().collection("Todos").doc();
const newTodo = { ...originalTodo, id: docRef.id, date: newTodoDate, connectedTodoId: newDoc.id };
batch.set(docRef, newTodo);
}
})
}
} else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_MONTH) {
// for the next 12 months
for (let i = 1; i < 12; i++) {
let date = originalTodo.date;
const nextMonth = addMonths(date, i);
let docRef = firestore().collection("Todos").doc();
const newTodo = { ...originalTodo, id: docRef.id, date: nextMonth, connectedTodoId: newDoc.id };
batch.set(docRef, newTodo);
}
} else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_YEAR) {
// for the next 5 years
for (let i = 1; i < 5; i++) {
let date = originalTodo.date;
const nextMonth = addYears(date, i);
let docRef = firestore().collection("Todos").doc();
const newTodo = { ...originalTodo, id: docRef.id, date: nextMonth, connectedTodoId: newDoc.id };
batch.set(docRef, newTodo);
}
}
await batch.commit();
}
} catch (e) {
console.error(e)
}

2
hooks/firebase/useGetTodos.ts
View File

@ -1,7 +1,6 @@
import { useQuery } from "react-query";
import firestore from "@react-native-firebase/firestore";
import { useAuthContext } from "@/contexts/AuthContext";
import {UserProfile} from "@/hooks/firebase/types/profileTypes";
import {IToDo} from "@/hooks/firebase/types/todoData";
export const useGetTodos = () => {
@ -23,6 +22,7 @@ export const useGetTodos = () => {
...data,
id: doc.id,
date: data.date ? new Date(data.date.seconds * 1000) : null,
repeatDays: data.repeatDays ?? []
};
}) as IToDo[];
}

192
hooks/firebase/useUpdateTodo.ts
View File

@ -1,18 +1,145 @@
import { useMutation, useQueryClient } from "react-query";
import firestore from "@react-native-firebase/firestore";
import { IToDo } from "@/hooks/firebase/types/todoData";
import {IToDo, REPEAT_TYPE} from "@/hooks/firebase/types/todoData";
import {addDays, addMonths, addWeeks, addYears, compareAsc, format, subDays} from "date-fns";
import {daysOfWeek} from "@/hooks/firebase/useCreateTodo";
import {useAuthContext} from "@/contexts/AuthContext";
export const useUpdateTodo = () => {
const { user: currentUser, profileData } = useAuthContext();
const queryClients = useQueryClient()
return useMutation({
mutationKey: ["updateTodo"],
mutationFn: async (todoData: Partial<IToDo>) => {
try {
await firestore()
.collection("Todos")
.doc(todoData.id)
.update(todoData);
if (todoData.connectedTodoId) {
console.log("CONNECTED")
const snapshot = await firestore()
.collection("Todos")
.where("connectedTodoId", "==", todoData.connectedTodoId)
.get();
const connectedTodos = snapshot.docs.map((doc) => {
const data = doc.data();
return {
...data,
id: doc.id,
date: data.date ? new Date(data.date.seconds * 1000) : null,
ref: doc.ref
};
}) as IToDo[];
console.log("CONNECTED TODO");
let filteredTodos = connectedTodos?.filter((item) => compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 1 ||
compareAsc(format(item.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) === 0).sort((a,b) =>{
return b.date?.getSeconds() - a.date?.getSeconds();
});
let firstTodo = filteredTodos?.[0];
const batch = firestore().batch();
if (compareAsc(format(firstTodo?.date, 'yyyy-MM-dd'), format(todoData.date, 'yyyy-MM-dd')) !== 0 || firstTodo?.repeatType !== todoData.repeatType) {
console.log("DELETE");
filteredTodos?.forEach((item) => {
batch.delete(item.ref);
});
if (todoData.repeatType === REPEAT_TYPE.NONE) {
console.log("NONE");
const newDoc = firestore().collection('Todos').doc();
let originalTodo = {...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid}
batch.set(newDoc, originalTodo);
} else if (todoData.repeatType === REPEAT_TYPE.EVERY_WEEK) {
console.log("EVERY WEEK");
let date = todoData?.date;
let repeatDays = todoData?.repeatDays;
const dates = [];
const originalDateDay = format(date, 'EEEE');
const originalNumber = daysOfWeek.indexOf(originalDateDay);
repeatDays?.forEach((day) => {
let number = daysOfWeek.indexOf(day);
let newDate;
if (originalNumber > number) {
let diff = originalNumber - number;
newDate = subDays(date, diff);
} else {
let diff = number - originalNumber;
newDate = addDays(date, diff);
}
dates.push(newDate);
});
let todosToAddCycles = 4;
if (firstTodo?.repeatType === REPEAT_TYPE.EVERY_WEEK) {
todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
}
console.log(todosToAddCycles);
let newDoc = firestore().collection("Todos").doc();
const newTodo = { ...todoData, id: newDoc.id, date: todoData.date, connectedTodoId: newDoc?.id };
batch.set(newDoc, newTodo);
console.log(dates);
for (let i = 0; i < todosToAddCycles; i++) {
dates?.forEach((dateToAdd) => {
let newTodoDate = addWeeks(dateToAdd, i);
console.log("ENTER")
let docRef = firestore().collection("Todos").doc();
const newTodo = { ...todoData, id: docRef.id, date: newTodoDate, connectedTodoId: newDoc?.id };
batch.set(docRef, newTodo);
})
}
} else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_MONTH) {
console.log("ONCE A MONTH");
// for the next 12 months
for (let i = 0; i < 12; i++) {
let date = todoData?.date;
const nextMonth = addMonths(date, i);
const newTodo = { ...todoData, date: nextMonth, connectedTodoId: firstTodo?.connectedTodoId };
let docRef = firestore().collection("Todos").doc();
batch.set(docRef, newTodo);
}
} else if (todoData.repeatType === REPEAT_TYPE.ONCE_A_YEAR) {
console.log("ONCE A YEAR");
// for the next 5 years
for (let i = 0; i < 5; i++) {
let date = todoData?.date;
const nextMonth = addYears(date, i);
const newTodo = { ...todoData, date: nextMonth, connectedTodoId: firstTodo?.connectedTodoId };
let docRef = firestore().collection("Todos").doc();
batch.set(docRef, newTodo);
}
}
await batch.commit();
} else if (firstTodo?.repeatDays !== todoData.repeatDays) {
console.log("UPDATE REPEAT DAYS");
await updateRepeatDaysTodos(batch, todoData, firstTodo, filteredTodos)
} else {
filteredTodos?.forEach((item) => {
console.log("UPDATE");
batch.update(item.ref, {...todoData, date: item.date});
})
await batch.commit();
}
} else {
console.log("REGULAR UPDATE");
console.log(todoData);
await firestore()
.collection("Todos")
.doc(todoData.id)
.update(todoData);
}
} catch (e) {
console.error(e)
}
@ -21,4 +148,59 @@ export const useUpdateTodo = () => {
queryClients.invalidateQueries("todos")
}
})
}
const updateRepeatDaysTodos = async (batch: any, todoData: IToDo, firstTodo: IToDo, filteredTodos: IToDo[]) => {
const todosToAddCycles = filteredTodos?.length / firstTodo?.repeatDays?.length;
console.log(todosToAddCycles);
filteredTodos?.forEach((item) => {
batch.update(item.ref, {...todoData, date: item.date});
})
let newRepeatDays = todoData.repeatDays?.filter((element) => firstTodo?.repeatDays?.indexOf(element) === -1);
let removeRepeatDays = firstTodo?.repeatDays?.filter((element) => todoData?.repeatDays?.indexOf(element) === -1);
const dates = [];
let date = firstTodo?.date;
const originalDateDay = format(date, 'EEEE');
const originalNumber = daysOfWeek.indexOf(originalDateDay);
newRepeatDays?.forEach((day) => {
let number = daysOfWeek.indexOf(day);
let newDate;
if (originalNumber > number) {
let diff = originalNumber - number;
newDate = subDays(date, diff);
} else {
let diff = number - originalNumber;
newDate = addDays(date, diff);
}
dates.push(newDate);
});
for (let i = 0; i < todosToAddCycles; i++) {
dates?.forEach((dateToAdd) => {
let newTodoDate = addWeeks(dateToAdd, i);
if (compareAsc(newTodoDate, firstTodo?.date) !== 0) {
const newTodo = {...todoData, date: newTodoDate};
let docRef = firestore().collection("Todos").doc();
batch.set(docRef, newTodo);
}
})
}
removeRepeatDays?.forEach((removeDay) => {
filteredTodos?.forEach((item) => {
let todoDate = item.date;
const todoDateDay = format(todoDate, 'EEEE');
if (todoDateDay === removeDay) {
batch.delete(item.ref);
}
})
})
await batch.commit();
}

1
package.json
View File

@ -75,6 +75,7 @@
"react-native-app-auth": "^8.0.0",
"react-native-big-calendar": "^4.14.0",
"react-native-calendars": "^1.1306.0",
"react-native-element-dropdown": "^2.12.2",
"react-native-gesture-handler": "~2.16.1",
"react-native-gifted-charts": "^1.4.41",
"react-native-keyboard-manager": "^6.5.16-0",

7
yarn.lock
View File

@ -8953,6 +8953,13 @@ react-native-calendars@^1.1306.0:
optionalDependencies:
moment "^2.29.4"
react-native-element-dropdown@^2.12.2:
version "2.12.2"
resolved "https://registry.yarnpkg.com/react-native-element-dropdown/-/react-native-element-dropdown-2.12.2.tgz#48d0c12b87591e2498c73bbde80e18374a4c262e"
integrity sha512-Tf8hfRuniYEXo+LGoVgIMoItKWuPLX6jbqlwAFgMbBhmWGTuV+g1OVOAx/ny16kgnwp+NhgJoWpxhVvr7HSmXA==
dependencies:
lodash "^4.17.21"
react-native-gesture-handler@~2.16.1:
version "2.16.2"
resolved "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.16.2.tgz"