Resolve "Categories, detailed view on Press"

2024-01-05 12:27:56 +00:00 · 2024-01-05 12:27:56 +00:00 · 412e88d007
commit 412e88d007
parent b927b0e8a0
8 changed files with 105 additions and 16 deletions
--- a/app/(tabs)/budget/category.tsx
+++ b/app/(tabs)/budget/category.tsx
@ -0,0 +1,95 @@
+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",
+    }
+});