83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import {
|
|
json,
|
|
type LoaderFunctionArgs,
|
|
type MetaFunction,
|
|
} from "@remix-run/node"
|
|
import { useLoaderData } from "@remix-run/react"
|
|
import React, { 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" }}>
|
|
<LandingMessage isSupported={isSupported} />
|
|
</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 [isInstalled, setIsInstalled] = useState(notificationsEnabled)
|
|
|
|
return !isClient ? (
|
|
<div>Loading</div>
|
|
) : isInstalled ? (
|
|
<div>Your Notifications</div>
|
|
) : isRunningPWA && !notificationsEnabled ? (
|
|
<EnableButton onSubscribe={() => setIsInstalled(true)} />
|
|
) : isSupported ? (
|
|
"Install Tack Up Now!"
|
|
) : (
|
|
"Sorry, your device doesn't support Tack Up Now! :("
|
|
)
|
|
}
|
|
|
|
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")
|
|
subscribeToPush("Derpderp", (subscription) => {
|
|
fetch("/subscribe", {
|
|
method: "POST",
|
|
body: JSON.stringify(subscription),
|
|
})
|
|
onSubscribe()
|
|
})
|
|
}
|
|
}
|