- 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,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}
         />
-        <CloseXIcon
-          onPress={() => {
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
-          }}
-        />
+        <View row centerV>
+            <AntDesign
+                name="check"
+                size={24}
+                style={{
+                    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();
+                    }
+                }}
+            />
+            <CloseXIcon
+                onPress={() => {
+                    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 }}
-        labelField="label"
-        valueField="value"
-        value={
-          editGrocery.category == GroceryCategory.None
-            ? null
-            : editGrocery.category
-        }
-        iconColor="white"
-        activeColor={"#fd1775"}
-        containerStyle={styles.dropdownStyle}
-        itemTextStyle={styles.itemText}
-        itemContainerStyle={styles.itemStyle}
-        selectedTextStyle={styles.selectedText}
-        renderLeftIcon={() => (
-          <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
-        )}
-        renderItem={(item) => {
-          return (
-            <View height={36.02} centerV>
-              <Text style={styles.itemText}>{item.label}</Text>
-            </View>
-          );
-        }}
-        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={() => (
+            <DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
+          )}
+          renderItem={(item) => {
+            return (
+              <View height={36.02} centerV>
+                <Text style={styles.itemText}>{item.label}</Text>
+              </View>
+            );
+          }}
+          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);
+              }
+            }
+          }}
       />
     </View>
   );

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 [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,52 +82,51 @@ const GroceryItem = ({
             setOpenFreqEdit(false);
           }}
         />
-        {!isEditingTitle ? (
-          <View>
-            { isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
-              <Text text70T black style={styles.title}>
-                {item.title}
-              </Text>
-            </TouchableOpacity> :
+        {isEditingTitle ?
+            <EditGroceryItem
+              editGrocery={{
+                id: item.id,
+                title: newTitle,
+                category: category,
+                setTitle: setNewTitle,
+                setCategory: setCategory,
+                closeEdit: closeEdit,
+                handleEditSubmit: updateGroceryItem,
+              }}
+            /> :
+            <View>
+              {isParent ?
+                <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
+                  <Text text70T black style={styles.title}>
+                    {item.title}
+                  </Text>
+                </TouchableOpacity> :
                 <Text text70T black style={styles.title}>
                   {item.title}
                 </Text>
-            }
-          </View>
-        ) : (
-          <EditGroceryItem
-            editGrocery={{
-              id: item.id,
-              title: newTitle,
-              category: item.category,
-              setTitle: setNewTitle,
-              setCategory: setCategory,
-              closeEdit: setIsEditingTitle,
-              handleEditSubmit: updateGroceryItem,
-            }}
-          />
-        )}
+              }
+            </View>
+        }
         {!item.approved ? (
           <View row centerV marginB-10>
-            {isParent && <><AntDesign
-                name="check"
-                size={24}
-                style={{
-                  color: "green",
-                  marginRight: 15,
-                }}
-                onPress={() => {
-                  isParent ? handleItemApproved(item.id, { approved: true }) : null
-                }}
-            />
-              <AntDesign
-              name="close"
-              size={24}
-              style={{ color: "red" }}
-              onPress={() => {
-              isParent ? handleItemApproved(item.id, { approved: false }) : null
-            }}
-              /> </>}
+            {isParent &&
+                <>
+                  <AntDesign
+                    name="check"
+                    size={24}
+                    style={{
+                      color: "green",
+                      marginRight: 15,
+                    }}
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
+                  />
+                  <AntDesign
+                    name="close"
+                    size={24}
+                    style={{ color: "red" }}
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: false }) : null}
+                  />
+                </>}
           </View>
         ) : (
           !isEditingTitle && (
@@ -158,14 +158,15 @@ const GroceryItem = ({
                   borderRadius: 22,
                   overflow: "hidden",
                 }}
-            /> : <View
+            /> :
+              <View
                 style={{
                   position: "relative",
                   width: 24.64,
                   aspectRatio: 1,
                   marginRight: 4
                 }}
-            >
+              >
               <View
                   style={{
                     backgroundColor: "#ccc",
@@ -177,11 +178,11 @@ const GroceryItem = ({
                   }}
               >
                 <Text
-                    style={{
-                      color: "#fff",
-                      fontSize: 12,
-                      fontWeight: "bold",
-                    }}
+                  style={{
+                    color: "#fff",
+                    fontSize: 12,
+                    fontWeight: "bold",
+                  }}
                 >
                   {itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""}
                 </Text>