93 lines
2.6 KiB
TypeScript
93 lines
2.6 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 { usePush } from "remix-pwa-monorepo/packages/push/client/hook"
|
|
|
|
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 os = new UAParser(userAgent ?? "").getOS()
|
|
const isSupported =
|
|
os.name !== "iOS" ||
|
|
versionAtLeast(coerceSemver(os.version) ?? "0.0.0", "16.4.0")
|
|
|
|
return json({ isSupported })
|
|
}
|
|
|
|
export default function Index() {
|
|
const { isSupported } = useLoaderData<typeof loader>()
|
|
|
|
return (
|
|
<div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.8" }}>
|
|
<Suspense>
|
|
<LandingMessage isSupported={isSupported} />
|
|
</Suspense>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function LandingMessage({ isSupported }: { isSupported: boolean }) {
|
|
const isClient = typeof window !== "undefined"
|
|
const notificationsEnabled =
|
|
isClient &&
|
|
"Notification" in window &&
|
|
window.Notification.permission === "granted"
|
|
|
|
const isRunningPWA =
|
|
isClient &&
|
|
(("standalone" in navigator && (navigator.standalone as boolean)) ||
|
|
matchMedia("(dislay-mode: standalone)").matches)
|
|
|
|
const [rendered, setRendered] = useState(false)
|
|
const [isInstalled, setIsInstalled] = useState(notificationsEnabled)
|
|
|
|
useEffect(() => {
|
|
setRendered(true)
|
|
}, [])
|
|
|
|
return !isClient || !rendered ? (
|
|
<div>Loading</div>
|
|
) : isInstalled ? (
|
|
<div>Your Notifications</div>
|
|
) : isRunningPWA && !notificationsEnabled ? (
|
|
<EnableButton onSubscribe={() => setIsInstalled(true)} />
|
|
) : isSupported ? (
|
|
<div>Install Tack Up Now!</div>
|
|
) : (
|
|
<div>{"Sorry, your device doesn't support Tack Up Now! :("}</div>
|
|
)
|
|
}
|
|
|
|
function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
|
|
const { subscribeToPush, requestPermission } = usePush()
|
|
|
|
return <button onClick={subscribe}>Enable notifications</button>
|
|
|
|
async function subscribe() {
|
|
console.log("Hey the thing was clicked wow")
|
|
await new Promise((resolve) =>
|
|
window.Notification.requestPermission(resolve)
|
|
)
|
|
subscribeToPush("Derpderp", (subscription) => {
|
|
fetch("/subscribe", {
|
|
method: "POST",
|
|
body: JSON.stringify(subscription),
|
|
})
|
|
onSubscribe()
|
|
})
|
|
}
|
|
}
|