111 lines
No EOL
4.1 KiB
TypeScript
111 lines
No EOL
4.1 KiB
TypeScript
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { router, useNavigation } from 'expo-router';
|
|
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, EmptyListCompenent, LoadingSymbol, Plus, TextInputBar } from '../../../components';
|
|
import useFetch from '../../../hooks/useFetch';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
import { useFocusEffect } from 'expo-router/src/useFocusEffect';
|
|
|
|
export default function Page() {
|
|
const {colors} = useTheme()
|
|
const containerColor = colors.containerColor;
|
|
const navigation = useNavigation();
|
|
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);
|
|
// })
|
|
// }, []);
|
|
|
|
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();
|
|
})
|
|
|
|
const t = () => {
|
|
console.log("unsubscribed")
|
|
unsubscribe();
|
|
}
|
|
return t;
|
|
}, [navigation])
|
|
|
|
|
|
const handlePageSelection = (page: "expense" | "saving") => {
|
|
setSelectedPage(page);
|
|
};
|
|
|
|
const handleCategoryPress = (item: {[column: string]: any;}) => {
|
|
router.push({pathname: "/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
|
|
}
|
|
|
|
const filteredData = useMemo(() => {
|
|
return data.filter((item) => {
|
|
if(item.category_type !== selectedPage) {
|
|
return false
|
|
}
|
|
return item.category_name.toLowerCase().includes(searchString.toLowerCase());
|
|
})
|
|
}, [data, searchString, selectedPage]);
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
|
|
<View style={{flex: 1, marginHorizontal: 10}}>
|
|
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
|
|
<TextInputBar style={{marginBottom: 20}} value={searchString} onChangeText={setSearchString} placeholder='Search...'></TextInputBar>
|
|
|
|
<Plus onPress={() => {
|
|
router.push({pathname: '/addCategory'});
|
|
}}/>
|
|
|
|
{isLoading ? (<LoadingSymbol/>) : (
|
|
<FlatList
|
|
data={filteredData}
|
|
renderItem = {({item}) => <CategoryItem
|
|
category={item.category_name}
|
|
allocated_amount={item.allocated_amount ?? 0}
|
|
color={item.category_color}
|
|
category_guid={item.category_guid}
|
|
total_expenses={item.total_expenses ?? 0}
|
|
onPress={() => {
|
|
handleCategoryPress(item);
|
|
}}/>}
|
|
keyExtractor={item => item.category_guid}
|
|
ItemSeparatorComponent={() => {
|
|
return (<View style={styles.itemSeperatorStyle}/>);
|
|
}}
|
|
ListEmptyComponent={EmptyListCompenent}
|
|
/>
|
|
)}
|
|
</View>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeAreaViewStyle: {
|
|
flex: 1,
|
|
},
|
|
itemSeperatorStyle: {
|
|
marginVertical: 5,
|
|
},
|
|
}); |