BudgetIzr/components/depenses_list.js

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, FlatList, SafeAreaView, ColorPropType  } from 'react-native';
import { ScrollView } from 'react-native-gesture-handler';
import { sqlite_exec_query } from '../db/query';
import DepenseListEntry from './depense_list_entry';
import DayList from './list/day_list';

var getDaysArray = function(s,e) {for(var a=[],d=new Date(s);d<=e;d.setDate(d.getDate()+1)){ a.push(new Date(d));}return a;};

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)=>{
            if(fetchDepenses)
                sqlite_exec_query("select * from expense order by date desc", (res) => {
                    onGetDepenses(res.rows._array);
                    preventFetchDepenses(true);
                    props.depensesFetched();
                });
        });
        
    });

    let content = []

    if(depenses.length > 0)
    {
        // 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);

        let days = getDaysArray(oldestDate, curDate ).reverse();
        let days_disp = {};
        days.forEach( (day) => {
            // get depenses that are on the current day
            var depenses_day = depenses.filter( obj => {return new Date(obj.date).getDate() == day.getDate()} )
            content.push(
            <DayList 
                dailyObjective={props.dailyObjective}
                fetchDepenses={() => preventFetchDepenses(false)}
                key={"day_list_"+day.toDateString()} 
                date={day} 
                depenses={depenses_day}/>)
        });
    }


    return(
    <View>
        <ScrollView>
            {content}
        </ScrollView>
    </View>
    )
}

const depense_list_style = StyleSheet.create({
    list_container: {
        flex: 1
    }
  });

export default DepensesList