Client: Members: Add sending status socket events when open members panel

packages/client/src/pages/Home/InfoPanel/Body/views/Members/hooks/useOnlineStatuses.ts

@@ -0,0 +1,67 @@
+// (c) Copyright Ascensio System SIA 2009-2024
+//
+// This program is a free software product.
+// You can redistribute it and/or modify it under the terms
+// of the GNU Affero General Public License (AGPL) version 3 as published by the Free Software
+// Foundation. In accordance with Section 7(a) of the GNU AGPL its Section 15 shall be amended
+// to the effect that Ascensio System SIA expressly excludes the warranty of non-infringement of
+// any third-party rights.
+//
+// This program is distributed WITHOUT ANY WARRANTY, without even the implied warranty
+// of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For details, see
+// the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+//
+// You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021.
+//
+// The  interactive user interfaces in modified source and object code versions of the Program must
+// display Appropriate Legal Notices, as required under Section 5 of the GNU AGPL version 3.
+//
+// Pursuant to Section 7(b) of the License you must retain the original Product logo when
+// distributing the program. Pursuant to Section 7(e) we decline to grant you any rights under
+// trademark law for use of our trademarks.
+//
+// All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
+// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
+// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
+import { useEffect } from "react";
+
+import SocketIOHelper from "@docspace/shared/utils/socket";
+
+interface UseOnlineStatusesProps {
+  socketHelper: SocketIOHelper;
+  // Todo: fix when InfoPanelStore is typed
+  infoPanelSelection: { isRoom: boolean; id: number } | null;
+}
+
+export const useOnlineStatuses = ({
+  socketHelper,
+  infoPanelSelection,
+}: UseOnlineStatusesProps) => {
+  useEffect(() => {
+    if (!infoPanelSelection) return;
+
+    const { isRoom, id } = infoPanelSelection;
+
+    if (isRoom) {
+      socketHelper.emit({
+        command: "getSessionsInRoom",
+        data: { roomPart: id },
+      });
+
+      socketHelper.emit({
+        command: "subscribeToRoom",
+        data: { roomPart: id },
+      });
+    }
+
+    return () => {
+      if (isRoom) {
+        socketHelper.emit({
+          command: "unsubscribeToRoom",
+          data: { roomPart: id },
+        });
+      }
+    };
+  }, [socketHelper, infoPanelSelection]);
+};

packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js

@@ -51,9 +51,10 @@ import { isDesktop } from "@docspace/shared/utils";
 import LinksToViewingIconUrl from "PUBLIC_DIR/images/links-to-viewing.react.svg?url";
 import PlusIcon from "PUBLIC_DIR/images/plus.react.svg?url";
 import ScrollbarContext from "@docspace/shared/components/scrollbar/custom-scrollbar/ScrollbarContext";
-
 import { copyShareLink } from "@docspace/shared/utils/copy";
+
 import LinkRow from "./sub-components/LinkRow";
+import { useOnlineStatuses } from "./hooks/useOnlineStatuses";
 
 const Members = ({
   t,
@@ -79,6 +80,7 @@ const Members = ({
   membersIsLoading,
   searchValue,
   isMembersPanelUpdating,
+  socketHelper,
 }) => {
   const withoutTitlesAndLinks = !!searchValue;
   const membersHelper = new MembersHelper({ t });
@@ -94,6 +96,8 @@ const Members = ({
     scrollContext?.parentScrollbar?.scrollToTop();
   }, [isMembersPanelUpdating]);
 
+  useOnlineStatuses({ socketHelper, infoPanelSelection });
+
   const loadNextPage = async () => {
     await fetchMoreMembers(t, withoutTitlesAndLinks);
   };
@@ -297,6 +301,7 @@ export default inject(
     treeFoldersStore,
     dialogsStore,
     infoPanelStore,
+    settingsStore,
   }) => {
     const {
       infoPanelSelection,
@@ -315,6 +320,7 @@ export default inject(
     const { primaryLink, additionalLinks, setExternalLink } = publicRoomStore;
     const { isArchiveFolderRoot } = treeFoldersStore;
     const { setLinkParams, setEditLinkPanelIsVisible } = dialogsStore;
+    const { socketHelper } = settingsStore;
 
     const roomType =
       selectedFolderStore.roomType ?? infoPanelSelection?.roomType;
@@ -355,6 +361,7 @@ export default inject(
       membersIsLoading,
       searchValue,
       isMembersPanelUpdating,
+      socketHelper,
     };
   },
 )(