111 lines
3.1 KiB
TypeScript
111 lines
3.1 KiB
TypeScript
import { Pressable, ScrollView, StyleSheet, View } from 'react-native';
|
|
|
|
import Ionicons from '@expo/vector-icons/Ionicons';
|
|
import { useFocusEffect } from 'expo-router';
|
|
import { navigate } from 'expo-router/build/global-state/routing';
|
|
import React, { useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CategoryItem } from '../../components/categoryItem';
|
|
import { ThemedText } from '../../components/ThemedText';
|
|
import { ThemedView } from '../../components/ThemedView';
|
|
import { Category, CategoryQuery } from '../../models/category';
|
|
import { Task, TaskQuery } from '../../models/task';
|
|
import { CategoryRepository } from '../../repositories/CategoryRepository';
|
|
import { TaskRepository } from '../../repositories/TaskRepository';
|
|
import { SQLiteDataService } from '../../services/data/sqliteDataService';
|
|
|
|
const categoryRepository = new CategoryRepository(new SQLiteDataService<Category>(CategoryQuery));
|
|
const taskRepository = new TaskRepository(new SQLiteDataService<Task>(TaskQuery));
|
|
|
|
export default function CategoryScreen() {
|
|
const { t } = useTranslation();
|
|
|
|
const [categories, setCategories] = useState<Category[]>([]);
|
|
|
|
const RefreshCategories = async () => {
|
|
try {
|
|
const fetchedCategories = await categoryRepository.findAll();
|
|
setCategories(fetchedCategories);
|
|
} catch (error) {
|
|
console.error("Error refreshing categories:", error);
|
|
}
|
|
}
|
|
|
|
//On layout focus to refresh tasks
|
|
useFocusEffect(React.useCallback(() => {
|
|
console.log("focus");
|
|
(async () => {
|
|
await RefreshCategories();
|
|
})();
|
|
}, []));
|
|
|
|
return (
|
|
<ThemedView style={styles.mainContainer}>
|
|
<ThemedView style={styles.headerContainer}>
|
|
<ThemedText type="title" style={{
|
|
color: '#fff',
|
|
}}>
|
|
{t('app_name')}
|
|
</ThemedText>
|
|
<Pressable onPress={() => {
|
|
navigate('../categoryForm', {})
|
|
}}>
|
|
<Ionicons name='add-circle-sharp' size={32} color="#fff" />
|
|
</Pressable>
|
|
</ThemedView>
|
|
<ThemedText style={{ padding: 24 }} type="subtitle">
|
|
{t('your_categories')}
|
|
</ThemedText>
|
|
<ScrollView style={styles.scrollView}>
|
|
{categories.map((cat, index) => (
|
|
<CategoryItem categories={categories} key={index} category={cat} onUpdate={() => {
|
|
RefreshCategories();
|
|
}} />
|
|
))}
|
|
<View style={{ height: 50 }} />
|
|
</ScrollView>
|
|
</ThemedView >
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
mainContainer: {
|
|
flex: 1,
|
|
},
|
|
headerContainer: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: 8,
|
|
paddingHorizontal: 24,
|
|
paddingTop: 50,
|
|
paddingBottom: 18,
|
|
backgroundColor: '#6a254fff',
|
|
},
|
|
scrollView: {
|
|
paddingHorizontal: 24,
|
|
flex: 1,
|
|
},
|
|
stepContainer: {
|
|
gap: 8,
|
|
marginBottom: 8,
|
|
},
|
|
reactLogo: {
|
|
height: 178,
|
|
width: 290,
|
|
bottom: 0,
|
|
left: 0,
|
|
position: 'absolute',
|
|
},
|
|
addButton: {
|
|
backgroundColor: '#b91f7eff',
|
|
height: 50,
|
|
color: '#fff',
|
|
borderRadius: 8,
|
|
padding: 10,
|
|
lineHeight: 30,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}
|
|
});
|