petits ajustements

App.js

@@ -4,23 +4,28 @@ import { StyleSheet, Text, View, TextInput } from 'react-native';
 import AddDepense from './components/add_depense';
 import DepensesList from './components/depenses_list';
 import TitleBar from './components/title_bar';
-import {sqlite_exec_query} from './db/query';
+import {sqlite_exec_parameterised, sqlite_exec_query} from './db/query';
 
 
 export default function App() {
   const [durationMode, onChangeDuration] = React.useState("days");
-  const [dailyObjective, onChangeObjective] = React.useState(1);
-  console.log("bah")
-  useEffect( () => {
+  const [dailyObjective, onChangeObjective] = React.useState(-1);
+  if(dailyObjective != -1)
+    sqlite_exec_parameterised("update objective set value = ?", [dailyObjective], (res) => {});
+
+    useEffect( () => {
     sqlite_exec_query("create table if not exists objective(value integer)", (res)=>{
       sqlite_exec_query("select * from objective", (res) => {
-        console.log(res.rows.length);
         if(res.rows.length == 0)
-          onChangeObjective(15);
+          {
+            sqlite_exec_parameterised("insert into objective (value) values (?)",[dailyObjective],(res)=>{})
+          }
+        else
+          {
+            onChangeObjective(res.rows._array[0].value);
+          } 
       });
     });
-    sqlite_exec_query(`
-      create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{});
   });
 
   return (

components/depense_list_entry.js

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View, TextInput } from 'react-native';
+
+
+export default function DepenseListEntry(props){
+
+    return(
+        <View style={depense_list_entry_style.depense_list_entry}>
+                <Text >{props.depense.description}</Text>
+                <Text >{props.depense.value}</Text>
+            </View>
+    )
+}
+
+const depense_list_entry_style = StyleSheet.create({
+    depense_list_entry: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+        margin: 2,
+        borderBottomWidth: 0.5
+    }
+  });

components/depenses_list.js

@@ -1,15 +1,19 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';
 import { sqlite_exec_query } from '../db/query';
+import DepenseListEntry from './depense_list_entry';
 
 
 function DepensesList(props)
 {
     const [depenses, onGetDepenses] = React.useState([]);
     useEffect( () => {
-        sqlite_exec_query("select * from expense", (res) => {
-            onGetDepenses(res.rows._array);
-        })
+        sqlite_exec_query(`create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{
+            sqlite_exec_query("select * from expense", (res) => {
+                onGetDepenses(res.rows._array);
+            });
+        });
+        
     });
     let content = []
 
@@ -17,10 +21,8 @@ function DepensesList(props)
         .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>
+            <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
+            
         )
     });
 

components/title_bar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
+import TitleBarButton from './title_bar/title_bar_button';
 
 
 function TitleBar(props){
@@ -16,7 +17,7 @@ function TitleBar(props){
         displayValue = expenseMultiplicator*props.dailyExpense
 
     return (
-        <View style={styles.controlBar}>
+        <View style={title_bar_styles.controlBar}>
             <View style={{
             flexDirection: 'row'
             }}>
@@ -24,7 +25,7 @@ function TitleBar(props){
             <TextInput
                 keyboardType="numeric"
                 value={(displayValue).toString()}
-                style={styles.input}
+                style={title_bar_styles.input}
                 onChangeText={(value) => onDurationEdit(value)}
                 onEndEditing={() => {
                     props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
@@ -37,40 +38,46 @@ function TitleBar(props){
             alignItems: 'flex-end',
             flexDirection: 'row'
             }}>
-            <Button 
-                onPress={() => props.onChangeDuration("days")}
-                title={"Jour"}></Button>
-            <Button 
-                onPress={() => {
-                    props.onChangeDuration("weeks");
-                    onDurationEdit(null);
-                }}
-                title={"Semaine"}></Button>
-            <Button 
-                title={"Mois"}
-                onPress={() => {
-                    props.onChangeDuration("months");
-                    onDurationEdit(null);
-                    }}></Button>
-            <Button 
-                title={"Année"}
-                onPress={() => {
-                    props.onChangeDuration("year")
-                    onDurationEdit(null);
-                    }}></Button>
-            </View>
+            <TitleBarButton 
+                currentDurationMode={props.durationMode}
+                onChangeDuration={props.onChangeDuration} 
+                onDurationEdit={onDurationEdit} 
+                durationMode="days"/>
+            <TitleBarButton 
+                currentDurationMode={props.durationMode}
+                onChangeDuration={props.onChangeDuration} 
+                onDurationEdit={onDurationEdit} 
+                durationMode="weeks"/>
+            <TitleBarButton 
+                currentDurationMode={props.durationMode}
+                onChangeDuration={props.onChangeDuration} 
+                onDurationEdit={onDurationEdit} 
+                durationMode="months"/>
+            <TitleBarButton 
+                currentDurationMode={props.durationMode}
+                onChangeDuration={props.onChangeDuration} 
+                onDurationEdit={onDurationEdit} 
+                durationMode="year"/>
         </View>
+    </View>
+
     );
 }
 
-const styles = StyleSheet.create({
+const title_bar_styles = StyleSheet.create({
     controlBar: {
       flexDirection: "row",
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      borderBottomWidth: 0.5,
+      paddingBottom: 5,
     },
     input: {
         borderWidth: 0.5
+    },
+    highlighted: {
+        backgroundColor: "#ff8899",
+        borderWidth: 3
     }
   });
 

components/title_bar/title_bar_button.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StyleSheet, Text, Pressable, View, TextInput, Button } from 'react-native';
+
+
+export default function TitleBarButton(props){
+
+    return(
+        <Pressable 
+        style={[styles.button, (props.currentDurationMode == props.durationMode ? styles.highlighted : null)]} 
+        onPress={() => {
+            props.onChangeDuration(props.durationMode)
+            props.onDurationEdit(null);
+            }}>
+        <Text>{props.durationMode}</Text>
+        </Pressable>
+    )
+}
+
+
+const styles = StyleSheet.create({
+    button: {
+      padding: 1,
+      margin:1,
+      borderWidth: 1,
+    },
+    input: {
+        borderWidth: 0.5
+    },
+    highlighted: {
+        backgroundColor: "#ECECEC",
+        borderWidth: 1.5,
+    }
+  });

package-lock.json

@@ -3276,13 +3276,13 @@
       },
       "dependencies": {
         "@expo/config-plugins": {
-          "version": "4.0.7",
-          "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-4.0.7.tgz",
-          "integrity": "sha512-m160Y039LJcI8Q4arzA9edWNRPPnLnTe5tB41812Mn1BAmtoZy9OMs4Rj78OKFkMx6A9JJKUTWMnP/FVAbeMiw==",
+          "version": "4.0.9",
+          "resolved": "https://registry.npmjs.org/@expo/config-plugins/-/config-plugins-4.0.9.tgz",
+          "integrity": "sha512-3wv0uhG5U5O4BGX2qm4gjFK3jvYVTy0raFsR6B/2zoBNgD3lXF8Ae5osVN118aKNZb2B7SMx3V7McunZhf7RXg==",
           "requires": {
             "@expo/config-types": "^43.0.1",
-            "@expo/json-file": "8.2.33",
-            "@expo/plist": "0.0.15",
+            "@expo/json-file": "8.2.34",
+            "@expo/plist": "0.0.16",
             "@react-native/normalize-color": "^2.0.0",
             "chalk": "^4.1.2",
             "debug": "^4.3.1",
@@ -3302,10 +3302,20 @@
           "resolved": "https://registry.npmjs.org/@expo/config-types/-/config-types-43.0.1.tgz",
           "integrity": "sha512-EtllpCGDdB/UdwAIs5YXJwBLpbFQNdlLLrxIvoILA9cXrpQMWkeDCT9lQPJzFRMFcLUaMuGvkzX2tR4tx5EQFQ=="
         },
+        "@expo/json-file": {
+          "version": "8.2.34",
+          "resolved": "https://registry.npmjs.org/@expo/json-file/-/json-file-8.2.34.tgz",
+          "integrity": "sha512-ZxtBodAZGxdLtgKzmsC+8ViUxt1mhFW642Clu2OuG3f6PAyAFsU/SqEGag9wKFaD3x3Wt8VhL+3y5fMJmUFgPw==",
+          "requires": {
+            "@babel/code-frame": "~7.10.4",
+            "json5": "^1.0.1",
+            "write-file-atomic": "^2.3.0"
+          }
+        },
         "@expo/plist": {
-          "version": "0.0.15",
-          "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.15.tgz",
-          "integrity": "sha512-LDxiS0KNZAGJu4fIJhbEKczmb+zeftl1NU0LE0tj0mozoMI5HSKdMUchgvnBm35bwBl8ekKkAfJJ0ONxljWQjQ==",
+          "version": "0.0.16",
+          "resolved": "https://registry.npmjs.org/@expo/plist/-/plist-0.0.16.tgz",
+          "integrity": "sha512-yQMt2CTm2VNLiHv2/EqHYrHvfflI2mFJd+DZIQQy569hvpZle0CxMPGH1p2KatbrO8htxJNvwrlR/4TIwhQJ5w==",
           "requires": {
             "@xmldom/xmldom": "~0.7.0",
             "base64-js": "^1.2.3",
@@ -6449,9 +6459,9 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "reselect": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.4.tgz",
-      "integrity": "sha512-i1LgXw8DKSU5qz1EV0ZIKz4yIUHJ7L3bODh+Da6HmVSm9vdL/hG7IpbgzQ3k2XSirzf8/eI7OMEs81gb1VV2fQ=="
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.5.tgz",
+      "integrity": "sha512-uVdlz8J7OO+ASpBYoz1Zypgx0KasCY20H+N8JD13oUMtPvSHQuscrHop4KbXrbsBcdB9Ds7lVK7eRkBIfO43vQ=="
     },
     "resolve": {
       "version": "1.20.0",

package.json

@@ -8,8 +8,9 @@
   },
   "dependencies": {
     "@databases/expo": "^5.0.0",
-    "expo": "~43.0.2",
+    "expo": "^43.0.3",
     "expo-splash-screen": "~0.13.5",
+    "expo-sqlite": "~10.0.3",
     "expo-status-bar": "~1.1.0",
     "expo-updates": "~0.10.15",
     "react": "17.0.1",
@@ -20,8 +21,7 @@
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.8.0",
     "react-native-sqlite-storage": "^6.0.1",
-    "react-native-web": "0.17.1",
-    "expo-sqlite": "~10.0.3"
+    "react-native-web": "0.17.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",