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

Merge branch 'dev'

Browse Source 
# Conflicts:
#	ios/cally/Info.plist
This commit is contained in:
Milan Paunovic
2024-10-28 01:27:48 +01:00
parent 5a4e76a841 059082cf65
commit d6ca7cc630
13 changed files with 1652 additions and 1454 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
components/pages/brain_dump/BrainDumpPage.tsx
View File

@ -1,12 +1,9 @@
import { Dimensions, ScrollView } from "react-native";
import React, { useState } from "react";
import { View, Text, Button } from "react-native-ui-lib";
import {Dimensions, ScrollView, StyleSheet} from "react-native";
import React, {useState} from "react";
import {Button, Text, TextField, View} from "react-native-ui-lib";
import DumpList from "./DumpList";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { TextField } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather, MaterialIcons } from "@expo/vector-icons";
import { TextInput } from "react-native-gesture-handler";
import {Feather, MaterialIcons} from "@expo/vector-icons";
import AddBrainDump from "./AddBrainDump";
import LinearGradient from "react-native-linear-gradient";
@ -27,7 +24,7 @@ const BrainDumpPage = () => {
isWelcome={false}
children={
<Text
style={{ fontFamily: "Manrope_400Regular", fontSize: 14 }}
style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
>
Drop your notes on-the-go here, and{"\n"}organize them later.
</Text>
@ -45,7 +42,7 @@ const BrainDumpPage = () => {
name="search"
size={24}
color="#9b9b9b"
style={{ paddingRight: 10 }}
style={{paddingRight: 10}}
/>
}
style={{
@ -55,29 +52,28 @@ const BrainDumpPage = () => {
placeholder="Search notes..."
/>
</View>
<DumpList searchText={searchText} />
<DumpList searchText={searchText}/>
</View>
</View>
</ScrollView>
</View>
<LinearGradient
colors={["#f2f2f2", "transparent"]}
start={{ x: 0.5, y: 1 }}
end={{ x: 0.5, y: 0 }}
colors={["#f9f8f700", "#f9f8f7"]}
locations={[0,1]}
style={{
position: "absolute",
bottom: 0,
height: 90,
height: 120,
width: Dimensions.get("screen").width,
justifyContent:'center',
alignItems:"center"
}}
>
<Button
style={{
height: 40,
position: "relative",
marginLeft: "auto",
width: 20,
right: 20,
width: "90%",
bottom: -10,
borderRadius: 30,
backgroundColor: "#fd1775",
@ -89,10 +85,10 @@ const BrainDumpPage = () => {
}}
>
<View row centerV centerH>
<MaterialIcons name="add" size={22} color={"white"} />
<MaterialIcons name="add" size={22} color={"white"}/>
<Text
white
style={{ fontSize: 16, fontFamily: "Manrope_600SemiBold" }}
style={{fontSize: 16, fontFamily: "Manrope_600SemiBold"}}
>
New
</Text>

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

@ -1,24 +1,17 @@
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";
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 {profileData} = useAuthContext();
const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index);
@ -56,23 +49,23 @@ 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, width: 85 }}
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>
@ -83,13 +76,13 @@ export const CalendarHeader = memo(() => {
size={"xSmall"}
marginR-0
avoidInnerPadding
padding-7
style={{
borderRadius: 5,
borderRadius: 50,
backgroundColor: "white",
borderWidth: 0.7,
borderColor: "#dadce0",
height: 30,
paddingHorizontal: 10
}}
labelStyle={{
fontSize: 12,
@ -101,15 +94,13 @@ export const CalendarHeader = memo(() => {
})}
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"

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

@ -1,8 +1,8 @@
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, ViewStyle} from "react-native";
import {useGetEvents} from "@/hooks/firebase/useGetEvents";
import {useAtom, useSetAtom} from "jotai";
import {
editVisibleAtom,
eventForEditAtom,
@ -10,8 +10,9 @@ import {
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";
import {Text} from "react-native-ui-lib";
interface EventCalendarProps {
calendarHeight: number;
@ -25,9 +26,9 @@ const getTotalMinutes = () => {
};
export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
({ calendarHeight }) => {
const { data: events, isLoading } = useGetEvents();
const { profileData } = useAuthContext();
({calendarHeight}) => {
const {data: events, isLoading} = useGetEvents();
const {profileData} = useAuthContext();
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom);
@ -38,6 +39,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
const [isRendering, setIsRendering] = useState(true);
const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
const todaysDate = new Date()
useEffect(() => {
if (events && mode) {
setIsRendering(true);
@ -52,7 +55,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
(event: CalendarEvent) => {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({ event });
console.log({event});
setEventForEdit(event);
} else {
setMode("day");
@ -82,7 +85,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
);
const memoizedEventCellStyle = useCallback(
(event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
(event: CalendarEvent) => ({backgroundColor: event.eventColor}),
[]
);
@ -91,13 +94,88 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
[profileData]
);
const memoizedHeaderContentStyle = useMemo(
() => (mode === "day" ? styles.dayModeHeader : {}),
[mode]
const isSameDate = useCallback((date1: Date, date2: Date) => {
return (
date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear()
);
}, []);
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]);
const dateStyle = useMemo(() => {
if (mode === "week") return undefined
return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader
: styles.otherDayHeader;
}, [selectedDate, mode]);
const memoizedHeaderContentStyle = useMemo(() => {
if (mode === "day") {
return styles.dayModeHeader;
} else if (mode === "week") {
return styles.weekModeHeader;
} else if (mode === "month") {
return styles.monthModeHeader;
} else {
return {};
}
}, [mode]);
const memoizedEvents = useMemo(() => events ?? [], [events]);
const renderCustomDateForMonth = (date: Date) => {
const circleStyle = useMemo<ViewStyle>(
() => ({
position: "absolute",
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderRadius: 15,
}),
[]
);
const defaultStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
}),
[circleStyle]
);
const currentDateStyle = useMemo<ViewStyle>(
() => ({
...circleStyle,
backgroundColor: "#4184f2",
}),
[circleStyle]
);
const renderDate = useCallback(
(date: Date) => {
const isCurrentDate = isSameDate(todaysDate, date);
const appliedStyle = isCurrentDate ? currentDateStyle : defaultStyle;
return (
<View style={{alignItems: "center"}}>
<View style={appliedStyle}>
<Text style={{color: isCurrentDate ? "white" : "black"}}>
{date.getDate()}
</Text>
</View>
</View>
);
},
[todaysDate, currentDateStyle, defaultStyle] // dependencies
);
return renderDate(date);
};
useEffect(() => {
setOffsetMinutes(getTotalMinutes());
}, [events, mode]);
@ -105,7 +183,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
if (isLoading || isRendering) {
return (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
<ActivityIndicator size="large" color="#0000ff"/>
</View>
);
}
@ -121,12 +199,16 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
onPressEvent={handlePressEvent}
weekStartsOn={memoizedWeekStartsOn}
height={calendarHeight}
activeDate={selectedDate}
activeDate={todaysDate}
date={selectedDate}
onPressCell={handlePressCell}
headerContentStyle={memoizedHeaderContentStyle}
onSwipeEnd={handleSwipeEnd}
scrollOffsetMinutes={offsetMinutes}
dayHeaderStyle={dateStyle}
dayHeaderHighlightColor={dayHeaderColor}
renderCustomDateForMonth={renderCustomDateForMonth}
showAdjacentMonths
/>
);
}
@ -148,6 +230,8 @@ const styles = StyleSheet.create({
right: 42,
height: 13,
},
weekModeHeader: {},
monthModeHeader: {},
loadingContainer: {
flex: 1,
justifyContent: "center",
@ -160,4 +244,12 @@ const styles = StyleSheet.create({
alignItems: "center",
justifyContent: "center",
},
otherDayHeader: {
backgroundColor: "transparent",
color: "#919191",
aspectRatio: 1,
borderRadius: 100,
alignItems: "center",
justifyContent: "center",
},
});

38
components/pages/grocery/AddGroceryItem.tsx
View File

@ -1,30 +1,12 @@
import { StyleSheet } from "react-native";
import React, { useState } from "react";
import {
Button,
Colors,
Dialog,
Drawer,
Text,
View,
PanningProvider,
} from "react-native-ui-lib";
import { useGroceryContext } from "@/contexts/GroceryContext";
import { FontAwesome6 } from "@expo/vector-icons";
interface AddGroceryItemProps {
visible: boolean;
onClose: () => void;
}
const AddGroceryItem = () => {
const { isAddingGrocery, setIsAddingGrocery } = useGroceryContext();
const [visible, setVisible] = useState<boolean>(false);
import {StyleSheet} from "react-native";
import React from "react";
import {Button, View,} from "react-native-ui-lib";
import {useGroceryContext} from "@/contexts/GroceryContext";
import {FontAwesome6} from "@expo/vector-icons";
const AddGroceryItem = () => {
const {setIsAddingGrocery} = useGroceryContext();
const handleShowDialog = () => {
setVisible(true);
};
const handleHideDialog = () => {
setVisible(false);
};
return (
<View
row
@ -43,7 +25,7 @@ const AddGroceryItem = () => {
backgroundColor="#fd1775"
label="Add item"
text70L
iconSource={() => <FontAwesome6 name="add" size={18} color="white" />}
iconSource={() => <FontAwesome6 name="add" size={18} color="white"/>}
style={styles.finishShopBtn}
labelStyle={styles.addBtnLbl}
enableShadow
@ -92,5 +74,5 @@ const styles = StyleSheet.create({
flex: 1,
marginHorizontal: 3,
},
addBtnLbl: { fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5 },
addBtnLbl: {fontFamily: "Manrope_500Medium", fontSize: 17, marginLeft: 5},
});

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

@ -1,11 +1,11 @@
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 {Text, TextField, TextFieldRef, View} from "react-native-ui-lib";
import React, {useEffect, useRef} from "react";
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 {StyleSheet} from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon";
import {AntDesign} from "@expo/vector-icons";
interface IEditGrocery {
id?: string;
@ -14,12 +14,13 @@ interface IEditGrocery {
setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void;
setSubmit?: (value: boolean) => void;
closeEdit?: (value: boolean) => void;
closeEdit?: () => void;
handleEditSubmit?: Function;
}
const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
const { fuzzyMatchGroceryCategory } = useGroceryContext();
const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
const {fuzzyMatchGroceryCategory} = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null);
const groceryCategoryOptions = Object.values(GroceryCategory).map(
@ -29,10 +30,29 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
})
);
const handleSubmit = () => {
inputRef?.current?.blur()
console.log("CALLLLLL")
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();
}
}
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField
inputRef.current.focus();
}
console.log(editGrocery.category);
}, []);
@ -50,47 +70,49 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
<View row spread centerV>
<TextField
text70T
style={{}}
ref={inputRef}
placeholder="Grocery"
value={editGrocery.title}
onSubmitEditing={handleSubmit}
numberOfLines={1}
returnKeyType="done"
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);
let groceryCategory = fuzzyMatchGroceryCategory(value);
if (editGrocery.setCategory) {
editGrocery.setCategory(groceryCategory);
}
}}
maxLength={25}
/>
<View row centerV>
<AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={handleSubmit}
/>
<CloseXIcon
onPress={() => {
if (editGrocery.closeEdit) editGrocery.closeEdit(false);
if (editGrocery.closeEdit) {
editGrocery.closeEdit();
}
}}
/>
</View>
</View>
<Dropdown
style={{marginTop: 15}}
data={groceryCategoryOptions}
placeholder="Select grocery category"
placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
placeholderStyle={{color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2}}
labelField="label"
valueField="value"
value={
editGrocery.category == GroceryCategory.None
? null
: editGrocery.category
editGrocery.category
}
iconColor="white"
activeColor={"#fd1775"}
@ -99,7 +121,8 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
itemContainerStyle={styles.itemStyle}
selectedTextStyle={styles.selectedText}
renderLeftIcon={() => (
<DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
<DropdownIcon style={{marginRight: 8}}
color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"}/>
)}
renderItem={(item) => {
return (
@ -114,8 +137,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
id: editGrocery.id,
category: item.value,
});
console.log("kategorija vo diropdown: " + item.value);
if (editGrocery.closeEdit) editGrocery.closeEdit(false);
if (editGrocery.closeEdit) editGrocery.closeEdit();
} else {
if (editGrocery.setCategory) {
editGrocery.setCategory(item.value);
@ -138,8 +160,8 @@ const styles = StyleSheet.create({
fontSize: 13.2,
color: "#fd1775",
},
dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 },
itemStyle: { padding: 0, margin: 0 },
dropdownStyle: {borderRadius: 6.61, height: 115.34, width: 187},
itemStyle: {padding: 0, margin: 0},
});
export default EditGroceryItem;

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

@ -23,12 +23,14 @@ const GroceryItem = ({
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>("");
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None
);
const [newTitle, setNewTitle] = useState<string>(item.title ?? "");
const [category, setCategory] = useState<GroceryCategory>(item.category ?? GroceryCategory.None);
const [itemCreator, setItemCreator] = useState<UserProfile>(null);
const closeEdit = () => {
setIsEditingTitle(false);
}
const handleTitleChange = (newTitle: string) => {
updateGroceryItem({ id: item?.id, title: newTitle });
};
@ -38,7 +40,6 @@ const GroceryItem = ({
};
useEffect(() => {
setNewTitle(item.title);
console.log(item);
getItemCreator(item?.creatorId);
}, []);
@ -81,9 +82,21 @@ const GroceryItem = ({
setOpenFreqEdit(false);
}}
/>
{!isEditingTitle ? (
{isEditingTitle ?
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
category: category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: closeEdit,
handleEditSubmit: updateGroceryItem,
}}
/> :
<View>
{ isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
{isParent ?
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={styles.title}>
{item.title}
</Text>
@ -93,40 +106,27 @@ const GroceryItem = ({
</Text>
}
</View>
) : (
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
category: item.category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: setIsEditingTitle,
handleEditSubmit: updateGroceryItem,
}}
/>
)}
}
{!item.approved ? (
<View row centerV marginB-10>
{isParent && <><AntDesign
{isParent &&
<>
<AntDesign
name="check"
size={24}
style={{
color: "green",
marginRight: 15,
}}
onPress={() => {
isParent ? handleItemApproved(item.id, { approved: true }) : null
}}
onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
/>
<AntDesign
name="close"
size={24}
style={{ color: "red" }}
onPress={() => {
isParent ? handleItemApproved(item.id, { approved: false }) : null
}}
/> </>}
onPress={isParent ? () => handleItemApproved(item.id, { approved: false }) : null}
/>
</>}
</View>
) : (
!isEditingTitle && (
@ -158,7 +158,8 @@ const GroceryItem = ({
borderRadius: 22,
overflow: "hidden",
}}
/> : <View
/> :
<View
style={{
position: "relative",
width: 24.64,
@ -183,7 +184,7 @@ const GroceryItem = ({
fontWeight: "bold",
}}
>
{getInitials(itemCreator.firstName, itemCreator.lastName ?? "")}
{itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""}
</Text>
</View>
</View>}

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

@ -1,17 +1,13 @@
import { FlatList, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { Button, Text, TouchableOpacity, View } from "react-native-ui-lib";
import {FlatList, StyleSheet} from "react-native";
import React, {useEffect, useState} from "react";
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import GroceryItem from "./GroceryItem";
import {
GroceryCategory,
GroceryFrequency,
useGroceryContext,
} from "@/contexts/GroceryContext";
import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { AntDesign, MaterialIcons } from "@expo/vector-icons";
import {AntDesign} from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import {IGrocery} from "@/hooks/firebase/types/groceryData";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
const GroceryList = () => {
@ -22,12 +18,12 @@ const GroceryList = () => {
setIsAddingGrocery,
addGrocery,
} = useGroceryContext();
const { profileData } = useAuthContext();
const {profileData} = useAuthContext();
const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => item.approved === true)
groceries?.filter((item) => item.approved)
);
const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => item.approved !== true)
groceries?.filter((item) => !item.approved)
);
const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None
@ -73,12 +69,8 @@ const GroceryList = () => {
}, [submit]);
useEffect(() => {
/**/
}, [category]);
useEffect(() => {
setapprovedGroceries(groceries?.filter((item) => item.approved === true));
setPendingGroceries(groceries?.filter((item) => item.approved !== true));
setapprovedGroceries(groceries?.filter((item) => item.approved));
setPendingGroceries(groceries?.filter((item) => !item.approved));
}, [groceries]);
return (
@ -94,7 +86,7 @@ const GroceryList = () => {
paddingV-8
marginR-5
centerV
style={{ borderRadius: 50 }}
style={{borderRadius: 50}}
>
<Text text70BL color="#46a80a" style={styles.counterText}>
{approvedGroceries?.length} list{" "}
@ -114,7 +106,7 @@ const GroceryList = () => {
padding-8
paddingH-12
marginR-15
style={{ borderRadius: 50 }}
style={{borderRadius: 50}}
>
<Text text70 style={styles.counterText} color="#e28800">
{pendingGroceries?.length} pending
@ -171,11 +163,11 @@ const GroceryList = () => {
? pendingVisible && (
<FlatList
data={pendingGroceries}
renderItem={({ item }) => (
renderItem={({item}) => (
<GroceryItem
item={item}
handleItemApproved={(id, changes) =>
updateGroceryItem({ ...changes, id: id })
updateGroceryItem({...changes, id: id})
}
/>
)}
@ -228,6 +220,7 @@ const GroceryList = () => {
</View>
</View>
{isAddingGrocery && (
<View style={{marginTop: 8}}>
<EditGroceryItem
editGrocery={{
title: title,
@ -235,8 +228,10 @@ const GroceryList = () => {
category: category,
setTitle: setTitle,
setSubmit: setSubmitted,
closeEdit: () => setIsAddingGrocery(false)
}}
/>
</View>
)}
{/* Render Approved Groceries Grouped by Category */}
@ -244,10 +239,10 @@ const GroceryList = () => {
? approvedVisible && (
<FlatList
data={Object.keys(approvedGroceriesByCategory)}
renderItem={({ item: category }) => (
renderItem={({item: category}) => (
<View key={category}>
{/* Render Category Header */}
<Text text80M style={{ marginTop: 10 }} color="#666">
<Text text80M style={{marginTop: 10}} color="#666">
{category}
</Text>
{/* Render Grocery Items for this Category */}
@ -257,7 +252,7 @@ const GroceryList = () => {
key={grocery.id}
item={grocery}
handleItemApproved={(id, changes) =>
updateGroceryItem({ ...changes, id: id })
updateGroceryItem({...changes, id: id})
}
/>
)

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

@ -1,12 +1,12 @@
import { Text, ScrollView } from "react-native";
import { View } from "react-native-ui-lib";
import React, { useEffect, useRef } from "react";
import {ScrollView} from "react-native";
import {View} from "react-native-ui-lib";
import React, {useEffect, useRef} from "react";
import AddGroceryItem from "./AddGroceryItem";
import GroceryList from "./GroceryList";
import { useGroceryContext } from "@/contexts/GroceryContext";
import {useGroceryContext} from "@/contexts/GroceryContext";
const GroceryWrapper = () => {
const { isAddingGrocery } = useGroceryContext();
const {isAddingGrocery} = useGroceryContext();
const scrollViewRef = useRef<ScrollView>(null); // Reference to the ScrollView
useEffect(() => {
@ -22,14 +22,14 @@ const GroceryWrapper = () => {
<View height={"100%"} paddingT-15 paddingH-15>
<View height={"100%"}>
<ScrollView
ref={scrollViewRef} // Assign the ref to the ScrollView
ref={scrollViewRef}
automaticallyAdjustKeyboardInsets={true}
>
<View marginB-70>
<GroceryList />
<GroceryList/>
</View>
</ScrollView>
{!isAddingGrocery && <AddGroceryItem />}
{!isAddingGrocery && <AddGroceryItem/>}
</View>
</View>
);

122
components/pages/main/SignInPage.tsx
View File

@ -1,59 +1,72 @@
import {Button, ButtonSize, Dialog, Text, TextField, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {useSignIn} from "@/hooks/firebase/useSignIn";
import {StyleSheet} from "react-native";
import Toast from 'react-native-toast-message';
import {useLoginWithQrCode} from "@/hooks/firebase/useLoginWithQrCode";
import {Camera, CameraView} from 'expo-camera';
import {
Button,
ButtonSize,
Dialog,
Text,
TextField,
TextFieldRef,
View,
} from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { StyleSheet } from "react-native";
import Toast from "react-native-toast-message";
import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
import { Camera, CameraView } from "expo-camera";
const SignInPage = ({setTab}: {
setTab: React.Dispatch<React.SetStateAction<"register" | "login" | "reset-password">>
const SignInPage = ({
setTab,
}: {
setTab: React.Dispatch<
React.SetStateAction<"register" | "login" | "reset-password">
>;
}) => {
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [hasPermission, setHasPermission] = useState<boolean | null>(null);
const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
const passwordRef = useRef<TextFieldRef>(null);
const {mutateAsync: signIn, error, isError} = useSignIn();
const {mutateAsync: signInWithQrCode} = useLoginWithQrCode()
const { mutateAsync: signIn, error, isError } = useSignIn();
const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();
const handleSignIn = async () => {
await signIn({email, password});
await signIn({ email, password });
if (!isError) {
Toast.show({
type: "success",
text1: "Login successful!"
text1: "Login successful!",
});
} else {
Toast.show({
type: "error",
text1: "Error logging in",
text2: `${error}`
text2: `${error}`,
});
}
};
const handleQrCodeScanned = async ({data}: { data: string }) => {
const handleQrCodeScanned = async ({ data }: { data: string }) => {
setShowCameraDialog(false);
try {
await signInWithQrCode({userId: data});
await signInWithQrCode({ userId: data });
Toast.show({
type: "success",
text1: "Login successful with QR code!"
text1: "Login successful with QR code!",
});
} catch (err) {
Toast.show({
type: "error",
text1: "Error logging in with QR code",
text2: `${err}`
text2: `${err}`,
});
}
};
const getCameraPermissions = async (callback: () => void) => {
const {status} = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === 'granted');
if (status === 'granted') {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === "granted");
if (status === "granted") {
callback();
}
};
@ -63,10 +76,16 @@ const SignInPage = ({setTab}: {
<TextField
placeholder="Email"
value={email}
onChangeText={setEmail}
style={styles.textfield}
onSubmitEditing={() => {
// Move focus to the description field
passwordRef.current?.focus();
}}
/>
<TextField
ref={passwordRef}
placeholder="Password"
value={password}
onChangeText={setPassword}
@ -74,29 +93,43 @@ const SignInPage = ({setTab}: {
style={styles.textfield}
/>
<Button
label="Login"
label="Log in"
marginT-50
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={handleSignIn}
style={{marginBottom: 20}}
style={{ marginBottom: 20, height: 50 }}
backgroundColor="#fd1775"
/>
<Button
label="Login with a QR Code"
label="Log in with a QR Code"
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={() => {
getCameraPermissions(() => setShowCameraDialog(true));
}
}
style={{marginBottom: 20}}
}}
style={{ marginBottom: 20, height: 50 }}
backgroundColor="#fd1775"
/>
{isError && <Text center style={{marginBottom: 20}}>{`${error?.toString()?.split("]")?.[1]}`}</Text>}
{isError && (
<Text center style={{ marginBottom: 20 }}>{`${
error?.toString()?.split("]")?.[1]
}`}</Text>
)}
<View row centerH marginB-5 gap-5>
<Text text70>
Don't have an account?
</Text>
<Text style={styles.jakartaLight}>Don't have an account?</Text>
<Button
onPress={() => setTab("register")}
label="Sign Up"
labelStyle={[
styles.jakartaMedium,
{ textDecorationLine: "none", color: "#fd1575" },
]}
link
size={ButtonSize.xSmall}
padding-0
@ -108,18 +141,21 @@ const SignInPage = ({setTab}: {
</View>
<View row centerH marginB-5 gap-5>
<Text text70>
Forgot your password?
</Text>
<Text text70>Forgot your password?</Text>
<Button
onPress={() => setTab("reset-password")}
label="Reset password"
labelStyle={[
styles.jakartaMedium,
{ textDecorationLine: "none", color: "#fd1575" },
]}
link
size={ButtonSize.xSmall}
padding-0
margin-0
text70
left
avoidInnerPadding
color="#fd1775"
/>
</View>
@ -131,7 +167,7 @@ const SignInPage = ({setTab}: {
bottom
width="100%"
height="70%"
containerStyle={{padding: 0}}
containerStyle={{ padding: 0 }}
>
{hasPermission === null ? (
<Text>Requesting camera permissions...</Text>
@ -139,7 +175,7 @@ const SignInPage = ({setTab}: {
<Text>No access to camera</Text>
) : (
<CameraView
style={{flex: 1}}
style={{ flex: 1 }}
onBarcodeScanned={handleQrCodeScanned}
barcodeScannerSettings={{
barcodeTypes: ["qr"],
@ -150,7 +186,7 @@ const SignInPage = ({setTab}: {
label="Cancel"
onPress={() => setShowCameraDialog(false)}
backgroundColor="#fd1775"
style={{margin: 10}}
style={{ margin: 10 }}
/>
</Dialog>
</View>
@ -164,6 +200,18 @@ const styles = StyleSheet.create({
padding: 30,
height: 45,
borderRadius: 50,
fontFamily: "PlusJakartaSans_300Light",
},
jakartaLight: {
fontFamily: "PlusJakartaSans_300Light",
fontSize: 16,
color: "#484848",
},
jakartaMedium: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 16,
color: "#919191",
textDecorationLine: "underline",
},
});

93
components/pages/main/SignUpPage.tsx
View File

@ -11,7 +11,7 @@ import {
} from "react-native-ui-lib";
import { useSignUp } from "@/hooks/firebase/useSignUp";
import { ProfileType } from "@/contexts/AuthContext";
import { StyleSheet } from "react-native";
import { Dimensions, StyleSheet } from "react-native";
import { AntDesign } from "@expo/vector-icons";
const SignUpPage = ({
@ -40,19 +40,21 @@ const SignUpPage = ({
};
return (
<View padding-10 height={"100%"} flexG>
<Text text30 center>
Get started with Cally
<View padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
<Text style={styles.title}>Get started with Cally</Text>
<Text style={styles.subtitle} marginT-15 color="#919191">
Please enter your details.
</Text>
<Text center>Please enter your details.</Text>
<TextField
marginT-60
marginT-30
autoFocus
placeholder="First name"
value={firstName}
onChangeText={setFirstName}
style={styles.textfield}
onSubmitEditing={() => {lnameRef.current?.focus()}}
onSubmitEditing={() => {
lnameRef.current?.focus();
}}
blurOnSubmit={false}
/>
<TextField
@ -61,7 +63,9 @@ const SignUpPage = ({
value={lastName}
onChangeText={setLastName}
style={styles.textfield}
onSubmitEditing={() => {emailRef.current?.focus()}}
onSubmitEditing={() => {
emailRef.current?.focus();
}}
blurOnSubmit={false}
/>
<TextField
@ -70,16 +74,22 @@ const SignUpPage = ({
value={email}
onChangeText={setEmail}
style={styles.textfield}
onSubmitEditing={() => {passwordRef.current?.focus()}}
onSubmitEditing={() => {
passwordRef.current?.focus();
}}
blurOnSubmit={false}
/>
<View
centerV
style={[styles.textfield, { padding: 0, paddingHorizontal: 30 }]}
>
<TextField
ref={passwordRef}
placeholder="Password"
style={styles.jakartaLight}
value={password}
onChangeText={setPassword}
secureTextEntry={!isPasswordVisible}
style={styles.textfield}
trailingAccessory={
<TouchableOpacity
onPress={() => setIsPasswordVisible(!isPasswordVisible)}
@ -92,36 +102,41 @@ const SignUpPage = ({
</TouchableOpacity>
}
/>
<View gap-10 marginH-10>
</View>
<View gap-5 marginT-15>
<View row centerV>
<Checkbox
style={[styles.check]}
color="#919191"
value={allowFaceID}
onValueChange={(value) => {
setAllowFaceID(value);
}}
/>
<Text text90R marginL-10>
<Text style={styles.jakartaLight} marginL-10>
Allow FaceID for login in future
</Text>
</View>
<View row centerV>
<Checkbox
style={styles.check}
color="#919191"
value={acceptTerms}
onValueChange={(value) => setAcceptTerms(value)}
/>
<View row>
<Text text90R marginL-10>
<Text style={styles.jakartaLight} marginL-10>
I accept the
</Text>
<TouchableOpacity>
<Text text90 style={{ textDecorationLine: "underline" }}>
<Text text90 style={styles.jakartaMedium}>
{" "}
terms and conditions
</Text>
</TouchableOpacity>
<Text text90R> and </Text>
<Text style={styles.jakartaLight}> and </Text>
<TouchableOpacity>
<Text text90 style={{ textDecorationLine: "underline" }}>
<Text text90 style={styles.jakartaMedium}>
{" "}
privacy policy
</Text>
@ -132,16 +147,24 @@ const SignUpPage = ({
<View style={styles.bottomView}>
<Button
label="Register"
labelStyle={{
fontFamily: "PlusJakartaSans_600SemiBold",
fontSize: 16,
}}
onPress={handleSignUp}
style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
style={{ marginBottom: 0, backgroundColor: "#fd1775", height: 50 }}
/>
<View row centerH marginT-10 marginB-5 gap-5>
<Text text70 center>
<View row centerH marginT-10 marginB-2 gap-5>
<Text style={[styles.jakartaLight, { fontSize: 16, color: "#484848" }]} center>
Already have an account?
</Text>
<Button
label="Sign In"
label="Log in"
labelStyle={[
styles.jakartaMedium,
{ fontSize: 16, textDecorationLine: "none", color: "#fd1775" },
]}
flexS
margin-0
link
@ -161,11 +184,35 @@ export default SignUpPage;
const styles = StyleSheet.create({
textfield: {
backgroundColor: "white",
marginVertical: 10,
marginVertical: 8,
padding: 30,
height: 45,
height: 44,
borderRadius: 50,
fontFamily: "PlusJakartaSans_300Light",
fontSize: 13,
color: "#919191",
},
//mora da se izmeni kako treba
bottomView: { marginTop: 150 },
bottomView: { marginTop: "auto", marginBottom: 30 },
jakartaLight: {
fontFamily: "PlusJakartaSans_300Light",
fontSize: 13,
color: "#919191",
},
jakartaMedium: {
fontFamily: "PlusJakartaSans_500Medium",
fontSize: 13,
color: "#919191",
textDecorationLine: "underline",
},
title: { fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50 },
subtitle: { fontFamily: "PlusJakartaSans_400Regular", fontSize: 16 },
check: {
borderRadius: 3,
aspectRatio: 1,
width: 18,
color: "#919191",
borderColor: "#919191",
borderWidth: 1,
},
});

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

@ -1,23 +1,27 @@
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";
import { Feather, AntDesign, Ionicons } from "@expo/vector-icons";
import {
Dialog,
TextField,
DateTimePicker,
Picker,
Button,
ButtonSize,
DateTimePicker,
Dialog,
Picker,
PickerModes,
Switch,
Text,
TextField,
TextFieldRef,
View
} from "react-native-ui-lib";
import { PanningDirectionsEnum } from "react-native-ui-lib/src/incubator/panView";
import { Dimensions, StyleSheet } from "react-native";
import React, {useEffect, useRef, useState} from "react";
import PointsSlider from "@/components/shared/PointsSlider";
import {repeatOptions, useToDosContext} from "@/contexts/ToDosContext";
import {Ionicons} from "@expo/vector-icons";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
import {Dimensions, KeyboardAvoidingView, StyleSheet} from "react-native";
import DropModalIcon from "@/assets/svgs/DropModalIcon";
import { IToDo } from "@/hooks/firebase/types/todoData";
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";
@ -40,17 +44,19 @@ const defaultTodo = {
};
const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
const { addToDo, updateToDo } = useToDosContext();
const {addToDo, updateToDo} = useToDosContext();
const [todo, setTodo] = useState<IToDo>(
addChoreDialogProps.selectedTodo ?? defaultTodo
);
const [selectedAssignees, setSelectedAssignees] = useState<string[]>(
addChoreDialogProps?.selectedTodo?.assignees ?? []
);
const { width, height } = Dimensions.get("screen");
const {width} = Dimensions.get("screen");
const [points, setPoints] = useState<number>(todo.points);
const { data: members } = useGetFamilyMembers();
const titleRef = useRef<TextFieldRef>(null)
const {data: members} = useGetFamilyMembers();
const handleClose = () => {
setTodo(defaultTodo);
@ -87,6 +93,12 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}
}
useEffect(() => {
setTimeout(() => {
titleRef?.current?.focus()
}, 500)
}, []);
return (
<Dialog
bottom={true}
@ -148,24 +160,25 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}}
/>
</View>
<KeyboardAvoidingView>
<TextField
placeholder="Add a To Do"
autoFocus
value={todo?.title}
onChangeText={(text) => {
setTodo((oldValue: IToDo) => ({ ...oldValue, title: text }));
setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
}}
placeholderTextColor="#2d2d30"
text60R
marginT-15
marginL-30
ref={titleRef}
/>
<View style={styles.divider} marginT-8 />
<View style={styles.divider} marginT-8/>
<View marginL-30 centerV>
<View row marginB-10>
{todo?.date && (
<View row centerV>
<CalendarIcon color="#919191" width={24} height={24} />
<CalendarIcon color="#919191" width={24} height={24}/>
<DateTimePicker
value={todo.date}
text70
@ -175,14 +188,14 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}}
marginL-12
onChange={(date) => {
setTodo((oldValue: IToDo) => ({ ...oldValue, date: date }));
setTodo((oldValue: IToDo) => ({...oldValue, date: date}));
}}
/>
</View>
)}
</View>
<View row centerV>
<ClockOIcon />
<ClockOIcon/>
<Picker
marginL-12
placeholder="Select Repeat Type"
@ -204,7 +217,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}
}
}}
topBarProps={{ title: "Repeat" }}
topBarProps={{title: "Repeat"}}
style={{
marginVertical: 5,
fontFamily: "PlusJakartaSans_500Medium",
@ -220,30 +233,31 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
))}
</Picker>
</View>
{todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange} repeatDays={todo.repeatDays ?? []}/>}
{todo.repeatType == "Every week" && <RepeatFreq handleRepeatDaysChange={handleRepeatDaysChange}
repeatDays={todo.repeatDays ?? []}/>}
</View>
<View style={styles.divider} />
<View style={styles.divider}/>
<View marginH-30 marginB-10 row centerV>
<ProfileIcon color="#919191" />
<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 }}
style={{marginVertical: 5}}
mode={PickerModes.MULTI}
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",
@ -254,7 +268,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}}
color="#ea156c"
label="Assign"
labelStyle={{ fontFamily: "Manrope_600SemiBold", fontSize: 14 }}
labelStyle={{fontFamily: "Manrope_600SemiBold", fontSize: 14}}
/>
)}
>
@ -274,22 +288,22 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
/>
</View>
<View row centerV style={styles.rotateSwitch}>
<Text style={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 16 }}>
<Text style={{fontFamily: "PlusJakartaSans_500Medium", fontSize: 16}}>
Take Turns
</Text>
<Switch
onColor={"#ea156c"}
value={todo.rotate}
style={{ width: 43.06, height: 27.13 }}
style={{width: 43.06, height: 27.13}}
marginL-10
onValueChange={(value) =>
setTodo((oldValue) => ({ ...oldValue, rotate: value }))
setTodo((oldValue) => ({...oldValue, rotate: value}))
}
/>
</View>
<View style={styles.divider} />
<View style={styles.divider}/>
<View marginH-30 marginB-15 row centerV>
<Ionicons name="gift-outline" size={25} color="#919191" />
<Ionicons name="gift-outline" size={25} color="#919191"/>
<Text style={styles.sub} marginL-10>
Reward Points
</Text>
@ -299,6 +313,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
setPoints={setPoints}
handleChange={handleChange}
/>
</KeyboardAvoidingView>
</Dialog>
);
};
@ -306,7 +321,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
export default AddChoreDialog;
const styles = StyleSheet.create({
divider: { height: 1, backgroundColor: "#e4e4e4", marginVertical: 15 },
divider: {height: 1, backgroundColor: "#e4e4e4", marginVertical: 15},
gradient: {
height: "25%",
position: "absolute",

16
hooks/firebase/useGetTodos.ts
View File

@ -1,19 +1,27 @@
import { useQuery } from "react-query";
import firestore from "@react-native-firebase/firestore";
import { useAuthContext } from "@/contexts/AuthContext";
import {IToDo} from "@/hooks/firebase/types/todoData";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
import { IToDo } from "@/hooks/firebase/types/todoData";
export const useGetTodos = () => {
const { user, profileData } = useAuthContext();
//TODO: Add role based filtering for todos
return useQuery({
queryKey: ["todos", user?.uid],
queryFn: async () => {
const snapshot = await firestore()
let snapshot;
if (profileData?.userType === ProfileType.PARENT) {
snapshot = await firestore()
.collection("Todos")
.where("familyId", "==", profileData?.familyId)
.get();
} else {
snapshot = await firestore()
.collection("Todos")
.where("assignees", "array-contains", user?.uid)
.get();
}
return snapshot.docs.map((doc) => {
const data = doc.data();

1
ios/cally/Info.plist
View File

@ -127,6 +127,7 @@
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
<string>$(PRODUCT_BUNDLE_IDENTIFIER).expo.index_route</string>
</array>
<key>UILaunchStoryboardName</key>
<string>SplashScreen</string>