Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context

app/(tabs)/(budget)/category.tsx

@@ -0,0 +1,131 @@
+import { FontAwesome } from "@expo/vector-icons";
+import { useRouter, useLocalSearchParams } from "expo-router";
+import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
+
+import useFetch from "../../../hooks/useFetch";
+import { useTheme } from "../../contexts/ThemeContext";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigation } from "expo-router/src/useNavigation";
+import { useEffect } from "react";
+
+export default function Page() {
+    const router = useRouter();
+    const navigation = useNavigation();
+    const {colors} = useTheme();
+    const {category_guid} = useLocalSearchParams();
+
+    const {category_amount, category_color, category_name, category_type} = fetchCategoryInformation(category_guid.toString());
+
+    const {data, isLoading, reFetch} = useFetch({sql: "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 WHERE c.guid = ? ORDER BY expense_datetime desc;", args: [category_guid]});
+
+    const handleEditCategory = () => {
+        router.push({pathname: "/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
+    }
+    
+    const handleBackButton = () => {
+        router.back();
+    }
+
+    useEffect(() => {
+        console.log("useEffect called")
+        const unsubscribe = navigation.addListener("focus", () => {
+            reFetch();
+        })
+        return unsubscribe;
+    }, [navigation])
+
+    return (
+        <SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
+            <TouchableOpacity style={styles.backContainer} onPress={handleBackButton}>
+                <FontAwesome style={styles.iconBack} name="arrow-left" size={35} color={colors.primaryText}/>
+                <Text style={[styles.backText, {color: colors.secondaryText}]}>Back</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={[styles.categoryEditTouchableOpacity, {backgroundColor: colors.elementDefaultColor}]}
+            onPress={handleEditCategory}>
+                <Text style={[styles.editButtonText, {color: colors.primaryText}]}>{category_name}</Text>
+                <FontAwesome style={styles.iconEdit} name="edit" size={35} color={colors.primaryText}/>
+            </TouchableOpacity>
+
+            <TextInputBar style={styles.searchBar} placeholder="Search..."/>
+
+            {isLoading ? (<LoadingSymbol/>) : (
+                <FlatList style={{marginHorizontal: 10}}
+                    data={data} 
+                    renderItem = {({item}) => <ExpenseItem
+                        color={item.category_color} 
+                        category={item.category_name} 
+                        title={item.expense_name} 
+                        date={item.expense_datetime} 
+                        value={item.expense_amount}
+                        onPress={()=>router.push(`/expense/${item.expense_guid}`)}
+                    />}
+                    keyExtractor={item => item.expense_guid}
+                    ItemSeparatorComponent={() => {
+                        return (<View style={styles.itemSeperator}/>);
+                    }}
+                />
+            )}
+        </SafeAreaView>
+    );
+}
+
+const fetchCategoryInformation = (guid: string) => {
+
+    const {data} = useFetch({sql: "SELECT * FROM category WHERE guid = ?", args: [guid]});
+
+    let category_name = "";
+    let category_color = "";
+    let category_amount = 0;
+    let category_type = "";
+
+    if (data && data[0]) {
+        if ("name" in data[0]) category_name = data[0].name as string;
+        if ("color" in data[0]) category_color = data[0].color as string;
+        if ("allocated_amount" in data[0]) category_amount = data[0].allocated_amount as number;
+        if ("type" in data[0]) category_type = data[0].type as string;
+    }
+    
+    return {category_name, category_color, category_amount, category_type};
+}
+
+const styles = StyleSheet.create({
+    safeAreaView: {
+        flex: 1,
+    },
+    itemSeperator: {
+        margin: 5,
+    },
+    categoryEditTouchableOpacity: {
+        borderRadius: 10,
+        flexDirection: "row",
+        justifyContent: "space-around",
+        margin: 10,
+    },
+    editButtonText: {
+        fontSize: 30,
+        padding: 10,
+        fontWeight: "bold",
+    },
+    iconEdit: {
+        paddingVertical: 10,
+        paddingRight: 10,
+    },
+    searchBar: {
+        marginHorizontal: 10,
+        marginBottom:20,
+    },
+    iconBack: {
+        paddingLeft: 10,
+        paddingRight: 5,
+    },
+    backText: {
+        fontSize: 20,
+        padding: 5,
+    },
+    backContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+    }
+});