mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 08:24:55 +00:00
Merge branch 'dev'
This commit is contained in:
Milan Paunovic
@ -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",
|
||||
},
|
||||
});
|
||||
|
||||
@ -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
20
assets/svgs/ClockOIcon.tsx
Normal 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
20
assets/svgs/DropdownIcon.tsx
Normal 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
18
assets/svgs/RepeatIcon.tsx
Normal 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
|
||||
@ -1,15 +1,24 @@
|
||||
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 { profileData } = useAuthContext();
|
||||
|
||||
const handleSegmentChange = (index: number) => {
|
||||
const selectedMode = modeMap.get(index);
|
||||
@ -29,7 +38,7 @@ export const CalendarHeader = memo(() => {
|
||||
setSelectedDate(updatedDate);
|
||||
};
|
||||
|
||||
const isSelectedDateToday = isSameDay(selectedDate, new Date())
|
||||
const isSelectedDateToday = isSameDay(selectedDate, new Date());
|
||||
|
||||
return (
|
||||
<View
|
||||
@ -47,38 +56,60 @@ export const CalendarHeader = memo(() => {
|
||||
}}
|
||||
>
|
||||
<View row centerV gap-3>
|
||||
<Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
|
||||
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
|
||||
{selectedDate.getFullYear()}
|
||||
</Text>
|
||||
<Picker
|
||||
value={months[selectedDate.getMonth()]}
|
||||
placeholder={"Select Month"}
|
||||
style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
|
||||
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
|
||||
mode={PickerModes.SINGLE}
|
||||
onChange={(itemValue) => handleMonthChange(itemValue as string)}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
|
||||
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
|
||||
topBarProps={{
|
||||
title: selectedDate.getFullYear().toString(),
|
||||
titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
|
||||
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
|
||||
}}
|
||||
>
|
||||
{months.map((month) => (
|
||||
<Picker.Item key={month} label={month} value={month}/>
|
||||
<Picker.Item key={month} label={month} value={month} />
|
||||
))}
|
||||
</Picker>
|
||||
</View>
|
||||
|
||||
<View row>
|
||||
<View row centerV>
|
||||
{!isSelectedDateToday && (
|
||||
<Button size={"small"} marginR-5 label={"Today"} onPress={() => {
|
||||
setSelectedDate(new Date())
|
||||
setMode("day")
|
||||
}}/>
|
||||
<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"}]}
|
||||
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
|
||||
backgroundColor="#ececec"
|
||||
inactiveColor="#919191"
|
||||
activeBackgroundColor="#ea156c"
|
||||
@ -92,8 +123,7 @@ export const CalendarHeader = memo(() => {
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
;
|
||||
);
|
||||
});
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
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
|
||||
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;
|
||||
@ -22,11 +22,12 @@ interface EventCalendarProps {
|
||||
const getTotalMinutes = () => {
|
||||
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,7 +36,7 @@ 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) {
|
||||
@ -47,35 +48,41 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
|
||||
}
|
||||
}, [events, mode]);
|
||||
|
||||
const handlePressEvent = useCallback((event: CalendarEvent) => {
|
||||
const handlePressEvent = useCallback(
|
||||
(event: CalendarEvent) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setEditVisible(true);
|
||||
console.log({event})
|
||||
console.log({ event });
|
||||
setEventForEdit(event);
|
||||
} else {
|
||||
setMode("day")
|
||||
setMode("day");
|
||||
setSelectedDate(event.start);
|
||||
}
|
||||
}, [setEditVisible, setEventForEdit, mode]);
|
||||
},
|
||||
[setEditVisible, setEventForEdit, mode]
|
||||
);
|
||||
|
||||
const handlePressCell = useCallback(
|
||||
(date: Date) => {
|
||||
if (mode === "day" || mode === "week") {
|
||||
setSelectedNewEndDate(date);
|
||||
} else {
|
||||
setMode("day")
|
||||
setMode("day");
|
||||
setSelectedDate(date);
|
||||
}
|
||||
},
|
||||
[mode, setSelectedNewEndDate, setSelectedDate]
|
||||
);
|
||||
|
||||
const handleSwipeEnd = useCallback((date: Date) => {
|
||||
const handleSwipeEnd = useCallback(
|
||||
(date: Date) => {
|
||||
setSelectedDate(date);
|
||||
}, [setSelectedDate]);
|
||||
},
|
||||
[setSelectedDate]
|
||||
);
|
||||
|
||||
const memoizedEventCellStyle = useCallback(
|
||||
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
|
||||
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
|
||||
[]
|
||||
);
|
||||
|
||||
@ -92,13 +99,13 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
|
||||
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"/>
|
||||
<ActivityIndicator size="large" color="#0000ff" />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@ -122,7 +129,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
|
||||
scrollOffsetMinutes={offsetMinutes}
|
||||
/>
|
||||
);
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
segmentslblStyle: {
|
||||
@ -138,10 +146,18 @@ const styles = StyleSheet.create({
|
||||
alignContent: "center",
|
||||
width: 38,
|
||||
right: 42,
|
||||
height: 13,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
dayHeader: {
|
||||
backgroundColor: "#4184f2",
|
||||
aspectRatio: 1,
|
||||
borderRadius: 100,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
},
|
||||
});
|
||||
@ -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}
|
||||
>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
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;
|
||||
@ -12,23 +15,25 @@ interface IEditGrocery {
|
||||
setCategory?: (category: GroceryCategory) => void;
|
||||
setSubmit?: (value: boolean) => void;
|
||||
closeEdit?: (value: boolean) => void;
|
||||
handleEditSubmit?: Function
|
||||
handleEditSubmit?: Function;
|
||||
}
|
||||
|
||||
const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
|
||||
const {fuzzyMatchGroceryCategory} = useGroceryContext();
|
||||
const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
|
||||
const { fuzzyMatchGroceryCategory } = useGroceryContext();
|
||||
const inputRef = useRef<TextFieldRef>(null);
|
||||
const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
|
||||
|
||||
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
|
||||
}
|
||||
console.log(editGrocery.category);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
@ -37,13 +42,15 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 25,
|
||||
padding: 15,
|
||||
marginTop: 10
|
||||
paddingHorizontal: 13,
|
||||
paddingVertical: 10,
|
||||
marginTop: 0,
|
||||
}}
|
||||
>
|
||||
<View row spread centerV>
|
||||
<TextField
|
||||
text70T
|
||||
style={{fontWeight: "400"}}
|
||||
style={{}}
|
||||
ref={inputRef}
|
||||
placeholder="Grocery"
|
||||
value={editGrocery.title}
|
||||
@ -54,11 +61,12 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
|
||||
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});
|
||||
editGrocery.handleEditSubmit({
|
||||
id: editGrocery.id,
|
||||
title: editGrocery.title,
|
||||
category: editGrocery.category,
|
||||
});
|
||||
}
|
||||
if (editGrocery.closeEdit) {
|
||||
editGrocery.closeEdit(false);
|
||||
@ -66,9 +74,72 @@ const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
|
||||
}}
|
||||
maxLength={25}
|
||||
/>
|
||||
<Text>{editGrocery.category}</Text>
|
||||
<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
|
||||
}
|
||||
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;
|
||||
|
||||
@ -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,
|
||||
category: item.category,
|
||||
setTitle: setNewTitle,
|
||||
setCategory: setCategory,
|
||||
closeEdit: setIsEditingTitle,
|
||||
handleEditSubmit: updateGroceryItem
|
||||
handleEditSubmit: updateGroceryItem,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!item.approved ? (
|
||||
<View row centerV marginB-10>
|
||||
<AntDesign
|
||||
{isParent && <><AntDesign
|
||||
name="check"
|
||||
size={24}
|
||||
style={{
|
||||
color: item.approved ? "green" : "#aaaaaa",
|
||||
color: "green",
|
||||
marginRight: 15,
|
||||
}}
|
||||
onPress={() => {
|
||||
handleItemApproved(item.id, { approved: true });
|
||||
isParent ? handleItemApproved(item.id, { approved: true }) : null
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
) : (
|
||||
!isEditingTitle && (
|
||||
<Checkbox
|
||||
value={item.bought}
|
||||
containerStyle={styles.checkbox}
|
||||
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
|
||||
{profileData?.pfp ? <ImageBackground
|
||||
source={require("../../../assets/images/child-picture.png")}
|
||||
style={{
|
||||
width: 22.36,
|
||||
height: 24.64,
|
||||
aspectRatio: 1,
|
||||
borderRadius: 50,
|
||||
backgroundColor: "red",
|
||||
marginRight: 10,
|
||||
overflow: 'hidden'
|
||||
borderRadius: 22,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
source={require('../../../assets/images/child-picture.png')}
|
||||
/>
|
||||
/> : <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;
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -1,18 +1,26 @@
|
||||
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 { user, profileData } = useAuthContext();
|
||||
const [timeZone, setTimeZone] = useState<string>(
|
||||
profileData?.timeZone! ?? Localization.getCalendars()[0].timeZone
|
||||
);
|
||||
@ -20,14 +28,16 @@ const MyProfile = () => {
|
||||
const [firstName, setFirstName] = useState<string>(
|
||||
profileData?.firstName || ""
|
||||
);
|
||||
const [profileImage, setProfileImage] = useState<string | ImagePicker.ImagePickerAsset | null>(profileData?.pfp || null);
|
||||
const [profileImage, setProfileImage] = useState<
|
||||
string | ImagePicker.ImagePickerAsset | null
|
||||
>(profileData?.pfp || null);
|
||||
|
||||
const {mutateAsync: updateUserData} = useUpdateUserData();
|
||||
const {mutateAsync: changeProfilePicture} = useChangeProfilePicture();
|
||||
const { mutateAsync: updateUserData } = useUpdateUserData();
|
||||
const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
|
||||
const isFirstRender = useRef(true);
|
||||
|
||||
const handleUpdateUserData = async () => {
|
||||
await updateUserData({newUserData: {firstName, lastName, timeZone}});
|
||||
await updateUserData({ newUserData: { firstName, lastName, timeZone } });
|
||||
};
|
||||
|
||||
const debouncedUserDataUpdate = debounce(handleUpdateUserData, 500);
|
||||
@ -45,12 +55,15 @@ const MyProfile = () => {
|
||||
setFirstName(profileData.firstName || "");
|
||||
setLastName(profileData.lastName || "");
|
||||
// setProfileImage(profileData.pfp || null);
|
||||
setTimeZone(profileData.timeZone || Localization.getCalendars()[0].timeZone!);
|
||||
setTimeZone(
|
||||
profileData.timeZone || Localization.getCalendars()[0].timeZone!
|
||||
);
|
||||
}
|
||||
}, [profileData]);
|
||||
|
||||
const pickImage = async () => {
|
||||
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
const permissionResult =
|
||||
await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
if (!permissionResult.granted) {
|
||||
alert("Permission to access camera roll is required!");
|
||||
return;
|
||||
@ -65,28 +78,48 @@ const MyProfile = () => {
|
||||
|
||||
if (!result.canceled) {
|
||||
setProfileImage(result.assets[0].uri);
|
||||
changeProfilePicture(result.assets[0])
|
||||
changeProfilePicture(result.assets[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearImage = async () => {
|
||||
await updateUserData({newUserData: {pfp: null}});
|
||||
setProfileImage(null)
|
||||
}
|
||||
await updateUserData({ newUserData: { pfp: null } });
|
||||
setProfileImage(null);
|
||||
};
|
||||
|
||||
const pfpUri = profileImage && typeof profileImage === 'object' && 'uri' in profileImage ? profileImage.uri : profileImage;
|
||||
const pfpUri =
|
||||
profileImage && typeof profileImage === "object" && "uri" in profileImage
|
||||
? profileImage.uri
|
||||
: profileImage;
|
||||
|
||||
return (
|
||||
<ScrollView style={{paddingBottom: 100, flex: 1}}>
|
||||
<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}
|
||||
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}>
|
||||
@ -161,7 +194,7 @@ const MyProfile = () => {
|
||||
>
|
||||
<Ionicons
|
||||
name={"chevron-down"}
|
||||
style={{alignSelf: "center"}}
|
||||
style={{ alignSelf: "center" }}
|
||||
size={20}
|
||||
color={"#000000"}
|
||||
/>
|
||||
@ -179,7 +212,11 @@ const MyProfile = () => {
|
||||
const timeZoneItems = Object.keys(tz.zones)
|
||||
.sort()
|
||||
.map((zone) => (
|
||||
<Picker.Item key={zone} label={zone.replace("/", " / ").replace("_", " ")} value={zone}/>
|
||||
<Picker.Item
|
||||
key={zone}
|
||||
label={zone.replace("/", " / ").replace("_", " ")}
|
||||
value={zone}
|
||||
/>
|
||||
));
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
@ -191,6 +228,11 @@ const styles = StyleSheet.create({
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 21,
|
||||
},
|
||||
pfpTxt: {
|
||||
fontFamily: "Manrope_500Medium",
|
||||
fontSize: 30,
|
||||
color: "white",
|
||||
},
|
||||
pfp: {
|
||||
aspectRatio: 1,
|
||||
width: 65.54,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
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";
|
||||
|
||||
@ -21,13 +21,17 @@ const AddChore = () => {
|
||||
style={styles.button}
|
||||
onPress={() => setIsVisible(!isVisible)}
|
||||
>
|
||||
<AntDesign name="plus" size={24} color="white"/>
|
||||
<Text white text60R marginL-10>
|
||||
<AntDesign name="plus" size={24} color="white" />
|
||||
<Text
|
||||
white
|
||||
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
|
||||
marginL-10
|
||||
>
|
||||
Create new to do
|
||||
</Text>
|
||||
</Button>
|
||||
</View>
|
||||
<AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible}/>
|
||||
{isVisible && <AddChoreDialog isVisible={isVisible} setIsVisible={setIsVisible} />}
|
||||
</LinearGradient>
|
||||
);
|
||||
};
|
||||
@ -52,5 +56,6 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 15,
|
||||
paddingHorizontal: 30,
|
||||
borderRadius: 30,
|
||||
width: 335,
|
||||
},
|
||||
});
|
||||
@ -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,15 +220,16 @@ 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}
|
||||
@ -197,12 +238,12 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
||||
}}
|
||||
style={{ marginVertical: 5 }}
|
||||
mode={PickerModes.MULTI}
|
||||
renderInput={() =>
|
||||
renderInput={() => (
|
||||
<Button
|
||||
size={ButtonSize.small}
|
||||
paddingH-8
|
||||
iconSource={() => (
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c"/>
|
||||
<Ionicons name="add-outline" size={20} color="#ea156c" />
|
||||
)}
|
||||
style={{
|
||||
marginLeft: "auto",
|
||||
@ -213,9 +254,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
||||
}}
|
||||
color="#ea156c"
|
||||
label="Assign"
|
||||
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
|
||||
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
|
||||
/>
|
||||
}
|
||||
)}
|
||||
>
|
||||
{members?.map((member) => (
|
||||
<Picker.Item
|
||||
@ -227,13 +268,19 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
|
||||
</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
59
components/pages/todos/RepeatFreq.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@ -5,7 +5,7 @@ import {
|
||||
TouchableOpacity,
|
||||
Dialog,
|
||||
Button,
|
||||
ButtonSize
|
||||
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);
|
||||
@ -37,7 +42,17 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
|
||||
};
|
||||
|
||||
const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
|
||||
const selectedMembers = members?.filter((x) =>
|
||||
props?.item?.assignees?.includes(x?.uid!)
|
||||
);
|
||||
|
||||
let isTodoEditable;
|
||||
if (isParent) {
|
||||
isTodoEditable = true
|
||||
} else {
|
||||
isTodoEditable = props.item.creatorId === profileData?.uid;
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
centerV
|
||||
@ -50,7 +65,13 @@ 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
|
||||
text70
|
||||
@ -60,14 +81,20 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
fontSize: 15,
|
||||
}}
|
||||
onPress={() => {
|
||||
setVisible(true);
|
||||
isTodoEditable ? setVisible(true) : null
|
||||
}}
|
||||
>
|
||||
{props.item.title}
|
||||
</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,6 +113,7 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
/>
|
||||
</View>
|
||||
<View centerV centerH marginT-8 row spread>
|
||||
<View row>
|
||||
{props.item.points && props.item.points > 0 ? (
|
||||
<TouchableOpacity
|
||||
onPress={() => {
|
||||
@ -96,7 +124,10 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
>
|
||||
<View centerV row gap-3>
|
||||
<Ionicons name="gift-outline" size={20} color="#46a80a" />
|
||||
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
|
||||
<Text
|
||||
color="#46a80a"
|
||||
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
|
||||
>
|
||||
{props.item.points} points
|
||||
</Text>
|
||||
</View>
|
||||
@ -104,11 +135,38 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
) : (
|
||||
<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>
|
||||
)}
|
||||
</View>
|
||||
<View row style={{ gap: 3 }}>
|
||||
{selectedMembers?.map((member) => {
|
||||
return member?.pfp ? (
|
||||
<ImageBackground
|
||||
source={require("../../../assets/images/child-picture.png")}
|
||||
source={{ uri: member.pfp }}
|
||||
style={{
|
||||
height: 24.64,
|
||||
aspectRatio: 1,
|
||||
@ -117,30 +175,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View style={{
|
||||
position: 'relative',
|
||||
<View
|
||||
style={{
|
||||
position: "relative",
|
||||
width: 24.64,
|
||||
aspectRatio: 1
|
||||
}}>
|
||||
<View style={{
|
||||
backgroundColor: '#ccc',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
aspectRatio: 1,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#ccc",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
borderRadius: 100, // Circular shape
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
}}>
|
||||
<Text style={{
|
||||
color: '#fff',
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{getInitials(member.firstName, member.lastName ?? "")}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
<Dialog
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
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;
|
||||
@ -8,29 +10,54 @@ const HeaderTemplate = (props: {
|
||||
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={{
|
||||
|
||||
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={{
|
||||
<Text
|
||||
text70L
|
||||
style={{
|
||||
fontSize: 19,
|
||||
fontFamily: "Manrope_400Regular"
|
||||
}}>Welcome, {profileData?.firstName}!</Text>
|
||||
fontFamily: "Manrope_400Regular",
|
||||
}}
|
||||
>
|
||||
Welcome, {profileData?.firstName}!
|
||||
</Text>
|
||||
)}
|
||||
<Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
|
||||
<Text
|
||||
text70B
|
||||
style={{ fontSize: 18, fontFamily: "Manrope_600SemiBold" }}
|
||||
>
|
||||
{props.message}
|
||||
</Text>
|
||||
{props.children && <View>{props.children}</View>}
|
||||
|
||||
@ -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";
|
||||
|
||||
|
||||
@ -6,7 +6,27 @@ export interface IToDo {
|
||||
points: number;
|
||||
rotate: boolean;
|
||||
repeatType: string;
|
||||
creatorId?: string,
|
||||
familyId?: 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"
|
||||
}
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
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({...todoData, id: newDoc.id, familyId: profileData?.familyId, creatorId: currentUser?.uid})
|
||||
.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)
|
||||
}
|
||||
|
||||
@ -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[];
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
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)
|
||||
}
|
||||
@ -22,3 +149,58 @@ export const useUpdateTodo = () => {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
Reference in New Issue
Block a user