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';
import DateTimePicker from '@react-native-community/datetimepicker';


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

    const toggleDateInput = () => {
        onDatePicker(true);
    }

    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>
                <View style={ add_depenses_styles.form_entry }>
                    <Text> 📅</Text>
                    <TextInput 
                    onPressIn={ () => toggleDateInput()}
                    value={ depenseDate.toDateString() } style={ add_depenses_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) => {
                            console.log(value);
                            console.log(value.valueOf());
                            onDatePicker(false);
                            onDateChange(new Date(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, depenseDate.valueOf()], (res) => {
                                        onAddDepense(false);
                                    }
                                    );
                                props.fetchDepenses();
                                
                            }
                        }}>
                        <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,
    }
});