use room

packages/app/src/components/InAppNotification/InAppNotificationDropdown.tsx

@@ -19,7 +19,6 @@ const logger = loggerFactory('growi:InAppNotificationDropdown');
 type Props = {
   appContainer: AppContainer,
   socketIoContainer: SocketIoContainer,
-  currentUserId: string,
 };
 
 const InAppNotificationDropdown: FC<Props> = (props: Props) => {
@@ -38,9 +37,7 @@ const InAppNotificationDropdown: FC<Props> = (props: Props) => {
   const initializeSocket = (props) => {
     const socket = props.socketIoContainer.getSocket();
     socket.on('notificationUpdated', (data: { userId: string, count: number }) => {
-      if (data.userId === props.currentUserId) {
-        setCount(data.count);
-      }
+      setCount(data.count);
       // eslint-disable-next-line no-console
       console.log('socketData', data);
     });

packages/app/src/components/Navbar/GrowiNavbar.jsx

@@ -29,7 +29,7 @@ class GrowiNavbar extends React.Component {
     return (
       <>
         <li>
-          <InAppNotificationDropdown currentUserId={currentUser._id} />
+          <InAppNotificationDropdown />
         </li>
 
         <li className="nav-item d-none d-md-block">

packages/app/src/server/service/in-app-notification.ts

@@ -33,7 +33,10 @@ export default class InAppNotificationService {
     if (this.socketIoService.isInitialized) {
       targetUsers.forEach(async(userId) => {
         const count = await this.getUnreadCountByUser(userId);
+
+        // emit to the room for each user
         await this.socketIoService.getDefaultSocket()
+          .in(getRoomNameWithId(RoomPrefix.USER, userId))
           .emit('notificationUpdated', { userId, count });
       });
     }