131 lines
4.9 KiB
TypeScript
131 lines
4.9 KiB
TypeScript
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 useFetch from "../../../hooks/useFetch";
|
|
import { useTheme } from "../../contexts/ThemeContext";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { useNavigation } from "expo-router/src/useNavigation";
|
|
import { useEffect } from "react";
|
|
|
|
export default function Page() {
|
|
const router = useRouter();
|
|
const navigation = useNavigation();
|
|
const {colors} = useTheme();
|
|
const {category_guid} = useLocalSearchParams();
|
|
|
|
const {category_amount, category_color, category_name, category_type} = fetchCategoryInformation(category_guid.toString());
|
|
|
|
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: "/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
|
|
}
|
|
|
|
const handleBackButton = () => {
|
|
router.back();
|
|
}
|
|
|
|
useEffect(() => {
|
|
console.log("useEffect called")
|
|
const unsubscribe = navigation.addListener("focus", () => {
|
|
reFetch();
|
|
})
|
|
return unsubscribe;
|
|
}, [navigation])
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
|
|
<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>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity style={[styles.categoryEditTouchableOpacity, {backgroundColor: colors.elementDefaultColor}]}
|
|
onPress={handleEditCategory}>
|
|
<Text style={[styles.editButtonText, {color: colors.primaryText}]}>{category_name}</Text>
|
|
<FontAwesome style={styles.iconEdit} name="edit" size={35} color={colors.primaryText}/>
|
|
</TouchableOpacity>
|
|
|
|
<TextInputBar style={styles.searchBar} placeholder="Search..."/>
|
|
|
|
{isLoading ? (<LoadingSymbol/>) : (
|
|
<FlatList style={{marginHorizontal: 10}}
|
|
data={data}
|
|
renderItem = {({item}) => <ExpenseItem
|
|
color={item.category_color}
|
|
category={item.category_name}
|
|
title={item.expense_name}
|
|
date={item.expense_datetime}
|
|
value={item.expense_amount}
|
|
onPress={()=>router.push(`/expense/${item.expense_guid}`)}
|
|
/>}
|
|
keyExtractor={item => item.expense_guid}
|
|
ItemSeparatorComponent={() => {
|
|
return (<View style={styles.itemSeperator}/>);
|
|
}}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const fetchCategoryInformation = (guid: string) => {
|
|
|
|
const {data} = useFetch({sql: "SELECT * FROM category WHERE guid = ?", args: [guid]});
|
|
|
|
let category_name = "";
|
|
let category_color = "";
|
|
let category_amount = 0;
|
|
let category_type = "";
|
|
|
|
if (data && data[0]) {
|
|
if ("name" in data[0]) category_name = data[0].name as string;
|
|
if ("color" in data[0]) category_color = data[0].color as string;
|
|
if ("allocated_amount" in data[0]) category_amount = data[0].allocated_amount as number;
|
|
if ("type" in data[0]) category_type = data[0].type as string;
|
|
}
|
|
|
|
return {category_name, category_color, category_amount, category_type};
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeAreaView: {
|
|
flex: 1,
|
|
},
|
|
itemSeperator: {
|
|
margin: 5,
|
|
},
|
|
categoryEditTouchableOpacity: {
|
|
borderRadius: 10,
|
|
flexDirection: "row",
|
|
justifyContent: "space-around",
|
|
margin: 10,
|
|
},
|
|
editButtonText: {
|
|
fontSize: 30,
|
|
padding: 10,
|
|
fontWeight: "bold",
|
|
},
|
|
iconEdit: {
|
|
paddingVertical: 10,
|
|
paddingRight: 10,
|
|
},
|
|
searchBar: {
|
|
marginHorizontal: 10,
|
|
marginBottom:20,
|
|
},
|
|
iconBack: {
|
|
paddingLeft: 10,
|
|
paddingRight: 5,
|
|
},
|
|
backText: {
|
|
fontSize: 20,
|
|
padding: 5,
|
|
},
|
|
backContainer: {
|
|
flexDirection: "row",
|
|
justifyContent: "flex-start",
|
|
}
|
|
});
|