Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Make mobile detection work on error pages
  • Loading branch information
regalijan committed Oct 19, 2023
1 parent 8b0b3e6 commit 510c912
Showing 1 changed file with 20 additions and 17 deletions.
37 changes: 20 additions & 17 deletions app/root.tsx
Expand Up @@ -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 },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">???</Heading>
<br />
Expand All @@ -59,14 +69,14 @@ export function ErrorBoundary() {
return "";

case 401:
return getMarkup({ hide: true }, <Login />);
return getMarkup({ hide: true, mobile }, <Login />);

case 403:
return getMarkup({ hide: true }, <Forbidden />);
return getMarkup({ hide: true, mobile }, <Forbidden />);

case 404:
return getMarkup(
{ hide: true },
{ hide: true, mobile },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">404</Heading>
<br />
Expand All @@ -82,7 +92,7 @@ export function ErrorBoundary() {

default:
return getMarkup(
{ hide: true },
{ hide: true, mobile },
<Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">500</Heading>
<br />
Expand Down Expand Up @@ -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;
}
Expand Down

0 comments on commit 510c912

Please sign in to comment.