regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make mobile detection work on error pages

Browse Source
This commit is contained in:
regalijan 2023-10-19 16:49:51 -04:00
parent 8b0b3e6178
commit 510c91250e
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/root.tsx
View File

@ -25,17 +25,27 @@ import { LinksFunction } from "@remix-run/cloudflare";
import MobileDetect from "mobile-detect"; import MobileDetect from "mobile-detect";
import Login from "../components/Login.js"; import Login from "../components/Login.js";
import Navigation from "../components/Navigation.js"; import Navigation from "../components/Navigation.js";
import { type ReactNode, StrictMode, useContext, useEffect } from "react"; import { type ReactNode, StrictMode, useContext, useEffect } from "react";
import theme from "../theme.js"; import theme from "../theme.js";
import { withEmotionCache } from "@emotion/react"; 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() { export function ErrorBoundary() {
const error = useRouteError() as ErrorResponse; const error = useRouteError() as ErrorResponse;
const { ch, ua } = JSON.parse(error.data);
const mobile = isMobile(ua, ch);
if (!isRouteErrorResponse(error)) if (!isRouteErrorResponse(error))
return getMarkup( return getMarkup(
{ hide: true }, { hide: true, mobile },
<Container maxW="container.lg" pt="8vh" textAlign="left"> <Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">???</Heading> <Heading size="4xl">???</Heading>
<br /> <br />
@ -59,14 +69,14 @@ export function ErrorBoundary() {
return ""; return "";
case 401: case 401:
return getMarkup({ hide: true }, <Login />); return getMarkup({ hide: true, mobile }, <Login />);
case 403: case 403:
return getMarkup({ hide: true }, <Forbidden />); return getMarkup({ hide: true, mobile }, <Forbidden />);
case 404: case 404:
return getMarkup( return getMarkup(
{ hide: true }, { hide: true, mobile },
<Container maxW="container.lg" pt="8vh" textAlign="left"> <Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">404</Heading> <Heading size="4xl">404</Heading>
<br /> <br />
@ -82,7 +92,7 @@ export function ErrorBoundary() {
default: default:
return getMarkup( return getMarkup(
{ hide: true }, { hide: true, mobile },
<Container maxW="container.lg" pt="8vh" textAlign="left"> <Container maxW="container.lg" pt="8vh" textAlign="left">
<Heading size="4xl">500</Heading> <Heading size="4xl">500</Heading>
<br /> <br />
@ -118,17 +128,10 @@ export async function loader({
if (context.env.DSN) data.dsn = context.env.DSN; if (context.env.DSN) data.dsn = context.env.DSN;
if (context.data.theme) data.theme = context.data.theme; if (context.data.theme) data.theme = context.data.theme;
const isMobileCH = context.request.headers.get("sec-ch-ua-mobile"); data.mobile = isMobile(
context.request.headers.get("user-agent"),
if (isMobileCH) { context.request.headers.get("sec-ch-ua-mobile")
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())}`;
return data; return data;
} }