131 lines
No EOL
5 KiB
TypeScript
131 lines
No EOL
5 KiB
TypeScript
import React, { useRef, useState, useMemo } from 'react';
|
|
import { NativeScrollEvent, NativeSyntheticEvent, StyleSheet, View } from 'react-native';
|
|
import { Calendar } from 'react-native-calendars';
|
|
import { FlatList } from 'react-native-gesture-handler';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { ExpenseItem, LoadingSymbol, Plus, SearchBar, Welcome } from '../../../components';
|
|
import useFetch from '../../../hooks/useFetch';
|
|
|
|
import { addExpense, executeQuery } from "../../../services/database";
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { useRouter } from "expo-router";
|
|
import { SimpleDate } from '../../../util/SimpleDate';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
|
|
|
|
interface MarkingProps {
|
|
dots?:{color:string, selectedColor?:string, key?:string}[];
|
|
}
|
|
|
|
type MarkedDates = {
|
|
[key: string]: MarkingProps;
|
|
}
|
|
|
|
const constructMarkedDates = (data : {[column: string]: any}) => {
|
|
console.log("entered")
|
|
let markedDates: MarkedDates = {};
|
|
data.forEach((value: any) => {
|
|
const dateKey: string = String(value["expense_datetime"]).split(" ")[0]
|
|
|
|
if(markedDates[dateKey] === undefined){
|
|
markedDates[dateKey] = {dots: []}
|
|
}
|
|
markedDates[dateKey].dots?.push({color: value["category_color"]})
|
|
})
|
|
return markedDates;
|
|
}
|
|
|
|
export default function Page() {
|
|
const { colors, theme } = useTheme()
|
|
|
|
|
|
|
|
const router = useRouter();
|
|
const [plusShow, setPlusShow] = useState(true);
|
|
const prevOffset = useRef(0);
|
|
|
|
|
|
const profile = require("../../../assets/images/profile.jpg")
|
|
|
|
const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
|
|
const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
|
|
const isScrollingUp : boolean = currentOffset <= prevOffset.current;
|
|
const isTop : boolean = currentOffset === 0
|
|
prevOffset.current = currentOffset
|
|
setPlusShow(isScrollingUp || isTop)
|
|
}
|
|
|
|
const newExpense = async (title: string, category_guid: string, date: string, amount: number) => {
|
|
try {
|
|
await addExpense(title, category_guid, date, amount);
|
|
} catch (error: any) {
|
|
console.error("Adding new expense has failed: ", error);
|
|
}
|
|
}
|
|
|
|
const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, c.guid AS category_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, c.type AS category_type FROM expense e JOIN category c ON e.category_guid = c.guid;", args: []});
|
|
|
|
const expenseDates = useMemo(()=>
|
|
constructMarkedDates(data)
|
|
, [data])
|
|
|
|
|
|
|
|
return (
|
|
<SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
|
|
{plusShow && <Plus onPress={()=>{
|
|
// router.push("/(tabs)/home/addItem");
|
|
|
|
executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
|
|
if("rows" in result[0]) {
|
|
newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
|
|
reFetch();
|
|
});
|
|
}
|
|
})
|
|
}}/>}
|
|
|
|
{isLoading && <LoadingSymbol/>}
|
|
|
|
<FlatList
|
|
data={data}
|
|
ListHeaderComponent={
|
|
<>
|
|
<Welcome name="My Dude" image={profile} onPress={() => {router.push("/home/userSettings")}}/>
|
|
<Calendar key={theme} maxDate={SimpleDate.now().format("YYYY-MM-DD")} style={{margin: 10, borderRadius: 20, padding:10}} theme={{
|
|
dayTextColor: colors.primaryText,
|
|
textDisabledColor: colors.secondaryText,
|
|
todayTextColor: colors.accentColor,
|
|
calendarBackground: colors.containerColor,
|
|
arrowColor: colors.accentColor,
|
|
monthTextColor: colors.accentColor
|
|
|
|
}}
|
|
markingType='multi-dot'
|
|
markedDates={expenseDates}
|
|
>
|
|
|
|
</Calendar>
|
|
<SearchBar placeholder='Type to Search...'></SearchBar>
|
|
</>
|
|
}
|
|
renderItem = {({item}) => <ExpenseItem category={item.category_name} color={item.category_color} date={item.expense_datetime} title={item.expense_name} value={item.expense_amount}/>}
|
|
keyExtractor={item => item.expense_guid}
|
|
ItemSeparatorComponent={() => {
|
|
return (<View style={styles.itemSeperatorStyle}/>);
|
|
}}
|
|
onScroll={handleScroll}
|
|
scrollEventThrottle={20}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeAreaViewStyle: {
|
|
flex: 1,
|
|
},
|
|
itemSeperatorStyle: {
|
|
marginVertical: 5,
|
|
}
|
|
}); |