77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
import {
|
|
json,
|
|
type LoaderFunctionArgs,
|
|
type MetaFunction,
|
|
} from "@remix-run/node"
|
|
import { useLoaderData } from "@remix-run/react"
|
|
import React, { Suspense, useEffect, useState } from "react"
|
|
import coerceSemver from "semver/functions/coerce"
|
|
import versionAtLeast from "semver/functions/gte"
|
|
import UAParser from "ua-parser-js"
|
|
import InstallPrompts from "../install/InstallPrompts"
|
|
import useInstallState from "../useInstallState"
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "Tack Up Now!" },
|
|
{ name: "description", content: "Get equinelive notifications" },
|
|
]
|
|
}
|
|
|
|
export const loader = async ({ request }: LoaderFunctionArgs) => {
|
|
const userAgent = request.headers.get("user-agent")
|
|
const parsedUserAgent = new UAParser(userAgent ?? "")
|
|
const os = parsedUserAgent.getOS()
|
|
const isMobileSafari = parsedUserAgent.getBrowser().name !== "Mobile Safari"
|
|
const isSupported =
|
|
os.name !== "iOS" ||
|
|
versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")
|
|
|
|
return json({ isSupported, isMobileSafari })
|
|
}
|
|
|
|
export default function Index() {
|
|
const { isSupported, isMobileSafari } = useLoaderData<typeof loader>()
|
|
|
|
return (
|
|
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
|
|
<Suspense>
|
|
<LandingMessage
|
|
isSupported={isSupported}
|
|
isMobileSafari={isMobileSafari}
|
|
/>
|
|
</Suspense>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LandingMessage({
|
|
isSupported,
|
|
isMobileSafari,
|
|
}: {
|
|
isSupported: boolean
|
|
isMobileSafari: boolean
|
|
}) {
|
|
const { installed } = useInstallState({ isSupported, isMobileSafari })
|
|
|
|
const [rendered, setRendered] = useState(false)
|
|
const [isInstalled, setIsInstalled] = useState(installed)
|
|
|
|
useEffect(() => {
|
|
setRendered(true)
|
|
}, [])
|
|
|
|
return !rendered ? (
|
|
<div>Loading</div>
|
|
) : isInstalled ? (
|
|
<div>Your Notifications</div>
|
|
) : (
|
|
<InstallPrompts
|
|
isMobileSafari={isMobileSafari}
|
|
isSupported={isSupported}
|
|
notificationsEnabled={false}
|
|
onInstallComplete={() => setIsInstalled(true)}
|
|
/>
|
|
)
|
|
}
|