Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/nperez0111/bookhive. Track your books, share your shelves, see what others are reading bookhive.buzz
atproto bluesky books bookshelf goodreads management-system
Something went wrong. Try again.
2.7 kB · 97 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798import React from "react";import { View, StyleSheet } from "react-native";import { ThemedText } from "./ThemedText";import { ThemedView } from "./ThemedView";import { Ionicons } from "@expo/vector-icons";import { useThemeColor } from "@/hooks/useThemeColor";import { NetworkErrorView, NetworkError } from "./NetworkErrorView";import { classifyNetworkError } from "@/utils/networkErrorHandler";import { useNetworkStatus } from "@/hooks/useNetworkStatus";
interface QueryErrorHandlerProps { error: any; onRetry?: () => void; onGoBack?: () => void; showRetryButton?: boolean; showGoBackButton?: boolean; fallbackMessage?: string;}
export const QueryErrorHandler: React.FC<QueryErrorHandlerProps> = ({ error, onRetry, onGoBack, showRetryButton = true, showGoBackButton = true, fallbackMessage,}) => { const { isConnected } = useNetworkStatus(); const backgroundColor = useThemeColor({}, "background"); const textColor = useThemeColor({}, "text");
// Classify the error const networkError: NetworkError = error?.networkError || classifyNetworkError(error);
// If we're offline and it's a network error, show offline message if (!isConnected && networkError.type === "network") { return ( <ThemedView style={[styles.container, { backgroundColor }]}> <View style={styles.content}> <Ionicons name="wifi-outline" size={64} color="#FBBF24" /> <ThemedText style={[styles.title, { color: textColor }]}>You're Offline</ThemedText> <ThemedText style={[styles.message, { color: textColor }]}> Please check your internet connection and try again. </ThemedText> {onRetry && ( <ThemedText style={[styles.retryHint, { color: textColor }]}> Pull down to refresh when you're back online. </ThemedText> )} </View> </ThemedView> ); }
// Use the NetworkErrorView for other types of errors return ( <NetworkErrorView error={networkError} onRetry={onRetry} onGoBack={onGoBack} showRetryButton={showRetryButton} showGoBackButton={showGoBackButton} /> );};
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20, }, content: { alignItems: "center", maxWidth: 300, }, title: { fontSize: 24, fontWeight: "bold", marginTop: 16, marginBottom: 8, textAlign: "center", }, message: { fontSize: 16, textAlign: "center", marginBottom: 16, lineHeight: 24, }, retryHint: { fontSize: 14, textAlign: "center", opacity: 0.7, fontStyle: "italic", },});