Refactor frontend-mobile
This commit is contained in:
Antoni Nuñez Romeu
@@ -0,0 +1,284 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert } from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
||||
|
||||
interface NotificationItem {
|
||||
scope: string;
|
||||
id: number;
|
||||
medicine_name?: string;
|
||||
medicine_nregistro?: string;
|
||||
pharmacy_name?: string;
|
||||
pharmacy_id?: number;
|
||||
pharmacy_address?: string;
|
||||
created_at?: string;
|
||||
}
|
||||
|
||||
export default function AlertsScreen() {
|
||||
const [items, setItems] = useState<NotificationItem[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [deletingId, setDeletingId] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
|
||||
async function loadNotifications() {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', { credentials: 'include' });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = await res.json();
|
||||
const merged = [
|
||||
...(data.pharmacy || []),
|
||||
...(data.global || []),
|
||||
].sort((a: NotificationItem, b: NotificationItem) =>
|
||||
(b.created_at || '').localeCompare(a.created_at || '')
|
||||
);
|
||||
setItems(merged);
|
||||
} catch (err: any) {
|
||||
setError(err.message || 'No se pudieron cargar las notificaciones');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(item: NotificationItem) {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
Alert.alert(
|
||||
'Eliminar notificación',
|
||||
`¿Eliminar la notificación de ${item.medicine_name || item.medicine_nregistro}?`,
|
||||
[
|
||||
{ text: 'Cancelar', style: 'cancel' },
|
||||
{
|
||||
text: 'Eliminar',
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
setDeletingId(key);
|
||||
try {
|
||||
const res = await fetch('/api/notifications/mine', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include',
|
||||
body: JSON.stringify({ scope: item.scope, id: item.id }),
|
||||
});
|
||||
if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`);
|
||||
setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
|
||||
} catch (err: any) {
|
||||
Alert.alert('Error', err.message || 'No se pudo eliminar');
|
||||
} finally {
|
||||
setDeletingId(null);
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
function renderItem({ item }: { item: NotificationItem }) {
|
||||
const key = `${item.scope}:${item.id}`;
|
||||
return (
|
||||
<View style={styles.item}>
|
||||
<View style={styles.itemContent}>
|
||||
<Text style={styles.itemName} numberOfLines={2}>
|
||||
{item.medicine_name || item.medicine_nregistro}
|
||||
</Text>
|
||||
<View style={styles.itemMeta}>
|
||||
<View style={styles.chip}>
|
||||
<Ionicons
|
||||
name={item.scope === 'pharmacy' ? 'medical' : 'globe'}
|
||||
size={12}
|
||||
color={colors.primary}
|
||||
/>
|
||||
<Text style={styles.chipText}>
|
||||
{item.scope === 'pharmacy'
|
||||
? item.pharmacy_name || `Farmacia #${item.pharmacy_id}`
|
||||
: 'Cualquier farmacia'}
|
||||
</Text>
|
||||
</View>
|
||||
{item.pharmacy_address && (
|
||||
<Text style={styles.itemAddress} numberOfLines={1}>
|
||||
{item.pharmacy_address}
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={styles.deleteButton}
|
||||
onPress={() => handleDelete(item)}
|
||||
disabled={deletingId === key}
|
||||
>
|
||||
{deletingId === key ? (
|
||||
<Ionicons name="hourglass" size={18} color={colors.danger} />
|
||||
) : (
|
||||
<Ionicons name="trash-outline" size={18} color={colors.danger} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return <LoadingSpinner message="Cargando notificaciones..." />;
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.title}>Notificaciones Guardadas</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
Recibe avisos cuando medicamentos sin stock se repongan
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{error && (
|
||||
<View style={styles.errorContainer}>
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
<TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
|
||||
<Text style={styles.retryText}>Reintentar</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!error && items.length === 0 && (
|
||||
<View style={styles.emptyContainer}>
|
||||
<Ionicons name="notifications-off-outline" size={64} color={colors.border} />
|
||||
<Text style={styles.emptyTitle}>Sin notificaciones</Text>
|
||||
<Text style={styles.emptyText}>
|
||||
Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!error && items.length > 0 && (
|
||||
<FlatList
|
||||
data={items}
|
||||
keyExtractor={(item) => `${item.scope}:${item.id}`}
|
||||
renderItem={renderItem}
|
||||
contentContainerStyle={styles.list}
|
||||
showsVerticalScrollIndicator={false}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
header: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingTop: spacing.lg,
|
||||
paddingBottom: spacing.md,
|
||||
},
|
||||
title: {
|
||||
fontSize: 22,
|
||||
fontWeight: 'bold',
|
||||
color: colors.text,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 14,
|
||||
color: colors.textSecondary,
|
||||
marginTop: spacing.xs,
|
||||
lineHeight: 20,
|
||||
},
|
||||
list: {
|
||||
paddingHorizontal: spacing.lg,
|
||||
paddingBottom: spacing.xl,
|
||||
gap: spacing.sm,
|
||||
},
|
||||
item: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: colors.card,
|
||||
borderRadius: borderRadius.lg,
|
||||
padding: spacing.md,
|
||||
...shadows.card,
|
||||
},
|
||||
itemContent: {
|
||||
flex: 1,
|
||||
gap: spacing.xs,
|
||||
},
|
||||
itemName: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
color: colors.text,
|
||||
lineHeight: 22,
|
||||
},
|
||||
itemMeta: {
|
||||
gap: spacing.xs,
|
||||
},
|
||||
chip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing.xs,
|
||||
backgroundColor: colors.primaryContainer,
|
||||
borderRadius: borderRadius.full,
|
||||
paddingHorizontal: spacing.sm,
|
||||
paddingVertical: 3,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
chipText: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: colors.onPrimaryContainer,
|
||||
},
|
||||
itemAddress: {
|
||||
fontSize: 12,
|
||||
color: colors.textSecondary,
|
||||
},
|
||||
deleteButton: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 18,
|
||||
backgroundColor: colors.dangerContainer,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginLeft: spacing.sm,
|
||||
},
|
||||
errorContainer: {
|
||||
margin: spacing.lg,
|
||||
padding: spacing.md,
|
||||
backgroundColor: colors.dangerContainer,
|
||||
borderRadius: borderRadius.lg,
|
||||
alignItems: 'center',
|
||||
gap: spacing.sm,
|
||||
},
|
||||
errorText: {
|
||||
fontSize: 14,
|
||||
color: colors.danger,
|
||||
textAlign: 'center',
|
||||
},
|
||||
retryButton: {
|
||||
paddingHorizontal: spacing.md,
|
||||
paddingVertical: spacing.xs,
|
||||
},
|
||||
retryText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: colors.primary,
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: spacing.xl,
|
||||
gap: spacing.md,
|
||||
},
|
||||
emptyTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: colors.text,
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 14,
|
||||
color: colors.textSecondary,
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user