From 497c556a8741896167c5a0480f3e9963ede5d0f3 Mon Sep 17 00:00:00 2001 From: thschleicher Date: Fri, 5 Jan 2024 20:53:47 +0100 Subject: [PATCH 1/2] removed "entered" log, fixed loading symbol, implemented category update with editing --- app/(tabs)/budget/category.tsx | 2 +- app/(tabs)/budget/editCategory.tsx | 3 ++- app/(tabs)/budget/index.tsx | 2 +- app/(tabs)/home/index.tsx | 6 ++---- components/common/loadingSymbol.tsx | 14 +++++++------- services/database.ts | 12 ++++++++++++ 6 files changed, 25 insertions(+), 14 deletions(-) diff --git a/app/(tabs)/budget/category.tsx b/app/(tabs)/budget/category.tsx index a58d02b..ca96d05 100644 --- a/app/(tabs)/budget/category.tsx +++ b/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 = () => { diff --git a/app/(tabs)/budget/editCategory.tsx b/app/(tabs)/budget/editCategory.tsx index b3b8ec7..d45958d 100644 --- a/app/(tabs)/budget/editCategory.tsx +++ b/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(); }}/> { - console.log("Implement Saving here!"); + updateCategory(category_guid.toString(), categoryName, categoryColor, selectedType, amount); router.back(); }}/> diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx index 3f2aa97..9131dc7 100644 --- a/app/(tabs)/budget/index.tsx +++ b/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 ( diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx index d57614f..8f78e74 100644 --- a/app/(tabs)/home/index.tsx +++ b/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] diff --git a/components/common/loadingSymbol.tsx b/components/common/loadingSymbol.tsx index b7e1a03..2769dcb 100644 --- a/components/common/loadingSymbol.tsx +++ b/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 ( - + ); }; diff --git a/services/database.ts b/services/database.ts index cbee2b1..7fe3921 100644 --- a/services/database.ts +++ b/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) From 7dd17798c44f33a53a89971589d148f1d34bab41 Mon Sep 17 00:00:00 2001 From: Jakob Stornig Date: Fri, 5 Jan 2024 21:33:13 +0100 Subject: [PATCH 2/2] fix last issues --- app/(tabs)/budget/addCategory.tsx | 9 +++++---- app/(tabs)/budget/category.tsx | 10 +++++++--- app/(tabs)/budget/editCategory.tsx | 2 +- app/(tabs)/budget/index.tsx | 2 +- app/(tabs)/home/expense/[expense].tsx | 5 ++++- app/(tabs)/home/expense/_layout.tsx | 3 ++- components/common/loadingSymbol.tsx | 6 ------ 7 files changed, 20 insertions(+), 17 deletions(-) diff --git a/app/(tabs)/budget/addCategory.tsx b/app/(tabs)/budget/addCategory.tsx index 984d98e..bdc1a86 100644 --- a/app/(tabs)/budget/addCategory.tsx +++ b/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,18 +11,18 @@ export default function Page() { const parameters = useLocalSearchParams(); - const [categoryName, setCategoryName] = useState("Enter Category Name..."); + const [categoryName, setCategoryName] = useState(""); const [categoryColor, setCategoryColor] = useState('#' + Math.floor(Math.random()*16777215).toString(16)); const [selectedType, setSelectedType] = useState("expense"); const [amount, setAmount] = useState(0); return ( - + Add Category - { + { setCategoryName(newName); }}/> diff --git a/app/(tabs)/budget/category.tsx b/app/(tabs)/budget/category.tsx index ca96d05..3a88f32 100644 --- a/app/(tabs)/budget/category.tsx +++ b/app/(tabs)/budget/category.tsx @@ -1,11 +1,14 @@ import { FontAwesome } from "@expo/vector-icons"; -import { router, useLocalSearchParams } from "expo-router"; -import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native"; +import { useRouter, useLocalSearchParams } from "expo-router"; +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={() => { diff --git a/app/(tabs)/budget/editCategory.tsx b/app/(tabs)/budget/editCategory.tsx index d45958d..60705fa 100644 --- a/app/(tabs)/budget/editCategory.tsx +++ b/app/(tabs)/budget/editCategory.tsx @@ -20,7 +20,7 @@ const addCategory = () => { - { + { setCategoryName(newName); }}/> diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx index 9131dc7..6615367 100644 --- a/app/(tabs)/budget/index.tsx +++ b/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(); diff --git a/app/(tabs)/home/expense/[expense].tsx b/app/(tabs)/home/expense/[expense].tsx index 99a6e73..53e38ae 100644 --- a/app/(tabs)/home/expense/[expense].tsx +++ b/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(false); const [selectedDate, setSelectedDate] = useState(new Date()); + + console.log(router.canGoBack()) useEffect(()=>{ const entry = data[0]; console.log(entry) diff --git a/app/(tabs)/home/expense/_layout.tsx b/app/(tabs)/home/expense/_layout.tsx index 211509f..ef1ee81 100644 --- a/app/(tabs)/home/expense/_layout.tsx +++ b/app/(tabs)/home/expense/_layout.tsx @@ -21,11 +21,12 @@ const _layout = () => { String(Date.now())} diff --git a/components/common/loadingSymbol.tsx b/components/common/loadingSymbol.tsx index 2769dcb..757749c 100644 --- a/components/common/loadingSymbol.tsx +++ b/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, }, });