Browse Source

select date

master
DemiBSel 2 years ago
parent
commit
b1fccab408
6 changed files with 69 additions and 9 deletions
  1. 4
    2
      App.js
  2. 36
    1
      components/add_depense.js
  3. 1
    0
      components/depense_list_entry.js
  4. 18
    5
      components/depenses_list.js
  5. 8
    0
      package-lock.json
  6. 2
    1
      package.json

+ 4
- 2
App.js View File

@@ -10,6 +10,8 @@ import {sqlite_exec_parameterised, sqlite_exec_query} from './db/query';
10 10
 export default function App() {
11 11
   const [durationMode, onChangeDuration] = React.useState("days");
12 12
   const [dailyObjective, onChangeObjective] = React.useState(-1);
13
+  const [fetchDepenses, onFetchDepenses] = React.useState(true)
14
+
13 15
   if(dailyObjective != -1)
14 16
     sqlite_exec_parameterised("update objective set value = ?", [dailyObjective], (res) => {});
15 17
 
@@ -38,11 +40,11 @@ export default function App() {
38 40
             durationMode={durationMode} 
39 41
             dailyExpense={dailyObjective}
40 42
             onChangeObjective={onChangeObjective}/>
41
-          <DepensesList durationMode={durationMode} />
43
+          <DepensesList depensesFetched={() => onFetchDepenses(false)} fetchDepenses={fetchDepenses} durationMode={durationMode} />
42 44
           <StatusBar hidden />
43 45
       </View>
44 46
         {/* Overlay for expenses */}
45
-      <AddDepense/>
47
+      <AddDepense fetchDepenses={() => onFetchDepenses(true)}/>
46 48
     </View>
47 49
   );
48 50
 }

+ 36
- 1
components/add_depense.js View File

@@ -1,11 +1,19 @@
1 1
 import React from 'react';
2 2
 import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
3 3
 import { sqlite_exec_parameterised } from '../db/query';
4
+import DateTimePicker from '@react-native-community/datetimepicker';
5
+
4 6
 
5 7
 export default function AddDepense(props){
6 8
     const [addingDepense, onAddDepense] = React.useState(false);
7 9
     const [depenseValue, onValueEdit] = React.useState(null);
8 10
     const [descriptionValue, onDescriptionEdit] = React.useState(null);
11
+    const [depenseDate, onDateChange] = React.useState(new Date())
12
+    const [timePickerDisplay, onDatePicker] = React.useState(false)
13
+
14
+    const toggleDateInput = () => {
15
+        onDatePicker(true);
16
+    }
9 17
 
10 18
     return (<View style={ add_depenses_styles.overlay }>
11 19
     <View >
@@ -30,6 +38,31 @@ export default function AddDepense(props){
30 38
                         }}
31 39
                     />
32 40
                 </View>
41
+                <View style={ add_depenses_styles.form_entry }>
42
+                    <Text> 📅</Text>
43
+                    <TextInput 
44
+                    onPressIn={ () => toggleDateInput()}
45
+                    value={ depenseDate.toDateString() } style={ add_depenses_styles.input }
46
+                        onChangeText={ (value) => {
47
+                            onDescriptionEdit(value);
48
+                        }}
49
+                    />
50
+                    {/* https://github.com/react-native-datetimepicker/datetimepicker */}
51
+                    { timePickerDisplay && <DateTimePicker
52
+                        testID="dateTimePicker"
53
+                        value={depenseDate}
54
+                        mode={"date"}
55
+                        is24Hour={true}
56
+                        display="default"
57
+                        onChange={(event, value) => {
58
+                            console.log(value);
59
+                            console.log(value.valueOf());
60
+                            onDatePicker(false);
61
+                            onDateChange(new Date(value));
62
+                        }}
63
+                        />
64
+                    }
65
+                </View>
33 66
                 <Pressable 
34 67
                     style={add_depenses_styles.button_add} 
35 68
                     onPress={() => 
@@ -39,10 +72,12 @@ export default function AddDepense(props){
39 72
                             {
40 73
                                 sqlite_exec_parameterised(
41 74
                                     "INSERT INTO expense (value, description, date) values (?, ?, ?)",
42
-                                    [depenseValue, descriptionValue, Date.now()], (res) => {
75
+                                    [depenseValue, descriptionValue, depenseDate.valueOf()], (res) => {
43 76
                                         onAddDepense(false);
44 77
                                     }
45 78
                                     );
79
+                                props.fetchDepenses();
80
+                                
46 81
                             }
47 82
                         }}>
48 83
                         <Text>Ajouter</Text>

+ 1
- 0
components/depense_list_entry.js View File

@@ -7,6 +7,7 @@ export default function DepenseListEntry(props){
7 7
     return(
8 8
         <View style={depense_list_entry_style.depense_list_entry}>
9 9
                 <Text >{props.depense.description}</Text>
10
+                <Text >{new Date(props.depense.date).toDateString()}</Text>
10 11
                 <Text >{props.depense.value}</Text>
11 12
             </View>
12 13
     )

+ 18
- 5
components/depenses_list.js View File

@@ -3,15 +3,19 @@ import { StyleSheet, Text, View, TextInput } from 'react-native';
3 3
 import { sqlite_exec_query } from '../db/query';
4 4
 import DepenseListEntry from './depense_list_entry';
5 5
 
6
-
7 6
 function DepensesList(props)
8 7
 {
9 8
     const [depenses, onGetDepenses] = React.useState([]);
9
+    const [depensesFetched, preventFetchDepenses] = React.useState(false)
10
+    let fetchDepenses = props.fetchDepenses || !depensesFetched
10 11
     useEffect( () => {
11 12
         sqlite_exec_query(`create table if not exists expense (id integer primary key not null, value real, description text, date integer);`,(res)=>{
12
-            sqlite_exec_query("select * from expense order by date desc", (res) => {
13
-                onGetDepenses(res.rows._array);
14
-            });
13
+            if(fetchDepenses)
14
+                sqlite_exec_query("select * from expense order by date desc", (res) => {
15
+                    onGetDepenses(res.rows._array);
16
+                    preventFetchDepenses(true);
17
+                    props.depensesFetched();
18
+                });
15 19
         });
16 20
         
17 21
     });
@@ -24,11 +28,20 @@ function DepensesList(props)
24 28
         // get latest and oldest depense
25 29
         let latest_depense = depenses[0];
26 30
         let oldest_depense = depenses[depenses.length - 1]
27
-        
31
+        let curDate = new Date(latest_depense.date);
32
+        let oldestDate = new Date(oldest_depense.date);
33
+        console.log(curDate);
34
+        console.log(oldestDate);
35
+        // while(curDate > oldestDate)
36
+        // {
37
+        //     console.log(curDate);
38
+        //     curDate.setDate( curDate.getDate() - 1);
39
+        // }
28 40
 
29 41
     }
30 42
         depenses
31 43
             .forEach( function(depense){
44
+            console.log(depense.date)
32 45
             content.push(
33 46
                 <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
34 47
             )

+ 8
- 0
package-lock.json View File

@@ -1899,6 +1899,14 @@
1899 1899
         "ora": "^3.4.0"
1900 1900
       }
1901 1901
     },
1902
+    "@react-native-community/datetimepicker": {
1903
+      "version": "3.5.2",
1904
+      "resolved": "https://registry.npmjs.org/@react-native-community/datetimepicker/-/datetimepicker-3.5.2.tgz",
1905
+      "integrity": "sha512-TWRuAtr/DnrEcRewqvXMLea2oB+YF+SbtuYLHguALLxNJQLl/RFB7aTNZeF+OoH75zKFqtXECXV1/uxQUpA+sg==",
1906
+      "requires": {
1907
+        "invariant": "^2.2.4"
1908
+      }
1909
+    },
1902 1910
     "@react-native/assets": {
1903 1911
       "version": "1.0.0",
1904 1912
       "resolved": "https://registry.npmjs.org/@react-native/assets/-/assets-1.0.0.tgz",

+ 2
- 1
package.json View File

@@ -21,7 +21,8 @@
21 21
     "react-native-safe-area-context": "3.3.2",
22 22
     "react-native-screens": "~3.8.0",
23 23
     "react-native-sqlite-storage": "^6.0.1",
24
-    "react-native-web": "0.17.1"
24
+    "react-native-web": "0.17.1",
25
+    "@react-native-community/datetimepicker": "3.5.2"
25 26
   },
26 27
   "devDependencies": {
27 28
     "@babel/core": "^7.12.9",

Loading…
Cancel
Save