[frontend] Handling delete room notification

frontend/app/lib/client-socket-provider.tsx

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useState } from "react";
 import { useAuthContext } from "./client-auth";
 import {
   DenyEvent,
+  DeleteRoomEvent,
   EnterRoomEvent,
   InviteEvent,
   LeaveRoomEvent,
@@ -24,6 +25,21 @@ export default function SocketProvider() {
   const pathName = usePathname();
   const router = useRouter();
 
+  const handleDeleteRoomEvent = useCallback(
+    (data: DeleteRoomEvent) => {
+      if (pathName === "/room/" + data.roomId.toString()) {
+        router.push("/room");
+        router.refresh();
+      } else if (
+        pathName.startsWith("/room/") ||
+        pathName === "/explore-rooms"
+      ) {
+        router.refresh();
+      }
+    },
+    [pathName, router],
+  );
+
   const handleEnterRoomEvent = useCallback(
     (data: EnterRoomEvent) => {
       if (pathName === "/room/" + data.roomId.toString()) {
@@ -106,16 +122,17 @@ export default function SocketProvider() {
   };
 
   const showMessageToast = (message: MessageEvent) => {
-    // TODO: If sender is me, don't show toast
-    toast({
-      title: `${message.user.name}`,
-      description: ` ${message.content}`,
-      action: (
-        <ToastAction altText="Open" asChild>
-          <Link href={`/room/${message.roomId}`}>Open</Link>
-        </ToastAction>
-      ),
-    });
+    if (message.user.id !== currentUser?.id) {
+      toast({
+        title: `${message.user.name}`,
+        description: ` ${message.content}`,
+        action: (
+          <ToastAction altText="Open" asChild>
+            <Link href={`/room/${message.roomId}`}>Open</Link>
+          </ToastAction>
+        ),
+      });
+    }
   };
 
   const showNotificationToast = (data: any) => {
@@ -148,10 +165,18 @@ export default function SocketProvider() {
     const handler = (event: string, data: any) => {
       if (event === "message") {
         showMessageToast(data);
+      } else if (event === "delete-room") {
+        handleDeleteRoomEvent(data);
       } else if (event === "enter-room") {
         handleEnterRoomEvent(data);
       } else if (event === "leave") {
         handleLeaveRoomEvent(data);
+      } else if (
+        event === "mute" ||
+        event === "unmute" ||
+        event === "update-role"
+      ) {
+        /* Nothing to do here */
       } else if (event === "invite-pong") {
         showInvitePongToast(data);
       } else if (event === "invite-cancel-pong") {
@@ -174,6 +199,12 @@ export default function SocketProvider() {
       chatSocket.offAny(handler);
       chatSocket.disconnect();
     };
-  }, [currentUser, handleEnterRoomEvent, handleLeaveRoomEvent, toast]);
+  }, [
+    currentUser,
+    handleDeleteRoomEvent,
+    handleEnterRoomEvent,
+    handleLeaveRoomEvent,
+    toast,
+  ]);
   return <></>;
 }

frontend/app/lib/dtos.ts

@@ -56,6 +56,10 @@ export type JwtPayload = {
   isTwoFactorAuthenticated: boolean;
 };
 
+export type DeleteRoomEvent = {
+  roomId: number;
+};
+
 export type EnterRoomEvent = {
   roomId: number;
   userId: number;