Merge pull request Expensify#66884 from callstack-internal/fix/useOnyx-instead-context

Remove Onyx contexts and add useOnyx instead

Author: roryabraham

src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts

@@ -1,18 +1,19 @@
 import type {FlashList} from '@shopify/flash-list';
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import emojis from '@assets/emojis';
-import {useFrequentlyUsedEmojis} from '@components/OnyxListItemProvider';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import usePreferredEmojiSkinTone from '@hooks/usePreferredEmojiSkinTone';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import type {EmojiPickerList, EmojiPickerListItem} from '@libs/EmojiUtils';
 import {getHeaderEmojis, getSpacersIndexes, mergeEmojisWithFrequentlyUsedEmojis, suggestEmojis} from '@libs/EmojiUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
 
 const useEmojiPickerMenu = () => {
     const emojiListRef = useRef<FlashList<EmojiPickerListItem>>(null);
-    const frequentlyUsedEmojis = useFrequentlyUsedEmojis();
+    const [frequentlyUsedEmojis] = useOnyx(ONYXKEYS.FREQUENTLY_USED_EMOJIS, {canBeMissing: true});
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     const allEmojis = useMemo(() => mergeEmojisWithFrequentlyUsedEmojis(emojis), [frequentlyUsedEmojis]);
     const headerEmojis = useMemo(() => getHeaderEmojis(allEmojis), [allEmojis]);

src/components/OnyxListItemProvider.tsx

@@ -11,10 +11,6 @@ import createOnyxContext from './createOnyxContext';
 const [PersonalDetailsProvider, PersonalDetailsContext, usePersonalDetails] = createOnyxContext(ONYXKEYS.PERSONAL_DETAILS_LIST);
 const [BlockedFromConciergeProvider, , useBlockedFromConcierge] = createOnyxContext(ONYXKEYS.NVP_BLOCKED_FROM_CONCIERGE);
 const [BetasProvider, BetasContext, useBetas] = createOnyxContext(ONYXKEYS.BETAS);
-const [ReportCommentDraftsProvider] = createOnyxContext(ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT);
-const [PreferredThemeProvider, PreferredThemeContext] = createOnyxContext(ONYXKEYS.PREFERRED_THEME);
-const [FrequentlyUsedEmojisProvider, , useFrequentlyUsedEmojis] = createOnyxContext(ONYXKEYS.FREQUENTLY_USED_EMOJIS);
-const [PreferredEmojiSkinToneProvider, PreferredEmojiSkinToneContext] = createOnyxContext(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE);
 const [SessionProvider, , useSession] = createOnyxContext(ONYXKEYS.SESSION);
 const [PolicyCategoriesProvider, , usePolicyCategories] = createOnyxContext(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
 const [PolicyTagsProvider, , usePolicyTags] = createOnyxContext(ONYXKEYS.COLLECTION.POLICY_TAGS);
@@ -32,10 +28,6 @@ function OnyxListItemProvider(props: OnyxListItemProviderProps) {
                 PersonalDetailsProvider,
                 BlockedFromConciergeProvider,
                 BetasProvider,
-                ReportCommentDraftsProvider,
-                PreferredThemeProvider,
-                FrequentlyUsedEmojisProvider,
-                PreferredEmojiSkinToneProvider,
                 SessionProvider,
                 PolicyCategoriesProvider,
                 PolicyTagsProvider,
@@ -51,17 +43,4 @@ OnyxListItemProvider.displayName = 'OnyxListItemProvider';
 
 export default OnyxListItemProvider;
 
-export {
-    usePersonalDetails,
-    BetasContext,
-    PreferredThemeContext,
-    useBetas,
-    useFrequentlyUsedEmojis,
-    PersonalDetailsContext,
-    PreferredEmojiSkinToneContext,
-    useBlockedFromConcierge,
-    useSession,
-    usePolicyCategories,
-    usePolicyTags,
-    useAllReportsTransactionsAndViolations,
-};
+export {usePersonalDetails, BetasContext, useBetas, PersonalDetailsContext, useBlockedFromConcierge, useSession, usePolicyCategories, usePolicyTags, useAllReportsTransactionsAndViolations};

src/hooks/usePreferredEmojiSkinTone.ts

@@ -1,9 +1,10 @@
-import {useCallback, useContext} from 'react';
-import {PreferredEmojiSkinToneContext} from '@components/OnyxListItemProvider';
+import {useCallback} from 'react';
 import {updatePreferredSkinTone as updatePreferredSkinToneAction} from '@userActions/User';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useOnyx from './useOnyx';
 
 export default function usePreferredEmojiSkinTone() {
-    const preferredSkinTone = useContext(PreferredEmojiSkinToneContext);
+    const [preferredSkinTone] = useOnyx(ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE, {canBeMissing: true});
 
     const updatePreferredSkinTone = useCallback(
         (skinTone: number) => {

src/hooks/useThemePreference.ts

@@ -1,10 +1,11 @@
-import {useContext, useMemo} from 'react';
+import {useMemo} from 'react';
 import {useColorScheme} from 'react-native';
-import {PreferredThemeContext} from '@components/OnyxListItemProvider';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useOnyx from './useOnyx';
 
 function useThemePreference() {
-    const preferredThemeFromStorage = useContext(PreferredThemeContext);
+    const [preferredThemeFromStorage] = useOnyx(ONYXKEYS.PREFERRED_THEME, {canBeMissing: true});
     const systemTheme = useColorScheme();
 
     const themePreference = useMemo(() => {