refactoring

packages/client/src/Shell.jsx

@@ -89,6 +89,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     isFrame,
 
     organizationName,
+    setDataFromSocket,
+    setCurrentDataFromSocket,
   } = rest;
 
   const theme = useTheme();
@@ -162,6 +164,37 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
       command: "subscribe",
       data: { roomParts: "QUOTA", individual: true },
     });
+
+    socketHelper.emit({
+      command: "subscribeToPortal",
+    });
+
+    socketHelper.emit({
+      command: "getSessionsInPortal",
+    });
+
+    socketHelper.on("statuses-in-portal", (data) => {
+      setDataFromSocket(data);
+      console.log("dataFromSocket", data);
+    });
+
+    socketHelper.on("enter-in-portal", (data) => {
+      setCurrentDataFromSocket(data);
+      console.log("enter-in-portal", data);
+    });
+
+    socketHelper.on("enter-session-in-portal", (data) => {
+      console.log(data);
+    });
+
+    socketHelper.on("leave-in-portal", (data) => {
+      setCurrentDataFromSocket(data);
+      console.log(data);
+    });
+
+    socketHelper.on("leave-session-in-portal", (data) => {
+      console.log(data);
+    });
   }, [socketHelper]);
 
   const { t, ready } = useTranslation(["Common"]); //TODO: if enable banner ["Common", "SmartBanner"]
@@ -455,8 +488,11 @@ const ShellWrapper = inject(
     userStore,
     currentTariffStatusStore,
     dialogsStore,
+    peopleStore,
   }) => {
     const { i18n } = useTranslation();
+    const { setDataFromSocket, setCurrentDataFromSocket } =
+      peopleStore.selectionStore;
 
     const {
       init,
@@ -546,6 +582,8 @@ const ShellWrapper = inject(
       pagesWithoutNavMenu,
       isFrame,
       organizationName,
+      setDataFromSocket,
+      setCurrentDataFromSocket,
     };
   },
 )(observer(Shell));

packages/client/src/components/panels/UserSessionsPanel/index.js

@@ -1,5 +1,5 @@
 import { useRef } from "react";
-import { withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { observer, inject } from "mobx-react";
 import styled, { css } from "styled-components";
 
@@ -44,7 +44,8 @@ const StyledScrollbar = styled(Scrollbar)`
 `;
 
 const UserSessionsPanel = (props) => {
-  const { t, visible, setVisible } = props;
+  const { visible, setVisible } = props;
+  const { t } = useTranslation(["Settings", "Profile", "Common"]);
   const scrollRef = useRef(null);
 
   const onClose = () => {
@@ -86,8 +87,4 @@ export default inject(({ dialogsStore }) => {
     visible: userSessionsPanelVisible,
     setVisible: setUserSessionPanelVisible,
   };
-})(
-  withTranslation(["Settings", "Profile", "Common"])(
-    observer(UserSessionsPanel),
-  ),
-);
+})(observer(UserSessionsPanel));

packages/client/src/pages/PortalSettings/categories/security/sessions/index.js

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { mobile, tablet } from "@docspace/shared/utils";
 import SessionsLoader from "@docspace/shared/skeletons/sessions";
@@ -75,13 +75,12 @@ const DownLoadWrapper = styled.div`
 `;
 
 const Sessions = ({
-  t,
   allSessions,
   sessionsData,
   dataFromSocket,
+  currentDataFromSocket,
   displayName,
   clearSelection,
-  setDataFromSocket,
   updateAllSessions,
   platformData,
   selection,
@@ -90,7 +89,6 @@ const Sessions = ({
   isLoading,
   viewAs,
   setViewAs,
-  socketHelper,
   currentDeviceType,
   disableDialogVisible,
   logoutDialogVisible,
@@ -107,20 +105,13 @@ const Sessions = ({
   isLoadingDownloadReport,
   isSessionsLoaded,
 }) => {
+  const { t } = useTranslation([
+    "Settings",
+    "Profile",
+    "Common",
+    "ChangeUserStatusDialog",
+  ]);
   useEffect(() => {
-    socketHelper.emit({
-      command: "subscribe",
-      data: { roomParts: "statuses-in-portal" },
-    });
-
-    socketHelper.emit({
-      command: "getSessionsInPortal",
-    });
-
-    socketHelper.on("statuses-in-portal", (data) => {
-      setDataFromSocket(data);
-    });
-
     fetchData();
 
     return () => {
@@ -129,8 +120,8 @@ const Sessions = ({
   }, []);
 
   useEffect(() => {
-    updateAllSessions(sessionsData, dataFromSocket);
-  }, [sessionsData, dataFromSocket]);
+    updateAllSessions(sessionsData, dataFromSocket, currentDataFromSocket);
+  }, [sessionsData, dataFromSocket, currentDataFromSocket]);
 
   useViewEffect({
     view: viewAs,
@@ -227,14 +218,14 @@ const Sessions = ({
 
 export default inject(({ settingsStore, setup, peopleStore }) => {
   const { updateUserStatus } = peopleStore.usersStore;
-  const { socketHelper, currentDeviceType } = settingsStore;
+  const { currentDeviceType } = settingsStore;
   const {
     allSessions,
     sessionsData,
     dataFromSocket,
+    currentDataFromSocket,
     displayName,
     clearSelection,
-    setDataFromSocket,
     updateAllSessions,
     platformData,
     fetchData,
@@ -264,9 +255,9 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     allSessions,
     sessionsData,
     dataFromSocket,
+    currentDataFromSocket,
     displayName,
     clearSelection,
-    setDataFromSocket,
     updateAllSessions,
     platformData,
     selection,
@@ -274,7 +265,6 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     fetchData,
     viewAs,
     setViewAs,
-    socketHelper,
     currentDeviceType,
     disableDialogVisible,
     logoutDialogVisible,
@@ -292,8 +282,4 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     isLoadingDownloadReport,
     isSessionsLoaded: allSessions.length > 0,
   };
-})(
-  withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(
-    observer(Sessions),
-  ),
-);
+})(observer(Sessions));