Merge branch 'fix-loading-symbol' into 'main'

Fix loading symbol

See merge request thschleicher/interaktive-systeme!49
This commit is contained in:
jastornig 2024-01-05 20:35:22 +00:00
commit 050446f971
7 changed files with 20 additions and 17 deletions

View file

@ -1,6 +1,7 @@
import { router, useLocalSearchParams } from "expo-router";
import { useState } from "react";
import { SafeAreaView, StyleSheet, Text, TextInput, View } from "react-native";
import { StyleSheet, Text, TextInput, View } from "react-native";
import { SafeAreaView } from 'react-native-safe-area-context';
import { AutoDecimalInput, CustomColorPicker, NavigationButton, TypeSelectorSwitch } from "../../../components";
import { addCategory } from "../../../services/database";
import { useTheme } from "../../contexts/ThemeContext";
@ -10,7 +11,7 @@ export default function Page() {
const parameters = useLocalSearchParams();
const [categoryName, setCategoryName] = useState<string>("Enter Category Name...");
const [categoryName, setCategoryName] = useState<string>("");
const [categoryColor, setCategoryColor] = useState<string>('#' + Math.floor(Math.random()*16777215).toString(16));
const [selectedType, setSelectedType] = useState<string>("expense");
const [amount, setAmount] = useState(0);
@ -21,7 +22,7 @@ export default function Page() {
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
<TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
<TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
setCategoryName(newName);
}}/>
</View>

View file

@ -1,11 +1,14 @@
import { FontAwesome } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { useRouter, useLocalSearchParams } from "expo-router";
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { ExpenseItem, LoadingSymbol, TextInputBar } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from "react-native-safe-area-context";
export default function Page() {
const router = useRouter();
const {colors} = useTheme();
const {category_guid} = useLocalSearchParams();
@ -14,7 +17,7 @@ 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: "/(tabs)/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: "/budget/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
}
const handleBackButton = () => {
@ -45,6 +48,7 @@ export default function Page() {
title={item.expense_name}
date={item.expense_datetime}
value={item.expense_amount}
onPress={()=>router.push(`/home/expense/${item.guid}`)}
/>}
keyExtractor={item => item.guid}
ItemSeparatorComponent={() => {

View file

@ -20,7 +20,7 @@ const addCategory = () => {
<View style={[styles.containerStyle, {backgroundColor: colors.containerColor}]}>
<View style={[styles.textInputViewStyle, {backgroundColor: colors.elementDefaultColor}]}>
<TextInput placeholder={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
<TextInput placeholder={"Enter Category Name..."} value={categoryName} placeholderTextColor={colors.secondaryText} style={[styles.textInputStyle, {color: colors.primaryText}]} onChangeText={(newName: string) => {
setCategoryName(newName);
}}/>
</View>

View file

@ -24,7 +24,7 @@ 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 expense e RIGHT JOIN category c ON e.category_guid = c.guid WHERE c.type = ? GROUP BY c.guid", args: selectedPage === "expenses" ? ["expense"] : selectedPage === "savings" ? ["saving"] : []});
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();

View file

@ -1,6 +1,6 @@
import { View, Text, Alert, StyleSheet } from 'react-native'
import React, { useEffect, useState } from 'react'
import { router, useLocalSearchParams } from 'expo-router'
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';
@ -12,6 +12,7 @@ import { SIZES } from '../../../../constants/theme';
import { useTheme } from '../../../contexts/ThemeContext';
export default function Page() {
const router = useRouter();
const {colors} = useTheme();
const {expense} = useLocalSearchParams();
const {data, isEmptyResult} = useFetch({sql: "SELECT e.guid as e_guid, e.name as e_name, e.datetime as e_datetime, e.amount as e_amount, c.guid as c_guid, c.name as c_name, c.color as c_color FROM expense e INNER JOIN category c on e.category_guid = c.guid WHERE e.guid = ?", args: [expense]});
@ -24,6 +25,8 @@ 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)

View file

@ -21,11 +21,12 @@ const _layout = () => {
<Stack.Screen name='new'
options={{
title: "New Expense"
}}
/>
<Stack.Screen name="[expense]"
options={{
headerBackButtonMenuEnabled: true,
headerBackVisible: true,
title: "edit Expense"
}}
getId={(params) => String(Date.now())}

View file

@ -7,11 +7,6 @@ const LoadingSymbol = () => {
const spinValue = useRef(new Animated.Value(0)).current;
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 360],
});
useEffect(() => {
Animated.loop(
Animated.timing(spinValue, {
@ -34,7 +29,6 @@ const LoadingSymbol = () => {
loader: {
width: 100,
height: 100,
transform: [{ rotate: spin + "deg"}],
zIndex: 999,
},
});