85 lines
2.2 KiB
TypeScript
85 lines
2.2 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"
|
|
import ClientOnly from "../ClientOnly"
|
|
|
|
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")
|
|
|
|
const isIOS = os.name === "iOS"
|
|
|
|
return json({
|
|
isSupported,
|
|
isMobileSafari,
|
|
isIOS,
|
|
})
|
|
}
|
|
|
|
export default function Index() {
|
|
const { isSupported, isMobileSafari, isIOS } = useLoaderData<typeof loader>()
|
|
|
|
return (
|
|
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
|
|
<LandingMessage
|
|
isSupported={isSupported}
|
|
isMobileSafari={isMobileSafari}
|
|
isIOS={isIOS}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LandingMessage({
|
|
isSupported,
|
|
isMobileSafari,
|
|
isIOS,
|
|
}: {
|
|
isSupported: boolean
|
|
isMobileSafari: boolean
|
|
isIOS: boolean
|
|
}) {
|
|
const { installed } = useInstallState({ isSupported, isMobileSafari, isIOS })
|
|
|
|
const [isInstalled, setIsInstalled] = useState(installed)
|
|
|
|
return (
|
|
<ClientOnly fallback={<div>Loading</div>}>
|
|
{() =>
|
|
isInstalled ? (
|
|
<div>Your Notifications</div>
|
|
) : (
|
|
<InstallPrompts
|
|
isMobileSafari={isMobileSafari}
|
|
isSupported={isSupported}
|
|
isIOS={isIOS}
|
|
notificationsEnabled={false}
|
|
onInstallComplete={() => setIsInstalled(true)}
|
|
/>
|
|
)
|
|
}
|
|
</ClientOnly>
|
|
)
|
|
}
|