95 lines
3.4 KiB
TypeScript
95 lines
3.4 KiB
TypeScript
import { FontAwesome } from "@expo/vector-icons";
|
|
import { router, useLocalSearchParams } from "expo-router";
|
|
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
|
|
import useFetch from "../../../hooks/useFetch";
|
|
import { useTheme } from "../../contexts/ThemeContext";
|
|
|
|
export default function Page() {
|
|
const {colors} = useTheme();
|
|
const {category_guid, category_name} = useLocalSearchParams();
|
|
|
|
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 = () => {
|
|
console.log("edit category");
|
|
}
|
|
|
|
const handleBackButton = () => {
|
|
router.back();
|
|
}
|
|
|
|
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
|
|
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}
|
|
/>}
|
|
keyExtractor={item => item.guid}
|
|
ItemSeparatorComponent={() => {
|
|
return (<View style={styles.itemSeperator}/>);
|
|
}}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
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",
|
|
}
|
|
});
|