Merge pull request #39811 from callstack-internal/fix/update-options-…

…when-creating-task

Fix: update options when creating task

src/components/OptionListContextProvider.tsx

@@ -1,6 +1,7 @@
 import React, {createContext, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxCollection} from 'react-native-onyx';
+import usePrevious from '@hooks/usePrevious';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import type {OptionList} from '@libs/OptionsListUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -42,8 +43,13 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp
         reports: [],
         personalDetails: [],
     });
+
     const personalDetails = usePersonalDetails();
+    const prevReports = usePrevious(reports);
 
+    /**
+     * This effect is used to update the options list when a report is updated.
+     */
     useEffect(() => {
         // there is no need to update the options if the options are not initialized
         if (!areOptionsInitialized.current) {
@@ -71,6 +77,31 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reports]);
 
+    /**
+     * This effect is used to add a new report option to the list of options when a new report is added to the collection.
+     */
+    useEffect(() => {
+        if (!areOptionsInitialized.current || !reports) {
+            return;
+        }
+        const missingReportId = Object.keys(reports).find((key) => prevReports && !(key in prevReports));
+        const report = missingReportId ? reports[missingReportId] : null;
+        if (!missingReportId || !report) {
+            return;
+        }
+
+        const reportOption = OptionsListUtils.createOptionFromReport(report, personalDetails);
+        setOptions((prevOptions) => {
+            const newOptions = {...prevOptions};
+            newOptions.reports.push(reportOption);
+            return newOptions;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [reports]);
+
+    /**
+     * This effect is used to update the options list when personal details change.
+     */
     useEffect(() => {
         // there is no need to update the options if the options are not initialized
         if (!areOptionsInitialized.current) {