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

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 { View, Text, Button } from "react-native-ui-lib";
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 AddBrainDump from "./AddBrainDump";
import LinearGradient from "react-native-linear-gradient";
@ -61,23 +58,22 @@ const BrainDumpPage = () => {
</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",

View File

@ -1,12 +1,5 @@
import React, {memo} from "react";
import {
Button,
Picker,
PickerModes,
SegmentedControl,
Text,
View,
} from "react-native-ui-lib";
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";
@ -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,8 +94,6 @@ export const CalendarHeader = memo(() => {
})}
onPress={() => {
setSelectedDate(new Date());
setMode("day");
console.log(profileData?.timeZone)
}}
/>
)}

View File

@ -103,10 +103,11 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
}, []);
const dayHeaderColor = useMemo(() => {
return isSameDate(todaysDate, selectedDate) && mode === "day" ? "white" : "#4d4d4d";
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;

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 React from "react";
import {Button, View,} 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);
};
const AddGroceryItem = () => {
const {setIsAddingGrocery} = useGroceryContext();
return (
<View
row

View File

@ -1,6 +1,5 @@
import { Text, View } from "react-native-ui-lib";
import React, { useEffect, useRef, useState } from "react";
import { TextField, TextFieldRef } from "react-native-ui-lib";
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";
@ -19,6 +18,7 @@ interface IEditGrocery {
handleEditSubmit?: Function;
}
const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
const {fuzzyMatchGroceryCategory} = useGroceryContext();
const inputRef = useRef<TextFieldRef>(null);
@ -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(() => {
if (inputRef.current) {
inputRef.current.focus(); // Focus on the TextField
inputRef.current.focus();
}
console.log(editGrocery.category);
}, []);
@ -51,10 +70,12 @@ 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);
let groceryCategory = fuzzyMatchGroceryCategory(value);
@ -72,21 +93,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
color: "green",
marginRight: 15,
}}
onPress={() => {
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();
}
}}
onPress={handleSubmit}
/>
<CloseXIcon
onPress={() => {
@ -114,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 (

View File

@ -2,13 +2,9 @@ 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";
@ -24,10 +20,10 @@ const GroceryList = () => {
} = useGroceryContext();
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 (

View File

@ -1,4 +1,4 @@
import { Text, ScrollView } from "react-native";
import {ScrollView} from "react-native";
import {View} from "react-native-ui-lib";
import React, {useEffect, useRef} from "react";
import AddGroceryItem from "./AddGroceryItem";
@ -22,7 +22,7 @@ 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>

View File

@ -1,23 +1,27 @@
import { View, Text, Button, Switch, PickerModes } from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import {
Button,
ButtonSize,
DateTimePicker,
Dialog,
Picker,
PickerModes,
Switch,
Text,
TextField,
TextFieldRef,
View
} from "react-native-ui-lib";
import React, {useEffect, 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,
ButtonSize,
} from "react-native-ui-lib";
import {Ionicons} from "@expo/vector-icons";
import {PanningDirectionsEnum} from "react-native-ui-lib/src/incubator/panView";
import { Dimensions, StyleSheet } from "react-native";
import {Dimensions, KeyboardAvoidingView, 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 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";
@ -47,9 +51,11 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
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 titleRef = useRef<TextFieldRef>(null)
const {data: members} = useGetFamilyMembers();
const handleClose = () => {
@ -87,6 +93,12 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}
}
useEffect(() => {
setTimeout(() => {
titleRef?.current?.focus()
}, 500)
}, []);
return (
<Dialog
bottom={true}
@ -148,9 +160,9 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
}}
/>
</View>
<KeyboardAvoidingView>
<TextField
placeholder="Add a To Do"
autoFocus
value={todo?.title}
onChangeText={(text) => {
setTodo((oldValue: IToDo) => ({...oldValue, title: text}));
@ -159,6 +171,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
text60R
marginT-15
marginL-30
ref={titleRef}
/>
<View style={styles.divider} marginT-8/>
<View marginL-30 centerV>
@ -220,7 +233,8 @@ 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}/>
@ -299,6 +313,7 @@ const AddChoreDialog = (addChoreDialogProps: IAddChoreDialog) => {
setPoints={setPoints}
handleChange={handleChange}
/>
</KeyboardAvoidingView>
</Dialog>
);
};