Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added add and remove items to list view #39

Merged
merged 6 commits into from
Nov 22, 2023
Merged

Added add and remove items to list view #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c9252d7
Added add and remove items to list view
UnluckyBird Nov 17, 2023
02b8740
Fix dropdown selected styling
UnluckyBird Nov 22, 2023
c410d15
Merge branch 'main' into item-modals
andreasalstrup Nov 22, 2023
69a0088
Fixed user not selected when pressing checkbox
UnluckyBird Nov 22, 2023
07d2661
Merge branch 'item-modals' of https://github.com/andreasalstrup/CoSha…
UnluckyBird Nov 22, 2023
8c117b6
Fix UI updating too fast on modal close
UnluckyBird Nov 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app/(tabs)/(index)/_layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<TopTabs
options={{swipeEnabled: false}}
screenOptions={{
tabBarPressColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise,
tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise},
tabBarPressColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise,
tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme].topNavBarIndicatorColorTurquoise},
}}>
<TopTabs.Header>
</TopTabs.Header>
Expand Down
311 changes: 262 additions & 49 deletions app/(tabs)/(index)/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Swipeable
friction={1.5}
overshootFriction={8}
renderLeftActions={leftSwipeAction}
renderRightActions={rightSwipeAction}
onSwipeableOpen={swipeHandler}>
<View style={[styles.container,
{backgroundColor: index % 2 == 0 ? '#eeeeee' : '#D3D3D3'}]}>
<View style={styles.item}>
<Text style={styles.itemText}>{item.name}</Text>
<Text style={styles.itemPrice}>{item.data[0].price} kr.</Text>
</View>
<Text style={styles.infoText}>Added by {item.data[0].user} {item.data[0].date}</Text>
</View>
</Swipeable>
)
name: string,
data: {added: { user: string, date: string}, users: { name: string }[], bought?: { user: string, date: string, price: number}}
}

function leftSwipeAction() {
Expand Down Expand Up @@ -79,24 +76,196 @@ 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()
}

function swipeHandler(dir: 'left' | 'right', index: number) {
if (dir == "left") {
console.log(dir);
} else {
setItemToDelete(index)
handleModalDelete()
}
}

const renderButton = (text: 'Yes' | 'No') => {
return (
<Pressable style={[styles.button, { backgroundColor: text === 'Yes' ? '#5CBCA9' : '#E35F52' }]} onPress={() => {
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 style={styles.buttonText}>{text}</Text>
</Pressable>
);
};

export default class ToBeBoughtScreen extends Component {
render() {
function renderItem({item, index}: { item: ListData, index: number}) {
return (
<Swipeable
ref={ref => ref != null ? swipeableRows[index] = ref : undefined}
friction={1.5}
overshootFriction={8}
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>
</View>
<Text style={styles.infoText}>Added by {item.data.added.user} {item.data.added.date}</Text>
</View>
</Swipeable>
)
}

return (
<View style={{flex: 1}}>
<FlatList
style={{marginTop: 48}}
data={DATA}
data={products}
renderItem={renderItem}
/>
);
}
<Modal animationIn='zoomIn' animationOut='zoomOut' isVisible={isModalAddItemVisible} onBackdropPress={handleModalAddItem} onModalHide={clearProduct}>
<View style={ styles.addItemModal }>
<Text>Product</Text>
<TextInput
style={styles.dropdown}
placeholder="Product name"
value={productName}
onChangeText={(text) => setProductName(text)}
editable
/>
<Text>Split expenses between</Text>
<MultiSelect
style={styles.dropdown}
renderItem={(item, selected) =>
<View style={[styles.dropdownItem, {marginBottom: selected ? -0.5 : 0}]}>
<Text style={styles.dropdownTextItem}>{item.label}</Text>
<CheckBox
style={{ marginRight: 10 }}
color={'#5CBCA9'}
value={selected}
pointerEvents='none'
/>
</View>}
data={usersDropdown}
labelField="label"
valueField="value"
placeholder={'Selected: ' + selectedUsers.length}
value={selectedUsers}
onChange={item => {
setSelectedUsers(item);
}}
visibleSelectedItem={false}
/>
<View style={{flexDirection:'row', marginBottom: 10}}>
<CheckBox
style={{ marginRight: 10 }}
color={'#5CBCA9'}
value={alreadyBought}
onValueChange={(newValue) => setAlreadyBought(newValue)}
/>
<Text onPress={handleCheckbox} style={{width: '100%'}}>Already bought</Text>
</View>
{alreadyBought ? <Text>Amount paid</Text> : null}
{alreadyBought ? <TextInput
style={styles.dropdown}
keyboardType='numeric'
placeholder="kr"
value={price.toString()}
onChangeText={(text : string) => setPrice(text)}
editable
/> : null}

<Button color='#5CBCA9' title="Add Product" onPress={addProduct} />
</View>
</Modal>
<Modal
animationIn='zoomIn'
animationOut='zoomOut'
isVisible={isModalDeleteVisible}
onBackdropPress={() => {
handleModalDelete()
swipeableRows[itemToDelete].close()
}}>
<View style={styles.modalContainer}>
<View style={styles.modalContent}>
<Text style={styles.modalTitleText}>Delete Item</Text>
<Text style={styles.modalContentText}>Are you sure you want to delete {products[itemToDelete].name}?</Text>
<View style={styles.buttonContainer}>
{renderButton('Yes')}
{renderButton('No')}
</View>
</View>
</View>
</Modal>
<ActionButton
renderIcon={() => {return <FontAwesome5
name="plus"
size={50}
color={Colors[colorScheme].background}
/>}}
onPress={handleModalAddItem}
buttonColor='#5CBCA9'
position='center'
size={70}/>
</View>
);
}

const styles = StyleSheet.create({
Expand All @@ -114,19 +283,11 @@ const styles = StyleSheet.create({
},
itemText: {
fontSize: 35,
color: 'black',
flexDirection: 'row',
},
itemPrice: {
fontSize: 35,
color: 'black',
flexDirection: 'row',
justifyContent: 'flex-end'
},
infoText: {
fontSize: 12,
fontWeight: 'bold',
color: 'black',
marginLeft: 10,
marginBottom: 5,
marginTop: -5,
Expand All @@ -143,5 +304,57 @@ const styles = StyleSheet.create({
},
swipeIcon: {
padding: 20,
},
addItemModal: {
height: 300,
padding: 22,
justifyContent: 'center',
borderRadius: 4,
},
dropdown: {
backgroundColor: 'lightgray',
marginBottom: 10,
borderRadius: 4,
paddingLeft: 10
},
dropdownItem: {
padding: 17,
flexDirection: 'row',
},
dropdownTextItem: {
flex: 1,
fontSize: 16,
},
modalContainer: {
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
modalContent: {
padding: 20,
borderRadius: 10,
},
modalTitleText: {
fontSize: 30,
},
modalContentText: {
fontSize: 16,
},
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,
}
});
Loading