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

bugfixes

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

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

@ -1,24 +1,17 @@
import React, { memo } from "react"; import React, {memo} from "react";
import { import {Button, Picker, PickerModes, SegmentedControl, Text, View,} from "react-native-ui-lib";
Button, import {MaterialIcons} from "@expo/vector-icons";
Picker, import {modeMap, months} from "./constants";
PickerModes, import {StyleSheet} from "react-native";
SegmentedControl, import {useAtom} from "jotai";
Text, import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
View, import {isSameDay} from "date-fns";
} from "react-native-ui-lib"; import {useAuthContext} from "@/contexts/AuthContext";
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(() => { export const CalendarHeader = memo(() => {
const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom); const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
const [mode, setMode] = useAtom(modeAtom); const [mode, setMode] = useAtom(modeAtom);
const { profileData } = useAuthContext(); const {profileData} = useAuthContext();
const handleSegmentChange = (index: number) => { const handleSegmentChange = (index: number) => {
const selectedMode = modeMap.get(index); const selectedMode = modeMap.get(index);
@ -56,23 +49,23 @@ export const CalendarHeader = memo(() => {
}} }}
> >
<View row centerV gap-3> <View row centerV gap-3>
<Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}> <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
{selectedDate.getFullYear()} {selectedDate.getFullYear()}
</Text> </Text>
<Picker <Picker
value={months[selectedDate.getMonth()]} value={months[selectedDate.getMonth()]}
placeholder={"Select Month"} placeholder={"Select Month"}
style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }} style={{fontFamily: "Manrope_500Medium", fontSize: 17, width: 85}}
mode={PickerModes.SINGLE} mode={PickerModes.SINGLE}
onChange={(itemValue) => handleMonthChange(itemValue as string)} onChange={(itemValue) => handleMonthChange(itemValue as string)}
trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />} trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
topBarProps={{ topBarProps={{
title: selectedDate.getFullYear().toString(), title: selectedDate.getFullYear().toString(),
titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 }, titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
}} }}
> >
{months.map((month) => ( {months.map((month) => (
<Picker.Item key={month} label={month} value={month} /> <Picker.Item key={month} label={month} value={month}/>
))} ))}
</Picker> </Picker>
</View> </View>
@ -83,13 +76,13 @@ export const CalendarHeader = memo(() => {
size={"xSmall"} size={"xSmall"}
marginR-0 marginR-0
avoidInnerPadding avoidInnerPadding
padding-7
style={{ style={{
borderRadius: 5, borderRadius: 50,
backgroundColor: "white", backgroundColor: "white",
borderWidth: 0.7, borderWidth: 0.7,
borderColor: "#dadce0", borderColor: "#dadce0",
height: 30, height: 30,
paddingHorizontal: 10
}} }}
labelStyle={{ labelStyle={{
fontSize: 12, fontSize: 12,
@ -101,15 +94,13 @@ export const CalendarHeader = memo(() => {
})} })}
onPress={() => { onPress={() => {
setSelectedDate(new Date()); setSelectedDate(new Date());
setMode("day");
console.log(profileData?.timeZone)
}} }}
/> />
)} )}
<View> <View>
<SegmentedControl <SegmentedControl
segments={[{ label: "D" }, { label: "W" }, { label: "M" }]} segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
backgroundColor="#ececec" backgroundColor="#ececec"
inactiveColor="#919191" inactiveColor="#919191"
activeBackgroundColor="#ea156c" activeBackgroundColor="#ea156c"

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

@ -103,10 +103,11 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, []); }, []);
const dayHeaderColor = useMemo(() => { const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d"; return isSameDate(todaysDate, selectedDate) ? "white" : "#4d4d4d";
}, [selectedDate, mode]); }, [selectedDate, mode]);
const dateStyle = useMemo(() => { const dateStyle = useMemo(() => {
if (mode === "week") return undefined
return isSameDate(todaysDate, selectedDate) && mode === "day" return isSameDate(todaysDate, selectedDate) && mode === "day"
? styles.dayHeader ? styles.dayHeader
: styles.otherDayHeader; : styles.otherDayHeader;

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

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

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

@ -1,10 +1,9 @@
import { Text, View } from "react-native-ui-lib"; import {Text, TextField, TextFieldRef, View} from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react"; import React, {useEffect, useRef} from "react";
import { TextField, TextFieldRef } from "react-native-ui-lib"; import {GroceryCategory, useGroceryContext} from "@/contexts/GroceryContext";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext"; import {Dropdown} from "react-native-element-dropdown";
import { Dropdown } from "react-native-element-dropdown";
import CloseXIcon from "@/assets/svgs/CloseXIcon"; import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { StyleSheet } from "react-native"; import {StyleSheet} from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon"; import DropdownIcon from "@/assets/svgs/DropdownIcon";
import {AntDesign} from "@expo/vector-icons"; import {AntDesign} from "@expo/vector-icons";
@ -19,8 +18,9 @@ interface IEditGrocery {
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 inputRef = useRef<TextFieldRef>(null);
const groceryCategoryOptions = Object.values(GroceryCategory).map( const groceryCategoryOptions = Object.values(GroceryCategory).map(
@ -30,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(() => { useEffect(() => {
if (inputRef.current) { if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField inputRef.current.focus();
} }
console.log(editGrocery.category); console.log(editGrocery.category);
}, []); }, []);
@ -51,10 +70,12 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
<View row spread centerV> <View row spread centerV>
<TextField <TextField
text70T text70T
style={{}}
ref={inputRef} ref={inputRef}
placeholder="Grocery" placeholder="Grocery"
value={editGrocery.title} value={editGrocery.title}
onSubmitEditing={handleSubmit}
numberOfLines={1}
returnKeyType="done"
onChangeText={(value) => { onChangeText={(value) => {
editGrocery.setTitle(value); editGrocery.setTitle(value);
let groceryCategory = fuzzyMatchGroceryCategory(value); let groceryCategory = fuzzyMatchGroceryCategory(value);
@ -72,21 +93,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
color: "green", color: "green",
marginRight: 15, marginRight: 15,
}} }}
onPress={() => { onPress={handleSubmit}
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();
}
}}
/> />
<CloseXIcon <CloseXIcon
onPress={() => { onPress={() => {
@ -101,7 +108,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
style={{marginTop: 15}} style={{marginTop: 15}}
data={groceryCategoryOptions} data={groceryCategoryOptions}
placeholder="Select grocery category" placeholder="Select grocery category"
placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }} placeholderStyle={{color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2}}
labelField="label" labelField="label"
valueField="value" valueField="value"
value={ value={
@ -114,7 +121,8 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
itemContainerStyle={styles.itemStyle} itemContainerStyle={styles.itemStyle}
selectedTextStyle={styles.selectedText} selectedTextStyle={styles.selectedText}
renderLeftIcon={() => ( 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) => { renderItem={(item) => {
return ( return (
@ -152,8 +160,8 @@ const styles = StyleSheet.create({
fontSize: 13.2, fontSize: 13.2,
color: "#fd1775", color: "#fd1775",
}, },
dropdownStyle: { borderRadius: 6.61, height: 115.34, width: 187 }, dropdownStyle: {borderRadius: 6.61, height: 115.34, width: 187},
itemStyle: { padding: 0, margin: 0 }, itemStyle: {padding: 0, margin: 0},
}); });
export default EditGroceryItem; export default EditGroceryItem;

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

@ -1,17 +1,13 @@
import { FlatList, StyleSheet } from "react-native"; import {FlatList, StyleSheet} from "react-native";
import React, { useEffect, useState } from "react"; import React, {useEffect, useState} from "react";
import { Text, TouchableOpacity, View } from "react-native-ui-lib"; import {Text, TouchableOpacity, View} from "react-native-ui-lib";
import GroceryItem from "./GroceryItem"; import GroceryItem from "./GroceryItem";
import { import {GroceryCategory, GroceryFrequency, useGroceryContext,} from "@/contexts/GroceryContext";
GroceryCategory,
GroceryFrequency,
useGroceryContext,
} from "@/contexts/GroceryContext";
import HeaderTemplate from "@/components/shared/HeaderTemplate"; import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { AntDesign, MaterialIcons } from "@expo/vector-icons"; import {AntDesign} from "@expo/vector-icons";
import EditGroceryItem from "./EditGroceryItem"; import EditGroceryItem from "./EditGroceryItem";
import { ProfileType, useAuthContext } from "@/contexts/AuthContext"; import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
import { IGrocery } from "@/hooks/firebase/types/groceryData"; import {IGrocery} from "@/hooks/firebase/types/groceryData";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon"; import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
const GroceryList = () => { const GroceryList = () => {
@ -22,12 +18,12 @@ const GroceryList = () => {
setIsAddingGrocery, setIsAddingGrocery,
addGrocery, addGrocery,
} = useGroceryContext(); } = useGroceryContext();
const { profileData } = useAuthContext(); const {profileData} = useAuthContext();
const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>( const [approvedGroceries, setapprovedGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => item.approved === true) groceries?.filter((item) => item.approved)
); );
const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>( const [pendingGroceries, setPendingGroceries] = useState<IGrocery[]>(
groceries?.filter((item) => item.approved !== true) groceries?.filter((item) => !item.approved)
); );
const [category, setCategory] = useState<GroceryCategory>( const [category, setCategory] = useState<GroceryCategory>(
GroceryCategory.None GroceryCategory.None
@ -73,12 +69,8 @@ const GroceryList = () => {
}, [submit]); }, [submit]);
useEffect(() => { useEffect(() => {
/**/ setapprovedGroceries(groceries?.filter((item) => item.approved));
}, [category]); setPendingGroceries(groceries?.filter((item) => !item.approved));
useEffect(() => {
setapprovedGroceries(groceries?.filter((item) => item.approved === true));
setPendingGroceries(groceries?.filter((item) => item.approved !== true));
}, [groceries]); }, [groceries]);
return ( return (
@ -94,7 +86,7 @@ const GroceryList = () => {
paddingV-8 paddingV-8
marginR-5 marginR-5
centerV centerV
style={{ borderRadius: 50 }} style={{borderRadius: 50}}
> >
<Text text70BL color="#46a80a" style={styles.counterText}> <Text text70BL color="#46a80a" style={styles.counterText}>
{approvedGroceries?.length} list{" "} {approvedGroceries?.length} list{" "}
@ -114,7 +106,7 @@ const GroceryList = () => {
padding-8 padding-8
paddingH-12 paddingH-12
marginR-15 marginR-15
style={{ borderRadius: 50 }} style={{borderRadius: 50}}
> >
<Text text70 style={styles.counterText} color="#e28800"> <Text text70 style={styles.counterText} color="#e28800">
{pendingGroceries?.length} pending {pendingGroceries?.length} pending
@ -171,11 +163,11 @@ const GroceryList = () => {
? pendingVisible && ( ? pendingVisible && (
<FlatList <FlatList
data={pendingGroceries} data={pendingGroceries}
renderItem={({ item }) => ( renderItem={({item}) => (
<GroceryItem <GroceryItem
item={item} item={item}
handleItemApproved={(id, changes) => handleItemApproved={(id, changes) =>
updateGroceryItem({ ...changes, id: id }) updateGroceryItem({...changes, id: id})
} }
/> />
)} )}
@ -228,7 +220,7 @@ const GroceryList = () => {
</View> </View>
</View> </View>
{isAddingGrocery && ( {isAddingGrocery && (
<View style={{ marginTop: 8 }}> <View style={{marginTop: 8}}>
<EditGroceryItem <EditGroceryItem
editGrocery={{ editGrocery={{
title: title, title: title,
@ -247,10 +239,10 @@ const GroceryList = () => {
? approvedVisible && ( ? approvedVisible && (
<FlatList <FlatList
data={Object.keys(approvedGroceriesByCategory)} data={Object.keys(approvedGroceriesByCategory)}
renderItem={({ item: category }) => ( renderItem={({item: category}) => (
<View key={category}> <View key={category}>
{/* Render Category Header */} {/* Render Category Header */}
<Text text80M style={{ marginTop: 10 }} color="#666"> <Text text80M style={{marginTop: 10}} color="#666">
{category} {category}
</Text> </Text>
{/* Render Grocery Items for this Category */} {/* Render Grocery Items for this Category */}
@ -260,7 +252,7 @@ const GroceryList = () => {
key={grocery.id} key={grocery.id}
item={grocery} item={grocery}
handleItemApproved={(id, changes) => 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 {ScrollView} from "react-native";
import { View } from "react-native-ui-lib"; import {View} from "react-native-ui-lib";
import React, { useEffect, useRef } from "react"; import React, {useEffect, useRef} from "react";
import AddGroceryItem from "./AddGroceryItem"; import AddGroceryItem from "./AddGroceryItem";
import GroceryList from "./GroceryList"; import GroceryList from "./GroceryList";
import { useGroceryContext } from "@/contexts/GroceryContext"; import {useGroceryContext} from "@/contexts/GroceryContext";
const GroceryWrapper = () => { const GroceryWrapper = () => {
const { isAddingGrocery } = useGroceryContext(); const {isAddingGrocery} = useGroceryContext();
const scrollViewRef = useRef<ScrollView>(null); // Reference to the ScrollView const scrollViewRef = useRef<ScrollView>(null); // Reference to the ScrollView
useEffect(() => { useEffect(() => {
@ -22,14 +22,14 @@ const GroceryWrapper = () => {
<View height={"100%"} paddingT-15 paddingH-15> <View height={"100%"} paddingT-15 paddingH-15>
<View height={"100%"}> <View height={"100%"}>
<ScrollView <ScrollView
ref={scrollViewRef} // Assign the ref to the ScrollView ref={scrollViewRef}
automaticallyAdjustKeyboardInsets={true} automaticallyAdjustKeyboardInsets={true}
> >
<View marginB-70> <View marginB-70>
<GroceryList /> <GroceryList/>
</View> </View>
</ScrollView> </ScrollView>
{!isAddingGrocery && <AddGroceryItem />} {!isAddingGrocery && <AddGroceryItem/>}
</View> </View>
</View> </View>
); );

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