diff --git a/front/apps/mobile/app/(app)/_layout.tsx b/front/apps/mobile/app/(app)/_layout.tsx index 36927789..b5c38565 100644 --- a/front/apps/mobile/app/(app)/_layout.tsx +++ b/front/apps/mobile/app/(app)/_layout.tsx @@ -21,6 +21,7 @@ import { ConnectionErrorContext, useAccount } from "@kyoo/models"; import { CircularProgress } from "@kyoo/primitives"; import { NavbarRight, NavbarTitle } from "@kyoo/ui"; +import { useNetInfo } from "@react-native-community/netinfo"; import { Redirect, SplashScreen, Stack } from "expo-router"; import { useContext, useEffect } from "react"; import { useSafeAreaInsets } from "react-native-safe-area-context"; @@ -32,13 +33,14 @@ export default function SignGuard() { // TODO: support guest accounts on mobile too. const account = useAccount(); const { loading, error } = useContext(ConnectionErrorContext); + const netInfo = useNetInfo(); useEffect(() => { if (!loading) SplashScreen.hideAsync(); }, [loading]); if (loading) return ; - if (error) return ; + if (error && netInfo.isConnected) return ; if (!account) return ; return ( ( }): JSX.Element | null => { const { numColumns, size, gap } = useBreakpointMap(layout); const oldItems = useRef(); - let { items, error, fetchNextPage, isFetching, refetch, isRefetching } = query; + let { items, isPaused, error, fetchNextPage, isFetching, refetch, isRefetching } = query; if (incremental && items) oldItems.current = items; if (error) return ; + if (isPaused) return if (empty && items && items.length === 0) { if (typeof empty !== "string") return addHeader(Header, empty, headerProps); return addHeader(Header, , headerProps); diff --git a/front/packages/ui/src/fetch.tsx b/front/packages/ui/src/fetch.tsx index bd79d6f8..746aff94 100644 --- a/front/packages/ui/src/fetch.tsx +++ b/front/packages/ui/src/fetch.tsx @@ -21,6 +21,7 @@ import { Page, QueryIdentifier, useFetch, KyooErrors } from "@kyoo/models"; import { Breakpoint, P } from "@kyoo/primitives"; import { ComponentType, ReactElement, isValidElement } from "react"; +import { useTranslation } from "react-i18next"; import { View } from "react-native"; import { useYoshiki } from "yoshiki/native"; @@ -43,7 +44,7 @@ export type WithError = const isPage = (obj: unknown): obj is Page => (typeof obj === "object" && obj && "items" in obj) || false; -export const FetchNE = ({ +export const Fetch = ({ query, placeholderCount = 1, children, @@ -57,10 +58,10 @@ export const FetchNE = ({ i: number, ) => JSX.Element | null; }): JSX.Element | null => { - const { data, error } = useFetch(query); + const { data, isPaused, error } = useFetch(query); - // @ts-ignore - if (error) return children({ isError: true, error }, 0); + if (error) return ; + if (isPaused) return ; if (!data) { const placeholders = [...Array(placeholderCount)].map((_, i) => children({ isLoading: true } as any, i), @@ -72,24 +73,21 @@ export const FetchNE = ({ return <>{data.items.map((item, i) => children({ ...item, isLoading: false } as any, i))}; }; -export const Fetch = ({ - children, - ...params -}: { - query: QueryIdentifier; - placeholderCount?: number; - children: ( - item: Data extends Page ? WithLoading : WithLoading, - i: number, - ) => JSX.Element | null; -}): JSX.Element | null => { +export const OfflineView = () => { + const { css } = useYoshiki(); + const { t } = useTranslation(); + return ( - - {({ isError, error, ...item }, i) => - // @ts-ignore - isError ? : children(item, i) - } - + +

theme.colors.white })}>{t("errors.offline")}

+
); }; diff --git a/front/translations/en.json b/front/translations/en.json index 134d2080..f796d11d 100644 --- a/front/translations/en.json +++ b/front/translations/en.json @@ -121,6 +121,7 @@ "connection-tips": "Troublshotting tips:\n - Are you connected to internet?\n - Is your kyoo's server online?\n - Have your account been banned?", "unknown": "Unknown error", "try-again": "Try again", - "re-login": "Re login" + "re-login": "Re login", + "offline": "You are not connected to internet. Try again later." } } diff --git a/front/translations/fr.json b/front/translations/fr.json index 15a87852..04e55383 100644 --- a/front/translations/fr.json +++ b/front/translations/fr.json @@ -121,6 +121,7 @@ "connection-tips": "Possible causes:\n - Etes-vous connecté a internet ?\n - Votre serveur kyoo est-il allumé ?\n - Votre compte est-il bannis ?", "unknown": "Erreur inconnue", "try-again": "Réessayer", - "re-login": "Se reconnecter" + "re-login": "Se reconnecter", + "offline": "Vous n'êtes pas connecté à Internet. Réessayez plus tard." } }