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

Major refactoring: navigation does not break anymore. the user can now navigate between the tabs without loosing context

Browse source
This commit is contained in:
Jakob Stornig 2024-01-20 11:54:25 +01:00
parent 457b098883
commit 1beee68bff
23 changed files with 137 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

0
app/(tabs)/budget/_layout.tsx → app/(tabs)/(budget)/_layout.tsx
View file

0
app/(tabs)/budget/addCategory.tsx → app/(tabs)/(budget)/addCategory.tsx
View file

19
app/(tabs)/budget/category.tsx → app/(tabs)/(budget)/category.tsx
View file

@ -6,9 +6,12 @@ import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation } from "expo-router/src/useNavigation";
import { useEffect } from "react";
export default function Page() {
const router = useRouter();
const navigation = useNavigation();
const {colors} = useTheme();
const {category_guid} = useLocalSearchParams();
@ -17,13 +20,21 @@ export default function Page() {
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 = () => {
router.push({pathname: "/budget/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
router.push({pathname: "/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
}
const handleBackButton = () => {
router.back();
}
useEffect(() => {
console.log("useEffect called")
const unsubscribe = navigation.addListener("focus", () => {
reFetch();
})
return unsubscribe;
}, [navigation])
return (
<SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
<TouchableOpacity style={styles.backContainer} onPress={handleBackButton}>
@ -40,7 +51,7 @@ export default function Page() {
<TextInputBar style={styles.searchBar} placeholder="Search..."/>
{isLoading ? (<LoadingSymbol/>) : (
<FlatList
<FlatList style={{marginHorizontal: 10}}
data={data}
renderItem = {({item}) => <ExpenseItem
color={item.category_color}
@ -48,9 +59,9 @@ export default function Page() {
title={item.expense_name}
date={item.expense_datetime}
value={item.expense_amount}
onPress={()=>router.push(`/home/expense/${item.guid}`)}
onPress={()=>router.push(`/expense/${item.expense_guid}`)}
/>}
keyExtractor={item => item.guid}
keyExtractor={item => item.expense_guid}
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperator}/>);
}}

0
app/(tabs)/budget/editCategory.tsx → app/(tabs)/(budget)/editCategory.tsx
View file

13
app/(tabs)/budget/index.tsx → app/(tabs)/(budget)/index.tsx
View file

@ -1,5 +1,5 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
import { router } from 'expo-router';
import { router, useNavigation } from 'expo-router';
import { useEffect, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
@ -11,7 +11,7 @@ import { useTheme } from '../../contexts/ThemeContext';
export default function Page() {
const {colors} = useTheme()
const containerColor = colors.containerColor;
const navigation = useNavigation();
const [selectedPage, setSelectedPage] = useState("noPageLoaded");
useEffect(() => {
@ -27,9 +27,10 @@ export default function Page() {
const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
useEffect(() => {
reFetch();
reFetch()
}, [selectedPage]);
const handlePageSelection = (page: string) => {
if(page !== selectedPage) {
setSelectedPage(page);
@ -38,15 +39,16 @@ export default function Page() {
};
const handleCategoryPress = (item: {[column: string]: any;}) => {
router.push({pathname: "/(tabs)/budget/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
router.push({pathname: "/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
}
return (
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
<View style={{flex: 1, marginHorizontal: 10}}>
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
<Plus onPress={() => {
router.push({pathname: '/(tabs)/budget/addCategory'});
router.push({pathname: '/addCategory'});
}}/>
{isLoading ? (<LoadingSymbol/>) : (
@ -67,6 +69,7 @@ export default function Page() {
}}
/>
)}
</View>
</SafeAreaView>
);
}

3
app/(tabs)/home/_layout.tsx → app/(tabs)/(home)/_layout.tsx
View file

@ -24,9 +24,6 @@ export default function _Layout() {
title: "test",
headerShown: false,
}}/>
<Stack.Screen name="expense" options={{
headerShown: false,
}}/>
<Stack.Screen name="userSettings" options={{
animation: "slide_from_left",
title: "User Settings",

30
app/(tabs)/home/index.tsx → app/(tabs)/(home)/index.tsx
View file

@ -1,4 +1,4 @@
import React, { useMemo, useRef, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
import { Calendar } from 'react-native-calendars';
import { FlatList, RefreshControl } from 'react-native-gesture-handler';
@ -10,6 +10,7 @@ import { useRouter } from "expo-router";
import { addExpense } from "../../../services/database";
import { SimpleDate } from '../../../util/SimpleDate';
import { useTheme } from '../../contexts/ThemeContext';
import { useNavigation } from 'expo-router';
interface MarkingProps {
@ -36,8 +37,7 @@ const constructMarkedDates = (data : {[column: string]: any}) => {
export default function Page() {
const { colors, theme } = useTheme()
const navigation = useNavigation();
const router = useRouter();
const [plusShow, setPlusShow] = useState(true);
const prevOffset = useRef(0);
@ -67,12 +67,19 @@ export default function Page() {
constructMarkedDates(data)
, [data])
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
console.log("focus event triggered")
reFetch();
});
return unsubscribe;
}, [navigation]);
return (
<SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
{plusShow && <Plus onPress={()=>{
router.push("/(tabs)/home/expense/new");
router.push("/expense/new");
// executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
// if("rows" in result[0]) {
@ -89,7 +96,7 @@ export default function Page() {
data={data}
ListHeaderComponent={
<>
<Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}/>
<Welcome name="My Dude" image={profile} onPress={() => {router.push("/userSettings")}}/>
<Calendar key={theme} maxDate={SimpleDate.now().format("YYYY-MM-DD")} style={{borderRadius: 20, padding:10}} theme={{
dayTextColor: colors.primaryText,
textDisabledColor: colors.secondaryText,
@ -107,8 +114,17 @@ export default function Page() {
<TextInputBar placeholder='Type to Search...' style={{marginBottom: 20}}></TextInputBar>
</>
}
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount} guid={item.expense_guid} onPress={(guid) => {router.push(`/(tabs)/home/expense/${guid}`)}}/>}
keyExtractor={item => item.expense_guid}
renderItem = {({item}) =>
<ExpenseItem
category={item.category_name}
color={item.category_color}
date={item.expense_datetime}
title={item.expense_name}
value={item.expense_amount}
guid={item.expense_guid}
onPress={(guid) => {router.push(`/expense/${guid}`)}}
/>}
keyExtractor={item => item.expense_guid }
ItemSeparatorComponent={() => {
return (<View style={styles.itemSeperatorStyle}/>);
}}

0
app/(tabs)/home/userSettings.tsx → app/(tabs)/(home)/userSettings.tsx
View file

0
app/(tabs)/stats/index.tsx → app/(tabs)/(stats)/index.tsx
View file

11
app/(tabs)/_layout.tsx
View file

@ -35,30 +35,25 @@ export default function Layout() {
return (
<Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
<Tabs.Screen name="budget" options={
<Tabs.Screen name="(budget)" options={
{
tabBarLabel: "Budget",
tabBarIcon: ({size, color}) => (
<FontAwesome name="money" size={size} color={color}/>),
unmountOnBlur: true,
href: "(tabs)/budget"
}
}/>
<Tabs.Screen name="home" options={
<Tabs.Screen name="(home)" options={
{
tabBarLabel: "Home",
tabBarIcon: ({size, color}) => (
<FontAwesome name="home" size={size} color={color}/>),
unmountOnBlur: true,
href: "(tabs)/home/"
}
}/>
<Tabs.Screen name="stats/index" options={
<Tabs.Screen name="(stats)/index" options={
{
tabBarLabel: "Stats",
tabBarIcon: ({size, color}) => (
<FontAwesome name="bar-chart" size={size} color={color}/>),
unmountOnBlur: true,
}
}/>
</Tabs>

31
app/_layout.tsx
View file

@ -1,20 +1,37 @@
import { Slot } from 'expo-router';
import { SplashScreen, Stack } from 'expo-router';
import React, { useEffect } from 'react';
import { addCategory, initDatabase } from '../services/database';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { useTheme } from './contexts/ThemeContext';
export default function _layout() {
const {colors} = useTheme();
useEffect(() => {
initDatabase();
}, []);
console.log(colors.backgroundColor)
return (
<AuthProvider>
<ThemeProvider>
<Slot />
</ThemeProvider>
</AuthProvider>
<ThemeProvider>
<AuthProvider>
<Stack
screenOptions={{
headerShown: false,
navigationBarHidden: true,
animation: 'none',
contentStyle: {backgroundColor: colors.backgroundColor}
}}
>
<Stack.Screen name="index"
options={{
contentStyle: {backgroundColor: colors.backgroundColor}
}}/>
</Stack>
</AuthProvider>
</ThemeProvider>
)
}

21
app/(tabs)/home/expense/[expense].tsx → app/expense/[expense].tsx
View file

@ -1,15 +1,15 @@
import { View, Text, Alert, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { router, useLocalSearchParams, useRouter } from 'expo-router'
import useFetch from '../../../../hooks/useFetch';
import { Category, Expense } from '../../../../types/dbItems';
import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../../../components';
import colors from '../../../../constants/colors';
import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../../../services/database';
import { SimpleDate } from '../../../../util/SimpleDate';
import useFetch from '../../hooks/useFetch';
import { Category, Expense } from '../../types/dbItems';
import { CategorySelectorModal, AutoDecimalInput, CategorySelector, TextInputBar, DateSelectorButton, RoundedButton } from '../../components';
import colors from '../../constants/colors';
import { addExpense, deleteExpense, executeQuery, updateExpense } from '../../services/database';
import { SimpleDate } from '../../util/SimpleDate';
import DateTimePicker from '@react-native-community/datetimepicker';
import { SIZES } from '../../../../constants/theme';
import { useTheme } from '../../../contexts/ThemeContext';
import { SIZES } from '../../constants/theme';
import { useTheme } from '../contexts/ThemeContext';
export default function Page() {
const router = useRouter();
@ -25,8 +25,6 @@ export default function Page() {
const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
console.log(router.canGoBack())
useEffect(()=>{
const entry = data[0];
console.log(entry)
@ -69,8 +67,7 @@ export default function Page() {
await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
}
if(validateInput()){
insert();
router.back();
insert().then( () => router.back())
}else {
Alert.alert("Invalid input", "One of the Props is not properly defined")
}

2
app/(tabs)/home/expense/_layout.tsx → app/expense/_layout.tsx
View file

@ -1,7 +1,7 @@
import { StyleSheet, Text, View } from 'react-native'
import { Stack } from 'expo-router'
import React from 'react'
import { useTheme } from '../../../contexts/ThemeContext'
import { useTheme } from '../contexts/ThemeContext'
const _layout = () => {
const {colors} = useTheme();

17
app/(tabs)/home/expense/new.tsx → app/expense/new.tsx
View file

@ -1,12 +1,12 @@
import { View, Text, StyleSheet, Alert } from 'react-native'
import React, { useRef, useState } from 'react'
import { SIZES } from '../../../../constants/theme'
import { useTheme } from '../../../contexts/ThemeContext'
import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../../../components'
import { Category } from '../../../../types/dbItems'
import { SIZES } from '../../constants/theme'
import { useTheme } from '../contexts/ThemeContext'
import { AutoDecimalInput, CategorySelector, CategorySelectorModal, DateSelectorButton, RoundedButton, TextInputBar } from '../../components'
import { Category } from '../../types/dbItems'
import DateTimePicker from '@react-native-community/datetimepicker';
import { addExpense } from '../../../../services/database'
import { SimpleDate } from '../../../../util/SimpleDate'
import { addExpense } from '../../services/database'
import { SimpleDate } from '../../util/SimpleDate'
import { useRouter } from 'expo-router'
export default function AddItem() {
@ -41,8 +41,9 @@ export default function AddItem() {
await addExpense(expenseName, selectedCategory?.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
}
if(validateInput()){
insert();
router.back();
insert().then(() => {
router.back();
})
}else {
Alert.alert("Invalid input", "One of the Props is not properly defined")
}

2
app/index.tsx
View file

@ -7,7 +7,7 @@ export default function index() {
const {authState} = useAuth()
return (
<Redirect href={authState?.authenticated ? "/home/" : "/login"}></Redirect>
<Redirect href={authState?.authenticated ? "/(tabs)/(home)" : "/login"}></Redirect>
)
}

3
components/budget/budgetHeader.tsx
View file

@ -77,12 +77,11 @@ const styles = StyleSheet.create({
containerStyle: {
flexDirection: "row",
justifyContent: "space-evenly",
marginHorizontal: 20,
marginBottom: 20,
marginHorizontal: 10,
marginTop: 10,
},
searchBarStyle: {
marginBottom: 20,
marginHorizontal: 10,
}
});

1
components/common/CustomCard.tsx
View file

@ -40,7 +40,6 @@ export default function CustomCard(props : ViewProps) {
const styles = StyleSheet.create({
container:{
borderRadius: 20,
marginHorizontal: 10,
},
boxShadow: {},
})

6
components/home/addItem/CategorySelector.tsx → components/expense/CategorySelector.tsx
View file

@ -1,8 +1,8 @@
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import React, { useState } from 'react'
import { useTheme } from '../../../app/contexts/ThemeContext'
import { SIZES } from '../../../constants/theme';
import { Category } from '../../../types/dbItems';
import { useTheme } from '../../app/contexts/ThemeContext'
import { SIZES } from '../../constants/theme';
import { Category } from '../../types/dbItems';
import CategorySelectorModal from './CategorySelectorModal';
interface CategorySelectorProps {

12
components/home/addItem/CategorySelectorModal.tsx → components/expense/CategorySelectorModal.tsx
View file

@ -1,11 +1,11 @@
import { Modal, NativeSyntheticEvent, StyleSheet, Text, View, FlatList } from 'react-native'
import React, { useEffect, useMemo, useState } from 'react'
import { Category } from '../../../types/dbItems';
import { useTheme } from '../../../app/contexts/ThemeContext';
import CategoryListItem from '../../common/CategoryListItem';
import { SIZES } from '../../../constants/theme';
import useFetch from '../../../hooks/useFetch';
import TextInputBar from '../../common/TextInputBar';
import { Category } from '../../types/dbItems';
import { useTheme } from '../../app/contexts/ThemeContext';
import CategoryListItem from '../common/CategoryListItem';
import { SIZES } from '../../constants/theme';
import useFetch from '../../hooks/useFetch';
import TextInputBar from '../common/TextInputBar';
interface CategorySelectorModalProps{

6
components/home/addItem/DateSelectorButton.tsx → components/expense/DateSelectorButton.tsx
View file

@ -1,8 +1,8 @@
import { View, Text, StyleSheet, TouchableOpacity, TouchableOpacityProps } from 'react-native'
import React, { useState } from 'react'
import { useTheme } from '../../../app/contexts/ThemeContext';
import { SIZES } from '../../../constants/theme';
import { SimpleDate } from '../../../util/SimpleDate';
import { useTheme } from '../../app/contexts/ThemeContext';
import { SIZES } from '../../constants/theme';
import { SimpleDate } from '../../util/SimpleDate';
import { ViewProps } from 'react-native/Libraries/Components/View/ViewPropTypes';
interface DateSelectorProps extends ViewProps {

6
components/index.tsx
View file

@ -4,9 +4,9 @@ import Welcome from "./home/Welcome"
import ExpenseItem from "./home/expenseItem"
//home/addItem
import CategorySelector from "./home/addItem/CategorySelector"
import CategorySelectorModal from "./home/addItem/CategorySelectorModal"
import DateSelectorButton from "./home/addItem/DateSelectorButton"
import CategorySelector from "./expense/CategorySelector"
import CategorySelectorModal from "./expense/CategorySelectorModal"
import DateSelectorButton from "./expense/DateSelectorButton"
//common
import CustomCard from "./common/CustomCard"

29
hooks/useFetch.ts
View file

@ -4,11 +4,31 @@ import { executeQuery } from "../services/database";
const useFetch = (query: Query) => {
const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState<{[column: string]: any;}[]>([]);
const [isEmptyResult, setIsEmptyResult] = useState<boolean | undefined>(undefined);
const [fetchState, setFetchState] = useState<{
data: {[column: string]: any;}[];
isLoading: boolean;
isEmptyResult: boolean | undefined;
}>({
data: [],
isLoading: false,
isEmptyResult: undefined
});
const setIsLoading = (isLoading: boolean) => {
setFetchState((prevState) => ( {...prevState, isLoading} ));
}
const setData = (data: {[column: string]: any;}[]) => {
setFetchState((prevState) => ( {...prevState, data} ));
}
const setIsEmptyResult = (isEmptyResult: boolean) => {
setFetchState((prevState) => ( {...prevState, isEmptyResult} ));
}
const reFetch = () => {
console.log("refetch called")
setIsLoading(true);
executeQuery(query).then((result) => {
if("rows" in result[0]) {
@ -16,6 +36,7 @@ const useFetch = (query: Query) => {
if(result[0]["rows"].length == 0){
setIsEmptyResult(true);
}
console.log("len", result[0]["rows"].length)
}
}).catch((error: any) => {
console.error("Fetching data from database has failed: ", error);
@ -28,7 +49,7 @@ const useFetch = (query: Query) => {
reFetch();
}, [])
return {data, isLoading, reFetch, isEmptyResult};
return {...fetchState, reFetch};
}
export default useFetch;

3
services/database.ts
View file

@ -57,7 +57,7 @@ export const addCategory = async (name: string, color: string, type: string, all
export const updateExpense = async (guid: string, name: string, category_guid: string, datetime: string, amount: number) => {
//needs user input validation for type and color (should be validated by this function)
console.log("update expense called")
try {
await db.transactionAsync(async (tx) => {
await tx.executeSqlAsync("UPDATE expense SET name = ?, category_guid = ?, datetime = ?, amount = ? WHERE guid = ?", [name, category_guid, datetime, amount, guid]
@ -67,6 +67,7 @@ export const updateExpense = async (guid: string, name: string, category_guid: s
console.log("Error updating expense: ", error);
throw error;
}
console.log("update expense finished")
};
export const addExpense = async (name: string, category_guid: string, datetime: string, amount: number) => {