diff --git a/app/(tabs)/(budget)/addCategory.tsx b/app/(tabs)/(budget)/addCategory.tsx index bdc1a86..a6c53b6 100644 --- a/app/(tabs)/(budget)/addCategory.tsx +++ b/app/(tabs)/(budget)/addCategory.tsx @@ -51,8 +51,7 @@ export default function Page() { router.back(); }}/> { - addCategory(categoryName, categoryColor, selectedType, amount); - router.back(); + addCategory(categoryName, categoryColor, selectedType, amount).then(() => router.back()); }}/> diff --git a/app/(tabs)/(budget)/index.tsx b/app/(tabs)/(budget)/index.tsx index 22f61dd..0e42958 100644 --- a/app/(tabs)/(budget)/index.tsx +++ b/app/(tabs)/(budget)/index.tsx @@ -1,20 +1,19 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; -import { useIsFocused } from '@react-navigation/native'; import { router, useNavigation } from 'expo-router'; -import { useEffect, useState } from 'react'; +import React, { useEffect, 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 } from '../../../components'; import useFetch from '../../../hooks/useFetch'; import { useTheme } from '../../contexts/ThemeContext'; +import { useFocusEffect } from 'expo-router/src/useFocusEffect'; export default function Page() { const {colors} = useTheme() const containerColor = colors.containerColor; const navigation = useNavigation(); const [selectedPage, setSelectedPage] = useState("noPageLoaded"); - const isFocused = useIsFocused(); useEffect(() => { AsyncStorage.getItem("currentBudgetPage").then((page) => { @@ -24,14 +23,23 @@ export default function Page() { }).catch((error) => { console.log("Error fetching previous page from Async Storage:", error); }) - }, [isFocused]); + }, []); 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"] : []}); useEffect(() => { - reFetch(); + reFetch() }, [selectedPage]); + useEffect(() => { + const unsubscribe = navigation.addListener("focus", () => { + reFetch(); + }) + return unsubscribe; + + }, [navigation]) + + const handlePageSelection = (page: string) => { if(page !== selectedPage) { setSelectedPage(page); diff --git a/app/(tabs)/_layout.tsx b/app/(tabs)/_layout.tsx index 4c74a39..103e5ac 100644 --- a/app/(tabs)/_layout.tsx +++ b/app/(tabs)/_layout.tsx @@ -34,7 +34,7 @@ export default function Layout() { } return ( - + { const reFetch = () => { - console.log("refetch called") setIsLoading(true); executeQuery(query).then((result) => { if("rows" in result[0]) { @@ -36,7 +35,6 @@ const useFetch = (query: Query) => { if(result[0]["rows"].length == 0){ setIsEmptyResult(true); } - console.log("len", result[0]["rows"].length) } }).catch((error: any) => { console.error("Fetching data from database has failed: ", error);