Resolve "datenbank schmiert ab wenn schnell 20~ einträge eingetragen werden"

app/(tabs)/home/index.tsx

@@ -1,20 +1,21 @@
-import { useFocusEffect, useRouter } from "expo-router";
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { ExpenseItem, Plus, SearchBar, Welcome } from '../../../components';
-import { useThemeColor } from "../../../hooks/hooks";
-import { addCategory, addExpense, executeQuery } from "../../../services/database";
+import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
+import useFetch from '../../../hooks/useFetch';
+import { useThemeColor } from "../../../hooks/useThemeColor";
+import { addExpense } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 
 export default function Page() {
-    const backgroundColor = useThemeColor("backgroundColor")
-    const router = useRouter()
-    const {onLogout} = useAuth();
-    const [plusShow, setPlusShow] = useState(true);
-    const prevOffset = useRef(0);
+
+    //Styles
     const styles = StyleSheet.create({
+        safeAreaViewStyle: {
+            flex: 1, 
+            backgroundColor: useThemeColor("backgroundColor")
+        },
         container: {
             flex: 1,
             alignItems: "center",
@@ -24,9 +25,17 @@ export default function Page() {
             color: useThemeColor("primaryText"),
             fontSize: 70,
             fontWeight: "bold"
+        },
+        loading: {
+            color: "red",
         }
     });
 
+    const {onLogout} = useAuth();
+    const [plusShow, setPlusShow] = useState(true);
+    const prevOffset = useRef(0);
+    
+
     const profile = require("../../../assets/images/profile.jpg")
 
     const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
@@ -37,43 +46,29 @@ export default function Page() {
         setPlusShow(isScrollingUp || isTop)
     }
 
-    const [data, setData] = useState<{[column: string]: any;}[]>([]);
-
-    //only for demonstration during phase 1, delete later
-    useEffect(() => { 
-        addCategory("Test Category", "red", "budget");
-        update();
-    }, []);
-
-    useFocusEffect(() => {
-        update();
-    });
-
-    const update = () => {
-        executeQuery("SELECT e.guid AS expense_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color FROM expense e JOIN category c ON e.category_guid = c.guid;").then((result) => {
-            if(result === undefined) return;
-            setData(result);
-        }).catch((error) => {
-            throw error;
-        });
+    const newExpense = async (title: string, category_guid: string, date: string, amount: number) => {
+        try {
+            await addExpense(title, category_guid, date, amount);
+        } catch (error: any) {
+            console.error("Adding new expense has failed: ", error);
+        }
     }
 
+    const {data, isLoading, reFetch} = useFetch();
+
+
+
     return (
-        <SafeAreaView style={{flex: 1, backgroundColor: backgroundColor}}>
-           {plusShow && <Plus onPress={()=>{
+        <SafeAreaView style={styles.safeAreaViewStyle}>
+            {plusShow && <Plus onPress={()=>{
                 // router.push("/(tabs)/home/addItem");
-
-                executeQuery("SELECT guid FROM category").then((result) => {
-                    if(result === undefined) return;
-                    addExpense("Random Expense", result[0]["guid"], "12.08.2023", 1).then(() => {
-                        update();
-                    });
-                }).catch((error) => {
-                    throw error;
+                newExpense("Test Title", "3b33b8ac-5fc1-43e5-81fc-cf61628861f7", "69.69.1234", 100).then(() => {
+                    reFetch();
                 });
+            }}/>}
 
-           }}/>}
-
+            {isLoading && <LoadingSymbol></LoadingSymbol>}
+            
             <FlatList
             data={data}
             ListHeaderComponent={
@@ -89,7 +84,6 @@ export default function Page() {
             scrollEventThrottle={20}
             >
             </FlatList>            
-        </SafeAreaView>
-        
+        </SafeAreaView> 
     );
 }