Merge branch '59-implement-updating-a-category' into 'main'

Resolve "implement updating a category"

Closes #59

See merge request thschleicher/interaktive-systeme!48

app/(tabs)/budget/category.tsx

@@ -14,7 +14,7 @@ export default function Page() {
     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: "./(tabs)/budget/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
+        router.push({pathname: "/(tabs)/budget/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
     }
     
     const handleBackButton = () => {

app/(tabs)/budget/editCategory.tsx

@@ -2,6 +2,7 @@ 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 = () => {
@@ -48,7 +49,7 @@ const addCategory = () => {
                         router.back();
                     }}/>
                     <NavigationButton text="Save" onPress={() => {
-                        console.log("Implement Saving here!");
+                        updateCategory(category_guid.toString(), categoryName, categoryColor, selectedType, amount);
                         router.back();
                     }}/> 
                 </View>

app/(tabs)/budget/index.tsx

@@ -38,7 +38,7 @@ export default function Page() {
     };
 
     const handleCategoryPress = (item: {[column: string]: any;}) => {
-        router.push({pathname: "./(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
+        router.push({pathname: "/(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
     }
 
     return (

app/(tabs)/home/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useMemo } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 import { FlatList, RefreshControl } from 'react-native-gesture-handler';
@@ -6,9 +6,8 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 
-import { addExpense, executeQuery } from "../../../services/database";
-import { useAuth } from '../../contexts/AuthContext';
 import { useRouter } from "expo-router";
+import { addExpense } from "../../../services/database";
 import { SimpleDate } from '../../../util/SimpleDate';
 import { useTheme } from '../../contexts/ThemeContext';
 
@@ -22,7 +21,6 @@ type MarkedDates  = {
 }
 
 const constructMarkedDates = (data : {[column: string]: any}) => {
-    console.log("entered")
     let markedDates: MarkedDates = {};
     data.forEach((value: any) => {
         const dateKey: string = String(value["expense_datetime"]).split(" ")[0]

components/common/loadingSymbol.tsx

@@ -1,15 +1,15 @@
 import React, { useEffect, useRef } from "react";
-import { StyleSheet, View, Animated, Easing, ActivityIndicator } from "react-native";
+import { ActivityIndicator, Animated, Easing, StyleSheet, View } from "react-native";
+import { useTheme } from "../../app/contexts/ThemeContext";
 
 const LoadingSymbol = () => {
-  const color = ["blue", "red", "purple", "green", "yellow", "orange"];
-  const random = Math.floor(Math.random() * color.length);
+  const {colors} = useTheme();
 
   const spinValue = useRef(new Animated.Value(0)).current;
 
   const spin = spinValue.interpolate({
     inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"],
+    outputRange: [0, 360],
   });
 
   useEffect(() => {
@@ -25,7 +25,6 @@ const LoadingSymbol = () => {
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: color[random],
       width: "100%",
       height: "100%",
       position: "absolute",
@@ -35,13 +34,14 @@ const LoadingSymbol = () => {
     loader: {
       width: 100,
       height: 100,
-      transform: [{ rotate: spin }],
+      transform: [{ rotate: spin + "deg"}],
+      zIndex: 999,
     },
   });
 
   return (
     <View style={styles.container}>
-      <ActivityIndicator size="large" color="black" style={styles.loader} />
+      <ActivityIndicator size="large" color={colors.accentColor} style={styles.loader} />
     </View>
     );
 };

services/database.ts

@@ -24,6 +24,18 @@ export const initDatabase = async () => {
     }
 };
 
+export const updateCategory = async (guid: string, name: string, color: string, type: string, allocated_amount: number) => {
+
+    try {
+        await db.transactionAsync(async (tx) => {
+            await tx.executeSqlAsync("UPDATE category SET name = ?, color = ?, type = ?, allocated_amount = ? WHERE guid = ?", [name, color, type, allocated_amount, guid]);
+        });
+    } catch (error) {
+        console.log("Error updating category: ", error);
+        throw error;
+    }
+};
+
 export const addCategory = async (name: string, color: string, type: string, allocated_amount: number) => {
 
     //needs user input validation for type and color (should be validated by this function)