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