Deduplicate connection error handling in automation screen

This commit is contained in:
2026-05-13 11:39:48 +02:00
parent f3fa22729c
commit b27a660eef

View File

@@ -71,43 +71,6 @@ export default function AutomationScreen() {
return <LoadingScreen />; return <LoadingScreen />;
} }
// TODO: Remove duplicated code
if (!connectionStatus.success) {
return (
<View className="flex-1 bg-gray-50">
<View className="bg-white shadow-sm border-b border-gray-100">
<SafeAreaView edges={['top']} className='pt-5'>
<View className="flex-row justify-between items-center px-6 pb-6">
<View>
<Text className="text-3xl font-bold text-gray-800 mb-1">Domotica</Text>
<Text className="text-base text-gray-500">Controlla gli ambienti</Text>
</View>
<View className={`px-4 py-2 rounded-xl border ${connectionStatus.success ? 'bg-green-100 border-green-200' : 'bg-red-100 border-red-200'}`}>
<Text className={`text-xs font-bold tracking-wide ${connectionStatus.success ? 'text-green-700' : 'text-red-700'}`}>
{connectionStatus.success ? 'ONLINE' : 'OFFLINE'}
</Text>
</View>
</View>
</SafeAreaView>
</View>
<ScrollView
contentContainerClassName="flex-grow items-center justify-center pb-[100px]"
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />}
>
<WifiOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-lg text-gray-500 font-medium mt-4">Errore di connessione</Text>
<Text className="text-center text-gray-400 mt-2 px-10">
{connectionStatus.message}
</Text>
<TouchableOpacity onPress={onRefresh} className="mt-6 bg-[#099499] px-6 py-3 rounded-lg active:scale-95">
<Text className="text-white font-bold">Riprova</Text>
</TouchableOpacity>
</ScrollView>
</View>
);
}
return ( return (
<View className="flex-1 bg-gray-50"> <View className="flex-1 bg-gray-50">
<View className="bg-white shadow-sm border-b border-gray-100"> <View className="bg-white shadow-sm border-b border-gray-100">
@@ -140,11 +103,22 @@ export default function AutomationScreen() {
</View> </View>
<ScrollView <ScrollView
contentContainerClassName="p-5" contentContainerClassName={connectionStatus.success ? 'p-5' : 'flex-grow items-center justify-center pb-[100px]'}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} colors={['#099499']} tintColor={'#099499'} />}
> >
{filteredAreas.length > 0 ? ( {!connectionStatus.success ? (
<>
<WifiOff size={48} color="#9ca3af" pointerEvents="none" />
<Text className="text-lg text-gray-500 font-medium mt-4">Errore di connessione</Text>
<Text className="text-center text-gray-400 mt-2 px-10">
{connectionStatus.message}
</Text>
<TouchableOpacity onPress={onRefresh} className="mt-6 bg-[#099499] px-6 py-3 rounded-lg active:scale-95">
<Text className="text-white font-bold">Riprova</Text>
</TouchableOpacity>
</>
) : filteredAreas.length > 0 ? (
<View className="flex-row flex-wrap justify-between"> <View className="flex-row flex-wrap justify-between">
{filteredAreas.map((area, index) => { {filteredAreas.map((area, index) => {
const { icon: IconComponent, bgColor } = AREA_STYLES[index % AREA_STYLES.length]; const { icon: IconComponent, bgColor } = AREA_STYLES[index % AREA_STYLES.length];