59 lines
No EOL
1.9 KiB
TypeScript
59 lines
No EOL
1.9 KiB
TypeScript
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
import { useEffect, useState } from 'react';
|
|
import { SafeAreaView, StyleSheet, View } from 'react-native';
|
|
import { FlatList } from 'react-native-gesture-handler';
|
|
import { BudgetHeader, LoadingSymbol } from '../../../components';
|
|
import CategoryItem from '../../../components/budget/categoryItem';
|
|
import useFetch from '../../../hooks/useFetch';
|
|
import { useThemeColor } from '../../../hooks/useThemeColor';
|
|
|
|
export default function Page() {
|
|
const containerColor = useThemeColor("containerColor");
|
|
|
|
const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});
|
|
|
|
const [selectedPage, setSelectedPage] = useState("expenses");
|
|
|
|
useEffect(() => {
|
|
const loadSelectedPage = async () => {
|
|
try {
|
|
// const storedPage =
|
|
} catch(error) {
|
|
|
|
} finally {
|
|
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
AsyncStorage.setItem
|
|
|
|
const handlePageSelection = (page: string) => {
|
|
setSelectedPage(page);
|
|
};
|
|
|
|
return (
|
|
<SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
|
|
<BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
|
|
{isLoading && <LoadingSymbol/>}
|
|
|
|
<FlatList
|
|
data={data}
|
|
renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
|
|
keyExtractor={item => item.category_guid}
|
|
ItemSeparatorComponent={() => {
|
|
return (<View style={styles.itemSeperatorStyle}/>);
|
|
}}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
safeAreaViewStyle: {
|
|
flex: 1,
|
|
},
|
|
itemSeperatorStyle: {
|
|
marginVertical: 5,
|
|
},
|
|
}); |