- Grocery list changes

- Removed the Add item button from the bottom and added an empty grocery box

components/pages/grocery/EditGroceryItem.tsx

@@ -113,24 +113,24 @@ const EditGroceryItem = ({
           }}
           maxLength={25}
         />
-        <View row centerV>
+        {(editGrocery.title || editGrocery.title !== "") && <View row centerV>
           <AntDesign
-            name="check"
-            size={24}
-            style={{
-              color: "green",
-              marginRight: 15,
-            }}
-            onPress={handleSubmit}
+              name="check"
+              size={24}
+              style={{
+                color: "green",
+                marginRight: 15,
+              }}
+              onPress={handleSubmit}
           />
           <CloseXIcon
-            onPress={() => {
-              if (editGrocery.closeEdit) {
-                editGrocery.closeEdit();
-              }
-            }}
+              onPress={() => {
+                if (editGrocery.closeEdit) {
+                  editGrocery.closeEdit();
+                }
+              }}
           />
-        </View>
+        </View>}
       </View>
       <Dropdown
         style={{ marginTop: 15 }}

components/pages/grocery/GroceryList.tsx

@@ -98,6 +98,12 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
         setPendingGroceries(groceries?.filter((item) => !item.approved));
     }, [groceries]);
 
+    const handleCancelAddGrocery = () => {
+        setIsAddingGrocery(false);
+        setTitle("");
+        setCategory(GroceryCategory.None)
+    }
+
     return (
         <View marginH-20 marginB-45>
             <HeaderTemplate
@@ -244,21 +250,19 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
                     </Text>
                 </View>
             </View>
-            {isAddingGrocery && (
-                <View style={{marginTop: 8}}>
-                    <EditGroceryItem
-                        editGrocery={{
-                            title: title,
-                            setCategory: setCategory,
-                            category: category,
-                            setTitle: setTitle,
-                            setSubmit: setSubmitted,
-                            closeEdit: () => setIsAddingGrocery(false)
-                        }}
-                        onInputFocus={onInputFocus}
-                    />
-                </View>
-            )}
+            <View style={{marginTop: 8}}>
+                <EditGroceryItem
+                    editGrocery={{
+                        title: title,
+                        setCategory: setCategory,
+                        category: category,
+                        setTitle: setTitle,
+                        setSubmit: setSubmitted,
+                        closeEdit: handleCancelAddGrocery
+                    }}
+                    onInputFocus={onInputFocus}
+                />
+            </View>
 
             {/* Render Approved Groceries Grouped by Category */}
             {approvedGroceries?.length > 0

components/pages/grocery/GroceryWrapper.tsx

@@ -71,7 +71,6 @@ const GroceryWrapper = () => {
           <GroceryList onInputFocus={handleInputFocus} />
         </View>
       </ScrollView>
-      {!isAddingGrocery && <AddGroceryItem />}
     </>
   );
 };