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

2024-01-20 11:54:25 +01:00 · 2024-01-20 11:54:25 +01:00 · 1beee68bff
commit 1beee68bff
parent 457b098883
23 changed files with 137 additions and 80 deletions
--- a/app/(tabs)/(budget)/editCategory.tsx
+++ b/app/(tabs)/(budget)/editCategory.tsx
@ -0,0 +1,97 @@
+import { router, useLocalSearchParams } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
+import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
+import { updateCategory } from "../../../services/database";
+import { useTheme } from "../../contexts/ThemeContext";
+
+const addCategory = () => {
+    const {colors} = useTheme();
+    const {category_guid, category_amount, category_color, category_name, category_type} = useLocalSearchParams();
+
+    const [categoryName, setCategoryName] = useState(category_name.toString());
+    const [categoryColor, setCategoryColor] = useState(category_color.toString());
+    const [selectedType, setSelectedType] = useState(category_type.toString());
+    const [amount, setAmount] = useState(Number.parseFloat(category_amount.toString()));
+
+    return (
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: colors.backgroundColor}]}>
+            <Text style={[styles.headingTextStyle, {color: colors.primaryText}]}>Edit Category</Text>
+            
+            <View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
+                <View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
+                    <TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
+                        setCategoryName(newName);
+                    }}/>
+                </View>
+
+                <View style={styles.budgetInput}>
+                    <AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
+                        setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
+                    }}/>  
+                </View>
+
+                <TypeSelectorSwitch 
+                currentSelected={selectedType}
+                handleButtonPress={(type) => {
+                    setSelectedType(type);
+                }}
+                />
+
+                <View>
+                   <CustomColorPicker color={categoryColor} handleColorChange={(color) => {
+                        setCategoryColor(color);
+                    }}/> 
+                </View>
+
+                <View style={styles.navigationButtonViewStyle}>
+                    <NavigationButton text="Back" onPress={() => {
+                        router.back();
+                    }}/>
+                    <NavigationButton text="Save" onPress={() => {
+                        updateCategory(category_guid.toString(), categoryName, categoryColor, selectedType, amount);
+                        router.back();
+                    }}/> 
+                </View>
+            </View>
+        </SafeAreaView>
+    );
+}
+
+export default addCategory;
+
+const styles = StyleSheet.create({
+    containerStyle: {
+        flex: 1,
+        margin: 10,
+        borderRadius: 10,
+    },
+    safeAreaViewStyle: {
+        flex: 1,
+        flexDirection: "column" 
+    },
+    headingTextStyle: {
+        fontSize: 40,
+        fontWeight: "bold",
+        alignSelf: "center",
+        marginVertical: 10,
+    },
+    navigationButtonViewStyle: {
+        flexDirection: "row",
+        justifyContent: "center",
+        marginBottom: 10,
+    },
+    textInputViewStyle: {
+        borderRadius: 10,
+        paddingVertical: 10,
+        margin: 10,
+    },
+    textInputStyle: {
+        paddingHorizontal: 10,
+        fontSize: 25,
+    },
+    budgetInput: {
+        marginBottom: 10,
+        marginHorizontal: 10,
+    }
+});