smol event changes

package.json

@@ -16,7 +16,7 @@
     "@auth/prisma-adapter": "^1.0.1",
     "@prisma/client": "5.1.1",
     "@react-email/components": "^0.0.7",
-    "@tanstack/react-query": "^4.32.1",
+    "@tanstack/react-query": "^4.32.6",
     "@trpc/client": "10.37.1",
     "@trpc/next": "10.37.1",
     "@trpc/react-query": "10.37.1",
@@ -27,8 +27,8 @@
     "ably": "^1.2.42",
     "autoprefixer": "^10.4.14",
     "json2csv": "6.0.0-alpha.2",
-    "next": "^13.4.12",
-    "next-auth": "^4.22.3",
+    "next": "^13.4.13",
+    "next-auth": "^4.22.5",
     "nextjs-cors": "^2.1.2",
     "postcss": "^8.4.27",
     "react": "18.2.0",
@@ -42,15 +42,15 @@
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@types/eslint": "^8.44.1",
+    "@types/eslint": "^8.44.2",
     "@types/json2csv": "^5.0.3",
-    "@types/node": "^20.4.6",
-    "@types/react": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
+    "@types/node": "^20.4.8",
+    "@types/react": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
     "daisyui": "^3.5.1",
     "eslint": "^8.46.0",
-    "eslint-config-next": "^13.4.12",
+    "eslint-config-next": "^13.4.13",
     "prisma": "5.1.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.1.6"

src/pages/room/[id].tsx

@@ -2,6 +2,7 @@ import { type GetServerSideProps, type NextPage } from "next";
 import Head from "next/head";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import { EventType, EventTypes } from "~/utils/types";
 
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
@@ -95,10 +96,10 @@ const RoomBody: React.FC = ({}) => {
       channelName: `${env.NEXT_PUBLIC_APP_ENV}-${roomId}`,
     },
     ({ name }) => {
-      if (name === "ROOM_UPDATE") {
+      if (name === EventTypes.ROOM_UPDATE) {
         void refetchVotesFromDb();
         void refetchRoomFromDb();
-      } else if (name === "VOTE_UPDATE") {
+      } else if (name === EventTypes.VOTE_UPDATE) {
         void refetchVotesFromDb();
       }
     }
@@ -115,17 +116,6 @@ const RoomBody: React.FC = ({}) => {
     }
   );
 
-  // Subscribe on mount and unsubscribe on unmount
-  useEffect(() => {
-    window.addEventListener("beforeunload", () => channel.presence.leave());
-    return () => {
-      window.removeEventListener("beforeunload", () =>
-        channel.presence.leave()
-      );
-      channel.presence.leave();
-    };
-  }, [channel.presence, roomId]);
-
   // Init story name
   useEffect(() => {
     if (sessionData && roomFromDb) {

src/server/api/routers/room.ts

@@ -7,6 +7,7 @@ import {
 } from "~/server/api/trpc";
 
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
+import { EventTypes } from "~/utils/types";
 
 export const roomRouter = createTRPCRouter({
   // Create
@@ -33,8 +34,8 @@ export const roomRouter = createTRPCRouter({
 
           await publishToChannel(
             `${ctx.session.user.id}`,
-            "ROOM_LIST_UPDATE",
-            "CREATE"
+            EventTypes.ROOM_LIST_UPDATE,
+            JSON.stringify(room)
           );
         }
         // happy path
@@ -205,7 +206,11 @@ export const roomRouter = createTRPCRouter({
       });
 
       if (newRoom) {
-        await publishToChannel(`${newRoom.id}`, "ROOM_UPDATE", "UPDATE");
+        await publishToChannel(
+          `${newRoom.id}`,
+          EventTypes.ROOM_UPDATE,
+          JSON.stringify(newRoom)
+        );
       }
 
       return !!newRoom;
@@ -228,11 +233,15 @@ export const roomRouter = createTRPCRouter({
 
         await publishToChannel(
           `${ctx.session.user.id}`,
-          "ROOM_LIST_UPDATE",
-          "DELETE"
+          EventTypes.ROOM_LIST_UPDATE,
+          JSON.stringify(deletedRoom)
         );
 
-        await publishToChannel(`${deletedRoom.id}`, "ROOM_UPDATE", "DELETE");
+        await publishToChannel(
+          `${deletedRoom.id}`,
+          EventTypes.ROOM_UPDATE,
+          JSON.stringify(deletedRoom)
+        );
       }
 
       return !!deletedRoom;

src/server/api/routers/vote.ts

@@ -8,6 +8,7 @@ import {
   protectedProcedure,
 } from "~/server/api/trpc";
 import { fetchCache, invalidateCache, setCache } from "~/server/redis";
+import { EventTypes } from "~/utils/types";
 
 export const voteRouter = createTRPCRouter({
   countAll: adminProcedure.query(async ({ ctx }) => {
@@ -104,7 +105,11 @@ export const voteRouter = createTRPCRouter({
         await invalidateCache(`kv_votecount_admin`);
         await invalidateCache(`kv_votes_${input.roomId}`);
 
-        await publishToChannel(`${vote.roomId}`, "VOTE_UPDATE", "UPDATE");
+        await publishToChannel(
+          `${vote.roomId}`,
+          EventTypes.VOTE_UPDATE,
+          input.value
+        );
       }
 
       return !!vote;

src/utils/types.ts

@@ -1,9 +1,9 @@
 type BetterEnum<T> = T[keyof T];
 
-const EventTypes = {
-  ROOM_LIST_UPDATE: "ROOM_LIST_UPDATE",
-  ROOM_UPDATE: "ROOM_UPDATE",
-  VOTE_UPDATE: "VOTE_UPDATE",
+export const EventTypes = {
+  ROOM_LIST_UPDATE: "room.list.update",
+  ROOM_UPDATE: "room.update",
+  VOTE_UPDATE: "vote.update",
 } as const;
 export type EventType = BetterEnum<typeof EventTypes>;