diff --git a/app/(tabs)/(budget)/category.tsx b/app/(tabs)/(budget)/category.tsx index c2e3ea9..93d0374 100644 --- a/app/(tabs)/(budget)/category.tsx +++ b/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 ( + router.push(`/expense/new?category=${category_guid}`)}/> Back @@ -65,6 +65,7 @@ export default function Page() { ItemSeparatorComponent={() => { return (); }} + ListEmptyComponent={EmptyListCompenent} /> )} diff --git a/app/(tabs)/(budget)/editCategory.tsx b/app/(tabs)/(budget)/editCategory.tsx index 369667b..e0b2706 100644 --- a/app/(tabs)/(budget)/editCategory.tsx +++ b/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 { 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 ( Edit Category - { @@ -29,7 +29,7 @@ const addCategory = () => { - { + { setAmount(!Number.isNaN(Number.parseFloat(value)) ? Number.parseFloat(value) : 0); }}/> diff --git a/app/(tabs)/(budget)/index.tsx b/app/(tabs)/(budget)/index.tsx index e2da8ed..9b38322 100644 --- a/app/(tabs)/(budget)/index.tsx +++ b/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(() => { - 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 ( @@ -86,6 +94,7 @@ export default function Page() { ItemSeparatorComponent={() => { return (); }} + ListEmptyComponent={EmptyListCompenent} /> )} diff --git a/app/(tabs)/(home)/index.tsx b/app/(tabs)/(home)/index.tsx index 84f0c97..f76b36a 100644 --- a/app/(tabs)/(home)/index.tsx +++ b/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} /> ); diff --git a/app/expense/new.tsx b/app/expense/new.tsx index 007258e..d0456e7 100644 --- a/app/expense/new.tsx +++ b/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(""); const [selectorModalVisible, setSelecorModalVisible] = useState(false); const [selectedCategory, setSelectedCategory] = useState() @@ -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 ( {setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}> diff --git a/components/budget/budgetHeader.tsx b/components/budget/budgetHeader.tsx index 6c8bc9d..5e65614 100644 --- a/components/budget/budgetHeader.tsx +++ b/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) => { { - properties.handlePageSelection("expenses") + properties.handlePageSelection("expense") }} /> { - properties.handlePageSelection("savings"); + properties.handlePageSelection("saving"); }} /> diff --git a/components/common/EmptyListCompenent.tsx b/components/common/EmptyListCompenent.tsx new file mode 100644 index 0000000..c0a1746 --- /dev/null +++ b/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 ( + + No matching Data + + ) +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + height: 70, + borderRadius: 20, + } +}) + +export default EmptyListCompenent \ No newline at end of file diff --git a/components/common/TextInputBar.tsx b/components/common/TextInputBar.tsx index 65255fe..bfeaac8 100644 --- a/components/common/TextInputBar.tsx +++ b/components/common/TextInputBar.tsx @@ -42,7 +42,7 @@ export default function TextInputBar(props: SearchBarProps) { // changed styles.container to containerStyle return ( - setIsactive(false)}/> + (setIsactive(true))} onEndEditing={()=>setIsactive(false)}/> {isActive && { diff --git a/components/expense/CategorySelectorModal.tsx b/components/expense/CategorySelectorModal.tsx index 56ba20f..ef09fd1 100644 --- a/components/expense/CategorySelectorModal.tsx +++ b/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 = (props : Cat }, [visible]) return ( - + @@ -57,6 +58,7 @@ const CategorySelectorModal: React.FC = (props : Cat ItemSeparatorComponent={() => } ListFooterComponent={() => } keyboardShouldPersistTaps="always" + ListEmptyComponent={EmptyListCompenent} > diff --git a/components/index.tsx b/components/index.tsx index 29167eb..92ba31c 100644 --- a/components/index.tsx +++ b/components/index.tsx @@ -16,6 +16,7 @@ import Plus from "./common/plus" import TextInputBar from "./common/TextInputBar" import AutoDecimalInput from "./common/AutoDecimalInput" import RoundedButton from "./common/RoundedButton" +import EmptyListCompenent from "./common/EmptyListCompenent" //login import BudgetHeader from "./budget/budgetHeader" @@ -45,6 +46,7 @@ export { CategoryItem, TypeSelectorSwitch, NavigationButton, - CustomColorPicker + CustomColorPicker, + EmptyListCompenent, }