Merge branch '63-routing-back-refresh' into 'main'
Resolve "Routing Back Refresh" Closes #63 See merge request thschleicher/interaktive-systeme!54
This commit is contained in:
commit
79405f318d
5 changed files with 16 additions and 9 deletions
|
|
@ -51,8 +51,7 @@ export default function Page() {
|
||||||
router.back();
|
router.back();
|
||||||
}}/>
|
}}/>
|
||||||
<NavigationButton text="Save" onPress={() => {
|
<NavigationButton text="Save" onPress={() => {
|
||||||
addCategory(categoryName, categoryColor, selectedType, amount);
|
addCategory(categoryName, categoryColor, selectedType, amount).then(() => router.back());
|
||||||
router.back();
|
|
||||||
}}/>
|
}}/>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
import { router, useNavigation } from 'expo-router';
|
import { router, useNavigation } from 'expo-router';
|
||||||
import { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { StyleSheet, View } from 'react-native';
|
import { StyleSheet, View } from 'react-native';
|
||||||
import { FlatList } from 'react-native-gesture-handler';
|
import { FlatList } from 'react-native-gesture-handler';
|
||||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||||
import { BudgetHeader, CategoryItem, LoadingSymbol, Plus } from '../../../components';
|
import { BudgetHeader, CategoryItem, LoadingSymbol, Plus } from '../../../components';
|
||||||
import useFetch from '../../../hooks/useFetch';
|
import useFetch from '../../../hooks/useFetch';
|
||||||
import { useTheme } from '../../contexts/ThemeContext';
|
import { useTheme } from '../../contexts/ThemeContext';
|
||||||
|
import { useFocusEffect } from 'expo-router/src/useFocusEffect';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const {colors} = useTheme()
|
const {colors} = useTheme()
|
||||||
|
|
@ -30,6 +31,14 @@ export default function Page() {
|
||||||
reFetch()
|
reFetch()
|
||||||
}, [selectedPage]);
|
}, [selectedPage]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const unsubscribe = navigation.addListener("focus", () => {
|
||||||
|
reFetch();
|
||||||
|
})
|
||||||
|
return unsubscribe;
|
||||||
|
|
||||||
|
}, [navigation])
|
||||||
|
|
||||||
|
|
||||||
const handlePageSelection = (page: string) => {
|
const handlePageSelection = (page: string) => {
|
||||||
if(page !== selectedPage) {
|
if(page !== selectedPage) {
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@ export default function Layout() {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
|
<Tabs sceneContainerStyle={styles.sceneContainer} backBehavior="initialRoute" initialRouteName="(home)" screenOptions={screenOptions}>
|
||||||
<Tabs.Screen name="(budget)" options={
|
<Tabs.Screen name="(budget)" options={
|
||||||
{
|
{
|
||||||
tabBarLabel: "Budget",
|
tabBarLabel: "Budget",
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ColorValue, StyleSheet, Text, View } from 'react-native';
|
import { ColorValue, StyleSheet, Text, View } from 'react-native';
|
||||||
|
import { TouchableOpacity } from 'react-native-gesture-handler';
|
||||||
|
import { useTheme } from '../../app/contexts/ThemeContext';
|
||||||
import { SIZES } from '../../constants/theme';
|
import { SIZES } from '../../constants/theme';
|
||||||
import CustomCard from "../common/CustomCard";
|
import CustomCard from "../common/CustomCard";
|
||||||
import { useTheme } from '../../app/contexts/ThemeContext';
|
|
||||||
import { TouchableOpacity } from 'react-native-gesture-handler';
|
|
||||||
|
|
||||||
//export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
|
//export type ExpenseItemProps = {color: ColorValue, category: string, title: string, date: string, value : string}
|
||||||
interface ExpenseItemProps {
|
interface ExpenseItemProps {
|
||||||
|
|
@ -44,9 +44,10 @@ export default function ExpenseItem(itemProps : ExpenseItemProps) {
|
||||||
</View>
|
</View>
|
||||||
<View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
|
<View style={[styles.valueSection, {backgroundColor: colors.backgroundColor}]}>
|
||||||
<Text style={{
|
<Text style={{
|
||||||
|
paddingRight: 10,
|
||||||
fontSize: SIZES.xxLarge,
|
fontSize: SIZES.xxLarge,
|
||||||
color: colors.primaryText
|
color: colors.primaryText
|
||||||
}} numberOfLines={1}>{itemProps.value}</Text>
|
}} numberOfLines={1}>{itemProps.value + " €"}</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
|
||||||
|
|
@ -28,7 +28,6 @@ const useFetch = (query: Query) => {
|
||||||
|
|
||||||
|
|
||||||
const reFetch = () => {
|
const reFetch = () => {
|
||||||
console.log("refetch called")
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
executeQuery(query).then((result) => {
|
executeQuery(query).then((result) => {
|
||||||
if("rows" in result[0]) {
|
if("rows" in result[0]) {
|
||||||
|
|
@ -36,7 +35,6 @@ const useFetch = (query: Query) => {
|
||||||
if(result[0]["rows"].length == 0){
|
if(result[0]["rows"].length == 0){
|
||||||
setIsEmptyResult(true);
|
setIsEmptyResult(true);
|
||||||
}
|
}
|
||||||
console.log("len", result[0]["rows"].length)
|
|
||||||
}
|
}
|
||||||
}).catch((error: any) => {
|
}).catch((error: any) => {
|
||||||
console.error("Fetching data from database has failed: ", error);
|
console.error("Fetching data from database has failed: ", error);
|
||||||
|
|
|
||||||
Reference in a new issue