Remove mobile detection code from root
This commit is contained in:
parent
ce5d7ab6c6
commit
f3d3881985
27
app/root.tsx
27
app/root.tsx
@ -22,30 +22,18 @@ import {
|
|||||||
} from "@remix-run/react";
|
} from "@remix-run/react";
|
||||||
import { type ErrorResponse } from "@remix-run/router";
|
import { type ErrorResponse } from "@remix-run/router";
|
||||||
import { LinksFunction } from "@remix-run/cloudflare";
|
import { LinksFunction } from "@remix-run/cloudflare";
|
||||||
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, mobile },
|
{ hide: true },
|
||||||
<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 />
|
||||||
@ -69,14 +57,14 @@ export function ErrorBoundary() {
|
|||||||
return "";
|
return "";
|
||||||
|
|
||||||
case 401:
|
case 401:
|
||||||
return getMarkup({ hide: true, mobile }, <Login />);
|
return getMarkup({ hide: true }, <Login />);
|
||||||
|
|
||||||
case 403:
|
case 403:
|
||||||
return getMarkup({ hide: true, mobile }, <Forbidden />);
|
return getMarkup({ hide: true }, <Forbidden />);
|
||||||
|
|
||||||
case 404:
|
case 404:
|
||||||
return getMarkup(
|
return getMarkup(
|
||||||
{ hide: true, mobile },
|
{ hide: true },
|
||||||
<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 />
|
||||||
@ -92,7 +80,7 @@ export function ErrorBoundary() {
|
|||||||
|
|
||||||
default:
|
default:
|
||||||
return getMarkup(
|
return getMarkup(
|
||||||
{ hide: true, mobile },
|
{ hide: true },
|
||||||
<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 />
|
||||||
@ -128,11 +116,6 @@ 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;
|
||||||
|
|
||||||
data.mobile = isMobile(
|
|
||||||
context.request.headers.get("user-agent"),
|
|
||||||
context.request.headers.get("sec-ch-ua-mobile")
|
|
||||||
);
|
|
||||||
|
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user