BudgetIzr/components/list/week_list.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
import DepenseListEntry from '../depense_list_entry';
import { strLPad } from '../../utils/util';
import DayList from './day_list';

export default function WeekList(props)
{
    const [ showDays, onToggleDays] = React.useState(true);
    
    let days = []

    if(showDays)
        props.days.forEach(element => {
            days.push(
                <DayList
                    dailyObjective={props.dailyObjective}
                    fetchDepenses={props.fetchDepenses}
                    date={element.date}
                    depenses={element.expenses}
                    />
            )
        });
    return (
    <View style={week_list_styles.week_list_container}>
        <Pressable
            style={week_list_styles.week_header}
            onPress={() => {onToggleDays(!showDays)}}>
            <Text>{"Week " + props.number}</Text>
        </Pressable>
        {days}
    </View>
    );
}


const week_list_styles = StyleSheet.create({
    week_list_container: {
        borderWidth: 1,
        margin: 1,
    },
    week_header: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 5,
        marginBottom: 5,
    },
    day_list_day: {
        fontWeight: '900',
        margin: 4,
    }
});