From eee40ff7acfbc3052c3cdb779969ea22b4b06610 Mon Sep 17 00:00:00 2001
From: Thomas Schleicher <thschleicher@edu.aau.at>
Date: Fri, 8 Dec 2023 17:04:53 +0000
Subject: [PATCH] Resolve "Home"

---
 app/(tabs)/home/index.tsx | 44 ++++++++++++++++++---------------------
 app/_layout.tsx           | 12 ++++++++---
 2 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/app/(tabs)/home/index.tsx b/app/(tabs)/home/index.tsx
index 99e07e7..622a6dc 100644
--- a/app/(tabs)/home/index.tsx
+++ b/app/(tabs)/home/index.tsx
@@ -1,11 +1,11 @@
-import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { useRouter } from "expo-router";
+import React, { useEffect, useRef, useState } from 'react';
+import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { ExpenseItem, Plus, SearchBar, Welcome } from '../../../components';
 import { useThemeColor } from "../../../hooks/hooks";
-import { SafeAreaView } from 'react-native-safe-area-context'
-import { ExpenseItem, Plus, Welcome, SearchBar } from '../../../components';
-import { FlatList, TextInput} from 'react-native-gesture-handler';
-import { useRef, useState, useEffect } from 'react';
-import React from 'react';
-import { useRouter } from "expo-router"
+import { executeQuery } from "../../../services/database";
 import { useAuth } from '../../contexts/AuthContext';
 
 export default function Page() {
@@ -36,22 +36,18 @@ export default function Page() {
         prevOffset.current = currentOffset
         setPlusShow(isScrollingUp || isTop)
     }
-   
-    const data = [
-        {id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"1 Super fancy spending with long name that will not display", value: "€ 30,00"},
-        {id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"2 Super fancy spending", value: "€ 30,00"},
-        {id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"3 Super fancy spending", value: "€ 30,00"},
-        {id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"4 Super fancy spending", value: "€ 30,00"},
-        {id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"5 Super fancy spending", value: "€ 30,00"},
-        {id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"6 Super fancy spending with long name that will not display", value: "€ 30,00"},
-        {id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"7 Super fancy spending", value: "€ 30,00"},
-        {id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"8 Super fancy spending", value: "€ 30,00"},
-        {id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"9 Super fancy spending", value: "€ 30,00"},
-        {id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"10 Super fancy spending", value: "€ 30,00"},
-        {id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"11 Super fancy spending", value: "€ 30,00"},
-        {id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"12 Super fancy spending", value: "€ 30,00"},
-    ]
 
+    const [data, setData] = useState<{[column: string]: any;}[]>([]);
+
+    useEffect(() => {
+        executeQuery("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;").then((result) => {
+
+            if(result === undefined) return;
+            setData(result);
+        }).catch((error) => {
+            throw error;
+        });
+    }, []);
 
     return (
         <SafeAreaView style={{flex: 1, backgroundColor: backgroundColor}}>
@@ -67,8 +63,8 @@ export default function Page() {
                     <SearchBar placeholder='Type to Search...'></SearchBar>
                 </>
             }
-            renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
-            keyExtractor={item => item.id}
+            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>}
             onScroll={handleScroll}
             scrollEventThrottle={20}
diff --git a/app/_layout.tsx b/app/_layout.tsx
index 42cdecd..6f79126 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -1,8 +1,14 @@
-import { Slot } from 'expo-router'
-import React from 'react'
-import { AuthProvider } from './contexts/AuthContext'
+import { Slot } from 'expo-router';
+import React, { useEffect } from 'react';
+import { initDatabase } from '../services/database';
+import { AuthProvider } from './contexts/AuthContext';
 
 export default function _layout() {
+
+  useEffect(() => {
+    initDatabase();
+  }, []);
+
   console.log("layout called")
   return (
     <AuthProvider>