diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx index d6fd1a2..8d982bf 100644 --- a/app/(tabs)/(index)/index.tsx +++ b/app/(tabs)/(index)/index.tsx @@ -1,8 +1,8 @@ -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'; -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'; @@ -75,7 +75,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) @@ -84,20 +84,49 @@ export default function ToBeBoughtScreen() { const [alreadyBought, setAlreadyBought] = useState(false); const [price, setPrice] = useState('0'); + const [itemToEdit, setItemToEdit] = useState() const [itemToDelete, setItemToDelete] = useState(0) const swipeableRows : Swipeable[] = [] - const handleModalAddItem = () => setIsModalAddItemVisible(() => !isModalAddItemVisible); + const handleModalAddOrEditItem = () => { console.log(!isModalAddOrEditItemVisible); setIsModalAddOrEditItemVisible(() => !isModalAddOrEditItemVisible); } const handleModalDelete = () => setIsModalDeleteVisible(() => !isModalDeleteVisible); const handleCheckbox = () => setAlreadyBought(() => !alreadyBought); + const clearProduct = () => { setProductName('') setSelectedUsers(usersDropdown.map((user) => user.value)) setAlreadyBought(false) setPrice('0') + setItemToEdit(undefined) + } + + const editProduct = (index : number) => { + setProductName(products[index].name) + setSelectedUsers(products[index].data.users.map((user) => user.name)) } - const addProduct = () => { + + const saveEditedProduct = () => { + setProducts(products.map((product, index) => { + if (itemToEdit && 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 saveAddedProduct = () => { const time = moment().format('YYYY.MM.DD'); const newProduct = { name: productName, @@ -107,17 +136,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) { @@ -159,13 +188,21 @@ export default function ToBeBoughtScreen() { renderLeftActions={leftSwipeAction} renderRightActions={rightSwipeAction} onSwipeableOpen={(dir) => swipeHandler(dir, index)}> - - - {item.name} - - Added by {item.data.added.user} {item.data.added.date} - + + { + setItemToEdit(index) + editProduct(index) + handleModalAddOrEditItem() + })}> + + + {item.name} + + Added by {item.data.added.user} {item.data.added.date} + + + ) } @@ -177,7 +214,7 @@ export default function ToBeBoughtScreen() { data={products} renderItem={renderItem} /> - + setIsModalAddOrEditItemVisible(false)} onModalHide={clearProduct}> Product : null} -