all methods were moved to store

packages/client/src/components/dialogs/LogoutAllSessionDialog/index.js

@@ -55,13 +55,22 @@ const LogoutAllSessionDialog = ({
   };
 
   const onClickLogout = () => {
-    !isChecked
-      ? onLogoutAllSessions()
-      : onLogoutAllExceptThis(connections[0]?.id);
+    const exceptId = connections[0]?.id;
+    if (!isChecked) {
+      onLogoutAllSessions(t);
+      onClose();
+    } else {
+      onLogoutAllExceptThis(t, exceptId);
+      onClose();
+    }
   };
 
   const onClickRemove = () => {
-    isChecked ? onRemoveAllSessions() : onRemoveAllExceptThis();
+    if (isChecked) {
+      onRemoveAllSessions();
+    } else {
+      onRemoveAllExceptThis();
+    }
   };
 
   const bodySubtitle =

packages/client/src/components/dialogs/LogoutSessionDialog/index.js

@@ -37,8 +37,9 @@ const LogoutSessionDialog = ({
   onRemoveSession,
   isLoading,
 }) => {
-  const onClick = () => {
-    onRemoveSession(data.id);
+  const onRemoveClick = () => {
+    onRemoveSession(t, data.id);
+    onClose();
   };
 
   return (
@@ -63,7 +64,7 @@ const LogoutSessionDialog = ({
           size="normal"
           scale
           primary={true}
-          onClick={onClick}
+          onClick={onRemoveClick}
           isLoading={isLoading}
         />
         <Button

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

@@ -1,8 +1,6 @@
-import { useState } from "react";
 import { observer, inject } from "mobx-react";
 import { Text } from "@docspace/shared/components/text";
 import { Button } from "@docspace/shared/components/button";
-import { toastr } from "@docspace/shared/components/toast";
 import styled from "styled-components";
 import RowWrapper from "./sub-components";
 
@@ -24,34 +22,14 @@ const Wrapper = styled.div`
 const AllSessionsBlock = (props) => {
   const {
     t,
+    isLoading,
     connections,
-    setConnections,
     userLastSession,
-    fetchData,
-    removeAllExceptThisEventId,
+    onClickLogoutAllExceptThis,
   } = props;
 
-  const [isLoading, setIsLoading] = useState(false);
   const isDisabled = connections.length > 0;
-
-  const onLogoutClick = async () => {
-    const exceptId = userLastSession.connections[0]?.id;
-    try {
-      setIsLoading(true);
-      await removeAllExceptThisEventId(connections[0]?.id);
-
-      const filteredConnections = connections.filter(
-        (connection) => connection.id === exceptId,
-      );
-      setConnections(filteredConnections);
-      await fetchData();
-      toastr.success("Successfully logout except this");
-    } catch (error) {
-      toastr.error(error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
+  const exceptId = userLastSession.connections[0]?.id;
 
   return (
     <>
@@ -61,7 +39,7 @@ const AllSessionsBlock = (props) => {
         <Button
           label={t("Profile:LogoutFromAllSessions")}
           size="small"
-          onClick={onLogoutClick}
+          onClick={() => onClickLogoutAllExceptThis(t, exceptId)}
           scale={true}
           isLoading={isLoading}
           isDisabled={!isDisabled}
@@ -73,16 +51,20 @@ const AllSessionsBlock = (props) => {
   );
 };
 
-export default inject(({ setup, peopleStore }) => {
-  const { removeAllExceptThisEventId } = setup;
-  const { connections, setConnections, fetchData, userLastSession } =
-    peopleStore.selectionStore;
+export default inject(({ peopleStore }) => {
+  const {
+    connections,
+    isLoading,
+    fetchData,
+    userLastSession,
+    onClickLogoutAllExceptThis,
+  } = peopleStore.selectionStore;
 
   return {
     connections,
-    setConnections,
-    userLastSession,
+    isLoading,
     fetchData,
-    removeAllExceptThisEventId,
+    userLastSession,
+    onClickLogoutAllExceptThis,
   };
 })(observer(AllSessionsBlock));

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

@@ -1,8 +1,7 @@
-import { useState, useEffect } from "react";
+import { useEffect } from "react";
 import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { mobile, tablet } from "@docspace/shared/utils";
-import { toastr } from "@docspace/shared/components/toast";
 import styled from "styled-components";
 
 import { MainContainer } from "../StyledSecurity";
@@ -82,10 +81,10 @@ const Sessions = ({
   clearSelection,
   setDataFromSocket,
   connections,
-  setConnections,
   updateAllSessions,
   platformData,
   fetchData,
+  isLoading,
   viewAs,
   setViewAs,
   socketHelper,
@@ -96,12 +95,10 @@ const Sessions = ({
   setDisableDialogVisible,
   setLogoutDialogVisible,
   setLogoutAllDialogVisible,
-  removeSession,
-  removeAllActiveSessionsById,
-  removeAllExceptThisEventId,
+  onClickLogoutAllSessions,
+  onClickLogoutAllExceptThis,
+  onClickRemoveSession,
 }) => {
-  const [isLoading, setIsLoading] = useState(false);
-
   useEffect(() => {
     socketHelper.emit({
       command: "subscribe",
@@ -133,69 +130,6 @@ const Sessions = ({
     currentDeviceType,
   });
 
-  const onClickLogoutAllSessions = async () => {
-    try {
-      setIsLoading(true);
-      await removeAllActiveSessionsById(connections[0]?.userId);
-      setConnections([]);
-      await fetchData();
-      toastr.success("Successfully logout all sessions");
-    } catch (error) {
-      toastr.error("The user is already logged out");
-    } finally {
-      setIsLoading(false);
-      setLogoutAllDialogVisible(false);
-    }
-  };
-
-  const onClickLogoutAllExceptThis = async (id) => {
-    try {
-      setIsLoading(true);
-      await removeAllExceptThisEventId(connections[0]?.id);
-
-      const filteredConnections = connections.filter(
-        (connection) => connection.id === id,
-      );
-      setConnections(filteredConnections);
-      await fetchData();
-      toastr.success("Successfully logout except this");
-    } catch (error) {
-      toastr.error("The user is already logged out");
-    } finally {
-      setIsLoading(false);
-      setLogoutAllDialogVisible(false);
-    }
-  };
-
-  const onClickRemoveSession = async (id) => {
-    const foundConnection = connections.find(
-      (connection) => connection.id === id,
-    );
-
-    if (!foundConnection) return;
-
-    try {
-      setIsLoading(true);
-      await removeSession(foundConnection.id);
-      const filteredConnections = connections.filter(
-        (connection) => connection.id !== id,
-      );
-      setConnections(filteredConnections);
-      await fetchData();
-      toastr.success(
-        t("Profile:SuccessLogout", {
-          platform: foundConnection.platform,
-          browser: foundConnection.browser,
-        }),
-      );
-    } catch (error) {
-      toastr.error(error);
-    } finally {
-      setIsLoading(false);
-      setLogoutDialogVisible(false);
-    }
-  };
-
   // console.log("allSessions", JSON.parse(JSON.stringify(allSessions)));
   // console.log("sessionsData", JSON.parse(JSON.stringify(sessionsData)));
   // console.log("connections", JSON.parse(JSON.stringify(connections)));
@@ -267,10 +201,13 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     clearSelection,
     setDataFromSocket,
     connections,
-    setConnections,
     updateAllSessions,
     platformData,
     fetchData,
+    isLoading,
+    onClickLogoutAllSessions,
+    onClickLogoutAllExceptThis,
+    onClickRemoveSession,
   } = peopleStore.selectionStore;
 
   const {
@@ -282,9 +219,6 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     setDisableDialogVisible,
     setLogoutDialogVisible,
     setLogoutAllDialogVisible,
-    removeSession,
-    removeAllActiveSessionsById,
-    removeAllExceptThisEventId,
   } = setup;
 
   return {
@@ -295,7 +229,6 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     clearSelection,
     setDataFromSocket,
     connections,
-    setConnections,
     updateAllSessions,
     platformData,
     fetchData,
@@ -309,9 +242,10 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     setDisableDialogVisible,
     setLogoutDialogVisible,
     setLogoutAllDialogVisible,
-    removeSession,
-    removeAllActiveSessionsById,
-    removeAllExceptThisEventId,
+    isLoading,
+    onClickLogoutAllSessions,
+    onClickLogoutAllExceptThis,
+    onClickRemoveSession,
   };
 })(
   withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(

packages/client/src/pages/Profile/Section/Body/sub-components/active-session/index.js

@@ -132,7 +132,7 @@ const ActiveSessions = ({
     }
   };
 
-  const onClickRemoveSession = async (id) => {
+  const onClickRemoveSession = async (t, id) => {
     const foundSession = sessions.find((s) => s.id === id);
     try {
       setIsLoading(true);

packages/client/src/store/SelectionPeopleStore.js

@@ -25,9 +25,10 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import { makeAutoObservable, runInAction } from "mobx";
-import api from "@docspace/shared/api";
 import { EmployeeStatus } from "@docspace/shared/enums";
 import { getUserStatus } from "../helpers/people-helpers";
+import { toastr } from "@docspace/shared/components/toast";
+import SettingsSetupStore from "./SettingsSetupStore";
 
 class SelectionStore {
   peopleStore = null;
@@ -39,6 +40,7 @@ class SelectionStore {
   connections = [];
   platformData = [];
   userLastSession = [];
+  isLoading = false;
   selection = [];
   selectionUsersRights = {
     isVisitor: 0,
@@ -51,6 +53,7 @@ class SelectionStore {
 
   constructor(peopleStore) {
     this.peopleStore = peopleStore;
+    this.settingsSetupStore = new SettingsSetupStore(this);
 
     makeAutoObservable(this);
   }
@@ -474,6 +477,10 @@ class SelectionStore {
     this.platformData = data;
   };
 
+  setIsLoading = (isLoading) => {
+    this.isLoading = isLoading;
+  };
+
   updateAllSessions = (sessions, dataFromSocket) => {
     const socketDataMap = new Map(
       dataFromSocket.map((user) => [user.id, user]),
@@ -499,16 +506,13 @@ class SelectionStore {
     });
   };
 
-  getUserSessionsById = (userId) => {
-    return api.settings.getUserSessionsById(userId);
-  };
-
   fetchData = async () => {
+    const { getUserSessionsById } = this.settingsSetupStore;
     const { getUsersList } = this.peopleStore.usersStore;
     try {
       const users = await getUsersList();
       const sessionsPromises = users.map((user) =>
-        this.getUserSessionsById(user.id),
+        getUserSessionsById(user.id),
       );
       const sessions = await Promise.all(sessionsPromises);
       this.setSessionsData(sessions);
@@ -517,6 +521,78 @@ class SelectionStore {
       console.error(error);
     }
   };
+
+  onClickLogoutAllSessions = async (t) => {
+    const { removeAllActiveSessionsById } = this.settingsSetupStore;
+    const userId = this.connections[0]?.userId;
+
+    if (!userId) return toastr.error(t("The user is already logged out"));
+
+    try {
+      this.setIsLoading(true);
+      await removeAllActiveSessionsById(userId);
+      this.setConnections([]);
+      await this.fetchData();
+      toastr.success(t("Successfully logout all sessions"));
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      this.setIsLoading(false);
+    }
+  };
+
+  onClickLogoutAllExceptThis = async (t, id) => {
+    const { removeAllExceptThisEventId } = this.settingsSetupStore;
+    const exceptId = this.connections[0]?.id;
+
+    if (!exceptId) return toastr.error(t("The user is already logged out"));
+
+    try {
+      this.setIsLoading(true);
+      await removeAllExceptThisEventId(exceptId);
+
+      const filteredConnections = this.connections.filter(
+        (connection) => connection.id === id,
+      );
+      this.setConnections(filteredConnections);
+      await this.fetchData();
+      toastr.success(t("Successfully logout all sessions"));
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      this.setIsLoading(false);
+    }
+  };
+
+  onClickRemoveSession = async (t, id) => {
+    const { removeSession } = this.settingsSetupStore;
+
+    const foundConnection = this.connections.find(
+      (connection) => connection.id === id,
+    );
+
+    if (!foundConnection) return;
+
+    try {
+      this.setIsLoading(true);
+      await removeSession(foundConnection.id);
+      const filteredConnections = this.connections.filter(
+        (connection) => connection.id !== id,
+      );
+      this.setConnections(filteredConnections);
+      await this.fetchData();
+      toastr.success(
+        t("Profile:SuccessLogout", {
+          platform: foundConnection.platform,
+          browser: foundConnection.browser,
+        }),
+      );
+    } catch (error) {
+      toastr.error(error);
+    } finally {
+      this.setIsLoading(false);
+    }
+  };
 }
 
 export default SelectionStore;

packages/client/src/store/SettingsSetupStore.js

@@ -553,6 +553,10 @@ class SettingsSetupStore {
     return api.settings.getAllActiveSessions();
   };
 
+  getUserSessionsById = (userId) => {
+    return api.settings.getUserSessionsById(userId);
+  };
+
   removeAllActiveSessionsById = (userId) => {
     return api.settings.removeAllActiveSessionsById(userId);
   };