Client:Store:SelectionPeopleStore Added multi connection and multi logout

packages/client/src/Shell.jsx

@@ -25,7 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import moment from "moment-timezone";
-import React, { useEffect } from "react";
+import React, { useEffect, useCallback } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { useTheme } from "styled-components";
 import { inject, observer } from "mobx-react";
@@ -33,6 +33,8 @@ import { useTranslation } from "react-i18next";
 import { isMobile, isIOS, isFirefox } from "react-device-detect";
 import { toast as toastify } from "react-toastify";
 
+import config from "PACKAGE_FILE";
+
 import { Portal } from "@docspace/shared/components/portal";
 import { SnackBar } from "@docspace/shared/components/snackbar";
 import { Toast, toastr } from "@docspace/shared/components/toast";
@@ -43,8 +45,7 @@ import { DeviceType, IndexedDBStores } from "@docspace/shared/enums";
 import indexedDbHelper from "@docspace/shared/utils/indexedDBHelper";
 import { useThemeDetector } from "@docspace/shared/hooks/useThemeDetector";
 import { sendToastReport } from "@docspace/shared/utils/crashReport";
-
-import config from "PACKAGE_FILE";
+import { PRODUCT_NAME } from "@docspace/shared/constants";
 
 import Main from "./components/Main";
 import Layout from "./components/Layout";
@@ -55,7 +56,6 @@ import IndicatorLoader from "./components/IndicatorLoader";
 import ErrorBoundary from "./components/ErrorBoundaryWrapper";
 import DialogsWrapper from "./components/dialogs/DialogsWrapper";
 import useCreateFileError from "./Hooks/useCreateFileError";
-import { PRODUCT_NAME } from "@docspace/shared/constants";
 
 // import ReactSmartBanner from "./components/SmartBanner";
 
@@ -92,6 +92,8 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     setDataFromSocket,
     updateDataFromSocket,
     sessisonLogout,
+    setMultiConnections,
+    sessisonMultiLogout,
   } = rest;
 
   const theme = useTheme();
@@ -112,6 +114,23 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     }
   }, []);
 
+  const moveToLastSession = useCallback((data) => {
+    return data.map((item) => {
+      if (item.status === "online" && item.sessions.length !== 0) {
+        const {
+          sessions: [first, ...ohterElement],
+          ...otherField
+        } = item;
+
+        return {
+          ...otherField,
+          sessions: [...ohterElement, first],
+        };
+      }
+      return item;
+    });
+  }, []);
+
   useEffect(() => {
     try {
       loadBaseInfo();
@@ -145,29 +164,42 @@ const Shell = ({ items = [], page = "home", ...rest }) => {
     });
 
     socketHelper.on("statuses-in-portal", (data) => {
-      setDataFromSocket(data);
-      console.log("dataFromSocket", data);
+      const newData = moveToLastSession(data);
+
+      setDataFromSocket(newData);
+      console.log("dataFromSocket", newData);
     });
 
     socketHelper.on("enter-in-portal", (data) => {
-      updateDataFromSocket(data);
-      console.log("enter-in-portal", data);
+      const [newData] = moveToLastSession([data]);
+
+      updateDataFromSocket(newData);
+      console.log("enter-in-portal", newData);
     });
 
     socketHelper.on("leave-in-portal", (data) => {
       sessisonLogout(data);
-      // setCurrentDataFromSocket(data);
       console.log(data);
     });
 
     socketHelper.on("enter-session-in-portal", (data) => {
+      setMultiConnections(data);
       console.log(data);
     });
 
     socketHelper.on("leave-session-in-portal", (data) => {
+      sessisonMultiLogout(data);
       console.log(data);
     });
-  }, [socketHelper, setDataFromSocket, updateDataFromSocket, sessisonLogout]);
+  }, [
+    socketHelper,
+    setDataFromSocket,
+    updateDataFromSocket,
+    sessisonLogout,
+    setMultiConnections,
+    moveToLastSession,
+    sessisonMultiLogout,
+  ]);
 
   useEffect(() => {
     socketHelper.emit({
@@ -495,8 +527,13 @@ const ShellWrapper = inject(
     peopleStore,
   }) => {
     const { i18n } = useTranslation();
-    const { setDataFromSocket, updateDataFromSocket, sessisonLogout } =
-      peopleStore.selectionStore;
+    const {
+      setDataFromSocket,
+      updateDataFromSocket,
+      sessisonLogout,
+      setMultiConnections,
+      sessisonMultiLogout,
+    } = peopleStore.selectionStore;
 
     const {
       init,
@@ -589,6 +626,8 @@ const ShellWrapper = inject(
       setDataFromSocket,
       updateDataFromSocket,
       sessisonLogout,
+      setMultiConnections,
+      sessisonMultiLogout,
     };
   },
 )(observer(Shell));

packages/client/src/store/SelectionPeopleStore.js

@@ -470,6 +470,10 @@ class SelectionStore {
     this.dataFromSocket = data;
   };
 
+  findSessionIndexByUserId = (userId) => {
+    return this.dataFromSocket.findIndex((data) => data.id === userId);
+  };
+
   sessisonLogout = ({ userId, date }) => {
     const newData = [...this.dataFromSocket];
 
@@ -487,7 +491,10 @@ class SelectionStore {
         status,
         connections: [
           ...this.sessionsData[currentSesstionIndex].connections,
-          { ...this.sessionsData[currentSesstionIndex].connections[0], date },
+          {
+            ...this.sessionsData[currentSesstionIndex].connections.at(-1),
+            date,
+          },
         ],
       };
     }
@@ -499,13 +506,55 @@ class SelectionStore {
       status,
       sessions: [
         ...newData[index].sessions,
-        { ...newData[index].sessions[0], date },
+        { ...newData[index].sessions.at(-1), date },
       ],
     };
 
     this.setDataFromSocket(newData);
   };
 
+  setMultiConnections = ({ session, userId }) => {
+    const index = this.findSessionIndexByUserId(userId);
+    this.dataFromSocket[index].sessions = [
+      ...this.dataFromSocket[index].sessions,
+      session,
+    ];
+  };
+
+  sessisonMultiLogout = ({ sessionId, userId, date }) => {
+    const index = this.findSessionIndexByUserId(userId);
+
+    if (index === -1) return;
+
+    const sessionIndex = this.dataFromSocket[index].sessions.findIndex(
+      (item) => item.id === sessionId,
+    );
+
+    if (sessionIndex === -1) return;
+
+    const [deletElement] = this.dataFromSocket[index].sessions.splice(
+      sessionIndex,
+      1,
+    );
+
+    const sessionsLength = this.dataFromSocket[index].sessions.length;
+    const countActiveSession =
+      this.dataFromSocket[index].sessions.filter(
+        (item) => item.status !== "offline",
+      ).length ?? 0;
+
+    const addedIndex =
+      sessionsLength >= countActiveSession
+        ? sessionsLength - countActiveSession
+        : 0;
+
+    this.dataFromSocket[index].sessions.splice(addedIndex, 0, {
+      ...deletElement,
+      date,
+      status: "offline",
+    });
+  };
+
   updateDataFromSocket = (data) => {
     const newArr = [...this.dataFromSocket];
     const indexTest = newArr.findIndex(({ id }) => id === data.id);
@@ -522,7 +571,7 @@ class SelectionStore {
     }
 
     if (indexTest === -1) {
-      this.dataFromSocket = [data, ...this.dataFromSocket];
+      this.dataFromSocket = [...this.dataFromSocket, data];
       return;
     }
 
@@ -584,12 +633,9 @@ class SelectionStore {
     const isCurrentSesstion = session.id === data?.id;
     const connectionsIsEmpty = session.connections.length === 0;
 
-    const firstIndex = 0;
     const lastIndex = -1;
-    const isOnline = session.status === "online";
 
-    const index = isOnline ? firstIndex : lastIndex;
-    const sessionData = data?.sessions.at(index);
+    const sessionData = data?.sessions.at(lastIndex);
 
     if (isCurrentSesstion) return [{ ...first, ...sessionData }, ...other];