1import {FC} from 'react';
 2import {Text} from '@chakra-ui/react';
 3import {relativeExpiryDate} from 'utils/dateFormatter';
 4
 5type UserStatusProps = {
 6    lastOnline: string | null;
 7};
 8
 9const convertDateFormat = (lastOnline: string | null): number | null => {
10  if (!lastOnline) {
11    return null;
12  }
13
14  const date = new Date(lastOnline + 'Z');
15  return Math.floor(date.getTime() / 1000);
16};
17
18export const OnlineStatus: FC<UserStatusProps> = ({lastOnline}) => {
19  const currentTimeInSeconds = Math.floor(Date.now() / 1000);
20  const unixTime = convertDateFormat(lastOnline);
21
22  const timeDifferenceInSeconds = unixTime ? currentTimeInSeconds - unixTime : null;
23  const dateInfo = unixTime ? relativeExpiryDate(unixTime) : {status: '', time: 'Not Connected Yet'};
24
25  return (
26    <Text
27      display="inline-block"
28      fontSize="xs"
29      fontWeight="medium"
30      ml="2"
31      color="gray.600"
32      _dark={{
33        color: 'gray.400',
34      }}
35    >
36      {timeDifferenceInSeconds && timeDifferenceInSeconds <= 60
37        ? 'Online'
38        : timeDifferenceInSeconds
39          ? `${dateInfo.time} ago`
40          : dateInfo.time}
41    </Text>
42  );
43};