From 12f1a51292d03537ee2dfb262cc85b5512d38fd9 Mon Sep 17 00:00:00 2001
From: Dejan <panovskidejan@yahoo.com>
Date: Sun, 8 Dec 2024 13:15:06 +0100
Subject: [PATCH] - Added delete button on the checked grocery items

---
 components/pages/grocery/GroceryItem.tsx | 34 ++++++++++++++++--------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/pages/grocery/GroceryItem.tsx b/components/pages/grocery/GroceryItem.tsx
index 354dd44..ec652b2 100644
--- a/components/pages/grocery/GroceryItem.tsx
+++ b/components/pages/grocery/GroceryItem.tsx
@@ -134,17 +134,29 @@ const GroceryItem = ({
         ) : (
           !isEditingTitle &&
           (isParent || isCaregiver) && (
-            <Checkbox
-              value={item.bought}
-              containerStyle={[styles.checkbox, { borderRadius: 50 }]}
-              style={styles.checked}
-              borderRadius={50}
-              color="#fd1575"
-              hitSlop={20}
-              onValueChange={() =>
-                updateGroceryItem({ id: item.id, bought: !item.bought })
-              }
-            />
+              <View row>
+                {item.bought &&
+                    <AntDesign
+                      name="close"
+                      size={24}
+                      style={{ color: "grey", marginRight: 10 }}
+                      onPress={() => {
+                        handleItemApproved(item.id, { approved: false });
+                        deleteGrocery(item.id);
+                      }}/>
+                }
+                <Checkbox
+                  value={item.bought}
+                  containerStyle={[styles.checkbox, { borderRadius: 50 }]}
+                  style={styles.checked}
+                  borderRadius={50}
+                  color="#fd1575"
+                  hitSlop={20}
+                  onValueChange={() =>
+                    updateGroceryItem({ id: item.id, bought: !item.bought })
+                  }
+                />
+              </View>
           )
         )}
       </View>