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';
import WeekList from './list/week_list';

var getDaysArray = function(s,e) {for(var a=[],d=new Date(s);d<=e.setHours(23,59,59);d.setDate(d.getDate()+1)){ a.push(new Date(d));}return a;};
var getWeek=function(i_date){
    var first_day = new Date(i_date.getFullYear(),0,1)
    return Math.ceil(((i_date-first_day+ (first_day.getDay()-1) * 86400000)/86400000)/7)}

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 )
        days.reverse();
        let data = [];
        let renderItem = null;
        switch(props.durationMode)
        {
            case "days":
                days.forEach( (day) => {
                    // get depenses that are on the current day
                    var depenses_day = depenses.filter( obj => {
                        var tpDate = new Date(obj.date);
                        return tpDate.getUTCFullYear() == day.getUTCFullYear() && tpDate.getUTCMonth() == day.getUTCMonth() && tpDate.getUTCDate() == day.getUTCDate()
                    } )

                    data.push(
                        {
                            date: day,
                            depenses: depenses_day,
                            dailyObjective: props.dailyObjective,
                            id: "day_"+day.toISOString()
                        })

                });
                
                renderItem = ({item}) =>(
                    <DayList 
                        dailyObjective={props.dailyObjective}
                        fetchDepenses={() => preventFetchDepenses(false)} 
                        date={item.date} 
                        depenses={item.depenses}/>
                );
                
                content = (
                    <FlatList
                        data={data}
                        renderItem={renderItem}
                        keyExtractor={item => item.id}/>
                    )
                break;
            case "weeks":
                    // dont forget the list of days is ordered latest to oldest
                    let week_number = getWeek(days[0]);
                    let week = {
                        id:week_number+"_"+days[0].getFullYear(),
                        days: [],
                        number: week_number,
                    }
                    data.push(week);
                    days.forEach( (day) => {
                        week_number = getWeek(day);
                        if( week_number+"_"+day.getFullYear() == week.id)
                            week.days.push(
                                {
                                    date:day,
                                    expenses: depenses.filter( obj => {
                                        var tpDate = new Date(obj.date);
                                        return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
                                    } ) 
                                });
                        else
                            {
                                week = {
                                    id:week_number+"_"+day.getFullYear(),
                                    days: [
                                        {
                                            date:day,
                                            expenses: depenses.filter( obj => {
                                                var tpDate = new Date(obj.date);
                                                return tpDate.getFullYear() == day.getFullYear() && tpDate.getMonth() == day.getMonth() && tpDate.getDate() == day.getDate()
                                            } ) 
                                        }
                                    ],
                                    number: week_number,
                                }
                                data.push(week);
                            }
                    });

                    renderItem = ({item}) =>(
                        <WeekList 
                            dailyObjective={props.dailyObjective}
                            days={item.days} 
                            number={item.number}
                            fetchDepenses={() => preventFetchDepenses(false)}
                            />
                    );

                    content = (
                        <FlatList
                            data={data}
                            renderItem={renderItem}
                            keyExtractor={item => item.id}/>
                        )
                break;
            default:
                content = <Text> This does not work yet :(</Text>
        }
        
    }else
        content = <Text> Start adding expenses ! </Text>


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

const depense_list_style = StyleSheet.create({

  });

export default DepensesList