137 lines
No EOL
5.2 KiB
TypeScript
137 lines
No EOL
5.2 KiB
TypeScript
import { View, Text, Alert, StyleSheet } from 'react-native'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { router, useLocalSearchParams } 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 DateTimePicker from '@react-native-community/datetimepicker';
|
|
import { SIZES } from '../../../../constants/theme';
|
|
import { useTheme } from '../../../contexts/ThemeContext';
|
|
|
|
export default function Page() {
|
|
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]});
|
|
const [selectedExpense, setSelectedExpense] = useState<Expense|undefined>();
|
|
const [selectedCategory, setSelectedCategory] = useState<Category|undefined>();
|
|
const [formatedValue, setFormatedValue] = useState<string>("");
|
|
const [initialValue, setInitialValue] = useState<number>();
|
|
const [selectorModalVisible, setSelecorModalVisible] = useState<boolean>(false);
|
|
const [expenseName, setExpenseName] = useState<string>("");
|
|
const [datePickerShown, setDatePickerShown] = useState<boolean>(false);
|
|
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
|
|
useEffect(()=>{
|
|
const entry = data[0];
|
|
console.log(entry)
|
|
if(entry){
|
|
console.log(entry)
|
|
const extractedExpense: Expense = {name: entry["e_name"], amount: entry["e_amount"], dateTime: entry["e_datetime"], guid: entry["e_guid"]}
|
|
const extractedCategory: Category = {name: entry["c_name"], color: entry["c_color"], guid: entry["c_guid"]}
|
|
|
|
console.log(extractedCategory.color)
|
|
|
|
setSelectedExpense(extractedExpense);
|
|
setSelectedCategory(extractedCategory);
|
|
setInitialValue(extractedExpense.amount)
|
|
setExpenseName(extractedExpense.name ?? "")
|
|
setSelectedDate(extractedExpense.dateTime? new Date(extractedExpense.dateTime) : new Date());
|
|
}
|
|
|
|
|
|
}, [data])
|
|
|
|
const handleValueChange = (formatedValue: string) => {
|
|
setFormatedValue(formatedValue);
|
|
}
|
|
|
|
const handleCategorySelect = (category : Category) => {
|
|
setSelecorModalVisible(false);
|
|
setSelectedCategory(category);
|
|
}
|
|
|
|
const validateInput = ():boolean => {
|
|
if(formatedValue == "" || expenseName == "" || selectedCategory === undefined || selectedDate === null){
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
const submit = () => {
|
|
console.log(selectedExpense?.guid)
|
|
const insert = async () => {
|
|
await updateExpense(selectedExpense!.guid!, expenseName, selectedCategory!.guid!, new SimpleDate(selectedDate).format("YYYY-MM-DD"), Number(formatedValue))
|
|
}
|
|
if(validateInput()){
|
|
insert();
|
|
router.back();
|
|
}else {
|
|
Alert.alert("Invalid input", "One of the Props is not properly defined")
|
|
}
|
|
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
const del = async () => {
|
|
await deleteExpense(selectedExpense!.guid!)
|
|
router.back();
|
|
}
|
|
del();
|
|
}
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<CategorySelectorModal visible={selectorModalVisible} onRequestClose={()=>{setSelecorModalVisible(false)}} onCategoryTap={handleCategorySelect}></CategorySelectorModal>
|
|
<AutoDecimalInput onValueChange={handleValueChange} label='Amount' initialValue={initialValue}/>
|
|
<CategorySelector onPress={()=>{setSelecorModalVisible(true)}} selectedCategory={selectedCategory}/>
|
|
<TextInputBar placeholder='Name' onChangeText={(text)=>setExpenseName(text)} value={expenseName}/>
|
|
<DateSelectorButton selectedDate={selectedDate} onPress={()=>{setDatePickerShown(true)}}/>
|
|
{datePickerShown &&
|
|
<DateTimePicker
|
|
value={new Date()}
|
|
maximumDate={new Date()}
|
|
|
|
onChange={(event, date)=>{
|
|
setDatePickerShown(false);
|
|
if(date){
|
|
setSelectedDate(date);
|
|
}
|
|
}}
|
|
/>}
|
|
<RoundedButton color={colors.elementDefaultColor} style={{padding: 10, marginTop: 40}} onPress={handleDelete}>
|
|
<Text style={[styles.submitText, {color: colors.primaryText}]}>Delete Expense</Text>
|
|
</RoundedButton>
|
|
<RoundedButton color={colors.accentColor} style={styles.save} onPress={submit}>
|
|
<Text style={[styles.submitText, {color: colors.primaryText}]}>Save</Text>
|
|
</RoundedButton>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
notFound: {
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
|
|
notFoundMessageContainer: {
|
|
backgroundColor: "#e37b7b",
|
|
padding: 50,
|
|
},
|
|
save: {
|
|
padding: 10,
|
|
},
|
|
container: {
|
|
margin: SIZES.normal,
|
|
display: "flex",
|
|
gap: 10
|
|
},
|
|
|
|
submitText: {
|
|
fontSize: SIZES.large
|
|
}
|
|
|
|
}) |