database created, now use it

App.js

 import { StatusBar } from 'expo-status-bar';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { StyleSheet, Text, View, TextInput } from 'react-native';
+import DepensesList from './components/depenses_list';
 import TitleBar from './components/title_bar';
 
+// https://github.com/expo/examples/blob/master/with-sqlite/App.js
+import * as SQLite from 'expo-sqlite';
+
+const db = SQLite.openDatabase("datacoucou.db");
+
+
 export default function App() {
+  const [durationMode, onChangeDuration] = React.useState("days");
+  const [dailyObjective, onChangeObjective] = React.useState(15);
+
+  useEffect( () => {
+    db.transaction((tx) => {
+      tx.executeSql(
+        `
+        create table if not exists expense (id integer primary key not null, value real, description text, date integer);
+        create table if not exists objective(value integer);
+        `
+      );
+    });
+      }, [])
+
   return (
     <View style={styles.container, {
       flexDirection: "column"
     }}>
-      <TitleBar/>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
+      <TitleBar 
+        onChangeDuration={onChangeDuration} 
+        durationMode={durationMode} 
+        dailyExpense={dailyObjective}
+        onChangeObjective={onChangeObjective}/>
+      <DepensesList durationMode={durationMode} database={db}/>
+      <StatusBar hidden />
     </View>
   );
 }
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
-  },
-  controlBar: {
-    flex: 1,
-    flexDirection: "row",
-    justifyContent: 'space-between'
   }
 });

components/depenses_list.js

+import React from 'react';
+import { StyleSheet, Text, View, TextInput } from 'react-native';
+
+
+function DepensesList(props)
+{
+
+    return(
+        <Text>{props.durationMode}</Text>
+    )
+}
+
+export default DepensesList

components/title_bar.js

 
 
 function TitleBar(props){
+    let expenseMultiplicator = 1;
+    if (props.durationMode === "year")
+        expenseMultiplicator = 365
+        if (props.durationMode === "weeks")
+        expenseMultiplicator = 7
+    if(props.durationMode === "months")
+        expenseMultiplicator = 30
+    const [currentEditValue, onDurationEdit] = React.useState(null);
+    let displayValue = currentEditValue
+    if(null == displayValue)
+        displayValue = expenseMultiplicator*props.dailyExpense
 
     return (
         <View style={styles.controlBar}>
             flexDirection: 'row'
             }}>
             <Text>Objectif</Text>
-            <TextInput/>
+            <TextInput
+                keyboardType="numeric"
+                value={(displayValue).toString()}
+                style={styles.input}
+                onChangeText={(value) => onDurationEdit(value)}
+                onEndEditing={() => {
+                    props.onChangeObjective(parseInt(parseInt( currentEditValue ) / expenseMultiplicator));
+                    onDurationEdit(null);
+                    }}
+                />
+            <Text>(/{props.durationMode})</Text>
             </View>
             <View style={{
             alignItems: 'flex-end',
             flexDirection: 'row'
             }}>
-            <Button title={"Jour"}></Button>
-            <Button title={"Mois"}></Button>
-            <Button title={"YTD"}></Button>
+            <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>
         </View>
     );
 }
 
 const styles = StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: '#fff',
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
     controlBar: {
-      flex: 1,
       flexDirection: "row",
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    input: {
+        borderWidth: 0.5
     }
   });
 

db/database-connect.js

-import {openDatabase} from 'react-native-sqlite-storage';
-
-// TODO reprends ici https://blog.logrocket.com/using-sqlite-with-react-native/
-export const getDBConnection = async () => {
-    return openDatabase({name: 'todo-data.db', location: 'default'});
-  };

package-lock.json

         "minimist": "^1.2.0"
       }
     },
+    "@databases/escape-identifier": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@databases/escape-identifier/-/escape-identifier-1.0.2.tgz",
+      "integrity": "sha512-O3ZrXE01nonp3XjFJ3Z4S/yZjuc4NEhCfmGIn0cHgif0yrZmgZuuMvUkYaCv77UQQN1v5zGdV1IEUECrhu0GeA==",
+      "requires": {
+        "@databases/validate-unicode": "^1.0.0"
+      }
+    },
+    "@databases/expo": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@databases/expo/-/expo-5.0.0.tgz",
+      "integrity": "sha512-VV4ATcsyRqo1+EwbUqOn22EQ3YBCM0WU1KhyadnDIvKsKqLQC/PfhtEeHfnxR2+/RDANfIsX5ofbVwjM66TcsA==",
+      "requires": {
+        "@databases/websql-core": "^4.0.0"
+      }
+    },
+    "@databases/sql": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@databases/sql/-/sql-3.2.0.tgz",
+      "integrity": "sha512-xQZzKIa0lvcdo0MYxnyFMVS1TRla9lpDSCYkobJl19vQEOJ9TqE4o8QBGRJNUfhSkbQIWyvMeBl3KBBbqyUVQQ=="
+    },
+    "@databases/validate-unicode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@databases/validate-unicode/-/validate-unicode-1.0.0.tgz",
+      "integrity": "sha512-dLKqxGcymeVwEb/6c44KjOnzaAafFf0Wxa8xcfEjx/qOl3rdijsKYBAtIGhtVtOlpPf/PFKfgTuFurSPn/3B/g=="
+    },
+    "@databases/websql-core": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@databases/websql-core/-/websql-core-4.0.0.tgz",
+      "integrity": "sha512-4PtvllVaQdTxY+vmM6CHEUVjlepAhMmKXsLbElrXjdpV3NKJfeuMMAQXqj+e+YOxBpxSxi4iOmJy1s07tMQkTQ==",
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@databases/escape-identifier": "^1.0.0",
+        "@databases/sql": "^3.0.0"
+      }
+    },
     "@egjs/hammerjs": {
       "version": "2.0.17",
       "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
         "lodash.template": "^4.5.0"
       }
     },
+    "@expo/websql": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@expo/websql/-/websql-1.0.1.tgz",
+      "integrity": "sha1-//DPnBuqH3D54dZYt8OaQg2bEKk=",
+      "requires": {
+        "argsarray": "^0.0.1",
+        "immediate": "^3.2.2",
+        "noop-fn": "^1.0.0",
+        "pouchdb-collections": "^1.0.1",
+        "tiny-queue": "^0.2.1"
+      }
+    },
     "@hapi/hoek": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.2.1.tgz",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.9.tgz",
       "integrity": "sha512-MKmdASMf3LtPzwLyRrFjtFFZ48cMf8jmX5VRYrDQiJa8Ybu5VAmkqBWqKU8fdCwD8ysw4mQ9nrEHvzg6gunR7A=="
     },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+      "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
+      "dev": true
+    },
+    "@types/react": {
+      "version": "17.0.35",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz",
+      "integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-native": {
+      "version": "0.64.19",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.64.19.tgz",
+      "integrity": "sha512-bT62QhaPvOKFGmlfURIC98ILjUDoIFrc2Bn5EzL3qciZrT91vHwkxFOkuEyQJy+DWaHCa2z3IrtIEJywkGu/Bg==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
+      "dev": true
+    },
     "@types/yargs": {
       "version": "15.0.14",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
         "sprintf-js": "~1.0.2"
       }
     },
+    "argsarray": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/argsarray/-/argsarray-0.0.1.tgz",
+      "integrity": "sha1-bnIHtOzbObCviDA/pa4ivajfYcs="
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
         "isobject": "^3.0.1"
       }
     },
+    "csstype": {
+      "version": "3.0.10",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==",
+      "dev": true
+    },
     "dayjs": {
       "version": "1.10.7",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.903",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.903.tgz",
-      "integrity": "sha512-+PnYAyniRRTkNq56cqYDLq9LyklZYk0hqoDy9GpcU11H5QjRmFZVDbxtgHUMK/YzdNTcn1XWP5gb+hFlSCr20g=="
+      "version": "1.3.904",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.904.tgz",
+      "integrity": "sha512-x5uZWXcVNYkTh4JubD7KSC1VMKz0vZwJUqVwY3ihsW0bst1BXDe494Uqbg3Y0fDGVjJqA8vEeGuvO5foyH2+qw=="
     },
     "emoji-regex": {
       "version": "8.0.0",
         "expo-modules-core": "~0.4.7"
       }
     },
+    "expo-sqlite": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/expo-sqlite/-/expo-sqlite-10.0.3.tgz",
+      "integrity": "sha512-uQEb98iW7POCul3rrpamc8qZNvhoPwfqa457loSSt2HHJXCU7cnc5Ll7Xxdi+Yy1X5GGxmVlgss+DBT6A/K06g==",
+      "requires": {
+        "@expo/websql": "^1.0.1",
+        "expo-modules-core": "~0.4.4",
+        "lodash": "^4.17.15"
+      }
+    },
     "expo-status-bar": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.1.0.tgz",
       "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
       "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
     },
+    "immediate": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.3.0.tgz",
+      "integrity": "sha512-HR7EVodfFUdQCTIeySw+WDRFJlPcLOJbXfwwZ7Oom6tjsvZ3bOkCDJHehQC3nxJrv7+f9XecwazynjU8e4Vw3Q=="
+    },
     "import-fresh": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
       "resolved": "https://registry.npmjs.org/node-stream-zip/-/node-stream-zip-1.15.0.tgz",
       "integrity": "sha512-LN4fydt9TqhZhThkZIVQnF9cwjU3qmUH9h78Mx/K7d3VvfRqqwthLwJEUOEL0QPZ0XQmNN7be5Ggit5+4dq3Bw=="
     },
+    "noop-fn": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/noop-fn/-/noop-fn-1.0.0.tgz",
+      "integrity": "sha1-XzPUfxPSFQ35PgywNmmemC94/78="
+    },
     "normalize-css-color": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/normalize-css-color/-/normalize-css-color-1.0.2.tgz",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
+    "pouchdb-collections": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz",
+      "integrity": "sha1-/mOhfal3YRq+98uAJssalVP9g1k="
+    },
     "pretty-format": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-26.6.2.tgz",
         "xtend": "~4.0.1"
       }
     },
+    "tiny-queue": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/tiny-queue/-/tiny-queue-0.2.1.tgz",
+      "integrity": "sha1-JaZ/LG4lOyypQZd7XvdELvl6YEY="
+    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.3.1.tgz",
       "integrity": "sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ=="
     },
+    "typescript": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
+      "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
+      "dev": true
+    },
     "ua-parser-js": {
       "version": "0.7.31",
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",

package.json

     "start": "react-native start"
   },
   "dependencies": {
+    "@databases/expo": "^5.0.0",
     "expo": "~43.0.2",
     "expo-splash-screen": "~0.13.5",
     "expo-status-bar": "~1.1.0",
-    "expo-updates": "~0.10.13",
+    "expo-updates": "~0.10.15",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-native": "0.64.3",
     "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"
+    "react-native-web": "0.17.1",
+    "expo-sqlite": "~10.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9"
+    "@babel/core": "^7.12.9",
+    "typescript": "~4.3.5",
+    "@types/react": "~17.0.21",
+    "@types/react-native": "~0.64.12"
   },
   "private": true
 }

tsconfig.json

+{
+  "compilerOptions": {},
+  "extends": "expo/tsconfig.base"
+}