Merge branch 'dev' of https://github.com/urosran/cally into dev

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
-            ? null
-            : editGrocery.category
+            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(false);
+              if (editGrocery.closeEdit) editGrocery.closeEdit();
             } 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 [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,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={() => {
-                  isParent ? handleItemApproved(item.id, { approved: true }) : null
-                }}
+                    onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
                   />
                   <AntDesign
                     name="close"
                     size={24}
                     style={{ color: "red" }}
-              onPress={() => {
-              isParent ? handleItemApproved(item.id, { approved: false }) : null
-            }}
-              /> </>}
+                    onPress={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,

components/pages/grocery/GroceryList.tsx

@@ -228,6 +228,7 @@ const GroceryList = () => {
         </View>
       </View>
       {isAddingGrocery && (
+          <View style={{ marginTop: 8 }}>
             <EditGroceryItem
               editGrocery={{
                 title: title,
@@ -235,8 +236,10 @@ const GroceryList = () => {
                 category: category,
                 setTitle: setTitle,
                 setSubmit: setSubmitted,
+                closeEdit: () => setIsAddingGrocery(false)
               }}
             />
+          </View>
       )}
 
       {/* Render Approved Groceries Grouped by Category */}