3 files changed, 72 insertions, 1 deletions
diff --git a/src/components/messages/ChannelPreview.tsx b/src/components/messages/ChannelPreview.tsx
index 11408dc1..867e0a38 100644
--- a/src/components/messages/ChannelPreview.tsx
+++ b/src/components/messages/ChannelPreview.tsx
@@ -16,6 +16,7 @@ import {
   LocalUserType,
 } from '../../types';
 import {normalize, SCREEN_HEIGHT} from '../../utils';
+import {isOnline} from '../../utils/messages';
 
 const ChannelPreview: React.FC<
   ChannelPreviewMessengerProps<
@@ -40,7 +41,7 @@ const ChannelPreview: React.FC<
       )
     : [];
   const member = otherMembers.length === 1 ? otherMembers[0] : undefined;
-  const online = member?.user?.online;
+  const online = isOnline(member?.user?.last_active);
   const unread = channel.state.unreadCount > 0;
 
   return (
diff --git a/src/screens/chat/ChatScreen.tsx b/src/screens/chat/ChatScreen.tsx
index eeb1a7d6..8e6c1575 100644
--- a/src/screens/chat/ChatScreen.tsx
+++ b/src/screens/chat/ChatScreen.tsx
@@ -2,6 +2,7 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {StackNavigationProp, useHeaderHeight} from '@react-navigation/stack';
 import React, {useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
+import {useSelector} from 'react-redux';
 import {
   Channel,
   Chat,
@@ -10,6 +11,7 @@ import {
 } from 'stream-chat-react-native';
 import {ChatContext} from '../../App';
 import {MainStackParams} from '../../routes';
+import {RootState} from '../../store/rootReducer';
 
 type ChatScreenNavigationProp = StackNavigationProp<MainStackParams, 'Chat'>;
 interface ChatScreenProps {
@@ -22,6 +24,15 @@ const ChatScreen: React.FC<ChatScreenProps> = () => {
   const {channel, chatClient} = useContext(ChatContext);
   const headerHeight = useHeaderHeight();
   const tabbarHeight = useBottomTabBarHeight();
+  const {userId: loggedInUserId} = useSelector(
+    (state: RootState) => state.user.user,
+  );
+  const otherMembers = channel
+    ? Object.values(channel.state.members).filter(
+        (member) => member.user?.id !== loggedInUserId,
+      )
+    : [];
+  const member = otherMembers.length === 1 ? otherMembers[0] : undefined;
 
   return (
     <View style={[styles.container, {paddingBottom: tabbarHeight}]}>
diff --git a/src/utils/messages.ts b/src/utils/messages.ts
new file mode 100644
index 00000000..ae8e7cec
--- /dev/null
+++ b/src/utils/messages.ts
@@ -0,0 +1,59 @@
+import moment from 'moment';
+
+/**
+ * Finds the difference in time in minutes
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns diff in minutes
+ */
+const _diffInMinutes = (lastActive: string | undefined) => {
+  if (!lastActive) {
+    return undefined;
+  }
+  return moment().diff(moment(lastActive), 'minutes');
+};
+
+/**
+ * Formats the last activity status.
+ *  - "Active now"          (≤ 5 minutes)
+ *  - "Seen X minutes ago"  (5 > x ≥ 59 minutes)
+ *  - "Seen X hours ago"    (x = [1, 2])
+ *  - "Offline"
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns
+ */
+export const formatLastSeenText = (lastActive: string | undefined) => {
+  const diff = _diffInMinutes(lastActive);
+  if (!diff) {
+    return 'Offline';
+  }
+  if (diff <= 5) {
+    return 'Active now';
+  }
+  if (diff <= 59) {
+    return `Seen ${diff} minutes ago`;
+  }
+  if (diff <= 180) {
+    const hours = Math.floor(diff / 60);
+    return `Seen ${hours} hours ago`;
+  }
+  return 'Offline';
+};
+
+/**
+ * Checks if a lastActive timestamp is considered Online or not.
+ *
+ * A user is online if last active is ≤ 15 minutes.
+ *
+ * @param lastActive given time e.g. "2021-04-08T19:07:09.361300983Z"
+ * @returns True if active
+ */
+export const isOnline = (lastActive: string | undefined) => {
+  if (!lastActive) {
+    return false;
+  }
+  const diff = _diffInMinutes(lastActive);
+  if (!diff) {
+    return false;
+  }
+  return diff <= 15;
+};