diff --git a/src/components/OptionListContextProvider.tsx b/src/components/OptionListContextProvider.tsx index 537919622540..b14a26138b6e 100644 --- a/src/components/OptionListContextProvider.tsx +++ b/src/components/OptionListContextProvider.tsx @@ -1,6 +1,5 @@ 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 {useOnyx} from 'react-native-onyx'; import usePrevious from '@hooks/usePrevious'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import type {OptionList} from '@libs/OptionsListUtils'; @@ -17,14 +16,11 @@ type OptionsListContextProps = { initializeOptions: () => void; /** Flag to check if the options are initialized */ areOptionsInitialized: boolean; + /** Function to reset the options */ + resetOptions: () => void; }; -type OptionsListProviderOnyxProps = { - /** Collection of reports */ - reports: OnyxCollection; -}; - -type OptionsListProviderProps = OptionsListProviderOnyxProps & { +type OptionsListProviderProps = { /** Actual content wrapped by this component */ children: React.ReactNode; }; @@ -36,6 +32,7 @@ const OptionsListContext = createContext({ }, initializeOptions: () => {}, areOptionsInitialized: false, + resetOptions: () => {}, }); const isEqualPersonalDetail = (prevPersonalDetail: PersonalDetails | null, personalDetail: PersonalDetails | null) => @@ -44,12 +41,13 @@ const isEqualPersonalDetail = (prevPersonalDetail: PersonalDetails | null, perso prevPersonalDetail?.login === personalDetail?.login && prevPersonalDetail?.displayName === personalDetail?.displayName; -function OptionsListContextProvider({reports, children}: OptionsListProviderProps) { +function OptionsListContextProvider({children}: OptionsListProviderProps) { const areOptionsInitialized = useRef(false); const [options, setOptions] = useState({ reports: [], personalDetails: [], }); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; const prevPersonalDetails = usePrevious(personalDetails); @@ -144,9 +142,22 @@ function OptionsListContextProvider({reports, children}: OptionsListProviderProp areOptionsInitialized.current = true; }, [loadOptions]); + const resetOptions = useCallback(() => { + if (!areOptionsInitialized.current) { + return; + } + + areOptionsInitialized.current = false; + setOptions({ + reports: [], + personalDetails: [], + }); + }, []); + return ( - // eslint-disable-next-line react-compiler/react-compiler - ({options, initializeOptions, areOptionsInitialized: areOptionsInitialized.current}), [options, initializeOptions])}> + ({options, initializeOptions, areOptionsInitialized: areOptionsInitialized.current, resetOptions}), [options, initializeOptions, resetOptions])} + > {children} ); @@ -157,7 +168,7 @@ const useOptionsListContext = () => useContext(OptionsListContext); // Hook to use the OptionsListContext with an initializer to load the options const useOptionsList = (options?: {shouldInitialize: boolean}) => { const {shouldInitialize = true} = options ?? {}; - const {initializeOptions, options: optionsList, areOptionsInitialized} = useOptionsListContext(); + const {initializeOptions, options: optionsList, areOptionsInitialized, resetOptions} = useOptionsListContext(); useEffect(() => { if (!shouldInitialize || areOptionsInitialized) { @@ -171,13 +182,10 @@ const useOptionsList = (options?: {shouldInitialize: boolean}) => { initializeOptions, options: optionsList, areOptionsInitialized, + resetOptions, }; }; -export default withOnyx({ - reports: { - key: ONYXKEYS.COLLECTION.REPORT, - }, -})(OptionsListContextProvider); +export default OptionsListContextProvider; export {useOptionsListContext, useOptionsList, OptionsListContext}; diff --git a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx index 69293fe894d4..bd0ce596c733 100644 --- a/src/pages/settings/Troubleshoot/TroubleshootPage.tsx +++ b/src/pages/settings/Troubleshoot/TroubleshootPage.tsx @@ -11,6 +11,7 @@ import * as Illustrations from '@components/Icon/Illustrations'; import ImportOnyxState from '@components/ImportOnyxState'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemList from '@components/MenuItemList'; +import {useOptionsList} from '@components/OptionListContextProvider'; import ScreenWrapper from '@components/ScreenWrapper'; import ScrollView from '@components/ScrollView'; import Section from '@components/Section'; @@ -51,6 +52,7 @@ function TroubleshootPage() { const [isLoading, setIsLoading] = useState(false); const [shouldStoreLogs] = useOnyx(ONYXKEYS.SHOULD_STORE_LOGS); const [shouldMaskOnyxState = true] = useOnyx(ONYXKEYS.SHOULD_MASK_ONYX_STATE); + const {resetOptions} = useOptionsList({shouldInitialize: false}); const exportOnyxState = useCallback(() => { ExportOnyxState.readFromOnyxDatabase().then((value: Record) => { @@ -160,6 +162,7 @@ function TroubleshootPage() { isVisible={isConfirmationModalVisible} onConfirm={() => { setIsConfirmationModalVisible(false); + resetOptions(); clearOnyxAndResetApp(); }} onCancel={() => setIsConfirmationModalVisible(false)} diff --git a/tests/perf-test/SearchRouter.perf-test.tsx b/tests/perf-test/SearchRouter.perf-test.tsx index 4154e80ab6b8..8ae16c3b8a1c 100644 --- a/tests/perf-test/SearchRouter.perf-test.tsx +++ b/tests/perf-test/SearchRouter.perf-test.tsx @@ -143,7 +143,7 @@ function SearchRouterInputWrapper() { function SearchRouterWrapperWithCachedOptions() { return ( - ({options: mockedOptions, initializeOptions: () => {}, areOptionsInitialized: true}), [])}> + ({options: mockedOptions, initializeOptions: () => {}, resetOptions: () => {}, areOptionsInitialized: true}), [])}>