From 04c079c1a27ce594c88b6de5fa42d8497189bcff Mon Sep 17 00:00:00 2001
From: UnluckyBird <martin.justinussen@gmail.com>
Date: Fri, 24 Nov 2023 11:07:52 +0100
Subject: [PATCH 1/4] Added edit on long press to list view

---
 app/(tabs)/(index)/index.tsx | 67 +++++++++++++++++++++++++++---------
 1 file changed, 51 insertions(+), 16 deletions(-)

diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx
index ce86d39..e2ccfd7 100644
--- a/app/(tabs)/(index)/index.tsx
+++ b/app/(tabs)/(index)/index.tsx
@@ -2,7 +2,7 @@ import { Button, Pressable, StyleSheet, TextInput, useColorScheme } from 'react-
 import Modal from "react-native-modal";
 import { Text, View, } from '../../../components/Themed';
 import { useState } from 'react';
-import { FlatList } from 'react-native-gesture-handler';
+import { FlatList, Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { FontAwesome5 } from '@expo/vector-icons';
 import CheckBox from 'expo-checkbox';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
@@ -78,7 +78,7 @@ function rightSwipeAction() {
 
 export default function ToBeBoughtScreen() {
   const colorScheme = useColorScheme() ?? 'light';
-  const [isModalAddItemVisible, setIsModalAddItemVisible] = useState(false);
+  const [isModalAddOrEditItemVisible, setIsModalAddOrEditItemVisible] = useState(false);
   const [isModalDeleteVisible, setIsModalDeleteVisible] = useState(false);
   const [products, setProducts] = useState(seedData)
 
@@ -87,20 +87,49 @@ export default function ToBeBoughtScreen() {
   const [alreadyBought, setAlreadyBought] = useState(false);
   const [price, setPrice] = useState('0');
 
+  const [itemToEdit, setItemToEdit] = useState(-1) 
   const [itemToDelete, setItemToDelete] = useState(0)
 
   const swipeableRows : Swipeable[] = []  
 
-  const handleModalAddItem = () => setIsModalAddItemVisible(() => !isModalAddItemVisible);
+  const handleModalAddOrEditItem = () => setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible);
   const handleModalDelete = () => setIsModalDeleteVisible(() => !isModalDeleteVisible);
   const handleCheckbox = () => setAlreadyBought(() => !alreadyBought);
+
   const clearProduct = () => {
     setProductName('')
     setSelectedUsers(usersDropdown.map((user) => user.value))
     setAlreadyBought(false)
     setPrice('0')
+    setItemToEdit(-1)
+  }
+  
+  const editProduct = (index : number) => {
+    setProductName(products[index].name)
+    setSelectedUsers(products[index].data.users.map((user) => user.name))
+  }
+
+  const saveEditedProduct = () => {
+    setProducts(products.map((product, index) => {
+      if (product === products[itemToEdit]) {
+        return { ...product, 
+          name: productName,
+          data: {
+            ...product.data,
+            users: selectedUsers.map(user => ({name: user})),
+            bought: alreadyBought ? {user: "Me", date: moment().format('YYYY.MM.DD'), price: Number(price)} : undefined
+          }
+        }
+      } 
+      else {
+        return product;
+      }
+    }))
+
+    handleModalAddOrEditItem()
   }
-  const addProduct = () => {
+
+  const saveAddedProduct = () => {
     const time = moment().format('YYYY.MM.DD');
     const newProduct = {
       name: productName,
@@ -110,17 +139,17 @@ export default function ToBeBoughtScreen() {
         bought: alreadyBought ? {user: "Me", date: time, price: Number(price)} : undefined
       }
     }
-    if(newProduct.data.bought === undefined){
+    if(newProduct.data.bought === undefined) {
       //Add to GUN here
       console.log(newProduct.name + ' added')
     }
-    else{
+    else {
       //Move to GUN bought list here
       console.log(newProduct.name + ' bought by ' + newProduct.data.bought.user)
     }
     setProducts(products => [...products, newProduct])
     
-    handleModalAddItem()
+    handleModalAddOrEditItem()
   }
 
   function swipeHandler(dir: 'left' | 'right', index: number) {
@@ -162,13 +191,19 @@ export default function ToBeBoughtScreen() {
         renderLeftActions={leftSwipeAction}
         renderRightActions={rightSwipeAction}
         onSwipeableOpen={(dir) => swipeHandler(dir, index)}>
-        <View style={[styles.container, 
-          {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
-          <View style={styles.item}>
-            <Text style={styles.itemText}>{item.name}</Text>      
+        <GestureDetector gesture={Gesture.LongPress().onStart(e => {
+          setItemToEdit(index)
+          editProduct(index)
+          handleModalAddOrEditItem()
+        })}>
+          <View style={[styles.container, 
+            {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
+            <View style={styles.item}>
+              <Text style={styles.itemText}>{item.name}</Text>      
+            </View>
+            <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
           </View>
-          <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
-        </View>
+        </GestureDetector>
       </Swipeable>
     )
   }
@@ -180,7 +215,7 @@ export default function ToBeBoughtScreen() {
         data={products}
         renderItem={renderItem}
       />
-      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddItemVisible} onBackdropPress={handleModalAddItem} onModalHide={clearProduct}>
+      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddOrEditItemVisible} onBackdropPress={handleModalAddOrEditItem} onModalHide={clearProduct}>
         <View style={ styles.addItemModal }>
           <Text>Product</Text>
           <TextInput
@@ -232,7 +267,7 @@ export default function ToBeBoughtScreen() {
             editable
           /> : null}
           
-          <Button color='#5CBCA9' title="Add Product" onPress={addProduct} />
+          <Button color='#5CBCA9' title={itemToEdit === -1 ? "Add Product" : "Edit Product"} onPress={itemToEdit === -1 ? saveAddedProduct : saveEditedProduct} />
         </View>
       </Modal>
       <Modal
@@ -260,7 +295,7 @@ export default function ToBeBoughtScreen() {
           size={50} 
           color={Colors[colorScheme].background}
           />}}  
-        onPress={handleModalAddItem}
+        onPress={handleModalAddOrEditItem}
         buttonColor='#5CBCA9'
         position='center'
         size={70}/>

From 150c72246a8148791c984757586a998300d63397 Mon Sep 17 00:00:00 2001
From: UnluckyBird <martin.justinussen@gmail.com>
Date: Fri, 24 Nov 2023 12:32:19 +0100
Subject: [PATCH 2/4] removed -1 check

---
 app/(tabs)/(index)/index.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx
index e2ccfd7..d9242b6 100644
--- a/app/(tabs)/(index)/index.tsx
+++ b/app/(tabs)/(index)/index.tsx
@@ -87,7 +87,7 @@ export default function ToBeBoughtScreen() {
   const [alreadyBought, setAlreadyBought] = useState(false);
   const [price, setPrice] = useState('0');
 
-  const [itemToEdit, setItemToEdit] = useState(-1) 
+  const [itemToEdit, setItemToEdit] = useState<number | undefined>() 
   const [itemToDelete, setItemToDelete] = useState(0)
 
   const swipeableRows : Swipeable[] = []  
@@ -101,7 +101,7 @@ export default function ToBeBoughtScreen() {
     setSelectedUsers(usersDropdown.map((user) => user.value))
     setAlreadyBought(false)
     setPrice('0')
-    setItemToEdit(-1)
+    setItemToEdit(undefined)
   }
   
   const editProduct = (index : number) => {
@@ -111,7 +111,7 @@ export default function ToBeBoughtScreen() {
 
   const saveEditedProduct = () => {
     setProducts(products.map((product, index) => {
-      if (product === products[itemToEdit]) {
+      if (itemToEdit && product === products[itemToEdit]) {
         return { ...product, 
           name: productName,
           data: {
@@ -267,7 +267,7 @@ export default function ToBeBoughtScreen() {
             editable
           /> : null}
           
-          <Button color='#5CBCA9' title={itemToEdit === -1 ? "Add Product" : "Edit Product"} onPress={itemToEdit === -1 ? saveAddedProduct : saveEditedProduct} />
+          <Button color='#5CBCA9' title={itemToEdit ? "Edit Product" : "Add Product"} onPress={itemToEdit ? saveEditedProduct : saveAddedProduct} />
         </View>
       </Modal>
       <Modal

From 4d9f253647ec77aea06462e49fb82380bdbad48e Mon Sep 17 00:00:00 2001
From: UnluckyBird <martin.justinussen@gmail.com>
Date: Tue, 28 Nov 2023 09:53:21 +0100
Subject: [PATCH 3/4] Give visual feedback on long press

---
 app/(tabs)/(index)/index.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx
index d9242b6..fa786d6 100644
--- a/app/(tabs)/(index)/index.tsx
+++ b/app/(tabs)/(index)/index.tsx
@@ -1,4 +1,4 @@
-import { Button, Pressable, StyleSheet, TextInput, useColorScheme } from 'react-native';
+import { Button, Pressable, StyleSheet, TextInput, TouchableOpacity, useColorScheme } from 'react-native';
 import Modal from "react-native-modal";
 import { Text, View, } from '../../../components/Themed';
 import { useState } from 'react';
@@ -196,13 +196,15 @@ export default function ToBeBoughtScreen() {
           editProduct(index)
           handleModalAddOrEditItem()
         })}>
-          <View style={[styles.container, 
-            {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
-            <View style={styles.item}>
-              <Text style={styles.itemText}>{item.name}</Text>      
+          <TouchableOpacity
+            activeOpacity={0.5}>
+            <View style={[styles.container, {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
+              <View style={styles.item}>
+                <Text style={styles.itemText}>{item.name}</Text>      
+              </View>
+              <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
             </View>
-            <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
-          </View>
+          </TouchableOpacity>
         </GestureDetector>
       </Swipeable>
     )

From c048dd4c8f8241027430c7dca49910b12d3de3e5 Mon Sep 17 00:00:00 2001
From: UnluckyBird <martin.justinussen@gmail.com>
Date: Wed, 29 Nov 2023 09:46:08 +0100
Subject: [PATCH 4/4] Fix bug

---
 app/(tabs)/(index)/index.tsx   | 22 ++++-----
 components/AreYouSureModal.tsx | 83 ++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 11 deletions(-)
 create mode 100644 components/AreYouSureModal.tsx

diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx
index dac6657..8d982bf 100644
--- a/app/(tabs)/(index)/index.tsx
+++ b/app/(tabs)/(index)/index.tsx
@@ -89,7 +89,7 @@ export default function ToBeBoughtScreen() {
 
   const swipeableRows : Swipeable[] = []  
 
-  const handleModalAddOrEditItem = () => setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible);
+  const handleModalAddOrEditItem = () => { console.log(!isModalAddOrEditItemVisible); setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible); }
   const handleModalDelete = () => setIsModalDeleteVisible(() => !isModalDeleteVisible);
   const handleCheckbox = () => setAlreadyBought(() => !alreadyBought);
 
@@ -188,21 +188,21 @@ export default function ToBeBoughtScreen() {
         renderLeftActions={leftSwipeAction}
         renderRightActions={rightSwipeAction}
         onSwipeableOpen={(dir) => swipeHandler(dir, index)}>
-        <GestureDetector gesture={Gesture.LongPress().onStart(e => {
-          setItemToEdit(index)
-          editProduct(index)
-          handleModalAddOrEditItem()
-        })}>
-          <TouchableOpacity
-            activeOpacity={0.5}>
+        <TouchableOpacity
+          activeOpacity={0.5}>
+          <GestureDetector gesture={Gesture.LongPress().onStart(e => {
+            setItemToEdit(index)
+            editProduct(index)
+            handleModalAddOrEditItem()
+          })}> 
             <View style={[styles.container, {backgroundColor: index % 2 == 0 ? Colors[colorScheme].listBackgroundColor1 : Colors[colorScheme].listBackgroundColor2}]}>
               <View style={styles.item}>
                 <Text style={styles.itemText}>{item.name}</Text>      
               </View>
               <Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
             </View>
-          </TouchableOpacity>
-        </GestureDetector>
+          </GestureDetector>
+        </TouchableOpacity>
       </Swipeable>
     )
   }
@@ -214,7 +214,7 @@ export default function ToBeBoughtScreen() {
         data={products}
         renderItem={renderItem}
       />
-      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddOrEditItemVisible} onBackdropPress={handleModalAddOrEditItem} onModalHide={clearProduct}>
+      <Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddOrEditItemVisible} onBackdropPress={() => setIsModalAddOrEditItemVisible(false)} onModalHide={clearProduct}>
         <View style={ styles.addItemModal }>
           <Text>Product</Text>
           <TextInput
diff --git a/components/AreYouSureModal.tsx b/components/AreYouSureModal.tsx
new file mode 100644
index 0000000..ba4d487
--- /dev/null
+++ b/components/AreYouSureModal.tsx
@@ -0,0 +1,83 @@
+import { Pressable, StyleSheet } from "react-native";
+import Modal from "react-native-modal";
+import { Text, View, } from './Themed';
+
+type AreYouSureProps =  {
+  title: string,
+  text: string,
+  isVisible: boolean, 
+  onBackdropPress?: () => void, 
+  onYes?: () => void, 
+  onNo?: () => void
+};
+
+const renderButton = (text: string, onPress?: () => void) => {
+  return (
+    <Pressable style={[styles.button, { backgroundColor: text === 'Yes' ? '#5CBCA9' : '#E35F52' }]} onPress={onPress}>
+      <Text style={styles.buttonText}>{text}</Text>
+    </Pressable>   
+  );
+};
+
+export default function AreYouSureModal(props: AreYouSureProps) {
+  return (
+    <View style={styles.container}>
+      <Modal
+        animationIn='zoomIn' 
+        animationOut='zoomOut' 
+        isVisible={props.isVisible} 
+        onBackdropPress={props.onBackdropPress}>
+        <View style={styles.modalContainer}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalTitleText}>{props.title}</Text>
+            <Text style={styles.modalContentText}>{props.text}</Text>
+            <View style={styles.buttonContainer}>
+              {renderButton('Yes', props.onYes)}
+              {renderButton('No', props.onNo)}
+            </View>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  modalContainer: {
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+    modalContent: {
+    padding: 20,
+    borderRadius: 10,
+    height: 250
+  },
+    modalTitleText: {
+    fontSize: 30,
+  },
+    modalContentText: {
+    fontSize: 16,
+    flex: 1
+  },
+    buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    padding: 10,
+  },
+    button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+    borderRadius: 4,
+    elevation: 3,
+    width: "40%",
+  },
+    buttonText: {
+    color: 'white',
+    fontSize: 16,
+  }
+});
\ No newline at end of file