useless states were removed and refactored

2024-07-02 11:16:00 +05:00 · 2024-07-02 11:16:00 +05:00 · 2161fcf875
commit 2161fcf875
parent fa1a53e310
13 changed files with 184 additions and 211 deletions
--- 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));
--- 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,
--- 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) && (
--- 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}
--- 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>
--- 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,
    };
  },
--- 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,
--- 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>
  );
--- 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>
--- 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,
--- 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}
--- 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>
--- 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);