feat: allow linking to oldest unread report action page in hook

Author: chrispader

src/hooks/usePaginatedReportActions.ts

@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react';
+import {useCallback, useMemo, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import PaginationUtils from '@libs/PaginationUtils';
@@ -9,10 +9,17 @@ import type {ReportAction, ReportActions} from '@src/types/onyx';
 import useOnyx from './useOnyx';
 import useReportIsArchived from './useReportIsArchived';
 
+type UsePaginatedReportActionsOptions = {
+    /** Whether to link to the oldest unread report action, if no other report action id is provided. */
+    shouldLinkToOldestUnreadReportAction?: boolean;
+};
+
 /**
  * Get the longest continuous chunk of reportActions including the linked reportAction. If not linking to a specific action, returns the continuous chunk of newest reportActions.
  */
-function usePaginatedReportActions(reportID: string | undefined, reportActionID?: string) {
+function usePaginatedReportActions(reportID: string | undefined, reportActionID?: string, options?: UsePaginatedReportActionsOptions) {
+    const {shouldLinkToOldestUnreadReportAction = false} = options ?? {};
+
     const nonEmptyStringReportID = getNonEmptyStringOnyxID(reportID);
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${nonEmptyStringReportID}`, {canBeMissing: true});
     const isReportArchived = useReportIsArchived(report?.reportID);
@@ -36,25 +43,52 @@ function usePaginatedReportActions(reportID: string | undefined, reportActionID?
     );
     const [reportActionPages] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES}${nonEmptyStringReportID}`, {canBeMissing: true});
 
+    const initialReportLastReadTime = useRef(report?.lastReadTime);
+
+    const id = useMemo(() => {
+        if (reportActionID) {
+            return reportActionID;
+        }
+
+        if (!shouldLinkToOldestUnreadReportAction) {
+            return undefined;
+        }
+
+        return sortedAllReportActions?.findLast((reportAction) => {
+            if (!initialReportLastReadTime.current) {
+                return false;
+            }
+
+            return reportAction.created > initialReportLastReadTime.current;
+        })?.reportActionID;
+    }, [reportActionID, shouldLinkToOldestUnreadReportAction, sortedAllReportActions]);
+
     const {
         data: reportActions,
         hasNextPage,
         hasPreviousPage,
+        resourceItem,
     } = useMemo(() => {
         if (!sortedAllReportActions?.length) {
             return {data: [], hasNextPage: false, hasPreviousPage: false};
         }
-        return PaginationUtils.getContinuousChain(sortedAllReportActions, reportActionPages ?? [], (reportAction) => reportAction.reportActionID, reportActionID);
-    }, [reportActionID, reportActionPages, sortedAllReportActions]);
 
-    const linkedAction = useMemo(
-        () => (reportActionID ? sortedAllReportActions?.find((reportAction) => String(reportAction.reportActionID) === String(reportActionID)) : undefined),
-        [reportActionID, sortedAllReportActions],
-    );
+        return PaginationUtils.getContinuousChain(sortedAllReportActions, reportActionPages ?? [], (reportAction) => reportAction.reportActionID, id);
+    }, [id, reportActionPages, sortedAllReportActions]);
+
+    const linkedAction = useMemo(() => (reportActionID ? resourceItem?.item : undefined), [resourceItem, reportActionID]);
+
+    const oldestUnreadReportAction = useMemo(() => {
+        if (shouldLinkToOldestUnreadReportAction && resourceItem && !reportActionID) {
+            return resourceItem.item;
+        }
+        return undefined;
+    }, [resourceItem, shouldLinkToOldestUnreadReportAction, reportActionID]);
 
     return {
         reportActions,
         linkedAction,
+        oldestUnreadReportAction,
         sortedAllReportActions,
         hasOlderActions: hasNextPage,
         hasNewerActions: hasPreviousPage,

src/libs/PaginationUtils.ts

@@ -25,6 +25,19 @@ type ItemWithIndex = {
     index: number;
 };
 
+type ResourceItemResult<TResource> = {
+    index: number;
+    id: string;
+    item: TResource;
+};
+
+type ContinuousPageChainResult<TResource> = {
+    data: TResource[];
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+    resourceItem?: ResourceItemResult<TResource>;
+};
+
 /**
  * Finds the id and index in sortedItems of the first item in the given page that's present in sortedItems.
  */
@@ -163,15 +176,30 @@ function mergeAndSortContinuousPages<TResource>(sortedItems: TResource[], pages:
  *
  * Note: sortedItems should be sorted in descending order.
  */
-function getContinuousChain<TResource>(
-    sortedItems: TResource[],
-    pages: Pages,
-    getID: (item: TResource) => string,
-    id?: string,
-): {data: TResource[]; hasNextPage: boolean; hasPreviousPage: boolean} {
+function getContinuousChain<TResource>(sortedItems: TResource[], pages: Pages, getID: (item: TResource) => string, id?: string): ContinuousPageChainResult<TResource> {
+    // If an id is provided, find the index of the item with that id
+    let index = -1;
+
+    if (id) {
+        index = sortedItems.findIndex((item) => getID(item) === id);
+    }
+    const didFindItem = index !== -1;
+
+    // Return the found resource item if it exists
+    let resourceItem: ResourceItemResult<TResource> | undefined;
+    if (didFindItem) {
+        const item = sortedItems.at(index);
+        if (item) {
+            resourceItem = {
+                index,
+                item,
+                id: getID(item),
+            };
+        }
+    }
+
     if (pages.length === 0) {
-        const dataItem = sortedItems.find((item) => getID(item) === id);
-        return {data: id && !dataItem ? [] : sortedItems, hasNextPage: false, hasPreviousPage: false};
+        return {data: !!id && !didFindItem ? [] : sortedItems, hasNextPage: false, hasPreviousPage: false, resourceItem};
     }
 
     const pagesWithIndexes = getPagesWithIndexes(sortedItems, pages, getID);
@@ -184,37 +212,42 @@ function getContinuousChain<TResource>(
         lastIndex: 0,
     };
 
+    // If we found an item with the resource id, we want link to the specific page with the item
     if (id) {
-        const index = sortedItems.findIndex((item) => getID(item) === id);
-
-        // If we are linking to an action that doesn't exist in Onyx, return an empty array
-        if (index === -1) {
-            return {data: [], hasNextPage: false, hasPreviousPage: false};
+        // If we are searching for an item with a specific resource id and
+        // we are linking to an action that doesn't exist in Onyx, return an empty array
+        if (!didFindItem) {
+            return {data: [], hasNextPage: false, hasPreviousPage: false, resourceItem};
         }
 
         const linkedPage = pagesWithIndexes.find((pageIndex) => index >= pageIndex.firstIndex && index <= pageIndex.lastIndex);
 
-        const item = sortedItems.at(index);
         // If we are linked to an action in a gap return it by itself
-        if (!linkedPage && item) {
-            return {data: [item], hasNextPage: false, hasPreviousPage: false};
+        if (!linkedPage && resourceItem) {
+            return {data: [resourceItem.item], hasNextPage: false, hasPreviousPage: false, resourceItem};
         }
 
         if (linkedPage) {
             page = linkedPage;
         }
     } else {
+        // If we did not find an item with the resource id, we want to link to the first page
         const pageAtIndex0 = pagesWithIndexes.at(0);
         if (pageAtIndex0) {
             page = pageAtIndex0;
         }
     }
 
     if (!page) {
-        return {data: sortedItems, hasNextPage: false, hasPreviousPage: false};
+        return {data: sortedItems, hasNextPage: false, hasPreviousPage: false, resourceItem};
     }
 
-    return {data: sortedItems.slice(page.firstIndex, page.lastIndex + 1), hasNextPage: page.lastID !== CONST.PAGINATION_END_ID, hasPreviousPage: page.firstID !== CONST.PAGINATION_START_ID};
+    return {
+        data: sortedItems.slice(page.firstIndex, page.lastIndex + 1),
+        hasNextPage: page.lastID !== CONST.PAGINATION_END_ID,
+        hasPreviousPage: page.firstID !== CONST.PAGINATION_START_ID,
+        resourceItem,
+    };
 }
 
 export default {mergeAndSortContinuousPages, getContinuousChain};