cosmetics

components/add_depense.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
+import { StyleSheet, Text, View, TextInput, Button, Pressable } from 'react-native';
 import { sqlite_exec_parameterised } from '../db/query';
 
 export default function AddDepense(props){
@@ -30,7 +30,8 @@ export default function AddDepense(props){
                         }}
                     />
                 </View>
-                <Button 
+                <Pressable 
+                    style={add_depenses_styles.button_add} 
                     onPress={() => 
                         {
                             console.log(depenseValue);
@@ -43,16 +44,20 @@ export default function AddDepense(props){
                                     }
                                     );
                             }
-                        }}
-                    title="Ajouter"/>
+                        }}>
+                        <Text>Ajouter</Text>
+                    </Pressable>
             </View>
          : <View/>}
     </View>
     <View style={ add_depenses_styles.button_add_parent }>
-        <Button 
+        <Pressable
             style={add_depenses_styles.button_add} 
-            title={!addingDepense ? "+" : "-"}
-            onPress={() => onAddDepense(!addingDepense)}></Button>
+            onPress={() => onAddDepense(!addingDepense)}> 
+            
+            <Text>{!addingDepense ? "+" : "-"}</Text>
+        
+        </Pressable>
     </View>
     </View>
     );
@@ -67,12 +72,15 @@ const add_depenses_styles = StyleSheet.create({
 
     },
     form_area: {
-        backgroundColor: '#f2c596',
+        backgroundColor: '#f2f2f2',
         zIndex: 10,
         elevation: 10,
+        margin: 5,
+        marginTop: '50%',
         display: 'flex',
-        flexDirection: 'column'
-
+        flexDirection: 'column',
+        justifyContent: "space-between",
+        borderWidth: 1,
     },
     form_entry :{
         display: 'flex',
@@ -80,10 +88,12 @@ const add_depenses_styles = StyleSheet.create({
     },
     input :{
         width: "50%",
-        borderWidth: 1
+        borderWidth: 1,
+        textAlign: 'center',
     },
     button_add: {
-        
+        borderWidth: 1,
+        padding: 10,
     },
     button_add_parent: {
         position: 'absolute',

components/depenses_list.js

@@ -9,22 +9,31 @@ function DepensesList(props)
     const [depenses, onGetDepenses] = React.useState([]);
     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", (res) => {
+            sqlite_exec_query("select * from expense order by date desc", (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(
-            <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
-            
-        )
-    });
+
+    if(depenses.length > 0)
+    {
+        // get latest and oldest depense
+        let latest_depense = depenses[0];
+        let oldest_depense = depenses[depenses.length - 1]
+        
+
+    }
+        depenses
+            .forEach( function(depense){
+            content.push(
+                <DepenseListEntry key={"depense_list_depense"+depense.id} depense={depense}/>
+            )
+        });
+    
 
     return(
     <View>