diff --git a/app/root.tsx b/app/root.tsx index 6884389..5f7950b 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -25,17 +25,27 @@ import { LinksFunction } from "@remix-run/cloudflare"; import MobileDetect from "mobile-detect"; import Login from "../components/Login.js"; import Navigation from "../components/Navigation.js"; - import { type ReactNode, StrictMode, useContext, useEffect } from "react"; import theme from "../theme.js"; import { withEmotionCache } from "@emotion/react"; +function isMobile(ua: string | null, secChIsMobile: string | null): string { + if (secChIsMobile && ["?0", "?1"].includes(secChIsMobile)) + return secChIsMobile; + + if (ua) return `?${Number(new MobileDetect(ua).mobile())}`; + + return "?0"; +} + export function ErrorBoundary() { const error = useRouteError() as ErrorResponse; + const { ch, ua } = JSON.parse(error.data); + const mobile = isMobile(ua, ch); if (!isRouteErrorResponse(error)) return getMarkup( - { hide: true }, + { hide: true, mobile }, ???
@@ -59,14 +69,14 @@ export function ErrorBoundary() { return ""; case 401: - return getMarkup({ hide: true }, ); + return getMarkup({ hide: true, mobile }, ); case 403: - return getMarkup({ hide: true }, ); + return getMarkup({ hide: true, mobile }, ); case 404: return getMarkup( - { hide: true }, + { hide: true, mobile }, 404
@@ -82,7 +92,7 @@ export function ErrorBoundary() { default: return getMarkup( - { hide: true }, + { hide: true, mobile }, 500
@@ -118,17 +128,10 @@ export async function loader({ if (context.env.DSN) data.dsn = context.env.DSN; if (context.data.theme) data.theme = context.data.theme; - const isMobileCH = context.request.headers.get("sec-ch-ua-mobile"); - - if (isMobileCH) { - data.mobile = isMobileCH; - return data; - } - - const ua = context.request.headers.get("user-agent"); - - if (!ua) data.mobile = "?0"; - else data.mobile = `?${Number(new MobileDetect(ua).mobile())}`; + data.mobile = isMobile( + context.request.headers.get("user-agent"), + context.request.headers.get("sec-ch-ua-mobile") + ); return data; }