debugging fetch on budget screen

components/budget/categoryItem.tsx

@@ -1,33 +1,30 @@
 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 { colors } = useTheme();
 
-    const textColor = useThemeColor("primaryText");
-    const backgroundColor = useThemeColor("backgroundColor");
+    const subText = `${calculateSumOfExpenses(properties.category_guid)} / ${properties.allocated_ammount} €`;
 
     return (
-        <CustomCard>
+        <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>
-
-
-            <View style={[styles.valueViewStyle]}>
-              <Text style={[styles.valueViewTextStyle, {color: textColor}]}>
-                10/100$
-                {/* {properties.allocated_account} */}
-              </Text>
+                <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
+                  {subText}
+                </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: {
-      alignSelf: "stretch",
-      flex: 1,
-      flexDirection: "row-reverse", 
-      alignItems: "center",
-      paddingHorizontal: 10,
-    },
-    valueViewTextStyle: {
-      fontSize: 20,
+    subTextStyle: {
+      fontSize: 17.5,
     }
-  })
+  })
+
+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;
+}