select date

App.js

@@ -10,6 +10,8 @@ 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);
+  const [fetchDepenses, onFetchDepenses] = React.useState(true)
+
   if(dailyObjective != -1)
     sqlite_exec_parameterised("update objective set value = ?", [dailyObjective], (res) => {});
 
@@ -38,11 +40,11 @@ export default function App() {
             durationMode={durationMode} 
             dailyExpense={dailyObjective}
             onChangeObjective={onChangeObjective}/>
-          <DepensesList durationMode={durationMode} />
+          <DepensesList depensesFetched={() => onFetchDepenses(false)} fetchDepenses={fetchDepenses} durationMode={durationMode} />
           <StatusBar hidden />
       </View>
         {/* Overlay for expenses */}
-      <AddDepense/>
+      <AddDepense fetchDepenses={() => onFetchDepenses(true)}/>
     </View>
   );
 }

components/add_depense.js

@@ -1,11 +1,19 @@
 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 >
@@ -30,6 +38,31 @@ export default function AddDepense(props){
                         }}
                     />
                 </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={() => 
@@ -39,10 +72,12 @@ export default function AddDepense(props){
                             {
                                 sqlite_exec_parameterised(
                                     "INSERT INTO expense (value, description, date) values (?, ?, ?)",
-                                    [depenseValue, descriptionValue, Date.now()], (res) => {
+                                    [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => {
                                         onAddDepense(false);
                                     }
                                     );
+                                props.fetchDepenses();
+                                
                             }
                         }}>
                         <Text>Ajouter</Text>

components/depense_list_entry.js

@@ -7,6 +7,7 @@ export default function DepenseListEntry(props){
     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>
     )

components/depenses_list.js

@@ -3,15 +3,19 @@ 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([]);
+    const [depensesFetched, preventFetchDepenses] = React.useState(false)
+    let fetchDepenses = props.fetchDepenses || !depensesFetched
     useEffect( () => {
         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 order by date desc", (res) => {
-                onGetDepenses(res.rows._array);
-            });
+            if(fetchDepenses)
+                sqlite_exec_query("select * from expense order by date desc", (res) => {
+                    onGetDepenses(res.rows._array);
+                    preventFetchDepenses(true);
+                    props.depensesFetched();
+                });
         });
         
     });
@@ -24,11 +28,20 @@ function DepensesList(props)
         // get latest and oldest depense
         let latest_depense = depenses[0];
         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)
             content.push(
                 <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
             )

package-lock.json

@@ -1899,6 +1899,14 @@
         "ora": "^3.4.0"
       }
     },
+    "@react-native-community/datetimepicker": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
+      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
+      "requires": {
+        "invariant": "^2.2.4"
+      }
+    },
     "@react-native/assets": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",

package.json

@@ -21,7 +21,8 @@
     "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",
+    "@react-native-community/datetimepicker": "3.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",