Client: Add getting last seen status (part 1)
This commit is contained in:
parent
2ba528da01
commit
9dd2579396
@ -24,15 +24,41 @@
|
|||||||
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
|
||||||
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
||||||
|
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
import { RectangleSkeleton } from "@docspace/shared/skeletons";
|
import { RectangleSkeleton } from "@docspace/shared/skeletons";
|
||||||
import { Text } from "@docspace/shared/components/text";
|
import { Text } from "@docspace/shared/components/text";
|
||||||
import { TStatusInRoom } from "@docspace/shared/utils/socket";
|
import { TStatusInRoom } from "@docspace/shared/utils/socket";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
|
||||||
interface StatusProps {
|
interface StatusProps {
|
||||||
statusInRoom?: TStatusInRoom;
|
statusInRoom?: TStatusInRoom;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getLastSeenStatus = (date: string, locale: string) => {
|
||||||
|
if (!date) return "offline";
|
||||||
|
const dateObj = new Date(date).toISOString();
|
||||||
|
|
||||||
|
const momentDate = moment(dateObj).locale(locale);
|
||||||
|
let dateFormat = "DD MMMM";
|
||||||
|
|
||||||
|
if (momentDate.year() !== moment().year()) {
|
||||||
|
dateFormat = "DD.MM.YYYY";
|
||||||
|
}
|
||||||
|
|
||||||
|
const formattedDate = momentDate.isSame(new Date(), "day")
|
||||||
|
? "Today"
|
||||||
|
: momentDate.format(dateFormat);
|
||||||
|
|
||||||
|
const formattedTime = momentDate.format("LT");
|
||||||
|
|
||||||
|
// return t("LastSeenAt", { date: formattedDate, time: formattedTime });
|
||||||
|
return `Last seen ${formattedDate} at ${formattedTime}`;
|
||||||
|
};
|
||||||
|
|
||||||
export const Status = (props: StatusProps) => {
|
export const Status = (props: StatusProps) => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
|
||||||
const { statusInRoom } = props;
|
const { statusInRoom } = props;
|
||||||
|
|
||||||
if (!statusInRoom) {
|
if (!statusInRoom) {
|
||||||
@ -41,10 +67,15 @@ export const Status = (props: StatusProps) => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const statusText =
|
||||||
|
statusInRoom.status === "online"
|
||||||
|
? "online"
|
||||||
|
: getLastSeenStatus(statusInRoom.date, i18n.language);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="status-wrapper">
|
<div className="status-wrapper">
|
||||||
{statusInRoom.status === "online" && <div className="status-indicator" />}
|
{statusInRoom.status === "online" && <div className="status-indicator" />}
|
||||||
<Text className="status-text">{statusInRoom.status}</Text>
|
<Text className="status-text">{statusText}</Text>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user