81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
|
/**
|
||
|
|
* Revisión del outbox: operaciones en conflicto o con error. Permite reintentar
|
||
|
|
* (volver a encolar) o descartar. Los conflictos muestran el valor del servidor.
|
||
|
|
*/
|
||
|
|
import { useFocusEffect } from '@react-navigation/native';
|
||
|
|
import React, { useCallback, useState } from 'react';
|
||
|
|
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
||
|
|
import { discardOp, getProblemOps, ProblemOp, retryOp } from '../db/outbox';
|
||
|
|
import { Badge, Card, COLORS, EmptyState, PrimaryButton } from '../ui/components';
|
||
|
|
|
||
|
|
export function OutboxScreen() {
|
||
|
|
const [ops, setOps] = useState<ProblemOp[]>([]);
|
||
|
|
|
||
|
|
const load = useCallback(() => {
|
||
|
|
void getProblemOps().then(setOps);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useFocusEffect(load);
|
||
|
|
|
||
|
|
const onRetry = useCallback(
|
||
|
|
async (uuid: string) => {
|
||
|
|
await retryOp(uuid);
|
||
|
|
load();
|
||
|
|
},
|
||
|
|
[load],
|
||
|
|
);
|
||
|
|
const onDiscard = useCallback(
|
||
|
|
async (uuid: string) => {
|
||
|
|
await discardOp(uuid);
|
||
|
|
load();
|
||
|
|
},
|
||
|
|
[load],
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ScrollView contentContainerStyle={styles.body}>
|
||
|
|
{ops.length === 0 && <EmptyState text="Nada pendiente de revisión." />}
|
||
|
|
{ops.map((o) => (
|
||
|
|
<Card key={o.uuid} style={styles.card}>
|
||
|
|
<View style={styles.headerRow}>
|
||
|
|
<Text style={styles.entity}>
|
||
|
|
{o.entity}.{o.op}
|
||
|
|
</Text>
|
||
|
|
<Badge
|
||
|
|
label={o.status}
|
||
|
|
color={o.status === 'conflict' ? COLORS.warn : COLORS.danger}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
{o.error ? <Text style={styles.error}>{o.error}</Text> : null}
|
||
|
|
{o.server_payload ? (
|
||
|
|
<Text style={styles.mono} numberOfLines={6}>
|
||
|
|
Servidor: {o.server_payload}
|
||
|
|
</Text>
|
||
|
|
) : null}
|
||
|
|
<Text style={styles.mono} numberOfLines={6}>
|
||
|
|
Local: {o.data}
|
||
|
|
</Text>
|
||
|
|
<View style={styles.actions}>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<PrimaryButton title="Reintentar" variant="ghost" onPress={() => void onRetry(o.uuid)} />
|
||
|
|
</View>
|
||
|
|
<View style={{ flex: 1 }}>
|
||
|
|
<PrimaryButton title="Descartar" variant="danger" onPress={() => void onDiscard(o.uuid)} />
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Card>
|
||
|
|
))}
|
||
|
|
</ScrollView>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
body: { padding: 16, gap: 12 },
|
||
|
|
card: { gap: 8 },
|
||
|
|
headerRow: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
|
||
|
|
entity: { fontSize: 15, fontWeight: '700' },
|
||
|
|
error: { color: COLORS.danger, fontSize: 13 },
|
||
|
|
mono: { fontSize: 12, color: COLORS.muted, fontFamily: 'monospace' },
|
||
|
|
actions: { flexDirection: 'row', gap: 8, marginTop: 4 },
|
||
|
|
});
|