fixed row view and refactored

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

@@ -1,10 +1,11 @@
+import { useState, useEffect, useCallback } from "react";
 import { inject, observer } from "mobx-react";
-import { useCallback } from "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";
@@ -100,20 +101,59 @@ const StyledRow = styled(Row)`
 const SessionsRow = (props) => {
   const {
     t,
-    sectionWidth,
     item,
-    checkedProps,
+    element,
+    sectionWidth,
     onContentRowSelect,
     onContentRowClick,
-    element,
     isActive,
+    checkedProps,
+    displayName,
+    sessionStatus,
+    connections,
+    sessions,
+    locale,
     setLogoutAllDialogVisible,
     setDisableDialogVisible,
-    setSessionModalData,
     setUserSessionPanelVisible,
+    setUserLastSession,
+    setConnections,
+    setDisplayName,
+    setStatus,
   } = props;
 
-  const isChecked = checkedProps.checked;
+  const [fromDateAgo, setFromDateAgo] = useState("");
+
+  const { status, date } = sessions;
+
+  const isChecked = checkedProps?.checked;
+  const isOnline = sessionStatus === "online";
+  const isOffline = status === "offline";
+
+  useEffect(() => {
+    const updateStatus = () => {
+      const showOnline = isOnline && sessionStatus;
+      const showOffline = isOffline ? convertDate(date, locale) : null;
+      setFromDateAgo(isOnline ? showOnline : showOffline);
+    };
+
+    updateStatus();
+    const intervalId = setInterval(updateStatus, 60000);
+
+    return () => clearInterval(intervalId);
+  }, [date, sessionStatus, status, locale]);
+
+  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);
@@ -124,13 +164,15 @@ const SessionsRow = (props) => {
   }, [isChecked, item, onContentRowClick]);
 
   const onClickSessions = () => {
-    setSessionModalData({ ...item });
+    setStatus(fromDateAgo);
+    setUserLastSession(item);
+    setConnections(connections);
     setUserSessionPanelVisible(true);
   };
 
   const onClickLogout = () => {
     setLogoutAllDialogVisible(true);
-    setSessionModalData({ displayName: item.displayName });
+    setDisplayName(displayName);
   };
 
   const onClickDisable = () => {
@@ -183,25 +225,33 @@ const SessionsRow = (props) => {
           onRowClick={onRowClick}
           onContextClick={onRowContextClick}
         >
-          <SessionsRowContent {...props} />
+          <SessionsRowContent {...props} fromDateAgo={fromDateAgo} />
         </StyledRow>
       </div>
     </Wrapper>
   );
 };
 
-export default inject(({ setup, dialogsStore }) => {
-  const { setUserSessionPanelVisible } = dialogsStore;
-  const {
-    setLogoutAllDialogVisible,
-    setDisableDialogVisible,
-    setSessionModalData,
-  } = setup;
+export default inject(
+  ({ setup, dialogsStore, settingsStore, userStore, peopleStore }) => {
+    const { setUserSessionPanelVisible } = dialogsStore;
+    const { setLogoutAllDialogVisible, setDisableDialogVisible } = setup;
+    const { culture } = settingsStore;
+    const { user } = userStore;
+    const locale = (user && user.cultureName) || culture || "en";
 
-  return {
-    setLogoutAllDialogVisible,
-    setDisableDialogVisible,
-    setSessionModalData,
-    setUserSessionPanelVisible,
-  };
-})(withContent(observer(SessionsRow)));
+    const { setUserLastSession, setConnections, setDisplayName, setStatus } =
+      peopleStore.selectionStore;
+
+    return {
+      locale,
+      setLogoutAllDialogVisible,
+      setDisableDialogVisible,
+      setUserLastSession,
+      setConnections,
+      setUserSessionPanelVisible,
+      setDisplayName,
+      setStatus,
+    };
+  },
+)(withContent(observer(SessionsRow)));

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

@@ -8,6 +8,9 @@ const StyledRowContent = styled(RowContent)`
     color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
     margin-left: 4px;
     font-size: 14px;
+    ::first-letter {
+      text-transform: uppercase;
+    }
   }
 
   .offline {
@@ -15,34 +18,30 @@ const StyledRowContent = styled(RowContent)`
     color: ${(props) => props.theme.profile.activeSessions.tableCellColor};
     font-size: 14px;
     margin-left: 4px;
+    ::first-letter {
+      text-transform: uppercase;
+    }
   }
 `;
 
-const SessionsRowContent = ({ sectionWidth, item }) => {
-  const {
-    displayName,
+const SessionsRowContent = ({ t, item, fromDateAgo, sectionWidth }) => {
+  const { id, displayName, status, sessions } = item;
 
-    status,
-    platform,
-    browser,
-    country,
-    city,
-    ip,
-    userId,
-  } = item;
+  const { platform, browser, country, city, ip } = sessions;
 
-  const isOnline = status === "Online";
-  const className = isOnline ? "online" : "offline";
+  const isOnline = status === "online";
 
   return (
     <StyledRowContent
-      key={userId}
+      key={id}
       sectionWidth={sectionWidth}
       sideColor={theme.profile.activeSessions.tableCellColor}
     >
       <Text fontSize="14px" fontWeight="600">
         {displayName}
-        <span className={className}>{status}</span>
+        <span className={isOnline ? "online" : "offline"}>
+          {t(`Common:${fromDateAgo}`)}
+        </span>
       </Text>
       <></>
       <Text fontSize="12px" fontWeight="600">

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

@@ -100,6 +100,10 @@ const RowView = (props) => {
           key={item.id}
           item={item}
           sectionWidth={sectionWidth}
+          displayName={item.displayName}
+          sessionStatus={item.status}
+          connections={item.connections}
+          sessions={item.sessions}
         />
       ))}
     </StyledRowContainer>

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

@@ -5,7 +5,6 @@ import styled, { css } from "styled-components";
 import moment from "moment-timezone";
 import withContent from "SRC_DIR/HOCs/withPeopleContent";
 
-import { Avatar } from "@docspace/shared/components/avatar";
 import { TableRow } from "@docspace/shared/components/table";
 import { TableCell } from "@docspace/shared/components/table";
 import { Text } from "@docspace/shared/components/text";