diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx index c28f446..0230b1d 100644 --- a/app/(tabs)/budget/index.tsx +++ b/app/(tabs)/budget/index.tsx @@ -1,7 +1,8 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; import { useEffect, useState } from 'react'; -import { SafeAreaView, StyleSheet, View } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { FlatList } from 'react-native-gesture-handler'; +import { SafeAreaView } from 'react-native-safe-area-context'; import { BudgetHeader, LoadingSymbol } from '../../../components'; import CategoryItem from '../../../components/budget/categoryItem'; import useFetch from '../../../hooks/useFetch'; @@ -10,41 +11,43 @@ import { useThemeColor } from '../../../hooks/useThemeColor'; export default function Page() { const containerColor = useThemeColor("containerColor"); - const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []}); - - const [selectedPage, setSelectedPage] = useState("expenses"); + const [selectedPage, setSelectedPage] = useState("noPageLoaded"); useEffect(() => { - const loadSelectedPage = async () => { - try { - // const storedPage = - } catch(error) { - - } finally { - + AsyncStorage.getItem("currentBudgetPage").then((page) => { + if(page === "expenses" || page === "savings") { + setSelectedPage(page); } - } + }).catch((error) => { + console.log("Error fetching previous page from Async Storage:", error); + }) }, []); - AsyncStorage.setItem + const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category WHERE type = ?", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []}); + + useEffect(() => { + reFetch(); + }, [selectedPage]); const handlePageSelection = (page: string) => { setSelectedPage(page); + AsyncStorage.setItem("currentBudgetPage", page); }; return ( - {isLoading && } - - } - keyExtractor={item => item.category_guid} - ItemSeparatorComponent={() => { - return (); - }} - /> + {isLoading ? () : ( + } + keyExtractor={item => item.category_guid} + ItemSeparatorComponent={() => { + return (); + }} + /> + )} + {/* */} ); } diff --git a/app/(tabs)/stats/index.tsx b/app/(tabs)/stats/index.tsx index 6b0983b..5deefad 100644 --- a/app/(tabs)/stats/index.tsx +++ b/app/(tabs)/stats/index.tsx @@ -37,7 +37,7 @@ export default function Page() { }}>Init Database { - addCategory("Test", "blue", "budget").then(() => { + addCategory("Expense Category", "green", "expense").then(() => { const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []}; executeQuery(getCategoryQuery).then((result) => { if("rows" in result[0]) { @@ -46,6 +46,18 @@ export default function Page() { }) console.log("Category added with success!"); }) - }}>Add Category + }}>Add new Category Expense + + { + addCategory("Savings Category", "yellow", "saving").then(() => { + const getCategoryQuery: Query = {sql: "SELECT guid FROM category", args: []}; + executeQuery(getCategoryQuery).then((result) => { + if("rows" in result[0]) { + console.log(result[0]["rows"]); + } + }) + console.log("Category added with success!"); + }) + }}>Add new Category Savings ); } diff --git a/hooks/useFetch.ts b/hooks/useFetch.ts index cdb8ace..c878441 100644 --- a/hooks/useFetch.ts +++ b/hooks/useFetch.ts @@ -8,6 +8,7 @@ const useFetch = (query: Query) => { const [data, setData] = useState<{[column: string]: any;}[]>([]); const reFetch = () => { + setIsLoading(true); executeQuery(query).then((result) => { if("rows" in result[0]) {