Merge branch 'fix-loading-symbol' into 'main'

Fix loading symbol

See merge request thschleicher/interaktive-systeme!49

app/(tabs)/budget/addCategory.tsx

@@ -1,6 +1,7 @@
 import { router, useLocalSearchParams } from "expo-router";
 import { useState } from "react";
-import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
+import { StyleSheet, Text, TextInput, View } from "react-native";
+import { SafeAreaView } from 'react-native-safe-area-context';
 import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
 import { addCategory } from "../../../services/database";
 import { useTheme } from "../../contexts/ThemeContext";
@@ -10,7 +11,7 @@ export default function Page() {
 
     const parameters = useLocalSearchParams();
 
-    const [categoryName, setCategoryName] = useState<string>("Enter Category Name...");
+    const [categoryName, setCategoryName] = useState<string>("");
     const [categoryColor, setCategoryColor] = useState<string>('#' + Math.floor(Math.random()*16777215).toString(16));
     const [selectedType, setSelectedType] = useState<string>("expense");
     const [amount, setAmount] = useState(0);
@@ -21,7 +22,7 @@ export default function Page() {
             
             <View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
                 <View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
-                    <TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
+                    <TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
                         setCategoryName(newName);
                     }}/>
                 </View>

app/(tabs)/budget/category.tsx

@@ -1,11 +1,14 @@
 import { FontAwesome } from "@expo/vector-icons";
-import { router, useLocalSearchParams } from "expo-router";
+import { useRouter, useLocalSearchParams } from "expo-router";
-import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+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";
 
 export default function Page() {
+    const router = useRouter();
     const {colors} = useTheme();
     const {category_guid} = useLocalSearchParams();
 
@@ -14,7 +17,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: "/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 = () => {
@@ -45,6 +48,7 @@ export default function Page() {
                         title={item.expense_name} 
                         date={item.expense_datetime} 
                         value={item.expense_amount}
+                        onPress={()=>router.push(`/home/expense/${item.guid}`)}
                     />}
                     keyExtractor={item => item.guid}
                     ItemSeparatorComponent={() => {

app/(tabs)/budget/editCategory.tsx

@@ -20,7 +20,7 @@ const addCategory = () => {
             
             <View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
                 <View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
-                    <TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
+                    <TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
                         setCategoryName(newName);
                     }}/>
                 </View>

app/(tabs)/budget/index.tsx

@@ -24,7 +24,7 @@ export default function Page() {
         })
     }, []);
 
-    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM expense e RIGHT JOIN category c ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
+    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
 
     useEffect(() => {
         reFetch();

app/(tabs)/home/expense/[expense].tsx

@@ -1,6 +1,6 @@
 import { View, Text, Alert, StyleSheet } from 'react-native'
 import React, { useEffect, useState } from 'react'
-import { router, useLocalSearchParams } from 'expo-router'
+import { router, useLocalSearchParams, useRouter } from 'expo-router'
 import useFetch from '../../../../hooks/useFetch';
 import { Category, Expense } from '../../../../types/dbItems';
 import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../../../components';
@@ -12,6 +12,7 @@ import { SIZES } from '../../../../constants/theme';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 export default function Page() {
+  const router = useRouter();
   const {colors} = useTheme();
   const {expense} = useLocalSearchParams();
   const {data, isEmptyResult} = useFetch({sql: "SELECT e.guid as e_guid, e.name as e_name, e.datetime as e_datetime, e.amount as e_amount, c.guid as c_guid, c.name as c_name, c.color as c_color FROM expense e INNER JOIN category c on e.category_guid = c.guid WHERE e.guid = ?", args: [expense]});
@@ -24,6 +25,8 @@ export default function Page() {
   const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 
+
+  console.log(router.canGoBack())
   useEffect(()=>{
     const entry = data[0];
     console.log(entry)

app/(tabs)/home/expense/_layout.tsx

@@ -21,11 +21,12 @@ const _layout = () => {
       <Stack.Screen name='new'
       options={{
         title: "New Expense"
-
       }}
       />
       <Stack.Screen name="[expense]"
       options={{
+        headerBackButtonMenuEnabled: true,
+        headerBackVisible: true,
         title: "edit Expense"
       }}
        getId={(params) => String(Date.now())}

components/common/loadingSymbol.tsx

@@ -7,11 +7,6 @@ const LoadingSymbol = () => {
 
   const spinValue = useRef(new Animated.Value(0)).current;
 
-  const spin = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 360],
-  });
-
   useEffect(() => {
     Animated.loop(
       Animated.timing(spinValue, {
@@ -34,7 +29,6 @@ const LoadingSymbol = () => {
     loader: {
       width: 100,
       height: 100,
-      transform: [{ rotate: spin + "deg"}],
       zIndex: 999,
     },
   });