From c9252d74a6766fbff04c61e1f2e16ead24b4f043 Mon Sep 17 00:00:00 2001 From: UnluckyBird Date: Fri, 17 Nov 2023 13:27:41 +0100 Subject: [PATCH 1/4] Added add and remove items to list view - Add items - Remove items - Small compatibility with dark mode changes --- app/(tabs)/(index)/_layout.tsx | 6 +- app/(tabs)/(index)/index.tsx | 294 ++++- app/(tabs)/_layout.tsx | 6 +- app/(tabs)/expenses/_layout.tsx | 6 +- app/(tabs)/notice.tsx | 5 +- babel.config.js | 1 + constants/Colors.ts | 4 + package-lock.json | 2032 ++++++++++++++++++++++++++++--- package.json | 9 +- 9 files changed, 2133 insertions(+), 230 deletions(-) diff --git a/app/(tabs)/(index)/_layout.tsx b/app/(tabs)/(index)/_layout.tsx index 7623a81..1ba923a 100644 --- a/app/(tabs)/(index)/_layout.tsx +++ b/app/(tabs)/(index)/_layout.tsx @@ -3,14 +3,14 @@ import { useColorScheme } from "react-native"; import Colors from "../../../constants/Colors"; export default function ListTabLayout() { - const colorScheme = useColorScheme(); + const colorScheme = useColorScheme() ?? 'light'; return ( diff --git a/app/(tabs)/(index)/index.tsx b/app/(tabs)/(index)/index.tsx index 95bc2a0..eed50d6 100644 --- a/app/(tabs)/(index)/index.tsx +++ b/app/(tabs)/(index)/index.tsx @@ -1,56 +1,53 @@ -import { StyleSheet } from 'react-native'; +import { Button, Pressable, StyleSheet, TextInput, useColorScheme } from 'react-native'; +import Modal from "react-native-modal"; import { Text, View, } from '../../../components/Themed'; -import { Component } from 'react'; +import { useState } from 'react'; import { FlatList } from 'react-native-gesture-handler'; import { FontAwesome5 } from '@expo/vector-icons'; +import CheckBox from 'expo-checkbox'; import Swipeable from 'react-native-gesture-handler/Swipeable'; +import Colors from '../../../constants/Colors'; +import ActionButton from 'react-native-action-button'; +import { MultiSelect } from 'react-native-element-dropdown'; +import moment from 'moment'; +import { LogBox } from 'react-native'; -const DATA = [ +LogBox.ignoreLogs(['Warning: componentWillReceiveProps has been renamed']); + +const usersDropdown = [ + { label: 'Test bruger', value: 'Test bruger' }, + { label: 'Andreas', value: 'Andreas' }, + { label: 'Mike', value: 'Mike' }, + { label: 'Emil', value: 'Emil' }, + { label: 'Martin', value: 'Martin' }, +]; + +const seedData : ListData[] = [ { name: 'Bananas', - data: [{user: "Test bruger", date: "2020.11.01", price: 3}], + data: {added: {user: "Test bruger", date: "2020.11.01"}, users: [], bought: {user: "Test bruger", date: "2020.11.01", price: 3}}, }, { name: 'Chorizo', - data: [{user: "Andreas", date: "2020.11.01", price: 35}], + data: {added: {user: "Andreas", date: "2020.11.01"}, users: [], bought: {user: "Andreas", date: "2020.11.01", price: 35}}, }, { name: 'Beans', - data: [{user: "Mike", date: "2020.11.01", price: 2}], + data: {added: {user: "Mike", date: "2020.11.01"}, users: [], bought: {user: "Mike", date: "2020.11.01", price: 2}}, }, { name: 'Apple', - data: [{user: "Emil", date: "2020.11.01", price: 2.5}], + data: {added: {user: "Emil", date: "2020.11.01"}, users: [], bought: {user: "Emil", date: "2020.11.01", price: 2.5}}, }, { name: 'Chocolate', - data: [{user: "Martin", date: "2020.11.01", price: 13.95}], + data: {added: {user: "Martin", date: "2020.11.01"}, users: []}, }, ] type ListData = { - name: string, - data: { user: string, date: string, price: number }[] -} - -function renderItem({item, index}: { item: ListData, index: number}) { - return ( - - - - {item.name} - {item.data[0].price} kr. - - Added by {item.data[0].user} {item.data[0].date} - - - ) + name: string, + data: {added: { user: string, date: string}, users: { name: string }[], bought?: { user: string, date: string, price: number}} } function leftSwipeAction() { @@ -79,24 +76,187 @@ function rightSwipeAction() { ) } -function swipeHandler(dir: 'left' | 'right') { - if (dir == "left") { - console.log(dir); - } else { - console.log(dir); +export default function ToBeBoughtScreen() { + const colorScheme = useColorScheme() ?? 'light'; + const [isModalAddItemVisible, setIsModalAddItemVisible] = useState(false); + const [isModalDeleteVisible, setIsModalDeleteVisible] = useState(false); + const [products, setProducts] = useState(seedData) + + const [productName, setProductName] = useState(''); + const [selectedUsers, setSelectedUsers] = useState(usersDropdown.map((user) => user.value)); + const [alreadyBought, setAlreadyBought] = useState(false); + const [price, setPrice] = useState('0'); + + const [itemToDelete, setItemToDelete] = useState(0) + + const swipeableRows : Swipeable[] = [] + + const handleModalAddItem = () => setIsModalAddItemVisible(() => !isModalAddItemVisible); + const handleModalDelete = () => setIsModalDeleteVisible(() => !isModalDeleteVisible); + const handleCheckbox = () => setAlreadyBought(() => !alreadyBought); + const clearProduct = () => { + setProductName('') + setSelectedUsers(usersDropdown.map((user) => user.value)) + setAlreadyBought(false) + setPrice('0') + } + const addProduct = () => { + const time = moment().format('YYYY.MM.DD'); + const newProduct = { + name: productName, + data: { + added: {user: "Me", date: time}, + users: selectedUsers.map(user => ({name: user})), + bought: alreadyBought ? {user: "Me", date: time, price: Number(price)} : undefined + } + } + if(newProduct.data.bought === undefined){ + //Add to GUN here + console.log(newProduct.name + ' added') + } + else{ + //Move to GUN bought list here + console.log(newProduct.name + ' bought by ' + newProduct.data.bought.user) + } + setProducts(products => [...products, newProduct]) + + handleModalAddItem() + clearProduct() + } + + function swipeHandler(dir: 'left' | 'right', index: number) { + if (dir == "left") { + console.log(dir); + } else { + setItemToDelete(index) + handleModalDelete() + } } -} -export default class ToBeBoughtScreen extends Component { - render() { + const renderButton = (text: 'Yes' | 'No') => { return ( + { + if (text === 'Yes') + { + //Remove from GUN here + setProducts(prevState => prevState.filter((_,i) => i !== itemToDelete)) + swipeableRows[itemToDelete].reset() + } + else + { + swipeableRows[itemToDelete].close() + } + setItemToDelete(0) + handleModalDelete() + }}> + {text} + + ); + }; + + function renderItem({item, index}: { item: ListData, index: number}) { + return ( + ref != null ? swipeableRows[index] = ref : undefined} + friction={1.5} + overshootFriction={8} + renderLeftActions={leftSwipeAction} + renderRightActions={rightSwipeAction} + onSwipeableOpen={(dir) => swipeHandler(dir, index)}> + + + {item.name} + + Added by {item.data.added.user} {item.data.added.date} + + + ) + } + + return ( + - ); - } + + + Product + setProductName(text)} + editable + /> + Split expenses between + { + setSelectedUsers(item); + }} + visibleSelectedItem={false} + /> + + setAlreadyBought(newValue)} + /> + Already bought + + {alreadyBought ? Amount paid : null} + {alreadyBought ? setPrice(text)} + editable + /> : null} + +