Merge branch '56-edit-expense' into 'main'

Resolve "edit Expense"

Closes #56

See merge request thschleicher/interaktive-systeme!43

app/(tabs)/home/_layout.tsx

@@ -24,8 +24,8 @@ export default function _Layout() {
         title: "test",
         headerShown: false,
       }}/>
-      <Stack.Screen name="addItem" options={{
-        title: "new Expense",
+      <Stack.Screen name="expense" options={{
+        headerShown: false,
       }}/>
       <Stack.Screen name="userSettings" options={{
         animation: "slide_from_left",

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

@@ -0,0 +1,137 @@
+import { View, Text, Alert, StyleSheet } from 'react-native'
+import React, { useEffect, useState } from 'react'
+import { router, useLocalSearchParams } from 'expo-router'
+import useFetch from '../../../../hooks/useFetch';
+import { Category, Expense } from '../../../../types/dbItems';
+import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../../../components';
+import colors from '../../../../constants/colors';
+import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../../../services/database';
+import { SimpleDate } from '../../../../util/SimpleDate';
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { SIZES } from '../../../../constants/theme';
+import { useTheme } from '../../../contexts/ThemeContext';
+
+export default function Page() {
+  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]});
+  const [selectedExpense, setSelectedExpense] = useState<Expense|undefined>();
+  const [selectedCategory, setSelectedCategory] = useState<Category|undefined>();
+  const [formatedValue, setFormatedValue] = useState<string>("");
+  const [initialValue, setInitialValue] = useState<number>();
+  const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
+  const [expenseName, setExpenseName] = useState<string>("");
+  const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
+  const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+
+  useEffect(()=>{
+    const entry = data[0];
+    console.log(entry)
+    if(entry){
+      console.log(entry)
+      const extractedExpense: Expense = {name: entry["e_name"], amount: entry["e_amount"], dateTime: entry["e_datetime"], guid: entry["e_guid"]}
+      const extractedCategory: Category = {name: entry["c_name"], color: entry["c_color"], guid: entry["c_guid"]}
+
+      console.log(extractedCategory.color)
+
+      setSelectedExpense(extractedExpense);
+      setSelectedCategory(extractedCategory);
+      setInitialValue(extractedExpense.amount)
+      setExpenseName(extractedExpense.name ?? "")
+      setSelectedDate(extractedExpense.dateTime? new Date(extractedExpense.dateTime) : new Date());
+    }
+
+
+  }, [data])
+
+  const handleValueChange = (formatedValue: string) => {
+    setFormatedValue(formatedValue);
+  }
+
+  const handleCategorySelect = (category : Category) => {
+    setSelecorModalVisible(false);
+    setSelectedCategory(category);
+  }
+
+  const validateInput = ():boolean => {
+    if(formatedValue == "" || expenseName == "" || selectedCategory === undefined || selectedDate === null){
+      return false;
+    }
+    return true;
+  }
+
+  const submit = () => {
+    console.log(selectedExpense?.guid)
+    const insert = async () => {
+      await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
+    }
+    if(validateInput()){
+      insert();
+      router.back();
+    }else {
+      Alert.alert("Invalid input", "One of the Props is not properly defined")
+    }
+    
+  }
+
+  const handleDelete = () => {
+    const del = async () => {
+      await deleteExpense(selectedExpense!.guid!)
+      router.back();
+    }
+    del();
+  }
+
+  return (
+    <View style={styles.container}>
+      <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
+      <AutoDecimalInput onValueChange={handleValueChange} label='Amount' initialValue={initialValue}/>
+      <CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
+      <TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)} value={expenseName}/>
+      <DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>
+      {datePickerShown &&
+        <DateTimePicker 
+          value={new Date()}
+          maximumDate={new Date()}
+
+          onChange={(event, date)=>{
+            setDatePickerShown(false);
+            if(date){
+              setSelectedDate(date);
+            }
+          }}
+        />}
+        <RoundedButton color={colors.elementDefaultColor} style={{padding: 10, marginTop: 40}} onPress={handleDelete}>
+          <Text style={[styles.submitText, {color: colors.primaryText}]}>Delete Expense</Text>
+        </RoundedButton>
+        <RoundedButton color={colors.accentColor} style={styles.save} onPress={submit}>
+          <Text style={[styles.submitText, {color: colors.primaryText}]}>Save</Text>
+        </RoundedButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  notFound: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
+
+  notFoundMessageContainer: {
+    backgroundColor: "#e37b7b",
+    padding: 50,
+  },
+  save: {
+    padding: 10,
+  },
+  container: {
+    margin: SIZES.normal,
+    display: "flex",
+    gap: 10
+  }, 
+ 
+  submitText: {
+    fontSize: SIZES.large
+  }
+  
+})

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

@@ -0,0 +1,39 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { Stack } from 'expo-router'
+import React from 'react'
+import { useTheme } from '../../../contexts/ThemeContext'
+
+const _layout = () => {
+  const {colors} = useTheme();
+  return (
+    <Stack
+    initialRouteName="new"
+      screenOptions={{
+      contentStyle: {
+        backgroundColor:colors.containerColor,
+      },
+      headerStyle: {
+        backgroundColor: colors.containerColor
+      },
+      headerTintColor: colors.primaryText
+
+    }}>
+      <Stack.Screen name='new'
+      options={{
+        title: "New Expense"
+
+      }}
+      />
+      <Stack.Screen name="[expense]"
+      options={{
+        title: "edit Expense"
+      }}
+       getId={(params) => String(Date.now())}
+      />
+    </Stack>
+  )
+}
+
+export default _layout
+
+const styles = StyleSheet.create({})

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

@@ -1,12 +1,12 @@
 import { View, Text, StyleSheet, Alert } from 'react-native'
 import React, { 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 { 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 { SimpleDate } from '../../../util/SimpleDate'
+import { addExpense } from '../../../../services/database'
+import { SimpleDate } from '../../../../util/SimpleDate'
 import { useRouter } from 'expo-router'
 
 export default function AddItem() {
@@ -52,7 +52,7 @@ export default function AddItem() {
   return (
     <View style={styles.container}>
       <CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
-      <AutoDecimalInput onValueChange={handleValueChange} label='Amount'></AutoDecimalInput>
+      <AutoDecimalInput onValueChange={handleValueChange} label='Amount'/>
       <CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
       <TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)}/>
       <DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>

app/(tabs)/home/index.tsx

@@ -74,7 +74,7 @@ export default function Page() {
     return (
         <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
-                router.push("/(tabs)/home/addItem");
+                router.push("/(tabs)/home/expense/new");
 
                 // executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
                 //     if("rows" in result[0]) {
@@ -109,7 +109,7 @@ export default function Page() {
                     <TextInputBar placeholder='Type to Search...' style={{marginBottom: 20}}></TextInputBar>
                 </>
             }
-            renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount}/>}
+            renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount} guid={item.expense_guid} onPress={(guid) => {router.push(`/(tabs)/home/expense/${guid}`)}}/>}
             keyExtractor={item => item.expense_guid}
             ItemSeparatorComponent={() => {
                 return (<View style={styles.itemSeperatorStyle}/>);

components/common/AutoDecimalInput.tsx

@@ -1,5 +1,5 @@
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
-import React, {LegacyRef, MutableRefObject, useRef, useState} from 'react'
+import React, {LegacyRef, MutableRefObject, useEffect, useRef, useState} from 'react'
 import { SIZES } from '../../constants/theme';
 import { useTheme } from '../../app/contexts/ThemeContext';
 
@@ -19,13 +19,21 @@ const formatDecimal = (value: string)=>{
 interface AutoDecimalInputProps{
   onValueChange?: (formattedValue: string) => void | undefined
   label: string,
+  initialValue? : number
 }
 
-const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label}) => {
+const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label, initialValue}) => {
   const { colors } = useTheme();
   const inputRef = useRef<TextInput>(null);
   const [pressedNumbers, setPressedNumbers] = useState<string>("");
 
+  const init = () => {
+    if(initialValue){
+      const pressedNumber = initialValue.toFixed(2).replace(".", "")
+      update(pressedNumber);
+    }
+  }
+
   const update = (newValues : string) => {
     if(onValueChange){
       onValueChange(formatDecimal(newValues))
@@ -33,6 +41,10 @@ const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label
     setPressedNumbers(newValues);
   }
 
+  useEffect(() => {
+    init()
+  }, [initialValue])
+
   const handleInput = (e: NativeSyntheticEvent<TextInputKeyPressEventData>)=>{
     const pressedKey:string = e.nativeEvent.key
     if(Number.isInteger(Number.parseInt(pressedKey))){

components/common/TextInputBar.tsx

@@ -7,14 +7,13 @@ import { useTheme } from '../../app/contexts/ThemeContext';
 interface SearchBarProps extends ViewProps {
   placeholder? : string;
   onChangeText? : (text: string) => void | undefined
+  value?: string
 }
 
 export default function TextInputBar(props: SearchBarProps) {
   const [isActive, setIsactive] = React.useState(false);
   const { colors } = useTheme();
-  const [text, setText] = useState<string>("");
 
-  const textColor = colors
   const backgroundColor = colors.elementDefaultColor;
 
   const handleChange = (text:string) : void  =>  {
@@ -30,7 +29,7 @@ export default function TextInputBar(props: SearchBarProps) {
     if(props.onChangeText){
       props.onChangeText(text)
     }
-    setText(text)
+
   }
 
   // cant apply the background color otherwise
@@ -43,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={text} onFocus={()=>handleChange(text)} 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} onEndEditing={()=>setIsactive(false)}/>
       
         {isActive &&
           <TouchableOpacity style={styles.cancel} onPress={()=>{handleChange("")}}>

components/home/expenseItem.tsx

@@ -3,35 +3,53 @@ import { ColorValue, StyleSheet, Text, View } from 'react-native';
 import { SIZES } from '../../constants/theme';
 import CustomCard from "../common/CustomCard";
 import { useTheme } from '../../app/contexts/ThemeContext';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+//export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
+interface ExpenseItemProps {
+  color: ColorValue;
+  category: string;
+  title: string;
+  date: string;
+  value : string;
+  guid? : string;  
+  onPress? : (guid?: string) => void
+}
 
-export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
 export default function ExpenseItem(itemProps : ExpenseItemProps) {
   const { colors } = useTheme(); 
+  const handlePress = ()=>{
+    if(itemProps.onPress){
+      itemProps.onPress(itemProps.guid);
+    }
+  }
   return (
       <CustomCard>
-        <View style={styles.tile}>
-          <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
-          <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
-            <Text style={{
-              fontSize: SIZES.normal,
-              color: colors.primaryText
-            }} numberOfLines={1}>{itemProps.category}</Text>
-            <Text style={{
-              fontSize: SIZES.large,
-              color: colors.primaryText
-            }} numberOfLines={1}>{itemProps.title}</Text>
-            <Text style={{
-              fontSize: SIZES.small,
-              color: colors.primaryText
-            }} numberOfLines={1}>{itemProps.date}</Text>
+        <TouchableOpacity onPress={handlePress}>
+          <View style={styles.tile}>
+            <View style={[styles.colorTip, {backgroundColor: itemProps.color}]}></View>
+            <View style={[styles.textSection, {backgroundColor: colors.backgroundColor}]}>
+              <Text style={{
+                fontSize: SIZES.normal,
+                color: colors.primaryText
+              }} numberOfLines={1}>{itemProps.category}</Text>
+              <Text style={{
+                fontSize: SIZES.large,
+                color: colors.primaryText
+              }} numberOfLines={1}>{itemProps.title}</Text>
+              <Text style={{
+                fontSize: SIZES.small,
+                color: colors.primaryText
+              }} numberOfLines={1}>{itemProps.date}</Text>
+            </View>
+            <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
+              <Text style={{
+                fontSize: SIZES.xxLarge,
+                color: colors.primaryText
+              }} numberOfLines={1}>{itemProps.value}</Text>
+            </View>
           </View>
-          <View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
-            <Text style={{
-              fontSize: SIZES.xxLarge,
-              color: colors.primaryText
-            }} numberOfLines={1}>{itemProps.value}</Text>
-          </View>
-       </View>
+       </TouchableOpacity>
       </CustomCard>
      
   )

hooks/useFetch.ts

@@ -6,12 +6,16 @@ const useFetch = (query: Query) => {
 
     const [isLoading, setIsLoading] = useState(false);
     const [data, setData] = useState<{[column: string]: any;}[]>([]);
+    const [isEmptyResult, setIsEmptyResult] = useState<boolean | undefined>(undefined);
 
     const reFetch = () => {
         setIsLoading(true);
         executeQuery(query).then((result) => {
             if("rows" in result[0]) {
                 setData(result[0]["rows"]);
+                if(result[0]["rows"].length == 0){
+                    setIsEmptyResult(true);
+                }
             }
         }).catch((error: any) => {
             console.error("Fetching data from database has failed: ", error);
@@ -24,7 +28,7 @@ const useFetch = (query: Query) => {
         reFetch();
     }, [])
 
-    return {data, isLoading, reFetch};
+    return {data, isLoading, reFetch, isEmptyResult};
 }
 
 export default useFetch;

services/database.ts

@@ -42,6 +42,21 @@ export const addCategory = async (name: string, color: string, type: string, all
     }
 }
 
+export const updateExpense = async (guid: string, name: string, category_guid: string, datetime: string, amount: number) => {
+
+    //needs user input validation for type and color (should be validated by this function)
+
+    try {
+        await db.transactionAsync(async (tx) => {
+            await tx.executeSqlAsync("UPDATE expense SET name = ?, category_guid = ?, datetime = ?, amount = ? WHERE guid = ?", [name, category_guid, datetime, amount, guid]
+            );
+        });
+    } catch (error) {
+        console.log("Error updating expense: ", error);
+        throw error;
+    }
+};
+
 export const addExpense = async (name: string, category_guid: string, datetime: string, amount: number) => {
 
     //needs user input validation for type and color (should be validated by this function)

types/dbItems.ts

@@ -4,4 +4,12 @@ export interface Category {
   color? :string;
   type? : "expense" | "saving"
   allocatedAmount? : number   
+}
+
+export interface Expense {
+  guid? : string;
+  name? : string;
+  dateTime? : string;
+  amount?: number;
+  category_guid?: string; 
 }