From 2161fcf8750d0015d2d3913ee592c6308e9220c2 Mon Sep 17 00:00:00 2001
From: Elyor Djalilov <elyor.djalilov@onlyoffice.com>
Date: Tue, 2 Jul 2024 11:16:00 +0500
Subject: [PATCH] useless states were removed and refactored

---
 .../UserSessionsPanel/AllSessionsBlock.js     |  30 +--
 .../UserSessionsPanel/LastSessionBlock.js     |  14 +-
 .../RowView/SessionsRowContent.js             |   2 +-
 .../sub-components/RowView/index.js           |   8 +-
 .../UserSessionsPanel/sub-components/index.js |   4 +-
 .../Layout/Section/Header/index.js            |  16 +-
 .../SessionsTable/RowView/SessionsRow.js      |  51 ++---
 .../RowView/SessionsRowContent.js             |  24 ++-
 .../sessions/SessionsTable/RowView/index.js   |   4 +-
 .../TableView/SessionsTableRow.js             |  45 ++---
 .../sessions/SessionsTable/TableView/index.js |   2 +-
 .../categories/security/sessions/index.js     |   4 +-
 .../client/src/store/SelectionPeopleStore.js  | 191 +++++++++---------
 13 files changed, 184 insertions(+), 211 deletions(-)

diff --git a/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js b/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js
index 21dcebe3d5..9e1a93ead5 100644
--- a/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/AllSessionsBlock.js
@@ -33,22 +33,20 @@ const Wrapper = styled.div`
 `;
 
 const AllSessionsBlock = (props) => {
-  const {
-    t,
-    isLoading,
-    connections,
-    userLastSession,
-    onClickLogoutAllExceptThis,
-  } = props;
+  const { t, isLoading, items, onClickLogoutAllExceptThis } = props;
 
-  const exceptId = userLastSession.connections[0]?.id;
+  const exceptId = items.connections[0]?.id;
+
+  const filteredSessions = items.sessions.filter(
+    (session) => session.status === "offline",
+  );
 
   return (
     <>
       <Wrapper>
         <Text className="subtitle">{t("Profile:AllSessions")}</Text>
         <Text className="desciption">{t("Profile:PanelDescription")}</Text>
-        {connections.length > 0 ? (
+        {filteredSessions.length > 0 ? (
           <Button
             label={t("Profile:LogoutFromAllSessions")}
             size="small"
@@ -66,25 +64,19 @@ const AllSessionsBlock = (props) => {
         )}
       </Wrapper>
 
-      <RowWrapper t={t} connections={connections} />
+      <RowWrapper t={t} sessions={filteredSessions} />
     </>
   );
 };
 
 export default inject(({ peopleStore }) => {
-  const {
-    connections,
-    isLoading,
-    fetchData,
-    userLastSession,
-    onClickLogoutAllExceptThis,
-  } = peopleStore.selectionStore;
+  const { items, isLoading, fetchData, onClickLogoutAllExceptThis } =
+    peopleStore.selectionStore;
 
   return {
-    connections,
+    items,
     isLoading,
     fetchData,
-    userLastSession,
     onClickLogoutAllExceptThis,
   };
 })(observer(AllSessionsBlock));
diff --git a/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js b/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
index edb5faadac..dc5cc5576f 100644
--- a/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
@@ -99,8 +99,7 @@ const StyledLastSessionBlock = styled.div`
 const LastSessionBlock = (props) => {
   const {
     t,
-    connections,
-    userLastSession,
+    items,
     setDisplayName,
     setDisableDialogVisible,
     setLogoutAllDialogVisible,
@@ -115,12 +114,13 @@ const LastSessionBlock = (props) => {
     isOwner,
     isRoomAdmin,
     isCollaborator,
-  } = userLastSession;
+    connections,
+  } = items;
 
   const fromDateAgo = getFromDateAgo(id);
 
-  const { platform, browser, ip, city, country } = connections[0] ?? {};
   const isOnline = fromDateAgo === "online";
+  const { platform, browser, ip, city, country } = connections[0] ?? {};
 
   const getUserType = () => {
     if (isOwner) return t("Common:Owner");
@@ -227,13 +227,11 @@ const LastSessionBlock = (props) => {
 export default inject(({ setup, peopleStore }) => {
   const { setDisableDialogVisible, setLogoutAllDialogVisible } = setup;
 
-  const { getFromDateAgo, connections, userLastSession, setDisplayName } =
-    peopleStore.selectionStore;
+  const { getFromDateAgo, items, setDisplayName } = peopleStore.selectionStore;
 
   return {
     getFromDateAgo,
-    connections,
-    userLastSession,
+    items,
     setDisplayName,
     setDisableDialogVisible,
     setLogoutAllDialogVisible,
diff --git a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js
index e7fc5adec5..465b38eced 100644
--- a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/SessionsRowContent.js
@@ -31,7 +31,7 @@ const SessionsRowContent = ({ item, sectionWidth }) => {
     >
       <Text fontSize="14px" fontWeight="600" containerWidth="160px" truncate>
         {platform}, {browser?.split(".")[0] ?? ""}
-        <span className="date">{convertTime(date)}</span>
+        <span className="date">{convertTime(new Date(date))}</span>
       </Text>
       <></>
       {(country || city) && (
diff --git a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/index.js b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/index.js
index 249bf9ccb9..542cbfca29 100644
--- a/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/index.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/sub-components/RowView/index.js
@@ -7,18 +7,18 @@ const StyledRowContainer = styled(RowContainer)`
 `;
 
 const RowView = (props) => {
-  const { t, sectionWidth, connections } = props;
+  const { t, sectionWidth, sessions } = props;
 
   return (
     <StyledRowContainer
       useReactWindow={false}
       hasMoreFiles={false}
       itemHeight={58}
-      itemCount={connections.length}
-      filesLength={connections.length}
+      itemCount={sessions.length}
+      filesLength={sessions.length}
       fetchMoreFiles={() => {}}
     >
-      {connections.map((item) => (
+      {sessions.map((item) => (
         <SessionsRow
           t={t}
           key={item.id}
diff --git a/packages/client/src/components/panels/UserSessionsPanel/sub-components/index.js b/packages/client/src/components/panels/UserSessionsPanel/sub-components/index.js
index becea79775..072b448e7d 100644
--- a/packages/client/src/components/panels/UserSessionsPanel/sub-components/index.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/sub-components/index.js
@@ -1,14 +1,14 @@
 import { Consumer } from "@docspace/shared/utils";
 import RowView from "./RowView";
 
-const RowWrapper = ({ t, connections }) => {
+const RowWrapper = ({ t, sessions }) => {
   return (
     <Consumer>
       {(context) => (
         <RowView
           t={t}
           sectionWidth={context.sectionWidth}
-          connections={connections}
+          sessions={sessions}
         />
       )}
     </Consumer>
diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
index bd0bdfbc5c..bdfe4b2341 100644
--- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
+++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
@@ -372,11 +372,9 @@ const SectionHeaderContent = (props) => {
     setLogoutAllDialogVisible,
     isSeveralSelection,
     peopleSelection,
-    setConnections,
-    setUserLastSession,
+    setItems,
     setUserSessionPanelVisible,
     setDisplayName,
-    setStatus,
     getFromDateAgo,
   } = props;
   const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
@@ -417,9 +415,7 @@ const SectionHeaderContent = (props) => {
   );
 
   const onClickSessions = () => {
-    setStatus(fromDateAgo);
-    setUserLastSession(peopleSelection[0]);
-    setConnections(peopleSelection[0].connections);
+    setItems(peopleSelection[0]);
     setUserSessionPanelVisible(true);
   };
 
@@ -594,11 +590,9 @@ export default inject(
       setSelected: peopleSetSelected,
       isSeveralSelection,
       selection: peopleSelection,
-      setConnections,
-      setUserLastSession,
+      setItems,
       setDisplayName,
       allSessions,
-      setStatus,
       getFromDateAgo,
     } = peopleStore.selectionStore;
 
@@ -633,12 +627,10 @@ export default inject(
       setDisableDialogVisible,
       setLogoutDialogVisible,
       setLogoutAllDialogVisible,
-      setConnections,
+      setItems,
       setUserSessionPanelVisible,
-      setUserLastSession,
       setDisplayName,
       allSessions,
-      setStatus,
       getFromDateAgo,
     };
   },
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
index d18c733a34..0590680851 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
@@ -1,11 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import { Base } from "@docspace/shared/themes";
 import { tablet } from "@docspace/shared/utils";
 import { Row } from "@docspace/shared/components/row";
 import styled, { css } from "styled-components";
-import moment from "moment-timezone";
 
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 import SessionsRowContent from "./SessionsRowContent";
@@ -110,45 +109,47 @@ const SessionsRow = (props) => {
     isActive,
     checkedProps,
     displayName,
-    sessionStatus,
+    status,
+    userId,
     connections,
-    sessions,
     locale,
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     setUserSessionPanelVisible,
-    setUserLastSession,
-    setConnections,
+    setItems,
     setDisplayName,
-    setStatus,
     convertDate,
     getFromDateAgo,
     setFromDateAgo,
   } = props;
 
-  const { status, date } = sessions;
-  const fromDateAgo = getFromDateAgo(item.id);
+  const { date } = connections[0] ?? {};
+
+  const fromDateAgo = getFromDateAgo(userId);
   const isChecked = checkedProps?.checked;
-  const isOnline = sessionStatus === "online";
-  const isOffline = status === "offline";
+  const isOnline = status === "online";
 
   useEffect(() => {
     const updateStatus = () => {
-      const showOnline = isOnline && sessionStatus;
-      const showOffline = isOffline ? convertDate(date, locale) : null;
-      setFromDateAgo(item.id, isOnline ? showOnline : showOffline);
+      let statusToShow;
+      if (isOnline && status) {
+        statusToShow = status;
+      } else if (!isOnline && date) {
+        statusToShow = convertDate(t, date, locale);
+      } else {
+        statusToShow = null;
+      }
+      setFromDateAgo(userId, statusToShow);
     };
 
     updateStatus();
     const intervalId = setInterval(updateStatus, 60000);
 
     return () => clearInterval(intervalId);
-  }, [date, sessionStatus, status, locale, item.id]);
+  }, [date, status, locale, userId, isOnline]);
 
   const onClickSessions = () => {
-    setStatus(fromDateAgo);
-    setUserLastSession(item);
-    setConnections(connections);
+    setItems(item);
     setUserSessionPanelVisible(true);
   };
 
@@ -216,7 +217,11 @@ const SessionsRow = (props) => {
           onRowClick={onRowClick}
           onContextClick={onRowContextClick}
         >
-          <SessionsRowContent {...props} fromDateAgo={fromDateAgo} />
+          <SessionsRowContent
+            {...props}
+            isOnline={isOnline}
+            fromDateAgo={fromDateAgo}
+          />
         </StyledRow>
       </div>
     </Wrapper>
@@ -232,10 +237,8 @@ export default inject(
     const locale = (user && user.cultureName) || culture || "en";
 
     const {
-      setUserLastSession,
-      setConnections,
+      setItems,
       setDisplayName,
-      setStatus,
       convertDate,
       getFromDateAgo,
       setFromDateAgo,
@@ -245,11 +248,9 @@ export default inject(
       locale,
       setLogoutAllDialogVisible,
       setDisableDialogVisible,
-      setUserLastSession,
-      setConnections,
       setUserSessionPanelVisible,
+      setItems,
       setDisplayName,
-      setStatus,
       convertDate,
       getFromDateAgo,
       setFromDateAgo,
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
index 39d204ad76..a71e832544 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRowContent.js
@@ -24,17 +24,19 @@ const StyledRowContent = styled(RowContent)`
   }
 `;
 
-const SessionsRowContent = ({ t, item, fromDateAgo, sectionWidth }) => {
-  const { id, displayName, status, sessions, connections } = item;
-
-  const { platform, browser, country, city, ip } = sessions;
-
-  const isOnline = status === "online";
-  const isLastConnection = connections.length > 0;
+const SessionsRowContent = ({
+  t,
+  isOnline,
+  fromDateAgo,
+  displayName,
+  connections,
+  sectionWidth,
+}) => {
+  const { userId, platform, browser, ip, city, country } = connections[0] ?? {};
 
   return (
     <StyledRowContent
-      key={id}
+      key={userId}
       sectionWidth={sectionWidth}
       sideColor={theme.profile.activeSessions.tableCellColor}
     >
@@ -46,8 +48,8 @@ const SessionsRowContent = ({ t, item, fromDateAgo, sectionWidth }) => {
       </Text>
       <></>
       <Text fontSize="12px" fontWeight="600">
-        {isLastConnection ? connections[0]?.platform : platform}
-        {` ${isLastConnection ? connections[0]?.browser : browser}`}
+        {platform}
+        {` ${browser}`}
       </Text>
 
       {(country || city) && (
@@ -58,7 +60,7 @@ const SessionsRowContent = ({ t, item, fromDateAgo, sectionWidth }) => {
       )}
 
       <Text fontSize="12px" fontWeight="600" containerWidth="160px">
-        {isLastConnection ? connections[0]?.ip : ip}
+        {ip}
       </Text>
     </StyledRowContent>
   );
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
index 50f2ec523f..d332e96266 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/index.js
@@ -98,12 +98,12 @@ const RowView = (props) => {
         <SessionsRow
           t={t}
           key={item.id}
+          userId={item.id}
           item={item}
           sectionWidth={sectionWidth}
           displayName={item.displayName}
-          sessionStatus={item.status}
+          status={item.status}
           connections={item.connections}
-          sessions={item.sessions}
         />
       ))}
     </StyledRowContainer>
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
index 7963ef79fa..b7af20635d 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
@@ -1,8 +1,7 @@
-import { useState, useEffect, useCallback } from "react";
+import { useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
 import { Base } from "@docspace/shared/themes";
 import styled, { css } from "styled-components";
-import moment from "moment-timezone";
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
 import { TableRow } from "@docspace/shared/components/table";
@@ -150,48 +149,50 @@ const SessionsTableRow = (props) => {
     onContentRowClick,
     onUserContextClick,
     isActive,
-    hideColumns,
+    checkedProps,
     displayName,
+    hideColumns,
     status,
+    userId,
     connections,
     locale,
-    checkedProps,
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
-    setUserLastSession,
-    setConnections,
     setUserSessionPanelVisible,
+    setItems,
     setDisplayName,
-    setStatus,
     convertDate,
     getFromDateAgo,
     setFromDateAgo,
   } = props;
 
-  const { platform, browser, ip, city, country, date } = connections[0] || {};
+  const { platform, browser, ip, city, country, date } = connections[0] ?? {};
 
-  const fromDateAgo = getFromDateAgo(item.id);
+  const fromDateAgo = getFromDateAgo(userId);
   const isChecked = checkedProps?.checked;
   const isOnline = status === "online";
 
   useEffect(() => {
     const updateStatus = () => {
-      const showOnline = isOnline && status;
-      const showOffline =
-        !isOnline && date ? convertDate(t, date, locale) : null;
-      setFromDateAgo(item.id, isOnline ? showOnline : showOffline);
+      let statusToShow;
+      if (isOnline && status) {
+        statusToShow = status;
+      } else if (!isOnline && date) {
+        statusToShow = convertDate(t, date, locale);
+      } else {
+        statusToShow = null;
+      }
+      setFromDateAgo(userId, statusToShow);
     };
 
     updateStatus();
     const intervalId = setInterval(updateStatus, 60000);
 
     return () => clearInterval(intervalId);
-  }, [date, status, locale, item.id, isOnline]);
+  }, [date, status, locale, userId, isOnline]);
 
   const onClickSessions = () => {
-    setStatus(fromDateAgo);
-    setUserLastSession(item);
-    setConnections(connections);
+    setItems(item);
     setUserSessionPanelVisible(true);
   };
 
@@ -249,7 +250,7 @@ const SessionsTableRow = (props) => {
       }`}
     >
       <StyledTableRow
-        key={item.id}
+        key={userId}
         className="table-row"
         checked={isChecked}
         isActive={isActive}
@@ -318,10 +319,8 @@ export default inject(
     const locale = (user && user.cultureName) || culture || "en";
 
     const {
-      setUserLastSession,
-      setConnections,
+      setItems,
       setDisplayName,
-      setStatus,
       convertDate,
       getFromDateAgo,
       setFromDateAgo,
@@ -331,11 +330,9 @@ export default inject(
       locale,
       setLogoutAllDialogVisible,
       setDisableDialogVisible,
-      setUserLastSession,
-      setConnections,
       setUserSessionPanelVisible,
+      setItems,
       setDisplayName,
-      setStatus,
       convertDate,
       getFromDateAgo,
       setFromDateAgo,
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
index 632f7c3999..46dfdff0a4 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
@@ -163,7 +163,7 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
           <SessionsTableRow
             t={t}
             key={item.id}
-            userId={userId}
+            userId={item.id}
             item={item}
             hideColumns={hideColumns}
             displayName={item.displayName}
diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
index 06fc68ceda..75f43acffa 100644
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
@@ -125,7 +125,7 @@ const Sessions = ({
     currentDeviceType,
   });
 
-  const getIdFromConnections = (connections) => connections?.[0]?.id;
+  const getIdFromConnections = (connections) => connections[0]?.id;
 
   const idFromSelection =
     selection.length > 0
@@ -144,7 +144,7 @@ const Sessions = ({
       ? [bufferSelection.id, ...userIdsFromSelection]
       : [...userIdsFromSelection];
 
-  // if (!isSessionsLoaded) return <SessionsLoader viewAs={viewAs} />;
+  if (!isSessionsLoaded) return <SessionsLoader viewAs={viewAs} />;
 
   return (
     <MainContainer>
diff --git a/packages/client/src/store/SelectionPeopleStore.js b/packages/client/src/store/SelectionPeopleStore.js
index c12f4a2fd1..e5a5799f21 100644
--- a/packages/client/src/store/SelectionPeopleStore.js
+++ b/packages/client/src/store/SelectionPeopleStore.js
@@ -35,11 +35,9 @@ class SelectionStore {
   sessionsData = [];
   dataFromSocket = [];
   displayName = "";
-  status = "";
   fromDateAgo = {};
-  connections = [];
+  items = [];
   platformData = [];
-  userLastSession = [];
   isLoading = false;
   selection = [];
   selectionUsersRights = {
@@ -470,6 +468,42 @@ class SelectionStore {
     this.dataFromSocket = data;
   };
 
+  setDisplayName = (displayName) => {
+    this.displayName = displayName;
+  };
+
+  setItems = (items) => {
+    this.items = items;
+  };
+
+  setPlatformData = (data) => {
+    this.platformData = data;
+  };
+
+  setIsLoading = (isLoading) => {
+    this.isLoading = isLoading;
+  };
+
+  setFromDateAgo = (id, value) => {
+    this.fromDateAgo[id] = value;
+  };
+
+  getFromDateAgo = (sessionId) => {
+    return this.fromDateAgo[sessionId] || "";
+  };
+
+  convertDate = (t, dateString, locale) => {
+    const parsedDate = moment(new Date(dateString).toISOString());
+    const now = moment();
+    const daysDiff = now.diff(parsedDate, "days");
+    moment.locale(locale);
+
+    if (daysDiff < 1) return parsedDate.fromNow();
+    if (daysDiff === 1) return t("Common:Yesterday");
+    if (daysDiff < 7) return parsedDate.fromNow();
+    return parsedDate.format(locale);
+  };
+
   findSessionIndexByUserId = (userId) => {
     return this.dataFromSocket.findIndex((data) => data.id === userId);
   };
@@ -584,64 +618,17 @@ class SelectionStore {
     this.setDataFromSocket(newArr);
   };
 
-  setDisplayName = (displayName) => {
-    this.displayName = displayName;
-  };
-
-  setStatus = (status) => {
-    this.status = status;
-  };
-
-  setConnections = (connections) => {
-    this.connections = connections;
-  };
-
-  setUserLastSession = (userLastSession) => {
-    this.userLastSession = userLastSession;
-  };
-
-  setPlatformData = (data) => {
-    this.platformData = data;
-  };
-
-  setIsLoading = (isLoading) => {
-    this.isLoading = isLoading;
-  };
-
-  setFromDateAgo = (sessionId, value) => {
-    this.fromDateAgo[sessionId] = value;
-  };
-
-  getFromDateAgo = (sessionId) => {
-    return this.fromDateAgo[sessionId] || "";
-  };
-
-  convertDate = (t, dateString, locale) => {
-    const parsedDate = moment(new Date(dateString).toISOString());
-    const now = moment();
-    const daysDiff = now.diff(parsedDate, "days");
-    moment.locale(locale);
-
-    if (daysDiff < 1) return parsedDate.fromNow();
-    if (daysDiff === 1) return t("Common:Yesterday");
-    if (daysDiff < 7) return parsedDate.fromNow();
-    return parsedDate.format(locale);
-  };
-
   getCurrentConnections = (session, data) => {
     const [first, ...other] = session.connections;
     const isCurrentSesstion = session.id === data?.id;
     const connectionsIsEmpty = session.connections.length === 0;
 
     const lastIndex = -1;
-
-    const sessionData = data?.sessions.at(lastIndex);
-
+    const sessionData = data.sessions?.at(lastIndex);
     if (isCurrentSesstion) return [{ ...first, ...sessionData }, ...other];
 
     if (connectionsIsEmpty) {
       if (!sessionData) return [];
-
       return [sessionData];
     }
 
@@ -649,16 +636,13 @@ class SelectionStore {
   };
 
   get allSessions() {
-    const dataFromSocketMap = this.dataFromSocket.reduce((map, data) => {
-      map[data.id] = data;
-      return map;
-    }, {});
+    const dataFromSocketMap = new Map(
+      this.dataFromSocket.map((data) => [data.id, data]),
+    );
 
     const sessions = this.sessionsData.map((session) => {
-      const data = dataFromSocketMap[session.id];
-
+      const data = dataFromSocketMap.get(session.id) || {};
       const connections = this.getCurrentConnections(session, data);
-
       return { ...data, ...session, connections };
     });
 
@@ -685,17 +669,9 @@ class SelectionStore {
   onClickLogoutAllSessions = async (t) => {
     const { removeAllActiveSessionsById } = this.settingsSetupStore;
 
-    const userIdFromBufferSelection =
-      this.selection.length > 0 && this.selection[0].connections.length > 0
-        ? this.selection[0].connections[0].userId
-        : undefined;
-
-    const userIdFromSelection =
-      this.bufferSelection && this.bufferSelection.connections.length > 0
-        ? this.bufferSelection.connections[0].userId
-        : undefined;
-
-    const userId = userIdFromSelection || userIdFromBufferSelection;
+    const bufferSelection = this.bufferSelection?.id;
+    const selection = this.selection[0]?.id;
+    const userId = selection || bufferSelection;
 
     if (!userId)
       return toastr.error(
@@ -705,8 +681,15 @@ class SelectionStore {
     try {
       this.setIsLoading(true);
       await removeAllActiveSessionsById(userId);
-      this.setConnections([]);
-      await this.fetchData();
+
+      const newData = {
+        ...this.items,
+        sessions: [],
+      };
+      this.setItems(newData);
+      const index = this.findSessionIndexByUserId(this.items.id);
+      this.dataFromSocket[index] = newData;
+
       toastr.success(
         t("Settings:LoggedOutByUser", {
           displayName: this.displayName,
@@ -719,35 +702,35 @@ class SelectionStore {
     }
   };
 
-  onClickLogoutAllExceptThis = async (t, id) => {
+  onClickLogoutAllExceptThis = async (t, sessionId) => {
     const { removeAllExceptThisEventId } = this.settingsSetupStore;
 
-    const idFromBufferSelection =
-      this.selection.length > 0 && this.selection[0].connections.length > 0
-        ? this.selection[0].connections[0].id
-        : undefined;
+    const bufferSelection = this.bufferSelection?.connections[0]?.id;
+    const selection = this.selection[0]?.connections[0]?.id;
+    const exceptSessionId = selection || bufferSelection;
 
-    const idFromSelection =
-      this.bufferSelection && this.bufferSelection.connections.length > 0
-        ? this.bufferSelection.connections[0].id
-        : undefined;
-
-    const exceptId = idFromSelection || idFromBufferSelection;
-
-    if (!exceptId)
+    if (!exceptSessionId)
       return toastr.error(
         t("Settings:UserAlreadyLoggedOut", { displayName: this.displayName }),
       );
 
     try {
       this.setIsLoading(true);
-      await removeAllExceptThisEventId(exceptId);
+      await removeAllExceptThisEventId(exceptSessionId);
 
-      const filteredConnections = this.connections.filter(
-        (connection) => connection.id === id,
+      const filteredConnections = this.items.sessions.filter(
+        (session) => session.id === sessionId,
       );
-      this.setConnections(filteredConnections);
-      await this.fetchData();
+
+      const newData = {
+        ...this.items,
+        sessions: filteredConnections,
+      };
+
+      this.setItems(newData);
+      const index = this.findSessionIndexByUserId(this.items.id);
+      this.dataFromSocket[index] = newData;
+
       toastr.success(
         t("Settings:LoggedOutByUserExceptThis", {
           displayName: this.displayName,
@@ -760,27 +743,35 @@ class SelectionStore {
     }
   };
 
-  onClickRemoveSession = async (t, id) => {
+  onClickRemoveSession = async (t, sessionId) => {
     const { removeSession } = this.settingsSetupStore;
 
-    const foundConnection = this.connections.find(
-      (connection) => connection.id === id,
+    const foundConnection = this.items.sessions.find(
+      (session) => session.id === sessionId,
     );
 
     if (!foundConnection) return;
 
     try {
       this.setIsLoading(true);
-      await removeSession(foundConnection.id);
-      const filteredConnections = this.connections.filter(
-        (connection) => connection.id !== id,
+      await removeSession(sessionId);
+      const filteredConnections = this.items.sessions.filter(
+        (session) => session.id !== sessionId,
       );
-      this.setConnections(filteredConnections);
-      await this.fetchData();
+
+      const newData = {
+        ...this.items,
+        sessions: filteredConnections,
+      };
+
+      this.setItems(newData);
+      const index = this.findSessionIndexByUserId(this.items.id);
+      this.dataFromSocket[index] = newData;
+
       toastr.success(
         t("Profile:SuccessLogout", {
           platform: foundConnection.platform,
-          browser: foundConnection.browser,
+          browser: foundConnection.browser?.split(".")[0] ?? "",
         }),
       );
     } catch (error) {
@@ -792,8 +783,8 @@ class SelectionStore {
 
   onClickLogoutAllUsers = async (t) => {
     const { logoutAllUsers } = this.settingsSetupStore;
-    const userIds = this.selection.flatMap((item) =>
-      item.connections.map((connection) => connection.userId),
+    const userIds = this.selection.flatMap((data) =>
+      data.items.map((connection) => connection.userId),
     );
     try {
       this.setIsLoading(true);