mmmmmvp

App.js

@@ -17,8 +17,10 @@ export default function App() {
         console.log(res.rows.length);
         if(res.rows.length == 0)
           onChangeObjective(15);
-      })
-    })
+      });
+    });
+    sqlite_exec_query(`
+      create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{});
   });
 
   return (

app.json

@@ -5,7 +5,10 @@
     "version": "1.0.0",
     "assetBundlePatterns": [
       "**/*"
-    ]
+    ],
+    "android": {
+      "package": "com.eseb.budgetizr"
+    }
   },
   "name": "budgetizr"
 }

components/add_depense.js

@@ -1,24 +1,57 @@
 import React from 'react';
 import { StyleSheet, Text, View, TextInput, Button } 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}>
+    return (<View style={ add_depenses_styles.overlay }>
     <View >
         {addingDepense ? 
-            <View style={ add_depenses_styles.form_area}>
-                <Text> Le form</Text>
-                <Button title="Ajouter"/>
+            <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>
+                <Button 
+                    onPress={() => 
+                        {
+                            console.log(depenseValue);
+                            if(null != depenseValue)
+                            {
+                                sqlite_exec_parameterised(
+                                    "INSERT INTO expense (value, description, date) values (?, ?, ?)",
+                                    [depenseValue, descriptionValue, Date.now()], (res) => {
+                                        onAddDepense(false);
+                                    }
+                                    );
+                            }
+                        }}
+                    title="Ajouter"/>
             </View>
          : <View/>}
     </View>
     <View style={ add_depenses_styles.button_add_parent }>
         <Button 
             style={add_depenses_styles.button_add} 
-            title="+"
+            title={!addingDepense ? "+" : "-"}
             onPress={() => onAddDepense(!addingDepense)}></Button>
     </View>
     </View>
@@ -34,11 +67,23 @@ const add_depenses_styles = StyleSheet.create({
 
     },
     form_area: {
-        backgroundColor: '#282828',
+        backgroundColor: '#f2c596',
+        zIndex: 10,
+        elevation: 10,
+        display: 'flex',
+        flexDirection: 'column'
 
     },
+    form_entry :{
+        display: 'flex',
+        flexDirection: 'row',
+    },
+    input :{
+        width: "50%",
+        borderWidth: 1
+    },
     button_add: {
-
+        
     },
     button_add_parent: {
         position: 'absolute',

components/depenses_list.js

@@ -1,27 +1,46 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';
+import { sqlite_exec_query } from '../db/query';
 
 
 function DepensesList(props)
 {
+    const [depenses, onGetDepenses] = React.useState([]);
+    useEffect( () => {
+        sqlite_exec_query("select * from expense", (res) => {
+            onGetDepenses(res.rows._array);
+        })
+    });
+    let content = []
+
+    depenses
+        .sort((a,b) => (a.date > b.date) ? -1 : (b.date > a.date) ? 1 : 0)
+        .forEach( function(depense){
+        content.push(
+            <View key={"depense_list_depense"+depense.id} style={depense_list_style.depense_list_entry}>
+                <Text >{depense.description}</Text>
+                <Text >{depense.value}</Text>
+            </View>
+        )
+    });
 
     return(
     <View>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
-        <Text>{props.durationMode}</Text>
+        {content}
     </View>
     )
 }
 
+const depense_list_style = StyleSheet.create({
+    depense_list_entry: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    //   flex: 1,
+    //   backgroundColor: '#00FF00',
+    //   alignItems: 'center',
+    //   justifyContent: 'center',
+    }
+  });
+
 export default DepensesList

db/query.js

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