relative time state was moved to store

packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js

@@ -376,9 +376,12 @@ const SectionHeaderContent = (props) => {
     setUserLastSession,
     setUserSessionPanelVisible,
     setDisplayName,
+    setStatus,
+    getFromDateAgo,
   } = props;
   const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
   const arrayOfParams = getArrayOfParams();
+  const fromDateAgo = getFromDateAgo(peopleSelection[0]?.id);
 
   const menuItems = isSessionsPage ? (
     <>
@@ -414,6 +417,7 @@ const SectionHeaderContent = (props) => {
   );
 
   const onClickSessions = () => {
+    setStatus(fromDateAgo);
     setUserLastSession(peopleSelection[0]);
     setConnections(peopleSelection[0].connections);
     setUserSessionPanelVisible(true);
@@ -594,6 +598,8 @@ export default inject(
       setUserLastSession,
       setDisplayName,
       allSessions,
+      setStatus,
+      getFromDateAgo,
     } = peopleStore.selectionStore;
 
     const { admins, selectorIsOpen } = setup.security.accessRight;
@@ -632,6 +638,8 @@ export default inject(
       setUserLastSession,
       setDisplayName,
       allSessions,
+      setStatus,
+      getFromDateAgo,
     };
   },
 )(

packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js

@@ -106,6 +106,7 @@ const SessionsRow = (props) => {
     sectionWidth,
     onContentRowSelect,
     onContentRowClick,
+    onUserContextClick,
     isActive,
     checkedProps,
     displayName,
@@ -120,12 +121,13 @@ const SessionsRow = (props) => {
     setConnections,
     setDisplayName,
     setStatus,
+    convertDate,
+    getFromDateAgo,
+    setFromDateAgo,
   } = props;
 
-  const [fromDateAgo, setFromDateAgo] = useState("");
-
   const { status, date } = sessions;
-
+  const fromDateAgo = getFromDateAgo(item.id);
   const isChecked = checkedProps?.checked;
   const isOnline = sessionStatus === "online";
   const isOffline = status === "offline";
@@ -134,34 +136,14 @@ const SessionsRow = (props) => {
     const updateStatus = () => {
       const showOnline = isOnline && sessionStatus;
       const showOffline = isOffline ? convertDate(date, locale) : null;
-      setFromDateAgo(isOnline ? showOnline : showOffline);
+      setFromDateAgo(item.id, isOnline ? showOnline : showOffline);
     };
 
     updateStatus();
     const intervalId = setInterval(updateStatus, 60000);
 
     return () => clearInterval(intervalId);
-  }, [date, sessionStatus, status, locale]);
+  }, [date, sessionStatus, status, locale, item.id]);
-
-  const convertDate = (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);
-  };
-
-  const onRowClick = useCallback(() => {
-    onContentRowClick && onContentRowClick(!isChecked, item);
-  }, [isChecked, item, onContentRowClick]);
-
-  const onRowContextClick = useCallback(() => {
-    onContentRowClick && onContentRowClick(!isChecked, item, false);
-  }, [isChecked, item, onContentRowClick]);
 
   const onClickSessions = () => {
     setStatus(fromDateAgo);
@@ -204,6 +186,15 @@ const SessionsRow = (props) => {
     },
   ];
 
+  const onRowContextClick = useCallback(
+    (rightMouseButtonClick) => {
+      onUserContextClick?.(item, !rightMouseButtonClick);
+    },
+    [item, onUserContextClick],
+  );
+
+  const onRowClick = (e) => onContentRowClick?.(e, item);
+
   return (
     <Wrapper
       className={`user-item row-wrapper ${
@@ -240,8 +231,15 @@ export default inject(
     const { user } = userStore;
     const locale = (user && user.cultureName) || culture || "en";
 
-    const { setUserLastSession, setConnections, setDisplayName, setStatus } =
+    const {
-      peopleStore.selectionStore;
+      setUserLastSession,
+      setConnections,
+      setDisplayName,
+      setStatus,
+      convertDate,
+      getFromDateAgo,
+      setFromDateAgo,
+    } = peopleStore.selectionStore;
 
     return {
       locale,
@@ -252,6 +250,9 @@ export default inject(
       setUserSessionPanelVisible,
       setDisplayName,
       setStatus,
+      convertDate,
+      getFromDateAgo,
+      setFromDateAgo,
     };
   },
 )(withContent(observer(SessionsRow)));

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

@@ -164,13 +164,15 @@ const SessionsTableRow = (props) => {
     setUserSessionPanelVisible,
     setDisplayName,
     setStatus,
-    isOneUserSelection,
+    convertDate,
+    getFromDateAgo,
+    setFromDateAgo,
   } = props;
 
-  const [fromDateAgo, setFromDateAgo] = useState("");
-
   const { platform, browser, ip, city, country, status, date } = sessions;
 
+  const isLastConnection = connections.length > 0;
+  const fromDateAgo = getFromDateAgo(item.id);
   const isChecked = checkedProps?.checked;
   const isOnline = sessionStatus === "online";
   const isOffline = status === "offline";
@@ -179,26 +181,14 @@ const SessionsTableRow = (props) => {
     const updateStatus = () => {
       const showOnline = isOnline && sessionStatus;
       const showOffline = isOffline ? convertDate(date, locale) : null;
-      setFromDateAgo(isOnline ? showOnline : showOffline);
+      setFromDateAgo(item.id, isOnline ? showOnline : showOffline);
     };
 
     updateStatus();
     const intervalId = setInterval(updateStatus, 60000);
 
     return () => clearInterval(intervalId);
-  }, [date, sessionStatus, status, locale]);
+  }, [date, sessionStatus, status, locale, item.id]);
-
-  const convertDate = (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);
-  };
 
   const onClickSessions = () => {
     setStatus(fromDateAgo);
@@ -296,10 +286,12 @@ const SessionsTableRow = (props) => {
 
         <TableCell>
           <Text className="session-info" truncate>
-            {platform},&nbsp;
+            {isLastConnection ? connections[0]?.platform : platform},&nbsp;
           </Text>
           <Text className="session-info" truncate>
-            {browser?.split(".")[0] ?? ""}
+            {isLastConnection
+              ? connections[0]?.browser
+              : browser?.split(".")[0] ?? ""}
           </Text>
         </TableCell>
 
@@ -313,7 +305,7 @@ const SessionsTableRow = (props) => {
                 <span className="divider"></span>
               </>
             )}
-            {ip}
+            {isLastConnection ? connections[0]?.ip : ip}
           </Text>
         </TableCell>
       </StyledTableRow>
@@ -334,7 +326,9 @@ export default inject(
       setConnections,
       setDisplayName,
       setStatus,
-      isOneUserSelection,
+      convertDate,
+      getFromDateAgo,
+      setFromDateAgo,
     } = peopleStore.selectionStore;
 
     return {
@@ -346,7 +340,9 @@ export default inject(
       setUserSessionPanelVisible,
       setDisplayName,
       setStatus,
-      isOneUserSelection,
+      convertDate,
+      getFromDateAgo,
+      setFromDateAgo,
     };
   },
 )(withContent(observer(SessionsTableRow)));

packages/client/src/store/SelectionPeopleStore.js

@@ -28,14 +28,17 @@ import { makeAutoObservable, runInAction } from "mobx";
 import { EmployeeStatus } from "@docspace/shared/enums";
 import { toastr } from "@docspace/shared/components/toast";
 import SettingsSetupStore from "./SettingsSetupStore";
+import moment from "moment-timezone";
 
 class SelectionStore {
   peopleStore = null;
   allSessions = [];
   sessionsData = [];
   dataFromSocket = [];
+  currentDataFromSocket = [];
   displayName = "";
   status = "";
+  fromDateAgo = {};
   connections = [];
   platformData = [];
   userLastSession = [];
@@ -482,7 +485,31 @@ class SelectionStore {
     this.isLoading = isLoading;
   };
 
-  updateAllSessions = (sessions, dataFromSocket) => {
+  setCurrentDataFromSocket = (data) => {
+    this.currentDataFromSocket = data;
+  };
+
+  setFromDateAgo = (sessionId, value) => {
+    this.fromDateAgo[sessionId] = value;
+  };
+
+  getFromDateAgo = (sessionId) => {
+    return this.fromDateAgo[sessionId] || "";
+  };
+
+  convertDate = (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);
+  };
+
+  updateAllSessions = (sessions, dataFromSocket, currentDataFromSocket) => {
     const socketDataMap = new Map(
       dataFromSocket.map((user) => [user.id, user]),
     );
@@ -495,10 +522,17 @@ class SelectionStore {
 
     const newAllSessions = filteredSessions.map((session) => {
       const socketData = socketDataMap.get(session.id);
+      const currentSocketData =
+        currentDataFromSocket && currentDataFromSocket.id === session.id
+          ? currentDataFromSocket
+          : null;
+
+      const latestData = currentSocketData || socketData;
+
       return {
         ...session,
-        status: socketData ? socketData.status : "offline",
+        status: latestData ? latestData.status : "offline",
-        sessions: socketData ? socketData.sessions.slice(-1)[0] : [],
+        sessions: latestData ? latestData.sessions.slice(-1)[0] : [],
       };
     });