Improve navigation and replace ScrollView with FlatList in Journal
This commit is contained in:
@@ -2,14 +2,13 @@ import { useAlert } from '@/components/AlertComponent';
|
||||
import LoadingScreen from '@/components/LoadingScreen';
|
||||
import api from '@/utils/api';
|
||||
import { ImageIcon, Plus, Filter, Newspaper } from 'lucide-react-native';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { RefreshControl, ScrollView, Text, TouchableOpacity, View } from 'react-native';
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import { FlatList, RefreshControl, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import FilterModal from '@/components/FilterModal';
|
||||
import { Place } from '@/types/types';
|
||||
import { useRouter, useFocusEffect } from 'expo-router';
|
||||
import { StatusBar } from 'expo-status-bar';
|
||||
import { useCallback } from 'react';
|
||||
|
||||
export default function JournalScreen() {
|
||||
const router = useRouter();
|
||||
@@ -86,6 +85,10 @@ export default function JournalScreen() {
|
||||
setShowFilterModal(false);
|
||||
};
|
||||
|
||||
const handleJournalPress = useCallback((id: number) => {
|
||||
router.push(`/journal/${id}`);
|
||||
}, [router]);
|
||||
|
||||
if (isLoading && !refreshing) {
|
||||
return <LoadingScreen />;
|
||||
}
|
||||
@@ -108,57 +111,61 @@ export default function JournalScreen() {
|
||||
|
||||
<View className="flex-1 bg-gray-50 rounded-t-[2.5rem] overflow-hidden">
|
||||
{/* List */}
|
||||
<ScrollView
|
||||
contentContainerStyle={{ padding: 20, paddingBottom: 180 }}
|
||||
<FlatList
|
||||
data={updates}
|
||||
keyExtractor={(item) => (item.id ? item.id.toString() : Math.random().toString())}
|
||||
className="flex-1"
|
||||
contentContainerStyle={{ padding: 20, paddingBottom: 180, gap: 16 }}
|
||||
showsVerticalScrollIndicator={false}
|
||||
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#1071C2']} />}
|
||||
>
|
||||
{updates.length === 0 ? (
|
||||
initialNumToRender={8}
|
||||
maxToRenderPerBatch={10}
|
||||
windowSize={5}
|
||||
renderItem={({ item }) => (
|
||||
<View className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100">
|
||||
<View className="mb-3">
|
||||
<Text className="font-bold text-[#082963] text-lg uppercase tracking-wide leading-tight">
|
||||
{item.place_name}
|
||||
</Text>
|
||||
<Text className="text-gray-500 text-sm font-medium mt-1">
|
||||
{item.place_address}
|
||||
</Text>
|
||||
{item.description ? (
|
||||
<Text className="text-gray-400 text-base leading-relaxed mt-1">
|
||||
{item.description}
|
||||
</Text>
|
||||
) : null}
|
||||
</View>
|
||||
|
||||
<View className="flex-row items-center justify-between border-t border-gray-50 pt-4">
|
||||
<View className="flex-row items-center gap-4">
|
||||
<View className="bg-blue-50 p-3 rounded-2xl">
|
||||
<ImageIcon size={24} color="#082963" />
|
||||
</View>
|
||||
<View>
|
||||
<Text className="font-bold text-primary text-lg">
|
||||
{item.n_files} File Inviati
|
||||
</Text>
|
||||
<Text className="text-gray-400 font-bold text-sm mt-0.5">{item.date}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{item.n_files > 0 && (
|
||||
<TouchableOpacity
|
||||
className="bg-gray-100 px-4 py-2 rounded-xl active:bg-gray-200"
|
||||
onPress={() => handleJournalPress(item.id)}
|
||||
>
|
||||
<Text className="text-gray-600 font-bold text-sm">Vedi</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
ListEmptyComponent={
|
||||
<View className="bg-white p-8 rounded-3xl border border-gray-100 items-center justify-center border-dashed mt-4">
|
||||
<Text className="text-gray-400 font-medium text-center">Nessun invio registrato al giornale di cantiere</Text>
|
||||
</View>
|
||||
) : (
|
||||
<View className="gap-4">
|
||||
{updates.map((item, index) => (
|
||||
<View key={index} className="bg-white p-5 rounded-3xl shadow-sm border border-gray-100">
|
||||
<View className="mb-3">
|
||||
<Text className="font-bold text-[#082963] text-lg uppercase tracking-wide leading-tight">
|
||||
{item.place_name}
|
||||
</Text>
|
||||
<Text className="text-gray-500 text-sm font-medium mt-1">
|
||||
{item.place_address}
|
||||
</Text>
|
||||
<Text className="text-gray-400 text-base leading-relaxed mt-1">
|
||||
{item.description}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex-row items-center justify-between border-t border-gray-50 pt-4">
|
||||
<View className="flex-row items-center gap-4">
|
||||
<View className="bg-blue-50 p-3 rounded-2xl">
|
||||
<ImageIcon size={24} color="#082963" />
|
||||
</View>
|
||||
<View>
|
||||
<Text className="font-bold text-primary text-lg">
|
||||
{item.n_files} File Inviati
|
||||
</Text>
|
||||
<Text className="text-gray-400 font-bold text-sm mt-0.5">{item.date}</Text>
|
||||
</View>
|
||||
</View>
|
||||
{item.n_files > 0 && (
|
||||
<TouchableOpacity
|
||||
className="bg-gray-100 px-4 py-2 rounded-xl active:bg-gray-200"
|
||||
onPress={() => router.push(`/journal/${item.id}`)}
|
||||
>
|
||||
<Text className="text-gray-600 font-bold text-sm">Vedi</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* FAB Add Journal */}
|
||||
<TouchableOpacity
|
||||
|
||||
Reference in New Issue
Block a user