BudgetIzr/components/depense_edit/depense_form.js

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 (
        <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) => {
                            
                            if(event.type != "dismissed")
                            {
                                onDatePicker(false);
                                onDateChange(new Date(value));
                            }else{onDatePicker(false);}
                        }}
                        />
                    }
                </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>
                    {
                        update_depense ? 
                        <Pressable
                            style={ [depense_form_styles.button_add, depense_form_styles.button_delete]}
                            onPress={ () => {
                                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();
                                                }
                                            )
                                        }}
                                    ])
                            }}
                            >
                                <Text>💣</Text>
                        </Pressable> :
                        <View/>
                    }
                    
            </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: 5,
        // borderRadius: 5,
    },
    form_entry :{
        display: 'flex',
        flexDirection: 'row',
    },
    input :{
        width: "50%",
        borderWidth: 1,
        // borderRadius: 5,

        textAlign: 'center',
    },
    button_add: {
        borderWidth: 1,
        // borderRadius: 5,
        padding: 10,
        margin: 1,
    },
    button_delete: {
        position: 'absolute',
        right: 1,
        borderColor: "#CC5555",
    }
})