A few changes:
Auto fill amount category edit Empty list component calendar filtering in category screen, expenses can be added directly
This commit is contained in:
Jakob Stornig
parent
e0f3cf947c
commit
8149ec234f
10 changed files with 97 additions and 42 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
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 { StyleSheet, Text, TextInput, View } from "react-native";
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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(() => {
|
||||
console.log("initial effect called")
|
||||
AsyncStorage.getItem("currentBudgetPage").then((page) => {
|
||||
if(page === "expenses" || page === "savings") {
|
||||
setSelectedPage(page);
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.log("Error fetching previous page from Async Storage:", error);
|
||||
})
|
||||
}, []);
|
||||
// useEffect(() => {
|
||||
// console.log("initial effect called")
|
||||
// AsyncStorage.getItem("currentBudgetPage").then((page) => {
|
||||
// if(page === "expenses" || page === "savings") {
|
||||
// setSelectedPage(page);
|
||||
// }
|
||||
// }).catch((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) => {
|
||||
if(page !== selectedPage) {
|
||||
setSelectedPage(page);
|
||||
AsyncStorage.setItem("currentBudgetPage", page);
|
||||
}
|
||||
const handlePageSelection = (page: "expense" | "saving") => {
|
||||
setSelectedPage(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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Reference in a new issue