rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

A few changes:

Browse source 
Auto fill amount category edit
Empty list component
calendar filtering
in category screen, expenses can be added directly
This commit is contained in:
Jakob Stornig 2024-01-25 19:18:15 +01:00
parent e0f3cf947c
commit 8149ec234f
10 changed files with 97 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

49
app/(tabs)/(budget)/index.tsx
View file

@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BudgetHeader, CategoryItem, LoadingSymbol, Plus, TextInputBar } from '../../../components';
import { BudgetHeader, CategoryItem, EmptyListCompenent, LoadingSymbol, Plus, TextInputBar } from '../../../components';
import useFetch from '../../../hooks/useFetch';
import { useTheme } from '../../contexts/ThemeContext';
import { useFocusEffect } from 'expo-router/src/useFocusEffect';
@ -13,41 +13,45 @@ export default function Page() {
const {colors} = useTheme()
const containerColor = colors.containerColor;
const navigation = useNavigation();
const [selectedPage, setSelectedPage] = useState("noPageLoaded");
const [selectedPage, setSelectedPage] = useState<"expense"|"saving">("expense");
const [searchString, setSearchString] = useState("");
useEffect(() => {
console.log("initial effect called")
AsyncStorage.getItem("currentBudgetPage").then((page) => {
if(page === "expenses" || page === "savings") {
setSelectedPage(page);
}
}).catch((error) => {
console.log("Error fetching previous page from Async Storage:", error);
})
}, []);
// useEffect(() => {
// console.log("initial effect called")
// AsyncStorage.getItem("currentBudgetPage").then((page) => {
// if(page === "expenses" || page === "savings") {
// setSelectedPage(page);
// }
// }).catch((error) => {
// console.log("Error fetching previous page from Async Storage:", error);
// })
// }, []);
const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});
useEffect(() => {
reFetch()
}, [selectedPage]);
useEffect(() => {
const unsubscribe = navigation.addListener("focus", () => {
reFetch();
})
return unsubscribe;
const t = () => {
console.log("unsubscribed")
unsubscribe();
}
return t;
}, [navigation])
const handlePageSelection = (page: string) => {
if(page !== selectedPage) {
setSelectedPage(page);
AsyncStorage.setItem("currentBudgetPage", page);
}
const handlePageSelection = (page: "expense" | "saving") => {
setSelectedPage(page);
};
const handleCategoryPress = (item: {[column: string]: any;}) => {
@ -56,10 +60,14 @@ export default function Page() {
const filteredData = useMemo(() => {
return data.filter((item) => {
if(item.category_type !== selectedPage) {
return false
}
return item.category_name.toLowerCase().includes(searchString.toLowerCase());
})
}, [data, searchString]);
}, [data, searchString, selectedPage]);
console.log(selectedPage)
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<View style={{flex: 1, marginHorizontal: 10}}>
@ -86,6 +94,7 @@ export default function Page() {
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}
ListEmptyComponent={EmptyListCompenent}
/>
)}
</View>