Feat: Display unread marker for messages that were received while offline

src/hooks/useNetwork.ts

@@ -1,34 +1,63 @@
-import {useContext, useEffect, useRef} from 'react';
+import {useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {NetworkContext} from '@components/OnyxProvider';
+import DateUtils from '@libs/DateUtils';
 import CONST from '@src/CONST';
+import useLocalize from './useLocalize';
 
 type UseNetworkProps = {
     onReconnect?: () => void;
 };
 
-type UseNetwork = {isOffline: boolean};
+type UseNetwork = {isOffline: boolean; lastOfflineAt?: Date; lastOnlineAt?: Date};
 
 export default function useNetwork({onReconnect = () => {}}: UseNetworkProps = {}): UseNetwork {
     const callback = useRef(onReconnect);
     callback.current = onReconnect;
 
-    const {isOffline, networkStatus} = useContext(NetworkContext) ?? {...CONST.DEFAULT_NETWORK_DATA, networkStatus: CONST.NETWORK.NETWORK_STATUS.UNKNOWN};
-    const prevOfflineStatusRef = useRef(isOffline);
+    const {preferredLocale} = useLocalize();
+    const {isOffline: isOfflineContext, networkStatus} = useContext(NetworkContext) ?? {...CONST.DEFAULT_NETWORK_DATA, networkStatus: CONST.NETWORK.NETWORK_STATUS.UNKNOWN};
+    const prevOfflineStatusRef = useRef(isOfflineContext);
     useEffect(() => {
         // If we were offline before and now we are not offline then we just reconnected
-        const didReconnect = prevOfflineStatusRef.current && !isOffline;
+        const didReconnect = prevOfflineStatusRef.current && !isOfflineContext;
         if (!didReconnect) {
             return;
         }
 
         callback.current();
-    }, [isOffline]);
+    }, [isOfflineContext]);
 
     useEffect(() => {
         // Used to store previous prop values to compare on next render
-        prevOfflineStatusRef.current = isOffline;
-    }, [isOffline]);
+        prevOfflineStatusRef.current = isOfflineContext;
+    }, [isOfflineContext]);
 
     // If the network status is undefined, we don't treat it as offline. Otherwise, we utilize the isOffline prop.
-    return {isOffline: networkStatus === CONST.NETWORK.NETWORK_STATUS.UNKNOWN ? false : isOffline};
+    const isOffline = useMemo(() => (networkStatus === CONST.NETWORK.NETWORK_STATUS.UNKNOWN ? false : isOfflineContext), [isOfflineContext, networkStatus]);
+
+    // Used to get the last time the user went offline.
+    // Set to a JS Date object if the user was offline before, otherwise undefined.
+    const [lastOfflineAt, setLastOfflineAt] = useState(() => (isOffline ? DateUtils.getLocalDateFromDatetime(preferredLocale) : undefined));
+    useEffect(() => {
+        if (!isOffline) {
+            return;
+        }
+        setLastOfflineAt(DateUtils.getLocalDateFromDatetime(preferredLocale));
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOffline]);
+
+    // Used to get the last time the user went back online after being offline.
+    // Set to a JS Date object if the user was online before, otherwise undefined.
+    const [lastOnlineAt, setLastOnlineAt] = useState(() => (isOffline ? undefined : DateUtils.getLocalDateFromDatetime(preferredLocale)));
+    useEffect(() => {
+        if (isOffline) {
+            return;
+        }
+        setLastOnlineAt(DateUtils.getLocalDateFromDatetime(preferredLocale));
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isOffline]);
+
+    return {isOffline, lastOfflineAt, lastOnlineAt};
 }

src/pages/home/report/ReportActionsList.tsx

@@ -123,6 +123,19 @@ function keyExtractor(item: OnyxTypes.ReportAction): string {
     return item.reportActionID;
 }
 
+function wasMessageReceivedWhileOffline(message: OnyxTypes.ReportAction, offlineLastAt: Date | undefined, onlineLastAt: Date | undefined, locale: OnyxTypes.Locale): boolean {
+    if (!onlineLastAt || !offlineLastAt) {
+        return false;
+    }
+
+    const messageCreatedAt = DateUtils.getLocalDateFromDatetime(locale, message.created);
+
+    if (messageCreatedAt > offlineLastAt && messageCreatedAt <= onlineLastAt) {
+        return true;
+    }
+    return false;
+}
+
 function isMessageUnread(message: OnyxTypes.ReportAction, lastReadTime?: string): boolean {
     if (!lastReadTime) {
         return !ReportActionsUtils.isCreatedAction(message);
@@ -162,7 +175,8 @@ function ReportActionsList({
     const {windowHeight} = useWindowDimensions();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const {isOffline} = useNetwork();
+    const {preferredLocale} = useLocalize();
+    const {isOffline, lastOfflineAt, lastOnlineAt} = useNetwork();
     const route = useRoute<RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>>();
     const reportScrollManager = useReportScrollManager();
     const userActiveSince = useRef<string>(DateUtils.getDBTime());
@@ -220,6 +234,16 @@ function ReportActionsList({
     const unreadMarkerReportActionID = useMemo(() => {
         const shouldDisplayNewMarker = (reportAction: OnyxTypes.ReportAction, index: number): boolean => {
             const nextMessage = sortedVisibleReportActions[index + 1];
+
+            // If the user recevied new messages while being offline, we want to display the unread marker above the first offline message.
+            if (!ReportActionsUtils.wasActionTakenByCurrentUser(reportAction)) {
+                const isCurrentMessageOffline = wasMessageReceivedWhileOffline(reportAction, lastOfflineAt, lastOnlineAt, preferredLocale);
+                const isNextMessageOffline = (nextMessage && wasMessageReceivedWhileOffline(nextMessage, lastOfflineAt, lastOnlineAt, preferredLocale)) || !nextMessage;
+                if (isCurrentMessageOffline && !isNextMessageOffline) {
+                    return true;
+                }
+            }
+
             const isCurrentMessageUnread = isMessageUnread(reportAction, unreadMarkerTime);
             const isNextMessageRead = !nextMessage || !isMessageUnread(nextMessage, unreadMarkerTime);
             const shouldDisplay = isCurrentMessageUnread && isNextMessageRead && !ReportActionsUtils.shouldHideNewMarker(reportAction);
@@ -236,7 +260,7 @@ function ReportActionsList({
         }
 
         return null;
-    }, [sortedVisibleReportActions, unreadMarkerTime]);
+    }, [sortedVisibleReportActions, lastOfflineAt, lastOnlineAt, preferredLocale, unreadMarkerTime]);
 
     /**
      * Subscribe to read/unread events and update our unreadMarkerTime