From 7c165fb691abe2ad81b71283e32713371c9f33ef Mon Sep 17 00:00:00 2001
From: thschleicher <thschleicher@edu.aau.at>
Date: Sat, 23 Dec 2023 13:55:57 +0100
Subject: [PATCH] some clean up and work on the budget screen

---
 app/(tabs)/budget/index.tsx        | 47 ++++++++++++++++--------------
 app/(tabs)/home/index.tsx          | 41 ++++++++++----------------
 components/budget/categoryItem.tsx | 42 ++++++++++++++------------
 3 files changed, 64 insertions(+), 66 deletions(-)

diff --git a/app/(tabs)/budget/index.tsx b/app/(tabs)/budget/index.tsx
index bcc9580..cd9ab58 100644
--- a/app/(tabs)/budget/index.tsx
+++ b/app/(tabs)/budget/index.tsx
@@ -1,38 +1,41 @@
-import { SafeAreaView, StyleSheet, Text } from 'react-native';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { SearchBar } from '../../../components';
 import CategoryItem from '../../../components/budget/categoryItem';
 import useFetch from '../../../hooks/useFetch';
+import { useThemeColor } from '../../../hooks/useThemeColor';
 
 export default function Page() {
 
-    const styles = StyleSheet.create({
-        container: {
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-        },
-        text: {
-            color: "red",
-            fontSize: 40,
-        }
-    });
+    const containerColor = useThemeColor("containerColor");
+    const textColor = useThemeColor("primaryText");
 
     const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
 
     return (
-        <SafeAreaView style={styles.container}>
-            <Text style={styles.text}>Expense View</Text>
-            <SearchBar placeholder='Nothing'></SearchBar>
-            
+        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
+            <View>
+                <Text style={[{color: textColor}]}>Expense View</Text>
+                <SearchBar placeholder='Search...'></SearchBar>
+            </View>
             
             <FlatList 
             data={data} 
-            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}>
-
-            </FlatList>
-
-            
+            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
+            keyExtractor={item => item.category_guid}
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
+            />
         </SafeAreaView>
     );
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});
\ No newline at end of file
diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index a679e46..9510d31 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -38,26 +38,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
 export default function Page() {
     const { colors, theme } = useTheme()
 
-    //Styles
-    const styles = StyleSheet.create({
-        safeAreaViewStyle: {
-            flex: 1, 
-            backgroundColor: colors.backgroundColor
-        },
-        container: {
-            flex: 1,
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        text: {
-            color: colors.primaryText,
-            fontSize: 70,
-            fontWeight: "bold"
-        },
-        loading: {
-            color: "red",
-        }
-    });
+    
 
     const router = useRouter();
     const [plusShow, setPlusShow] = useState(true);
@@ -91,7 +72,7 @@ export default function Page() {
 
 
     return (
-        <SafeAreaView edges={["left", "right", "top"]} style={styles.safeAreaViewStyle}>
+        <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
                 // router.push("/(tabs)/home/addItem");
 
@@ -130,11 +111,21 @@ export default function Page() {
             }
             renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={"10,00$"}/>}
             keyExtractor={item => item.expense_guid}
-            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
+            ItemSeparatorComponent={() => {
+                return (<View style={styles.itemSeperatorStyle}/>);
+            }}
             onScroll={handleScroll}
             scrollEventThrottle={20}
-            >
-            </FlatList>            
+            />             
         </SafeAreaView> 
     );
-}
\ No newline at end of file
+}
+
+const styles = StyleSheet.create({
+    safeAreaViewStyle: {
+        flex: 1,
+    },
+    itemSeperatorStyle: {
+        marginVertical: 5,
+    }
+});
\ No newline at end of file
diff --git a/components/budget/categoryItem.tsx b/components/budget/categoryItem.tsx
index 1133e5f..fe4d383 100644
--- a/components/budget/categoryItem.tsx
+++ b/components/budget/categoryItem.tsx
@@ -1,4 +1,4 @@
-import { ColorValue, StyleSheet, View } from "react-native";
+import { ColorValue, StyleSheet, Text, View } from "react-native";
 import { useThemeColor } from "../../hooks/useThemeColor";
 import CustomCard from "../common/CustomCard";
 
@@ -15,10 +15,9 @@ const CategoryItem = (properties: CategoryItemProps) => {
 
     return (
         <CustomCard>
-            < View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
-
-
-
+            <View style={[styles.colorTip, {backgroundColor: properties.color}]}></View>
+            <View style={[styles.textSection, {backgroundColor: backgroundColor}]}>
+                <Text style={[styles.textSection, {color: textColor}]}>{properties.category}</Text>
             </View>
 
 
@@ -32,18 +31,23 @@ const CategoryItem = (properties: CategoryItemProps) => {
 export default CategoryItem;
 
 const styles = StyleSheet.create({
+    colorTip: {
+      width: 20,
+      borderTopLeftRadius: 20,
+      borderBottomLeftRadius: 20,
+    },
     textSection: {
-        flexDirection: "column",
-        alignContent: "space-between",
-        alignItems:"flex-start",
-        paddingLeft: 10,
-        flex:1,
-        alignSelf: "stretch",
-        paddingVertical: 5
-      },
-      valueSection: {
-        justifyContent:"center",
-        borderTopRightRadius: 20,
-        borderBottomRightRadius: 20,
-      }
-});
\ No newline at end of file
+      flexDirection: "column",
+      alignContent: "space-between",
+      alignItems:"flex-start",
+      paddingLeft: 10,
+      flex:1,
+      alignSelf: "stretch",
+      paddingVertical: 5
+    },
+    valueSection: {
+      justifyContent:"center",
+      borderTopRightRadius: 20,
+      borderBottomRightRadius: 20,
+    }
+  })
\ No newline at end of file