rawalcher/interaktive-systeme
Archived
1
0
Fork 0
Code Issues 5 Pull requests 2 Projects Releases 14 Packages Wiki Activity Actions

Resolve "Home"

Browse source
This commit is contained in:
Thomas Schleicher 2023-12-08 17:04:53 +00:00
parent 225ff6a3e9
commit eee40ff7ac
2 changed files with 29 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/(tabs)/home/index.tsx
View file

@ -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 { useThemeColor } from "../../../hooks/hooks";
import { SafeAreaView } from 'react-native-safe-area-context' import { executeQuery } from "../../../services/database";
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 { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
export default function Page() { export default function Page() {
@ -37,21 +37,17 @@ export default function Page() {
setPlusShow(isScrollingUp || isTop) setPlusShow(isScrollingUp || isTop)
} }
const data = [ const [data, setData] = useState<{[column: string]: any;}[]>([]);
{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"},
]
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 ( return (
<SafeAreaView style={{flex: 1, backgroundColor: backgroundColor}}> <SafeAreaView style={{flex: 1, backgroundColor: backgroundColor}}>
@ -67,8 +63,8 @@ export default function Page() {
<SearchBar placeholder='Type to Search...'></SearchBar> <SearchBar placeholder='Type to Search...'></SearchBar>
</> </>
} }
renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>} 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.id} keyExtractor={item => item.expense_guid}
ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>} ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
onScroll={handleScroll} onScroll={handleScroll}
scrollEventThrottle={20} scrollEventThrottle={20}

12
app/_layout.tsx
View file

@ -1,8 +1,14 @@
import { Slot } from 'expo-router' import { Slot } from 'expo-router';
import React from 'react' import React, { useEffect } from 'react';
import { AuthProvider } from './contexts/AuthContext' import { initDatabase } from '../services/database';
import { AuthProvider } from './contexts/AuthContext';
export default function _layout() { export default function _layout() {
useEffect(() => {
initDatabase();
}, []);
console.log("layout called") console.log("layout called")
return ( return (
<AuthProvider> <AuthProvider>