debugging fetch on budget screen

app/(tabs)/budget/index.tsx

@@ -26,12 +26,15 @@ export default function Page() {
     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(() => {
+        console.log("reFetch()");
         reFetch();
     }, [selectedPage]);
 
     const handlePageSelection = (page: string) => {
+        if(page !== selectedPage) {
             setSelectedPage(page);
             AsyncStorage.setItem("currentBudgetPage", page);
+        }
     };
 
     return (
@@ -40,14 +43,13 @@ export default function Page() {
             {isLoading ? (<LoadingSymbol/>) : (
                <FlatList 
                 data={data} 
-                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
+                renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_ammount={100} color={item.category_color} category_guid={item.category_guid}/>}
                 keyExtractor={item => item.category_guid}
                 ItemSeparatorComponent={() => {
                     return (<View style={styles.itemSeperatorStyle}/>);
                 }}
                 /> 
             )}
-            {/* <LoadingSymbol/> */}
         </SafeAreaView>
     );
 }

components/budget/categoryItem.tsx

@@ -1,32 +1,29 @@
 import { ColorValue, StyleSheet, Text, View } from "react-native";
-import { useThemeColor } from "../../hooks/useThemeColor";
+import { useTheme } from "../../app/contexts/ThemeContext";
 import CustomCard from "../common/CustomCard";
 
 export type CategoryItemProps = {
     category: string,
     color: ColorValue,
-    allocated_account: number, 
+    allocated_ammount: number,
+    category_guid: string, 
 }
 
 const CategoryItem = (properties: CategoryItemProps) => {
   
-    const textColor = useThemeColor("primaryText");
+    const { colors } = useTheme();
-    const backgroundColor = useThemeColor("backgroundColor");
+
+    const subText = `${calculateSumOfExpenses(properties.category_guid)} / ${properties.allocated_ammount} €`;
 
     return (
         <CustomCard> 
             <View style={[styles.colorTipStyle, {backgroundColor: properties.color}]}></View>
             <View style={[styles.textViewStyle]}>
-                <Text style={[styles.textViewTextStyle, {color: textColor}]}>
+                <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
                   {properties.category}
                 </Text>
-            </View>
+                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
-
+                  {subText}
-
-            <View style={[styles.valueViewStyle]}>
-              <Text style={[styles.valueViewTextStyle, {color: textColor}]}>
-                10/100$
-                {/* {properties.allocated_account} */}
                 </Text>
             </View>
         </CustomCard>
@@ -42,22 +39,27 @@ const styles = StyleSheet.create({
       borderBottomLeftRadius: 10,
     },
     textViewStyle: {
+      flex: 2,
+      flexDirection: "column",
       paddingVertical: 5,
-      paddingLeft: 10,
+      paddingHorizontal: 10,
       alignSelf: "stretch",
     },
-    textViewTextStyle: {
+    categoryNameStyle: {
       fontSize: 30,
       fontWeight: "bold",
     },
-    valueViewStyle: {
+    subTextStyle: {
-      alignSelf: "stretch",
+      fontSize: 17.5,
-      flex: 1,
-      flexDirection: "row-reverse", 
-      alignItems: "center",
-      paddingHorizontal: 10,
-    },
-    valueViewTextStyle: {
-      fontSize: 20,
     }
   })
+
+const calculateSumOfExpenses = (category_guid: string) => {
+  // const { data } = useFetch({sql: "SELECT amount FROM expense WHERE category_guid = ?", args: [category_guid]});
+
+  // let sum: number = 0;
+  // console.log(data);
+
+  console.log("render");
+  return 0;
+}

hooks/useFetch.ts

@@ -8,7 +8,6 @@ const useFetch = (query: Query) => {
     const [data, setData] = useState<{[column: string]: any;}[]>([]);
 
     const reFetch = () => {
-
         setIsLoading(true);
         executeQuery(query).then((result) => {
             if("rows" in result[0]) {
@@ -16,7 +15,7 @@ const useFetch = (query: Query) => {
             }
         }).catch((error: any) => {
             console.error("Fetching data from database has failed: ", error);
-        }).finally(() => {
+        }).then(() => {
             setIsLoading(false);
         });
     }