Update the 1.4 branch before merging Next 15 to main (#253)

* Fix backlink in activity page redirecting to groups

* Hotifx 215 notification redirect (#252)

* Use Typescript provided type libs for service worker

* Use PushMessage type when sending as well

* Properly handle push data passing and navigation

* Create a dummy button for testing notifications

Author: krokosik

src/components/Expense/ExpensePage.tsx

@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { type User as NextUser } from 'next-auth';
 import React from 'react';
 
+// import { api } from '~/utils/api';
 import { toUIString } from '~/utils/numbers';
 
 import { UserAvatar } from '../ui/avatar';
@@ -29,6 +30,8 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storageP
 
   const CategoryIcon = CategoryIcons[expense.category] ?? Banknote;
 
+  // const sendNotificationMutation = api.user.sendExpensePushNotification.useMutation();
+
   return (
     <div className="">
       <div className="mb-4 flex items-start justify-between gap-2 px-6">
@@ -102,6 +105,16 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storageP
       </div>
       <Separator />
       <div className="mt-10 flex items-center gap-5 px-6">
+        {/* <button
+          onClick={() => {
+            sendNotificationMutation.mutate({
+              expenseId: expense.id,
+            });
+          }}
+          className="rounded-md bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600"
+        >
+          Test Notification
+        </button> */}
         <UserAvatar user={expense.paidByUser} size={35} />
         <p>
           {youPaid ? 'You' : (expense.paidByUser.name ?? expense.paidByUser.email)} paid{' '}

src/pages/activity.tsx

@@ -68,11 +68,7 @@ const ActivityPage: NextPageWithUser = ({ user }) => {
                   <div className="mt-[30vh] text-center text-gray-400">No activities yet</div>
                 ) : null}
                 {expensesQuery.data?.map((e) => (
-                  <Link
-                    href={`${e.expense.groupId ? `/groups/${e.expense.groupId}/` : '/'}expenses/${e.expenseId}`}
-                    key={e.expenseId}
-                    className="flex  gap-2"
-                  >
+                  <Link href={`/expenses/${e.expenseId}`} key={e.expenseId} className="flex  gap-2">
                     <div className="mt-1">
                       <UserAvatar user={e.expense.paidByUser} size={30} />
                     </div>

src/server/api/routers/user.ts

@@ -13,6 +13,7 @@ import { getDocumentUploadUrl } from '~/server/storage';
 import { SplitwiseGroupSchema, SplitwiseUserSchema } from '~/types';
 import { BigMath } from '~/utils/numbers';
 
+// import { sendExpensePushNotification } from '../services/notificationService';
 import {
   addUserExpense,
   deleteExpense,
@@ -390,6 +391,18 @@ export const userRouter = createTRPCRouter({
     return expenses;
   }),
 
+  // sendExpensePushNotification: protectedProcedure
+  //   .input(z.object({ expenseId: z.string() }))
+  //   .mutation(async ({ input }) => {
+  //     sendExpensePushNotification(input.expenseId).catch((err) => {
+  //       console.error('Error sending push notification', err);
+  //       throw new TRPCError({
+  //         code: 'INTERNAL_SERVER_ERROR',
+  //         message: 'Failed to send push notification',
+  //       });
+  //     });
+  //   }),
+
   getUserDetails: protectedProcedure
     .input(z.object({ userId: z.number() }))
     .query(async ({ input }) => {

src/server/notification.ts

@@ -1,6 +1,7 @@
 import { type PushSubscription, sendNotification, setVapidDetails } from 'web-push';
 
 import { env } from '~/env';
+import { type PushMessage } from '~/types';
 
 if (env.WEB_PUSH_EMAIL && env.WEB_PUSH_PUBLIC_KEY && env.WEB_PUSH_PRIVATE_KEY) {
   setVapidDetails(
@@ -10,10 +11,7 @@ if (env.WEB_PUSH_EMAIL && env.WEB_PUSH_PUBLIC_KEY && env.WEB_PUSH_PRIVATE_KEY) {
   );
 }
 
-export async function pushNotification(
-  subscription: string,
-  message: { title: string; message: string; data?: { url?: string } },
-) {
+export async function pushNotification(subscription: string, message: PushMessage) {
   try {
     const _subscription = JSON.parse(subscription) as PushSubscription;
     const response = await sendNotification(_subscription, JSON.stringify(message));

src/types.ts

@@ -5,7 +5,7 @@ import { z } from 'zod';
 // eslint-disable-next-line @typescript-eslint/ban-types
 export type NextPageWithUser<T = {}> = NextPage<{ user: User } & T> & { auth: boolean };
 
-export type PushMessage = { title: string; message: string };
+export type PushMessage = { title: string; message: string; data?: { url?: string } };
 
 export type SplitwisePicture = {
   small: string;

src/types/service-worker.d.ts

@@ -15,7 +15,7 @@
     "checkJs": true,
 
     /* Bundled projects */
-    "lib": ["dom", "dom.iterable", "ES2022"],
+    "lib": ["dom", "dom.iterable", "ES2022", "WebWorker"],
     "noEmit": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",

tsconfig.json

@@ -3,39 +3,33 @@ import { type PushMessage } from '~/types';
 declare let self: ServiceWorkerGlobalScope;
 
 self.addEventListener('push', function (event) {
-  if (!event) return;
-  const data = JSON.parse(event?.data?.text() ?? '{}') as PushMessage;
+  const { title, message, data } = JSON.parse(event?.data?.text() ?? '{}') as PushMessage;
   event.waitUntil(
-    self.registration.showNotification(data.title, {
-      body: data.message,
+    self.registration.showNotification(title, {
+      body: message,
       icon: '/icons/android-chrome-192x192.png',
+      data,
     }),
   );
 });
 
 self.addEventListener('notificationclick', function (event) {
-  if (!event) return;
-
   event.notification.close();
   event.waitUntil(
-    self.clients
-      .matchAll({ type: 'window', includeUncontrolled: true })
-      .then(function (clientList) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        const url = (event.notification.data?.url as string) ?? '/';
+    (async () => {
+      const clientList = await self.clients.matchAll({ type: 'window' });
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      const url = (event.notification.data?.url as string) ?? '/';
 
-        if (clientList.length > 0) {
-          let client = clientList[0];
-          for (const _client of clientList) {
-            if (_client.focused) {
-              client = _client;
-            }
-          }
+      const matchingClient = clientList.find((client) => client.focused) ?? clientList[0];
 
-          client!.url = url;
-          return client?.focus();
-        }
-        return self.clients?.openWindow(url);
-      }),
+      if (matchingClient) {
+        const client = await matchingClient.focus();
+        await client.navigate(url);
+      } else {
+        await self.clients.openWindow(url);
+      }
+    })(),
   );
 });