import React from 'react'; import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native'; import { sqlite_exec_parameterised } from '../../db/query'; import DateTimePicker from '@react-native-community/datetimepicker'; export default function DepenseForm(props){ const [depenseValue, onValueEdit] = React.useState(props.depense ? props.depense.value : null); const [descriptionValue, onDescriptionEdit] = React.useState(props.depense ? props.depense.description : null); const [depenseDate, onDateChange] = React.useState(props.depense ? new Date(props.depense.date) : new Date()) const [timePickerDisplay, onDatePicker] = React.useState(false) let update_depense = null != props.depense; const toggleDateInput = () => { onDatePicker(true); } return ( {update_depense ? "Modifier" : "Nouvelle dépense"} 💸 { onValueEdit(value); }} /> 📃 { onDescriptionEdit(value); }} /> 📅 toggleDateInput()} value={ depenseDate.toDateString() } style={ depense_form_styles.input } onChangeText={ (value) => { onDescriptionEdit(value); }} /> {/* https://github.com/react-native-datetimepicker/datetimepicker */} { timePickerDisplay && { if(event.type != "dismissed") { onDatePicker(false); onDateChange(new Date(value)); }else{onDatePicker(false);} }} /> } { if(null != depenseValue) { if(update_depense) { sqlite_exec_parameterised( "UPDATE expense SET value = ?, description = ?, date = ? WHERE id = ?", [depenseValue, descriptionValue, depenseDate.valueOf(), props.depense.id], (res) => { props.onUpdateDepense(false) } ); } else { sqlite_exec_parameterised( "INSERT INTO expense (value, description, date) values (?, ?, ?)", [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => { props.onAddDepense(false); } ); } props.fetchDepenses(); } }}> {update_depense ? "Update" : "Add"} { update_depense ? { console.log("delete"); Alert.alert( "Delete ?", "Ciao bye bye ?", [ {text: "Oopsie", style: "cancel"}, {text: "Oui oui", style: "destructive", onPress: () => { sqlite_exec_parameterised( "DELETE FROM expense WHERE id = ?", [props.depense.id],(res) => { props.fetchDepenses(); } ) }} ]) }} > 💣 : } ); } const depense_form_styles = StyleSheet.create({ form_area: { backgroundColor: '#ffffff', zIndex: 10, elevation: 10, margin: 5, // marginTop: '50%', display: 'flex', flexDirection: 'column', justifyContent: "space-between", // borderWidth: 5, borderRadius: 10, }, form_entry :{ display: 'flex', flexDirection: 'row', }, input :{ width: "50%", borderWidth: 1, borderRadius: 10, textAlign: 'center', }, button_add: { borderWidth: 1, borderRadius: 10, padding: 10, margin: 1, }, button_delete: { position: 'absolute', right: 1, borderColor: "#CC5555", } })