- Fixed issue with grocery edit not closing, reverted to the category resolving solution(fuzzy search categories), added check button for saving the grocery after editing, made code improvemnets around the groceries page

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,8 +57,22 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
           value={editGrocery.title}
           onChangeText={(value) => {
             editGrocery.setTitle(value);
+            let groceryCategory = fuzzyMatchGroceryCategory(value);
+            if (editGrocery.setCategory) {
+              editGrocery.setCategory(groceryCategory);
+            }
           }}
-          onSubmitEditing={() => {
+          maxLength={25}
+        />
+        <View row centerV>
+            <AntDesign
+                name="check"
+                size={24}
+                style={{
+                    color: "green",
+                    marginRight: 15,
+                }}
+                onPress={() => {
                     if (editGrocery.setSubmit) {
                         editGrocery.setSubmit(true);
                     }
@@ -69,17 +84,19 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
                         });
                     }
                     if (editGrocery.closeEdit) {
-              editGrocery.closeEdit(false);
+                        editGrocery.closeEdit();
                     }
                 }}
-          maxLength={25}
             />
             <CloseXIcon
                 onPress={() => {
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+                    if (editGrocery.closeEdit) {
+                        editGrocery.closeEdit();
+                    }
                 }}
             />
         </View>
+      </View>
       <Dropdown
           style={{marginTop: 15}}
           data={groceryCategoryOptions}
@@ -88,9 +105,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
           labelField="label"
           valueField="value"
           value={
-          editGrocery.category == GroceryCategory.None
+            editGrocery.category
-            ? null
-            : editGrocery.category
           }
           iconColor="white"
           activeColor={"#fd1775"}
@@ -114,8 +129,7 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
                 id: editGrocery.id,
                 category: item.value,
               });
-            console.log("kategorija vo diropdown: " + item.value);
+              if (editGrocery.closeEdit) editGrocery.closeEdit();
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
             } else {
               if (editGrocery.setCategory) {
                 editGrocery.setCategory(item.value);

components/pages/grocery/GroceryItem.tsx

@@ -23,12 +23,14 @@ const GroceryItem = ({
 
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
-  const [newTitle, setNewTitle] = useState<string>("");
+  const [newTitle, setNewTitle] = useState<string>(item.title ?? "");
-  const [category, setCategory] = useState<GroceryCategory>(
+  const [category, setCategory] = useState<GroceryCategory>(item.category ?? GroceryCategory.None);
-    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={() => {
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
-                  isParent ? handleItemApproved(item.id, { approved: true }) : null
-                }}
                   />
                   <AntDesign
                     name="close"
                     size={24}
                     style={{ color: "red" }}
-              onPress={() => {
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: false }) : null}
-              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,