made hook to streamline getting totals and expense by type of category

app/(tabs)/stats/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import BudgetTotal from '../../../components/stats/BudgetTotal';
+import { useTheme } from '../../contexts/ThemeContext';
+import Widget from '../../../components/stats/Widget';
+import DebugMenu from '../../../services/DebugMenu';
+import SavingsOverview from '../../../components/stats/SavingsOverview';
+import FinancialAdvice from '../../../components/stats/FinancialAdvice';
+import BudgetOverview from '../../../components/stats/BudgetOverview';
+
+export default function Page() {
+    const { colors } = useTheme();
+
+    // Mock data #TODO Database einbinden
+    // what to do when amount too small?
+
+    const spent = 120.75;
+    const budget = 696.96;
+
+  
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            backgroundColor: colors.backgroundColor,
+            marginTop: 50,
+            alignItems: 'center',
+        },
+    });
+
+    return (
+        <View style={styles.container}>
+            <ScrollView>
+                <DebugMenu />
+                <Widget title='"Financial" Tips' backgroundColor='orange'>
+                    <FinancialAdvice/>
+                </Widget>
+                <Widget title="Budget Overview" />
+                <Widget>
+                    <BudgetTotal/>
+                </Widget>
+                <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
+                <Widget>
+                    <BudgetOverview/>
+                </Widget>
+                <Widget>
+                    <SavingsOverview/>
+                </Widget>
+            </ScrollView>
+        </View>
+    );
+}

components/stats/BudgetOverview.tsx

@@ -1,37 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { Text, StyleSheet } from 'react-native';
 import { useTheme } from '../../app/contexts/ThemeContext';
 import useFetch from '../../hooks/useFetch';
 import { CategoryType } from '../../services/database';
+import {useCategoryData} from '../../hooks/useCategoryData';
 
-const BudgetOverview = () => {
-    const { colors } = useTheme();
-    const [spent, setSpent] = useState(0);
-    const [budget, setBudget] = useState(0);
-
-    const spentQuery = {
-        sql: `SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = '${CategoryType.EXPENSE.toString()}'`,
-        args: []
-    };    
-
-    const budgetQuery = {
-        sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.EXPENSE.toString()}'`,
-        args: []
-    };
-
-    const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
-    const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
-
-    useEffect(() => {
-        if (spentData) {
-            setSpent(spentData[0]?.total || 0);
-        }
-        if (budgetData) {
-            setBudget(budgetData[0]?.total || 0);
-        }
-    }, [spentData, budgetData]);
-
-    const styles = StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         margin: 10,
         borderRadius: 5,
@@ -40,24 +14,43 @@ const BudgetOverview = () => {
     },
     text: {
         fontSize: 26,
-            color: colors.primaryText
+        color: `black`
     },
     boldText: {
         fontWeight: 'bold'
-        }
-    });
+    },
+    negativeText: {
+        color: 'red',
+    },
+    positiveText: {
+        color: 'green',
+    },
+});
 
-    if (spentLoading || budgetLoading) {
+interface BudgetTotalProps {
+    goodColor?: string;
+    badColor?: string;
+}
+
+const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
+    const { colors } = useTheme();
+    const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);
+
+    const { total, expenseTotal } = data;
+
+    const remaining = total - expenseTotal;
+
+    if (isLoading) {
         return <Text>Loading...</Text>;
     }
 
     return (
-        <View style={styles.container}>
-            <Text style={styles.text}>
-                You have spent <Text style={styles.boldText}>{spent.toFixed(2)}€</Text> out of your budget of <Text style={styles.boldText}>{budget.toFixed(2)}€</Text>.
+        <Text style={[styles.text, { color: colors.primaryText }]}>
+            <>
+                You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
+            </>
         </Text>
-        </View>
     );
 };
 
-export default BudgetOverview;
+export default BudgetTotal;

components/stats/BudgetRemaining.tsx

@@ -1,82 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Text, StyleSheet } from 'react-native';
-import { useTheme } from '../../app/contexts/ThemeContext';
-import useFetch from '../../hooks/useFetch';
-import { CategoryType } from '../../services/database';
-
-const styles = StyleSheet.create({
-    container: {
-        margin: 10,
-        borderRadius: 5,
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    text: {
-        fontSize: 26,
-    },
-    boldText: {
-        fontWeight: 'bold'
-    },
-    negativeText: {
-        color: 'red',
-    },
-    positiveText: {
-        color: 'green',
-    },
-});
-
-
-interface BudgetRemainingProps {
-    goodColor?: string;
-    badColor?: string;
-}
-
-const BudgetRemaining: React.FC<BudgetRemainingProps> = ({ goodColor = 'green', badColor = 'red' }) => {
-    const { colors } = useTheme();
-    const [spent, setSpent] = useState(0);
-    const [budget, setBudget] = useState(0);
-
-    const spentQuery = {
-        sql: "SELECT SUM(amount) as total FROM expense",
-        args: []
-    };
-
-    const budgetQuery = {
-        sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.EXPENSE.toString()}'`,
-        args: []
-    };
-
-    const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
-    const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);
-
-    useEffect(() => {
-        if (spentData) {
-            setSpent(spentData[0]?.total || 0);
-        }
-        if (budgetData) {
-            setBudget(budgetData[0]?.total || 0);
-        }
-    }, [spentData, budgetData]);
-
-    const remaining = budget - spent;
-
-    if (spentLoading || budgetLoading) {
-        return <Text>Loading...</Text>;
-    }
-
-    return (
-        <Text style={[styles.text, { color: colors.primaryText }]}>
-            {remaining >= 0 ? (
-                <>
-                    Your remaining Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}</Text>€.
-                </>
-            ) : (
-                <>
-                    Your Budget is overspent by by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}</Text>€.
-                </>
-            )}
-        </Text>
-    );    
-};
-
-export default BudgetRemaining;

components/stats/BudgetTotal.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+import { Text, StyleSheet } from 'react-native';
+import { useTheme } from '../../app/contexts/ThemeContext';
+import useFetch from '../../hooks/useFetch';
+import { CategoryType } from '../../services/database';
+import {useCategoryData} from '../../hooks/useCategoryData';
+
+const styles = StyleSheet.create({
+    container: {
+        margin: 10,
+        borderRadius: 5,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    text: {
+        fontSize: 26,
+        color: `black`
+    },
+    boldText: {
+        fontWeight: 'bold'
+    },
+    negativeText: {
+        color: 'red',
+    },
+    positiveText: {
+        color: 'green',
+    },
+});
+
+interface BudgetTotalProps {
+    goodColor?: string;
+    badColor?: string;
+}
+
+const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
+    const { colors } = useTheme();
+    const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);
+
+    const { total, expenseTotal } = data;
+
+    const remaining = total - expenseTotal;
+
+    if (isLoading) {
+        return <Text>Loading...</Text>;
+    }
+
+    return (
+        <Text style={[styles.text, { color: colors.primaryText }]}>
+            {remaining >= 0 ? (
+                <>
+                    Your remaining overall Budget is <Text style={[styles.boldText, { color: goodColor }]}>{remaining.toFixed(2)}€</Text>.
+                </>
+            ) : (
+                <>
+                    Your Budget is overspent by <Text style={[styles.boldText, { color: badColor }]}>-{Math.abs(remaining).toFixed(2)}€</Text>.
+                </>
+            )}
+        </Text>
+    );
+};
+
+export default BudgetTotal;

components/stats/SavingsOverview.tsx

@@ -1,37 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { Text, StyleSheet } from 'react-native';
 import { useTheme } from '../../app/contexts/ThemeContext';
 import useFetch from '../../hooks/useFetch';
 import { CategoryType } from '../../services/database';
+import {useCategoryData} from '../../hooks/useCategoryData';
 
-const SavingsOverview = () => {
-    const { colors } = useTheme();
-    const [saved, setSaved] = useState(0);
-    const [goal, setGoal] = useState(0);
-
-    const savedQuery = {
-        sql: `SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = '${CategoryType.SAVING.toString()}'`,
-        args: []
-    };  
-
-    const goalQuery = {
-        sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.SAVING.toString()}'`,
-        args: []
-    };
-
-    const { data: savedData, isLoading: savedLoading } = useFetch(savedQuery);
-    const { data: goalData, isLoading: goalLoading } = useFetch(goalQuery);
-
-    useEffect(() => {
-        if (savedData) {
-            setSaved(savedData[0]?.total || 0);
-        }
-        if (goalData) {
-            setGoal(goalData[0]?.total || 0);
-        }
-    }, [savedData, goalData]);
-
-    const styles = StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         margin: 10,
         borderRadius: 5,
@@ -40,24 +14,49 @@ const SavingsOverview = () => {
     },
     text: {
         fontSize: 26,
-            color: colors.primaryText
+        color: `black`
     },
     boldText: {
         fontWeight: 'bold'
-        }
-    });
+    },
+    negativeText: {
+        color: 'red',
+    },
+    positiveText: {
+        color: 'green',
+    },
+});
 
-    if (savedLoading || goalLoading) {
+interface BudgetTotalProps {
+    goodColor?: string;
+    badColor?: string;
+}
+
+const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
+    const { colors } = useTheme();
+    const { data, isLoading } = useCategoryData(CategoryType.SAVING);
+
+    const { total, expenseTotal } = data;
+
+    const remaining = total - expenseTotal;
+
+    if (isLoading) {
         return <Text>Loading...</Text>;
     }
 
     return (
-        <View style={styles.container}>
-            <Text style={styles.text}>
-                You have saved <Text style={styles.boldText}>{saved.toFixed(2)}€</Text> out of your goal of <Text style={styles.boldText}>{goal.toFixed(2)}€</Text>.
+        <Text style={[styles.text, { color: colors.primaryText }]}>
+            {remaining >= 0 ? (
+                <>
+                    You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
+                </>
+            ) : (
+                <>
+                    You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>.
+                </>
+            )}
         </Text>
-        </View>
     );
 };
 
-export default SavingsOverview;
+export default BudgetTotal;

hooks/useCategoryData.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+import useFetch from './useFetch';
+import { CategoryType } from '../services/database';
+
+export const useCategoryData = (CategoryType: string) => {
+    const [data, setData] = useState({ total: 0, expenseTotal: 0 });
+    const [isLoading, setLoading] = useState(true);
+
+    const categoryQuery = {
+        sql: `SELECT SUM(allocated_amount) as total FROM category WHERE type = '${CategoryType.toString()}'`,
+        args: []
+    };
+
+    const expenseQuery = {
+        sql: `SELECT SUM(e.amount) as total FROM expense e JOIN category c ON e.category_guid = c.guid WHERE c.type = '${CategoryType.toString()}'`,
+        args: []
+    };
+
+    const { data: categoryData, isLoading: categoryLoading } = useFetch(categoryQuery);
+    const { data: expenseData, isLoading: expenseLoading } = useFetch(expenseQuery);
+
+    useEffect(() => {
+        if (categoryData && expenseData) {
+            setData({ 
+                total: categoryData[0]?.total || 0,
+                expenseTotal: expenseData[0]?.total || 0
+            });
+        }
+        setLoading(categoryLoading || expenseLoading);
+    }, [categoryData, categoryLoading, expenseData, expenseLoading]);
+
+    return { categoryData, expenseData, isLoading, data };
+};