edit depenses

App.js

@@ -40,7 +40,10 @@ export default function App() {
             durationMode={durationMode} 
             dailyExpense={dailyObjective}
             onChangeObjective={onChangeObjective}/>
-          <DepensesList depensesFetched={() => onFetchDepenses(false)} fetchDepenses={fetchDepenses} durationMode={durationMode} />
+          <DepensesList 
+            depensesFetched={() => onFetchDepenses(false)} 
+            fetchDepenses={fetchDepenses} 
+            durationMode={durationMode} />
           <StatusBar hidden />
       </View>
         {/* Overlay for expenses */}

components/add_depense.js

@@ -1,88 +1,15 @@
 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';
+import DepenseForm from './depense_edit/depense_form';
 
 
 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>
+            <DepenseForm fetchDepenses={props.fetchDepenses} onAddDepense={onAddDepense}/>
          : <View/>}
     </View>
     <View style={ add_depenses_styles.button_add_parent }>
@@ -104,28 +31,8 @@ const add_depenses_styles = StyleSheet.create({
         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,

components/depense_edit/depense_form.js

@@ -0,0 +1,129 @@
+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,
+    },
+})

components/depense_list_entry.js

@@ -1,24 +1,41 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, Text, View, TextInput } from 'react-native';
+import { StyleSheet, Text, View, TextInput, Pressable } from 'react-native';
+import DepenseForm from './depense_edit/depense_form';
 
 
 export default function DepenseListEntry(props){
+    const [editing, toggleEdit] = React.useState(false);
 
-    return(
-        <View style={depense_list_entry_style.depense_list_entry}>
-                <Text >{props.depense.description}</Text>
-                <Text >{new Date(props.depense.date).toDateString()}</Text>
-                <Text >{props.depense.value}</Text>
-            </View>
+
+    return(<View style={depense_list_entry_style.depense_list_entry}>
+            <Pressable 
+            onPress={() => {
+                toggleEdit(!editing);
+                console.log(props.depense);
+            }}
+            style={depense_list_entry_style.pressable_depense_list_entry}>
+                    <Text >{props.depense.description}</Text>
+                    <Text >{new Date(props.depense.date).toDateString()}</Text>
+                    <Text >{props.depense.value}</Text>
+            </Pressable>
+            {editing ? 
+                <DepenseForm fetchDepenses={props.fetchDepenses} onUpdateDepense={(res) => {toggleEdit(res)}} depense={props.depense}/> : 
+                <View/>
+            }
+        
+        </View>
     )
 }
 
 const depense_list_entry_style = StyleSheet.create({
     depense_list_entry: {
+        borderBottomWidth: 0.5
+    },
+    pressable_depense_list_entry: {
         display: "flex",
         flexDirection: "row",
         justifyContent: "space-between",
         margin: 2,
-        borderBottomWidth: 0.5
+
     }
   });

components/depenses_list.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { StyleSheet, Text, View, TextInput } from 'react-native';
+import { StyleSheet, Text, View, TextInput, FlatList, SafeAreaView  } from 'react-native';
+import { ScrollView } from 'react-native-gesture-handler';
 import { sqlite_exec_query } from '../db/query';
 import DepenseListEntry from './depense_list_entry';
 
@@ -30,40 +31,28 @@ function DepensesList(props)
         let oldest_depense = depenses[depenses.length - 1]
         let curDate = new Date(latest_depense.date);
         let oldestDate = new Date(oldest_depense.date);
-        console.log(curDate);
-        console.log(oldestDate);
-        // while(curDate > oldestDate)
-        // {
-        //     console.log(curDate);
-        //     curDate.setDate( curDate.getDate() - 1);
-        // }
-
     }
         depenses
             .forEach( function(depense){
-            console.log(depense.date)
+            // console.log(depense.date)
             content.push(
-                <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
+                <DepenseListEntry fetchDepenses={() => preventFetchDepenses(false)} key={"depense_list_depense"+depense.id} depense={depense}/>
             )
         });
     
 
     return(
-    <View>
-        {content}
-    </View>
+    <SafeAreaView>
+        <ScrollView>
+            {content}
+        </ScrollView>
+    </SafeAreaView >
     )
 }
 
 const depense_list_style = StyleSheet.create({
-    depense_list_entry: {
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-    //   flex: 1,
-    //   backgroundColor: '#00FF00',
-    //   alignItems: 'center',
-    //   justifyContent: 'center',
+    list_container: {
+        flex: 1
     }
   });
 

db/query.js

@@ -9,10 +9,12 @@ export function sqlite_exec_query(inQuery, inCallback){
 }
 
 export function sqlite_exec_parameterised(inQuery, inParams, inCallback){
-    // console.log(inQuery);
+    //console.log(inQuery);
     db.transaction((tx) => {
         tx.executeSql(inQuery, inParams,
         (txobj, res) => inCallback(res),
-        (txobj, err) => {console.log("query.js error |");console.log(err);})
+        (txobj, err) => {
+            console.log("query.js error |");console.log(err);
+        })
     })
 }