refactoring

2024-06-05 18:13:52 +05:00 · 2024-06-05 18:13:52 +05:00 · da34b776c4
commit da34b776c4
parent 1d11ad3eb5
7 changed files with 124 additions and 79 deletions
--- a/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/LastSessionBlock.js
@ -11,74 +11,85 @@ const StyledLastSessionBlock = styled.div`
    margin-bottom: 12px;
  }

-  .online {
-    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
+  .session-info-wrapper {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px 0px;
  }

-  .session-info-wrapper {
-    display: flex;
-    align-items: center;
+  .session-info-row {
+    display: contents;
+  }

-    .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`
-                padding-left: 0px;
-              `}
-      }
+  .session-info-label {
+    padding: 4px;
+    font-size: 13px;
+
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-left: 24px;
+            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 {
-      width: 100%;
-      overflow: hidden;
-      p {
-        font-weight: 600;
-        padding: 8px;
-        font-size: 13px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        width: 100%;
-      }
+  .online {
+    font-weight: 600;
+    padding: 4px;
+    font-size: 13px;
+    width: 100%;
+    color: ${(props) => props.theme.profile.activeSessions.textOnlineColor};
+    ::first-letter {
+      text-transform: uppercase;
    }
  }
 `;

 const LastSessionBlock = (props) => {
-  const { t, sessionData } = props;
-  const { status, platform, browser, ip, country, city } = sessionData;
+  const { t, sessionStatus, userData } = props;
+  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">
-          <Text>{t("Common:Active")}</Text>
-          <Text>{t("Common:Platform")}</Text>
-          <Text>{t("Common:Browser")}</Text>
-          <Text>{t("Common:Location")}</Text>
+        <div className="session-info-row">
+          <Text className="session-info-label">{t("Common:Active")}</Text>
+          <Text className={isOnline ? "online" : "session-info-value"}>
+            {sessionStatus}
+          </Text>
        </div>
-        <div className="session-info-right-container">
-          <Text className={isOnline && "online"}>{status}</Text>
-          <Text>{platform}</Text>
-          <Text>{browser}</Text>
-          <Text>
+        <div className="session-info-row">
+          <Text className="session-info-label">{t("Common:Platform")}</Text>
+          <Text className="session-info-value">{platform}</Text>
+        </div>
+        <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}
--- a/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js
+++ b/packages/client/src/components/panels/UserSessionsPanel/UserInfoBlock.js
@ -45,17 +45,19 @@ const UserInfoBlock = (props) => {
    setDisplayName,
  } = props;

-  const { avatar, displayName, isAdmin, isOwner } = userData;
-  const role = isOwner ? "owner" : isAdmin ? "admin" : null;
+  const { avatar, displayName, isAdmin, isOwner, isRoomAdmin, isCollaborator } =
+    userData;

  const getUserType = () => {
-    if (userData.isOwner) return t("Common:Owner");
-    if (userData.isAdmin) return t("Common:DocspaceAdmin");
-    if (userData.isRoomAdmin) return t("Common:RoomAdmin");
-    if (userData.isCollaborator) return t("Common:PowerUser");
+    if (isOwner) return t("Common:Owner");
+    if (isAdmin) return t("Common:DocspaceAdmin");
+    if (isRoomAdmin) return t("Common:RoomAdmin");
+    if (isCollaborator) return t("Common:PowerUser");
    return t("Common:User");
  };

+  const role = isOwner ? "owner" : isAdmin ? "admin" : null;
+
  const onClickLogout = () => {
    setLogoutAllDialogVisible(true);
    setDisplayName(displayName);
--- a/packages/client/src/components/panels/UserSessionsPanel/index.js
+++ b/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"])(
--- 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
@ -167,12 +167,11 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
            item={item}
            hideColumns={hideColumns}
            displayName={item.displayName}
-            // status={item.status}
-            // browser={item.browser}
-            // platform={item.platform}
-            // country={item.country}
-            // city={item.city}
-            // ip={item.ip}
+            sessionStatus={item.status}
+            connections={item.connections}
+            sessions={item.sessions}
+            isOwner={item.isOwner}
+            isAdmin={item.isAdmin}
          />
        ))}
      </TableBody>
--- a/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
+++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
@ -79,8 +79,7 @@ const Sessions = ({
  viewAs,
  setViewAs,
  currentDeviceType,
-  allSessions,
-  setAllSessions,
+  setSessions,
  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 } =
-    peopleStore.selectionStore;
+  const {
+    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"])(
--- a/packages/client/src/store/SelectionPeopleStore.js
+++ b/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) => {
-    this.allSessions = sessions;
+  setSessions = (sessions) => {
+    this.sessions = sessions;
  };

-  setAllConnections = (connections) => {
-    this.allConnections = connections;
+  setSessionsFromSocket = (data) => {
+    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] : [],
+      };
+    });
  };
 }

--- a/packages/client/src/store/SettingsSetupStore.js
+++ b/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;