Merge branch '67-date-filtering-on-home-screen' into 'main'

Resolve "date filtering on home screen"

Closes #67

See merge request thschleicher/interaktive-systeme!58

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

@@ -1,8 +1,7 @@
 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 { ExpenseItem, LoadingSymbol, TextInputBar, EmptyListCompenent, Plus } from "../../../components";
-
 import useFetch from "../../../hooks/useFetch";
 import { useTheme } from "../../contexts/ThemeContext";
 import { SafeAreaView } from "react-native-safe-area-context";
@@ -37,6 +36,7 @@ export default function Page() {
 
     return (
         <SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
+             <Plus onPress={()=> router.push(`/expense/new?category=${category_guid}`)}/>
             <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>
@@ -65,6 +65,7 @@ export default function Page() {
                     ItemSeparatorComponent={() => {
                         return (<View style={styles.itemSeperator}/>);
                     }}
+                    ListEmptyComponent={EmptyListCompenent}
                 />
             )}
         </SafeAreaView>

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

@@ -1,10 +1,11 @@
 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 { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
+import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch, Plus } from "../../../components";
 import useFetch from "../../../hooks/useFetch";
 import { deleteCategory, deleteExpense, updateCategory } from "../../../services/database";
 import { useTheme } from "../../contexts/ThemeContext";
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 const addCategory = () => {
     const {colors} = useTheme();
@@ -20,7 +21,6 @@ const addCategory = () => {
     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) => {
@@ -29,7 +29,7 @@ const addCategory = () => {
                 </View>
 
                 <View style={styles.budgetInput}>
-                    <AutoDecimalInput label={"Allocated:"} onValueChange={(value) => {
+                    <AutoDecimalInput label={"Allocated:"} initialValue={amount} onValueChange={(value) => {
                         setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0);
                     }}/>  
                 </View>

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

@@ -4,7 +4,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { BudgetHeader, CategoryItem, LoadingSymbol, Plus, TextInputBar } from '../../../components';
+import { BudgetHeader, CategoryItem, EmptyListCompenent, LoadingSymbol, Plus, TextInputBar } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 import { useTheme } from '../../contexts/ThemeContext';
 import { useFocusEffect } from 'expo-router/src/useFocusEffect';
@@ -13,41 +13,45 @@ export default function Page() {
     const {colors} = useTheme()
     const containerColor = colors.containerColor;
     const navigation = useNavigation();
-    const [selectedPage, setSelectedPage] = useState("noPageLoaded");
+    const [selectedPage, setSelectedPage] = useState<"expense"|"saving">("expense");
     const [searchString, setSearchString] = useState("");
 
 
 
-    useEffect(() => {
+    // useEffect(() => {
-        console.log("initial effect called")
+    //     console.log("initial effect called")
-        AsyncStorage.getItem("currentBudgetPage").then((page) => {
+    //     AsyncStorage.getItem("currentBudgetPage").then((page) => {
-            if(page === "expenses" || page === "savings") {
+    //         if(page === "expenses" || page === "savings") {
-                setSelectedPage(page);
+    //             setSelectedPage(page);
-            }
+    //         }
-        }).catch((error) => {
+    //     }).catch((error) => {
-            console.log("Error fetching previous page from Async Storage:", error);
+    //         console.log("Error fetching previous page from Async Storage:", error);
-        })
+    //     })
-    }, []);
+    // }, []);
 
-    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"] : []});
+    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 GROUP BY c.guid", args: []});
 
     useEffect(() => {
         reFetch()
     }, [selectedPage]);
 
+
     useEffect(() => {
         const unsubscribe = navigation.addListener("focus", () => {
+
             reFetch();
         })
-        return unsubscribe;
+
+        const t = () => {
+            console.log("unsubscribed")
+            unsubscribe();
+        }
+        return t;
     }, [navigation])
 
 
-    const handlePageSelection = (page: string) => {
+    const handlePageSelection = (page: "expense" | "saving") => {
-        if(page !== selectedPage) {
+        setSelectedPage(page);
-            setSelectedPage(page);
-            AsyncStorage.setItem("currentBudgetPage", page);
-        }
     };
 
     const handleCategoryPress = (item: {[column: string]: any;}) => {
@@ -56,10 +60,14 @@ export default function Page() {
 
     const filteredData = useMemo(() => {
         return data.filter((item) => {
+            if(item.category_type !== selectedPage) {
+                return false
+            }
             return item.category_name.toLowerCase().includes(searchString.toLowerCase());
         })
-    }, [data, searchString]);
+    }, [data, searchString, selectedPage]);
 
+    console.log(selectedPage)
     return (
         <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
             <View style={{flex: 1, marginHorizontal: 10}}>
@@ -86,6 +94,7 @@ export default function Page() {
                 ItemSeparatorComponent={() => {
                     return (<View style={styles.itemSeperatorStyle}/>);
                 }}
+                ListEmptyComponent={EmptyListCompenent}
                 /> 
             )}
             </View>

app/(tabs)/(home)/index.tsx

@@ -3,7 +3,7 @@ import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react
 import { Calendar } from 'react-native-calendars';
 import { FlatList, RefreshControl } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
+import { EmptyListCompenent, ExpenseItem, LoadingSymbol, Plus, TextInputBar, Welcome } from '../../../components';
 import useFetch from '../../../hooks/useFetch';
 
 import { useRouter } from "expo-router";
@@ -126,7 +126,10 @@ export default function Page() {
     }, [navigation]);
 
     const hanldeDaySelect = (date: string | undefined) => {
-        setFilter({...filter, day: date});
+        if(filter.day === date)
+            setFilter({...filter, day: undefined});
+        else
+            setFilter({...filter, day: date});
     }
     const handleMonthSelect = (date: string | undefined) => {
         setFilter({...filter, month: date, day: undefined});
@@ -171,9 +174,6 @@ export default function Page() {
                         onDayPress={(date) => {
                             hanldeDaySelect(date.dateString)
                         }}
-                        onDayLongPress={(date) => {
-                            hanldeDaySelect(undefined)
-                        }}
                         onMonthChange={(date) => {
                             handleMonthSelect(date.dateString)
                         }}
@@ -201,6 +201,7 @@ export default function Page() {
             }
             onScroll={handleScroll}
             scrollEventThrottle={20}
+            ListEmptyComponent={EmptyListCompenent}
             />             
         </SafeAreaView> 
     );

app/expense/new.tsx

@@ -1,18 +1,20 @@
 import { View, Text, StyleSheet, Alert } from 'react-native'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { SIZES } from '../../constants/theme'
 import { useTheme } from '../contexts/ThemeContext'
 import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../components'
 import { Category } from '../../types/dbItems'
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { addExpense } from '../../services/database'
+import { addExpense, executeQuery } from '../../services/database'
 import { SimpleDate } from '../../util/SimpleDate'
-import { useRouter } from 'expo-router'
+import { useLocalSearchParams, useRouter } from 'expo-router'
 
 export default function AddItem() {
   const {colors} = useTheme();
   const router = useRouter();
 
+  const searchParams = useLocalSearchParams()
+
   const [formatedValue, setFormatedValue] = useState<string>("");
   const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
   const [selectedCategory, setSelectedCategory] = useState<Category|undefined>()
@@ -50,6 +52,20 @@ export default function AddItem() {
     
   }
 
+  useEffect(()=>{
+    if(searchParams.category !== undefined){
+      console.log(searchParams.category)
+      executeQuery({sql: "SELECT * FROM category WHERE guid = ?", args: [searchParams.category]}).then((result) =>{
+        console.log("then")
+        if("rows" in result[0]){
+          const category = result[0]["rows"][0];
+          setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})
+        }
+        //setSelectedCategory({name: category["name"], color: category["color"], guid: category["guid"]})
+      })
+    }
+  }, [])
+  
   return (
     <View style={styles.container}>
       <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>

components/budget/budgetHeader.tsx

@@ -4,7 +4,7 @@ import TextInputBar from "../common/TextInputBar";
 
 type BudgetHeaderProperties = {
     selectedPage: string,
-    handlePageSelection: (page: string) => void,
+    handlePageSelection: (page: "expense" | "saving") => void,
 }
 
 type PageSelectorButtonProperties = {
@@ -21,16 +21,16 @@ const BudgetHeader = (properties: BudgetHeaderProperties) => {
         <View style={styles.containerStyle}>
             <PageSelectorButton 
                 label="Expenses"
-                isSelected={properties.selectedPage === "expenses"}
+                isSelected={properties.selectedPage === "expense"}
                 onPress={() => {
-                    properties.handlePageSelection("expenses")
+                    properties.handlePageSelection("expense")
                 }}
             />
             <PageSelectorButton 
                 label="Savings"
-                isSelected={properties.selectedPage === "savings"}
+                isSelected={properties.selectedPage === "saving"}
                 onPress={() => {
-                    properties.handlePageSelection("savings");
+                    properties.handlePageSelection("saving");
                 }}
             />
         </View>

components/common/EmptyListCompenent.tsx

@@ -0,0 +1,24 @@
+import { View, Text, StyleSheet } from 'react-native'
+import React from 'react'
+import { useTheme } from '../../app/contexts/ThemeContext'
+
+const EmptyListCompenent:React.FC = () => {
+  const {colors} = useTheme();
+  return (
+    <View style={[styles.container, {backgroundColor: colors.backgroundColor}]}>
+      <Text style={[{fontSize: 20}, {color: colors.primaryText}]}>No matching Data</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    height: 70,
+    borderRadius: 20,
+  }
+})
+
+export default EmptyListCompenent

components/common/TextInputBar.tsx

@@ -42,7 +42,7 @@ export default function TextInputBar(props: SearchBarProps) {
   // changed styles.container to containerStyle
   return (
     <View style={[containerStyle, props.style]}>
-        <TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onEndEditing={()=>setIsactive(false)}/>
+        <TextInput placeholderTextColor={colors.secondaryText} onChangeText = {handleChange} style={[{fontSize: SIZES.normal, height: "100%", color:colors.primaryText}, styles.TextInput]} autoCorrect={false} keyboardType='default' placeholder={props.placeholder} value={props.value} onPressIn={()=>(setIsactive(true))} onEndEditing={()=>setIsactive(false)}/>
       
         {isActive &&
           <TouchableOpacity style={styles.cancel} onPress={()=>{

components/expense/CategorySelectorModal.tsx

@@ -6,6 +6,7 @@ import CategoryListItem from '../common/CategoryListItem';
 import { SIZES } from '../../constants/theme';
 import useFetch from '../../hooks/useFetch';
 import TextInputBar from '../common/TextInputBar';
+import EmptyListCompenent from '../common/EmptyListCompenent';
 
 
 interface CategorySelectorModalProps{
@@ -43,7 +44,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
   }, [visible])
 
   return (
-    <Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose}>
+    <Modal visible={visible} transparent={true} onRequestClose={props.onRequestClose} animationType='slide'>
       <View style={styles.main}>
         <View style={[styles.modal, {backgroundColor: colors.containerColor}]}>
           <View>
@@ -57,6 +58,7 @@ const CategorySelectorModal: React.FC<CategorySelectorModalProps> = (props : Cat
             ItemSeparatorComponent={() => <View style={styles.itemSeperatorStyle}/>}
             ListFooterComponent={() => <View style={styles.itemSeperatorStyle}/>}
             keyboardShouldPersistTaps="always"
+            ListEmptyComponent={EmptyListCompenent}
           >
           </FlatList>
 

components/index.tsx

@@ -16,6 +16,7 @@ import TextInputBar from "./common/TextInputBar"
 import NavigationButton from "./common/button"
 import LoadingSymbol from "./common/loadingSymbol"
 import Plus from "./common/plus"
+import EmptyListCompenent from "./common/EmptyListCompenent"
 
 //login
 import BudgetHeader from "./budget/budgetHeader"
@@ -30,10 +31,26 @@ import Input from "./login/input"
 import Graph from "./stats/Graph"
 
 export {
-  AutoDecimalInput, BudgetHeader,
+  AutoDecimalInput,
-  ButtonSetting, CategoryItem, CategorySelector,
+  BudgetHeader,
-  CategorySelectorModal, CustomCard, CustomColorPicker, DateSelectorButton, ExpenseItem, Graph, Input,
+  ButtonSetting,
-  LoadingSymbol, NavigationButton, Plus, RoundedButton, TextInputBar,
+  CategoryItem,
-  ToggleSetting, TypeSelectorSwitch, Welcome
+  CategorySelector,
+  CategorySelectorModal,
+  CustomCard,
+  CustomColorPicker,
+  DateSelectorButton,
+  EmptyListCompenent,
+  ExpenseItem,
+  Graph,
+  Input,
+  LoadingSymbol,
+  NavigationButton,
+  Plus,
+  RoundedButton,
+  TextInputBar,
+  ToggleSetting,
+  TypeSelectorSwitch,
+  Welcome
 }