refactoring
This commit is contained in:
parent
3a207cf7e0
commit
b63c7bc952
@ -1,6 +1,5 @@
|
||||
import { observer, inject } from "mobx-react";
|
||||
import { Text } from "@docspace/shared/components/text";
|
||||
import { Box } from "@docspace/shared/components/box";
|
||||
import { convertTime } from "@docspace/shared/utils/convertTime";
|
||||
import { RowContent } from "@docspace/shared/components/row-content";
|
||||
import { ReactSVG } from "react-svg";
|
||||
@ -9,65 +8,23 @@ import RemoveSessionSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledRowContent = styled(RowContent)`
|
||||
.rowMainContainer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.row-main-container-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.session-info-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.session-logout-icon {
|
||||
.date {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${(props) => props.theme.activeSessions.tableCellColor};
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.mainIcons {
|
||||
height: 0px;
|
||||
cursor: pointer;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.session-content-wrapper {
|
||||
width: 100%;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.main-row-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.platform,
|
||||
.browser {
|
||||
font-size: 14px;
|
||||
color: ${(props) => props.theme.activeSessions.color};
|
||||
font-weight: 600;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${(props) => props.theme.activeSessions.tableCellColor};
|
||||
}
|
||||
}
|
||||
|
||||
.additional-row-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.country,
|
||||
.city {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: ${(props) => props.theme.activeSessions.tableCellColor};
|
||||
}
|
||||
|
||||
.city {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
@ -88,30 +45,21 @@ const SessionsRowContent = ({
|
||||
});
|
||||
};
|
||||
|
||||
const contentData = [
|
||||
<Box key={id} className="session-info-wrapper">
|
||||
<Box className="session-content-wrapper">
|
||||
<Box className="main-row-content">
|
||||
<Text className="platform">{platform},</Text>
|
||||
<Text className="browser">{browser}</Text>
|
||||
<Text className="date" truncate>
|
||||
{convertTime(date)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box className="additional-row-content">
|
||||
<Text className="country">{country},</Text>
|
||||
<Text className="city">{city}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className="session-logout-icon">
|
||||
<ReactSVG src={RemoveSessionSvgUrl} onClick={onClickDisable} />
|
||||
</Box>
|
||||
</Box>,
|
||||
];
|
||||
|
||||
return (
|
||||
<StyledRowContent sectionWidth={sectionWidth}>
|
||||
{contentData}
|
||||
<StyledRowContent
|
||||
key={id}
|
||||
sectionWidth={sectionWidth}
|
||||
sideColor={theme.activeSessions.tableCellColor}
|
||||
>
|
||||
<Text fontSize="14px" fontWeight="600" containerWidth="160px" truncate>
|
||||
{platform}, {browser}
|
||||
<span className="date">{convertTime(date)}</span>
|
||||
</Text>
|
||||
<ReactSVG src={RemoveSessionSvgUrl} onClick={onClickDisable} />
|
||||
<Text fontSize="12px" fontWeight="600">
|
||||
{country}
|
||||
{` ${city}`}
|
||||
</Text>
|
||||
</StyledRowContent>
|
||||
);
|
||||
};
|
||||
|
||||
@ -47,11 +47,11 @@ const SessionsRowContent = ({ sectionWidth, item }) => {
|
||||
<></>
|
||||
<Text fontSize="12px" fontWeight="600">
|
||||
{platform}
|
||||
{browser}
|
||||
{` ${browser}`}
|
||||
</Text>
|
||||
<Text fontSize="12px" fontWeight="600">
|
||||
{country}
|
||||
{city}
|
||||
{` ${city}`}
|
||||
</Text>
|
||||
<Text fontSize="12px" fontWeight="600" containerWidth="160px">
|
||||
{ip}
|
||||
|
||||
@ -7,9 +7,9 @@ const mockData = [
|
||||
role: "owner",
|
||||
status: "Online",
|
||||
platform: "Windows 10",
|
||||
browser: " Chrome 120",
|
||||
browser: "Chrome 120",
|
||||
country: "Russia",
|
||||
city: " Kstovo",
|
||||
city: "Kstovo",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.18.0.1",
|
||||
mobile: false,
|
||||
@ -51,9 +51,9 @@ const mockData = [
|
||||
userType: "Room admin",
|
||||
role: "admin",
|
||||
platform: "Mac OS 14.1.2",
|
||||
browser: " Safari 17",
|
||||
browser: "Safari 17",
|
||||
country: "Uzbekistan",
|
||||
city: " Tashkent",
|
||||
city: "Tashkent",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.19.0.1",
|
||||
mobile: false,
|
||||
@ -87,9 +87,9 @@ const mockData = [
|
||||
userType: "Room admin",
|
||||
role: "user",
|
||||
platform: "Windows 10",
|
||||
browser: " Chrome 119",
|
||||
browser: "Chrome 119",
|
||||
country: "Armenia",
|
||||
city: " Yerevan",
|
||||
city: "Yerevan",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.20.0.1",
|
||||
mobile: false,
|
||||
@ -122,9 +122,9 @@ const mockData = [
|
||||
userType: "Room admin",
|
||||
role: "user",
|
||||
platform: "Mac OS 14.1.2",
|
||||
browser: " Safari 15",
|
||||
browser: "Safari 15",
|
||||
country: "Russia",
|
||||
city: " Kuznechikha",
|
||||
city: "Kuznechikha",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.21.0.1",
|
||||
mobile: false,
|
||||
@ -165,9 +165,9 @@ const mockData = [
|
||||
userType: "Power user",
|
||||
role: "user",
|
||||
platform: "Mac OS X 10",
|
||||
browser: " Chrome 119",
|
||||
browser: "Chrome 119",
|
||||
country: "Germany",
|
||||
city: " Frankfurt",
|
||||
city: "Frankfurt",
|
||||
date: "2023-12-26T17:13:28+00:00",
|
||||
ip: "172.22.0.1",
|
||||
mobile: false,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user