BudgetIzr/components/add_depense.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
import { sqlite_exec_parameterised } from '../db/query';

export default function AddDepense(props){
    const [addingDepense, onAddDepense] = React.useState(false);
    const [depenseValue, onValueEdit] = React.useState(null);
    const [descriptionValue, onDescriptionEdit] = React.useState(null);

    return (<View style={ add_depenses_styles.overlay }>
    <View >
        {addingDepense ? 
            <View style={ add_depenses_styles.form_area }>
                <Text> Nouvelle dépense</Text>
                <View style={ add_depenses_styles.form_entry }>
                    <Text> 💸</Text>
                    <TextInput
                        keyboardType="numeric"
                        style={ add_depenses_styles.input }
                        onChangeText={ (value) => {
                            onValueEdit(value);
                        }}
                    />
                </View>
                <View style={ add_depenses_styles.form_entry }>
                    <Text> 📃</Text>
                    <TextInput style={ add_depenses_styles.input }
                        onChangeText={ (value) => {
                            onDescriptionEdit(value);
                        }}
                    />
                </View>
                <Pressable 
                    style={add_depenses_styles.button_add} 
                    onPress={() => 
                        {
                            console.log(depenseValue);
                            if(null != depenseValue)
                            {
                                sqlite_exec_parameterised(
                                    "INSERT INTO expense (value, description, date) values (?, ?, ?)",
                                    [depenseValue, descriptionValue, Date.now()], (res) => {
                                        onAddDepense(false);
                                    }
                                    );
                            }
                        }}>
                        <Text>Ajouter</Text>
                    </Pressable>
            </View>
         : <View/>}
    </View>
    <View style={ add_depenses_styles.button_add_parent }>
        <Pressable
            style={add_depenses_styles.button_add} 
            onPress={() => onAddDepense(!addingDepense)}> 
            
            <Text>{!addingDepense ? "+" : "-"}</Text>
        
        </Pressable>
    </View>
    </View>
    );
}


const add_depenses_styles = StyleSheet.create({
    overlay: {
        height: "100%",
        width: "100%",
        position: 'absolute',

    },
    form_area: {
        backgroundColor: '#f2f2f2',
        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,
    },
    button_add_parent: {
        position: 'absolute',
        bottom: 10,
        right: 10,
    }
});