WIP, mostly just noodling

api/app.ts

@@ -8,7 +8,7 @@ app.use(express.json())
 
 app.get("/api", (req, res) => res.send("HI"))
 
-app.post("/api/subscription", postSubscription)
+app.post("/api/subscription/", postSubscription)
 app.put("/api/subscription/:id/", putSubscription)
 
 export default app

api/subscriptionEndpoints.test.ts

@@ -21,10 +21,6 @@ describe("/api/subscription", () => {
     mockedCreateSubscription.mockImplementation((subscription) =>
       Promise.resolve({ id: 40, subscription })
     )
-
-    mockedUpdateSubscription.mockImplementation((subscription, id) =>
-      Promise.resolve({ id, subscription })
-    )
   })
 
   test("POST", async () => {

api/subscriptionEndpoints/postSubscription.ts

@@ -5,6 +5,8 @@ import { createSubscription } from "../data/subscription"
 export async function postSubscription(req: Request, res: Response) {
   const subscriptionBody = req.body
 
+  console.log("Posted subscription", subscriptionBody)
+
   const { id: subscriptionId } = await createSubscription(subscriptionBody)
 
   res.status(200).send({ subscriptionId })

app/install/EnableNotifications.tsx

@@ -1,8 +1,9 @@
-import React from "react"
+import React, { useState } from "react"
 import { useEffect } from "react"
 import { usePush } from "../usePush"
-import pushPublicKey from "../../pushPublicKey"
+import { request } from "http"
 import urlB64ToUint8Array from "../../b64ToUInt8"
+import pushPublicKey from "../../pushPublicKey"
 
 export default function EnableNotifications({
   onSubscribe,
@@ -24,6 +25,9 @@ export default function EnableNotifications({
 function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   const { subscribeToPush, requestPermission, canSendPush } = usePush()
 
+  const [error, setError] = useState<Error>()
+  const [log, setLog] = useState<string[]>([])
+
   function subscribe() {
     requestPermission()
   }
@@ -31,8 +35,45 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
-    subscribeToPush(urlB64ToUint8Array(pushPublicKey) as any, onSubscribe)
+    setLog((prev) => [...prev, "Subscribing to push notifications"])
+
+    subscribeToPush(
+      urlB64ToUint8Array(pushPublicKey) as any,
+      (subscription) => {
+        setLog((prev) => [
+          ...prev,
+          `controller is undefined? ${navigator.serviceWorker.controller === undefined}`,
+        ])
+        setLog((prev) => [
+          ...prev,
+          `subscriptions: ${JSON.stringify(subscription.toJSON())}`,
+        ])
+        try {
+          navigator.serviceWorker.ready.then((registration) => {
+            registration.active?.postMessage({
+              type: "subscribed",
+              subscription: subscription.toJSON(),
+            })
+            setLog((prev) => [...prev, "After post message"])
+          })
+          // onSubscribe()
+        } catch (error) {
+          setError(error as Error)
+        }
+      },
+      (error) => {
+        setError(error)
+      }
+    )
   }, [canSendPush])
 
-  return <button onClick={subscribe}>Enable Notifications</button>
+  return (
+    <>
+      <button onClick={subscribe}>Enable Notifications</button>
+      <div>{error?.toString()}</div>
+      {log.map((log, index) => (
+        <div key={index}>{log}</div>
+      ))}
+    </>
+  )
 }

app/routes/_index.tsx

@@ -93,21 +93,33 @@ function TackUpNow({
 
   const [isInstalled, setIsInstalled] = useState(installed)
 
+  const [messages, setMessages] = useState<any[]>([])
+
+  useEffect(() => {
+    navigator.serviceWorker.onmessage = (event) =>
+      setMessages((prev) => [...prev, JSON.stringify(event.data)])
+  }, [])
+
   return (
     <ClientOnly fallback={<div>Loading</div>}>
-      {() =>
-        isInstalled ? (
-          <div>Your Notifications</div>
-        ) : (
-          <InstallPrompts
-            isMobileSafari={isMobileSafari}
-            isSupported={isSupported}
-            isIOS={isIOS}
-            notificationsEnabled={false}
-            onInstallComplete={() => setIsInstalled(true)}
-          />
-        )
-      }
+      {() => (
+        <>
+          {messages.map((message, index) => (
+            <div key={index}>{JSON.stringify(message)}</div>
+          ))}
+          {isInstalled ? (
+            <div>Your Notifications</div>
+          ) : (
+            <InstallPrompts
+              isMobileSafari={isMobileSafari}
+              isSupported={isSupported}
+              isIOS={isIOS}
+              notificationsEnabled={false}
+              onInstallComplete={() => setIsInstalled(true)}
+            />
+          )}
+        </>
+      )}
     </ClientOnly>
   )
 }

app/worker.ts

@@ -40,54 +40,177 @@ export default function start(self: ServiceWorkerGlobalScope) {
   //   )
   // })
 
+  async function sendMessage(message: any) {
+    const clients = await self.clients.matchAll()
+
+    await Promise.all(
+      clients.map(async (client) => client.postMessage(message))
+    )
+  }
+
+  self.addEventListener("message", function (event) {
+    const waitEvent = event as ExtendableEvent
+    waitEvent.waitUntil(
+      (async () => {
+        await sendMessage({
+          message: "Got message",
+          data: event.data,
+        })
+
+        if (
+          "type" in event.data &&
+          event.data.type === "subscribed" &&
+          "subscription" in event.data
+        ) {
+          try {
+            await event.waitUntil(
+              submitSubscription(
+                self.registration,
+                event.data.subscription as PushSubscription
+              )
+            )
+          } catch (e) {
+            await sendMessage({
+              message: "Got error processing subscription",
+              error: (e as Error).toString(),
+            })
+          }
+        }
+
+        await sendMessage({
+          message: "Processed subscription",
+        })
+      })()
+    )
+  })
+
   self.addEventListener("pushsubscriptionchange", function (event) {
     const waitEvent = event as ExtendableEvent
 
-    waitEvent.waitUntil(submitSubscription(self.registration))
+    waitEvent.waitUntil(
+      (async () => {
+        const existingSubscription =
+          await self.registration.pushManager.getSubscription()
+        const newSubscription = await submitSubscription(
+          self.registration,
+          existingSubscription
+        )
 
-    self.registration.pushManager.getSubscription()
-  })
-}
-
-async function submitSubscription(registration: ServiceWorkerRegistration) {
-  const db = database()
-
-  const subscription = await registration.pushManager.getSubscription()
-  if (subscription === null) return
-
-  const existingSubscriptionId = await db.subscriptions.get(1)
-
-  const applicationServerKey = urlB64ToUint8Array(pushPublicKey)
-  const newSubscription = await registration.pushManager.subscribe({
-    userVisibleOnly: true,
-    applicationServerKey: applicationServerKey,
+        await sendMessage({ type: "sent subscription", newSubscription })
+      })()
+    )
   })
 
-  await (existingSubscriptionId === undefined
-    ? postSubscription(newSubscription, db)
-    : putSubscription(newSubscription, existingSubscriptionId.subscriptionId))
-}
+  async function submitSubscription(
+    registration: ServiceWorkerRegistration,
+    subscription: PushSubscription | null
+  ) {
+    const db = database()
 
-async function postSubscription(
-  subscription: PushSubscription,
-  db: ReturnType<typeof database>
-) {
-  const response = await fetch(`${process.env.BASE_URL}/api/subscription/`, {
-    method: "POST",
-    body: JSON.stringify(subscription),
-  })
+    await sendMessage({
+      message: `Is subscription null? ${subscription === null}`,
+    })
 
-  db.subscriptions.put({
-    id: 1,
-    subscriptionId: (await response.json()).subscriptionId,
-  })
-}
+    if (subscription === null) return
 
-function putSubscription(subscription: PushSubscription, id: number) {
-  return fetch(`${process.env.BASE_URL}/api/subscription/${id}`, {
-    method: "PUT",
-    body: JSON.stringify(subscription),
-  })
+    const existingSubscriptionId = await db.subscriptions.get(1)
+
+    await sendMessage({
+      message: `Existing subscription ID ${existingSubscriptionId}`,
+    })
+
+    await sendMessage({
+      message: `pushPublicKey ${pushPublicKey}`,
+    })
+
+    let applicationServerKey
+    try {
+      applicationServerKey = urlB64ToUint8Array(pushPublicKey)
+    } catch (error) {
+      await sendMessage({
+        message: `B64 error ${(error as Error).toString()}`,
+      })
+    }
+
+    await sendMessage({
+      message: `Converted public key`,
+    })
+    const newSubscription = await registration.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: applicationServerKey,
+    })
+
+    await sendMessage({
+      message: `subscribed via pushManager`,
+    })
+
+    const stupid =
+      existingSubscriptionId === undefined
+        ? postSubscription(newSubscription.toJSON(), db)
+        : putSubscription(
+            newSubscription.toJSON(),
+            existingSubscriptionId.subscriptionId
+          )
+    await stupid
+
+    return newSubscription
+  }
+
+  async function postSubscription(
+    subscription: PushSubscriptionJSON,
+    db: ReturnType<typeof database>
+  ) {
+    await sendMessage({
+      message: "Log something you piece of garbage",
+    })
+
+    try {
+      await sendMessage({
+        message: `URL ${process.env.BASE_URL}/api/subscription/`,
+      })
+
+      await sendMessage({
+        message: `Submitting subscription ${subscription}`,
+      })
+
+      await sendMessage({
+        message: `JSON formatted: ${JSON.stringify(subscription)}`,
+      })
+
+      const response = await fetch(
+        `${process.env.BASE_URL}/api/subscription/`,
+        {
+          method: "POST",
+          body: JSON.stringify(subscription),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      )
+
+      await sendMessage({
+        message: `Response status ${response.status}`,
+      })
+      db.subscriptions.put({
+        id: 1,
+        subscriptionId: (await response.json()).subscriptionId,
+      })
+    } catch (error) {
+      await sendMessage({
+        message: `ERRRROR ${(error as Error).toString()}}`,
+      })
+    }
+  }
+
+  function putSubscription(subscription: PushSubscriptionJSON, id: number) {
+    return fetch(`${process.env.BASE_URL}/api/subscription/${id}`, {
+      method: "PUT",
+      body: JSON.stringify(subscription),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+  }
 }
 
 function database() {

b64ToUInt8.ts

@@ -2,7 +2,7 @@ export default function urlB64ToUint8Array(base64String: string) {
   const padding = "=".repeat((4 - (base64String.length % 4)) % 4)
   const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/")
 
-  const rawData = window.atob(base64)
+  const rawData = atob(base64)
   const outputArray = new Uint8Array(rawData.length)
 
   for (let i = 0; i < rawData.length; ++i) {

setupTests.ts

@@ -19,3 +19,8 @@ global.FormData = JSDOMFormData
 process.env.BASE_URL = "http://localhost"
 
 enableFetchMocks()
+
+afterAll(() => {
+  jest.restoreAllMocks()
+  jest.resetModules()
+})

show-watcher/notifications/create.ts

@@ -0,0 +1,21 @@
+interface TackUpNotification<Name extends string, Params> {
+    name: Name
+    params: Params
+    subscriptionJson: any
+    start: () => void
+}
+
+type TackUpNotifications =
+    TackUpNotification<"left to go in class", {
+        classNumber: number,
+        leftToGo: number
+    }> |
+
+
+
+
+
+
+function create<NotificationType>(type: NotificationType["name"], params: NotificationType["params"]) {
+
+}

show-watcher/notifications/leftToGoInClass.ts

@@ -0,0 +1,21 @@
+
+function buildLeftToGoInClass({ data }) {
+
+    function buildNotification({ data: }) {
+        const leftToGo = getLeftToGoInClass(data.classNumber)
+        const className = getClassNameFromClassNumber(data.classNumber)
+        return {
+            title: `There are ${leftToGo} left to go in ${className}`
+        }
+    }
+
+    function startWatch() {
+        watchClass({number: data.classNumber}, )
+    }
+
+    return {
+        buildNotification,
+
+    }
+}
+

show-watcher/notify.ts

@@ -0,0 +1,9 @@
+interface NotificationParams {
+    title: string,
+    badge: 
+}
+
+export default function notify(recipientSubscriptionJSON: any, notification: {
+    title: string,
+    options: NotificationOptions
+}) {}

show-watcher/register.test.ts

@@ -0,0 +1,41 @@
+import register from "./register"
+import watch from "./watch"
+import notify from "./notify"
+
+jest.mock("./watch")
+jest.mock("./notify")
+
+const mockedNotify = jest.mocked(notify)
+const mockedWatch = jest.mocked(watch)
+
+const recipientSubscriptionJSON = {
+  endpoint: "https://zombo.com",
+  expirationTime: null,
+  keys: {
+    auth: "O_JFRKmhy3OU9LfpfWeQ8Q",
+    p256dh: "somegoofystring",
+  },
+}
+
+describe("register", () => {
+  beforeEach(() => {
+    mockedWatch.mockImplementation(() => jest.fn())
+  })
+
+  test("starts a watch for the provided event", () => {
+    register({
+      type: "left to go in class",
+      data: {
+        count: 5,
+        class: 2102,
+      },
+      recipientSubscriptionJSON,
+    })
+
+    const watchCallback = mockedWatch.mock.calls[0][0].callback
+
+    expect(mockedNotify).toHaveBeenCalledWith(recipientSubscriptionJSON, {
+      title: "5 left to go in class 2102",
+    })
+  })
+})

show-watcher/register.ts

@@ -0,0 +1,22 @@
+import notify from "./notify"
+import watch from "./watch"
+
+export default function register({
+  type,
+  data,
+  recipientSubscriptionJSON,
+}: {
+  type: string
+  data: any
+  recipientSubscriptionJSON: any
+}) {
+  function onNotify() {
+    notify(recipientSubscriptionJSON)
+  }
+
+  watch({
+    type,
+    data,
+    callback: onNotify,
+  })
+}

show-watcher/tests/leftToGoInClass.test.ts

@@ -0,0 +1,3 @@
+describe("Left to go in class notification", () => {
+  test("")
+})

show-watcher/watch.ts

@@ -0,0 +1,9 @@
+export default function watch({
+  type,
+  data,
+  callback,
+}: {
+  type: string
+  data: any
+  callback: () => void
+}) {}

vite.config.ts

@@ -10,6 +10,10 @@ export default defineConfig({
   plugins: [
     remix({ ignoredRouteFiles: ["**/*.test.*"] }),
     tsconfigPaths(),
-    remixPWA(),
+    remixPWA({
+      buildVariables: {
+        "process.env.BASE_URL": process.env.BASE_URL!,
+      },
+    }),
   ],
 })