refactoring

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

@@ -11,74 +11,85 @@ const StyledLastSessionBlock = styled.div`
     margin-bottom: 12px;
   }
 
-  .online {
+  .session-info-wrapper {
-    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px 0px;
   }
 
-  .session-info-wrapper {
+  .session-info-row {
-    display: flex;
+    display: contents;
-    align-items: center;
+  }
+
+  .session-info-label {
+    padding: 4px;
+    font-size: 13px;
 
-    .session-info-left-container {
     ${(props) =>
       props.theme.interfaceDirection === "rtl"
         ? css`
             margin-left: 24px;
-            `
-          : css`
-              margin-right: 24px;
-            `}
-      p {
-        padding: 8px;
-        font-size: 13px;
-        ${(props) =>
-          props.theme.interfaceDirection === "rtl"
-            ? css`
             padding-right: 0px;
           `
         : css`
+            margin-right: 24px;
             padding-left: 0px;
           `}
   }
+
+  .session-info-value {
+    justify-self: start;
+    font-weight: 600;
+    padding: 4px;
+    font-size: 13px;
+    width: 100%;
+    ::first-letter {
+      text-transform: uppercase;
+    }
   }
 
-    .session-info-right-container {
+  .online {
-      width: 100%;
-      overflow: hidden;
-      p {
     font-weight: 600;
-        padding: 8px;
+    padding: 4px;
     font-size: 13px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
     width: 100%;
-      }
+    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
+    ::first-letter {
+      text-transform: uppercase;
     }
   }
 `;
 
 const LastSessionBlock = (props) => {
-  const { t, sessionData } = props;
+  const { t, sessionStatus, userData } = props;
-  const { status, platform, browser, ip, country, city } = sessionData;
+  const { sessions } = userData;
+  const { platform, browser, ip, city, country } = sessions;
 
-  const isOnline = status === "Online";
+  const isOnline = sessionStatus === "online";
 
   return (
     <StyledLastSessionBlock>
       <Text className="subtitle">{t("Profile:LastSession")}</Text>
       <Box className="session-info-wrapper">
-        <div className="session-info-left-container">
+        <div className="session-info-row">
-          <Text>{t("Common:Active")}</Text>
+          <Text className="session-info-label">{t("Common:Active")}</Text>
-          <Text>{t("Common:Platform")}</Text>
+          <Text className={isOnline ? "online" : "session-info-value"}>
-          <Text>{t("Common:Browser")}</Text>
+            {sessionStatus}
-          <Text>{t("Common:Location")}</Text>
+          </Text>
         </div>
-        <div className="session-info-right-container">
+        <div className="session-info-row">
-          <Text className={isOnline && "online"}>{status}</Text>
+          <Text className="session-info-label">{t("Common:Platform")}</Text>
-          <Text>{platform}</Text>
+          <Text className="session-info-value">{platform}</Text>
-          <Text>{browser}</Text>
+        </div>
-          <Text>
+        <div className="session-info-row">
+          <Text className="session-info-label">{t("Common:Browser")}</Text>
+          <Text className="session-info-value">
+            {browser?.split(".")[0] ?? ""}
+          </Text>
+        </div>
+        <div className="session-info-row">
+          <Text className="session-info-label">{t("Common:Location")}</Text>
+          <Text className="session-info-value" truncate>
             {(country || city) && (
               <>
                 {country}

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

@@ -45,17 +45,19 @@ const UserInfoBlock = (props) => {
     setDisplayName,
   } = props;
 
-  const { avatar, displayName, isAdmin, isOwner } = userData;
+  const { avatar, displayName, isAdmin, isOwner, isRoomAdmin, isCollaborator } =
-  const role = isOwner ? "owner" : isAdmin ? "admin" : null;
+    userData;
 
   const getUserType = () => {
-    if (userData.isOwner) return t("Common:Owner");
+    if (isOwner) return t("Common:Owner");
-    if (userData.isAdmin) return t("Common:DocspaceAdmin");
+    if (isAdmin) return t("Common:DocspaceAdmin");
-    if (userData.isRoomAdmin) return t("Common:RoomAdmin");
+    if (isRoomAdmin) return t("Common:RoomAdmin");
-    if (userData.isCollaborator) return t("Common:PowerUser");
+    if (isCollaborator) return t("Common:PowerUser");
     return t("Common:User");
   };
 
+  const role = isOwner ? "owner" : isAdmin ? "admin" : null;
+
   const onClickLogout = () => {
     setLogoutAllDialogVisible(true);
     setDisplayName(displayName);

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

@@ -83,12 +83,14 @@ const UserSessionsPanel = (props) => {
 
 export default inject(({ setup, dialogsStore }) => {
   const { userSessionsPanelVisible, setUserSessionPanelVisible } = dialogsStore;
+
   const {
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
     userModalData,
     sessionModalData,
     setDisplayName,
+    sessionStatus,
   } = setup;
 
   return {
@@ -99,6 +101,7 @@ export default inject(({ setup, dialogsStore }) => {
     visible: userSessionsPanelVisible,
     setVisible: setUserSessionPanelVisible,
     setDisplayName,
+    sessionStatus,
   };
 })(
   withTranslation(["Settings", "Profile", "Common"])(

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

@@ -167,12 +167,11 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
             item={item}
             hideColumns={hideColumns}
             displayName={item.displayName}
-            // status={item.status}
+            sessionStatus={item.status}
-            // browser={item.browser}
+            connections={item.connections}
-            // platform={item.platform}
+            sessions={item.sessions}
-            // country={item.country}
+            isOwner={item.isOwner}
-            // city={item.city}
+            isAdmin={item.isAdmin}
-            // ip={item.ip}
           />
         ))}
       </TableBody>

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

@@ -79,8 +79,7 @@ const Sessions = ({
   viewAs,
   setViewAs,
   currentDeviceType,
-  allSessions,
+  setSessions,
-  setAllSessions,
   clearSelection,
   disableDialogVisible,
   logoutDialogVisible,
@@ -93,6 +92,9 @@ const Sessions = ({
   socketHelper,
   getUserSessionsById,
   displayName,
+  allSessions,
+  setAllSessions,
+  setSessionsFromSocket,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -107,7 +109,7 @@ const Sessions = ({
     });
 
     socketHelper.on("statuses-in-portal", (data) => {
-      console.log(data);
+      setSessionsFromSocket(data);
     });
   }, [socketHelper]);
 
@@ -118,7 +120,8 @@ const Sessions = ({
         getUserSessionsById(user.id),
       );
       const sessions = await Promise.all(sessionsPromises);
-      setAllSessions([...sessions]);
+      setSessions(sessions);
+      setAllSessions();
     } catch (error) {
       console.error(error);
     }
@@ -137,6 +140,8 @@ const Sessions = ({
     currentDeviceType,
   });
 
+  console.log(JSON.parse(JSON.stringify(allSessions)));
+
   const onClickRemoveAllSessions = () => {
     try {
       setIsLoading(true);
@@ -231,8 +236,13 @@ const Sessions = ({
 export default inject(({ settingsStore, setup, peopleStore }) => {
   const { socketHelper, currentDeviceType } = settingsStore;
   const { getUsersList } = peopleStore.usersStore;
-  const { clearSelection, allSessions, setAllSessions, setAllConnections } =
+  const {
-    peopleStore.selectionStore;
+    clearSelection,
+    allSessions,
+    setSessions,
+    setAllSessions,
+    setSessionsFromSocket,
+  } = peopleStore.selectionStore;
 
   const {
     viewAs,
@@ -253,7 +263,7 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     viewAs,
     setViewAs,
     allSessions,
-    setAllSessions,
+    setSessions,
     clearSelection,
     disableDialogVisible,
     logoutDialogVisible,
@@ -264,9 +274,10 @@ export default inject(({ settingsStore, setup, peopleStore }) => {
     platformModalData,
     socketHelper,
     getUsersList,
-    setAllConnections,
     getUserSessionsById,
     displayName,
+    setAllSessions,
+    setSessionsFromSocket,
   };
 })(
   withTranslation(["Settings", "Profile", "Common", "ChangeUserStatusDialog"])(

packages/client/src/store/SelectionPeopleStore.js

@@ -31,7 +31,8 @@ import { getUserStatus } from "../helpers/people-helpers";
 class SelectionStore {
   peopleStore = null;
   allSessions = [];
-  allConnections = [];
+  sessions = [];
+  sessionsFromSocket = [];
   selection = [];
   selectionUsersRights = {
     isVisitor: 0,
@@ -260,7 +261,7 @@ class SelectionStore {
   setSelected = (selected, isSessionsPage) => {
     this.bufferSelection = null;
     this.selected = selected;
-    const sessions = this.allSessions;
+    const sessions = this.sessions;
     const list = this.peopleStore.usersStore.peopleList;
 
     if (selected !== "none" && selected !== "close") {
@@ -425,22 +426,35 @@ class SelectionStore {
 
   get isHeaderIndeterminate() {
     return (
-      this.isHeaderVisible && this.selection.length !== this.allSessions.length
+      this.isHeaderVisible && this.selection.length !== this.sessions.length
     );
   }
 
   get isHeaderChecked() {
     return (
-      this.isHeaderVisible && this.selection.length === this.allSessions.length
+      this.isHeaderVisible && this.selection.length === this.sessions.length
     );
   }
 
-  setAllSessions = (sessions) => {
+  setSessions = (sessions) => {
-    this.allSessions = sessions;
+    this.sessions = sessions;
   };
 
-  setAllConnections = (connections) => {
+  setSessionsFromSocket = (data) => {
-    this.allConnections = connections;
+    this.sessionsFromSocket = data;
+  };
+
+  setAllSessions = () => {
+    this.allSessions = this.sessions.map((session) => {
+      const socketData = this.sessionsFromSocket.find(
+        (user) => user.id === session.id,
+      );
+      return {
+        ...session,
+        status: socketData ? socketData.status : "offline",
+        sessions: socketData ? socketData.sessions.slice(-1)[0] : [],
+      };
+    });
   };
 }
 

packages/client/src/store/SettingsSetupStore.js

@@ -107,6 +107,7 @@ class SettingsSetupStore {
 
   securityLifetime = [];
 
+  sessionStatus = "";
   displayName = "";
   sessionsIsInit = false;
   sessions = [];
@@ -616,6 +617,10 @@ class SettingsSetupStore {
   setDisplayName = (name) => {
     this.displayName = name;
   };
+
+  setSessionStatus = (status) => {
+    this.sessionStatus = status;
+  };
 }
 
 export default SettingsSetupStore;