BudgetIzr/components/depense_edit/depense_form.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, 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 (
        <View style={ depense_form_styles.form_area }>
                <Text> {update_depense ? "Modifier" : "Nouvelle dépense"}</Text>
                <View style={ depense_form_styles.form_entry }>
                    <Text> 💸</Text>
                    <TextInput
                        value={update_depense ? depenseValue.toString() : depenseValue ? depenseValue : ""}
                        keyboardType="numeric"
                        style={ depense_form_styles.input }
                        onChangeText={ (value) => {
                            onValueEdit(value);
                        }}
                    />
                </View>
                <View style={ depense_form_styles.form_entry }>
                    <Text> 📃</Text>
                    <TextInput 
                        value={update_depense ? descriptionValue : descriptionValue ? descriptionValue : ""}
                        style={ depense_form_styles.input }
                        onChangeText={ (value) => {
                            onDescriptionEdit(value);
                        }}
                    />
                </View>
                <View style={ depense_form_styles.form_entry }>
                    <Text> 📅</Text>
                    <TextInput 
                    onPressIn={ () => toggleDateInput()}
                    value={ depenseDate.toDateString() } style={ depense_form_styles.input }
                        onChangeText={ (value) => {
                            onDescriptionEdit(value);
                        }}
                    />
                    {/* https://github.com/react-native-datetimepicker/datetimepicker */}
                    { timePickerDisplay && <DateTimePicker
                        testID="dateTimePicker"
                        value={depenseDate}
                        mode={"date"}
                        is24Hour={true}
                        display="default"
                        onChange={(event, value) => {
                            onDatePicker(false);
                            onDateChange(new Date(value));
                        }}
                        />
                    }
                </View>
                <Pressable 
                    style={depense_form_styles.button_add} 
                    onPress={() => 
                        {
                            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();
                            }
                        }}>
                        <Text>{update_depense ? "Update" : "Add"}</Text>
                    </Pressable>
            </View>
    );
}

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: 1,
    },
    form_entry :{
        display: 'flex',
        flexDirection: 'row',
    },
    input :{
        width: "50%",
        borderWidth: 1,
        textAlign: 'center',
    },
    button_add: {
        borderWidth: 1,
        padding: 10,
    },
})