relative time state was moved to store
This commit is contained in:
parent
d206f44ce7
commit
a1d07bb859
@ -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,
|
||||
};
|
||||
},
|
||||
)(
|
||||
|
@ -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]);
|
||||
|
||||
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]);
|
||||
}, [date, sessionStatus, status, locale, item.id]);
|
||||
|
||||
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 } =
|
||||
peopleStore.selectionStore;
|
||||
const {
|
||||
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)));
|
||||
|
@ -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]);
|
||||
|
||||
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);
|
||||
};
|
||||
}, [date, sessionStatus, status, locale, item.id]);
|
||||
|
||||
const onClickSessions = () => {
|
||||
setStatus(fromDateAgo);
|
||||
@ -296,10 +286,12 @@ const SessionsTableRow = (props) => {
|
||||
|
||||
<TableCell>
|
||||
<Text className="session-info" truncate>
|
||||
{platform},
|
||||
{isLastConnection ? connections[0]?.platform : platform},
|
||||
</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)));
|
||||
|
@ -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",
|
||||
sessions: socketData ? socketData.sessions.slice(-1)[0] : [],
|
||||
status: latestData ? latestData.status : "offline",
|
||||
sessions: latestData ? latestData.sessions.slice(-1)[0] : [],
|
||||
};
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user