diff --git a/components/pages/grocery/EditGroceryItem.tsx b/components/pages/grocery/EditGroceryItem.tsx index d86c868..7edf1bf 100644 --- a/components/pages/grocery/EditGroceryItem.tsx +++ b/components/pages/grocery/EditGroceryItem.tsx @@ -6,6 +6,7 @@ import { Dropdown } from "react-native-element-dropdown"; import CloseXIcon from "@/assets/svgs/CloseXIcon"; import { StyleSheet } from "react-native"; import DropdownIcon from "@/assets/svgs/DropdownIcon"; +import {AntDesign} from "@expo/vector-icons"; interface IEditGrocery { id?: string; @@ -14,7 +15,7 @@ interface IEditGrocery { setTitle: (value: string) => void; setCategory?: (category: GroceryCategory) => void; setSubmit?: (value: boolean) => void; - closeEdit?: (value: boolean) => void; + closeEdit?: () => void; handleEditSubmit?: Function; } @@ -56,72 +57,85 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => { value={editGrocery.title} onChangeText={(value) => { editGrocery.setTitle(value); - }} - onSubmitEditing={() => { - if (editGrocery.setSubmit) { - editGrocery.setSubmit(true); - } - if (editGrocery.handleEditSubmit) { - editGrocery.handleEditSubmit({ - id: editGrocery.id, - title: editGrocery.title, - category: editGrocery.category, - }); - } - if (editGrocery.closeEdit) { - editGrocery.closeEdit(false); + let groceryCategory = fuzzyMatchGroceryCategory(value); + if (editGrocery.setCategory) { + editGrocery.setCategory(groceryCategory); } }} maxLength={25} /> - { - if (editGrocery.closeEdit) editGrocery.closeEdit(false); - }} - /> + + { + 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(); + } + }} + /> + { + if (editGrocery.closeEdit) { + editGrocery.closeEdit(); + } + }} + /> + ( - - )} - renderItem={(item) => { - return ( - - {item.label} - - ); - }} - 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); - } + 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 } - }} + iconColor="white" + activeColor={"#fd1775"} + containerStyle={styles.dropdownStyle} + itemTextStyle={styles.itemText} + itemContainerStyle={styles.itemStyle} + selectedTextStyle={styles.selectedText} + renderLeftIcon={() => ( + + )} + renderItem={(item) => { + return ( + + {item.label} + + ); + }} + onChange={(item) => { + if (editGrocery.handleEditSubmit) { + editGrocery.handleEditSubmit({ + id: editGrocery.id, + category: item.value, + }); + if (editGrocery.closeEdit) editGrocery.closeEdit(); + } else { + if (editGrocery.setCategory) { + editGrocery.setCategory(item.value); + } + } + }} /> ); diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx index ac6202e..c1026bc 100644 --- a/components/pages/grocery/GroceryItem.tsx +++ b/components/pages/grocery/GroceryItem.tsx @@ -23,12 +23,14 @@ const GroceryItem = ({ const [openFreqEdit, setOpenFreqEdit] = useState(false); const [isEditingTitle, setIsEditingTitle] = useState(false); - const [newTitle, setNewTitle] = useState(""); - const [category, setCategory] = useState( - GroceryCategory.None - ); + const [newTitle, setNewTitle] = useState(item.title ?? ""); + const [category, setCategory] = useState(item.category ?? GroceryCategory.None); const [itemCreator, setItemCreator] = useState(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,52 +82,51 @@ const GroceryItem = ({ setOpenFreqEdit(false); }} /> - {!isEditingTitle ? ( - - { isParent ? setIsEditingTitle(true)}> - - {item.title} - - : + {isEditingTitle ? + : + + {isParent ? + setIsEditingTitle(true)}> + + {item.title} + + : {item.title} - } - - ) : ( - - )} + } + + } {!item.approved ? ( - {isParent && <> { - isParent ? handleItemApproved(item.id, { approved: true }) : null - }} - /> - { - isParent ? handleItemApproved(item.id, { approved: false }) : null - }} - /> } + {isParent && + <> + handleItemApproved(item.id, { approved: true }) : null} + /> + handleItemApproved(item.id, { approved: false }) : null} + /> + } ) : ( !isEditingTitle && ( @@ -158,14 +158,15 @@ const GroceryItem = ({ borderRadius: 22, overflow: "hidden", }} - /> : : + + > {itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""}