migrate withOnyx to useOnyx

Expensify · Oct 16, 2024 · f9a76cf · f9a76cf
1 parent dd001f4
commit f9a76cf
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 35 deletions.
diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx
@@ -1,6 +1,5 @@
 import React, {useMemo, useState} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import useLocalize from '@hooks/useLocalize';
@@ -10,7 +9,7 @@ import * as PolicyUtils from '@libs/PolicyUtils';
 import type * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PolicyTag, PolicyTagLists, PolicyTags, RecentlyUsedTags} from '@src/types/onyx';
+import type {PolicyTag, PolicyTags} from '@src/types/onyx';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
 
 type SelectedTagOption = {
@@ -21,15 +20,7 @@ type SelectedTagOption = {
     pendingAction?: PendingAction;
 };
 
-type TagPickerOnyxProps = {
-    /** Collection of tag list on a policy */
-    policyTags: OnyxEntry<PolicyTagLists>;
-
-    /** List of recently used tags */
-    policyRecentlyUsedTags: OnyxEntry<RecentlyUsedTags>;
-};
-
-type TagPickerProps = TagPickerOnyxProps & {
+type TagPickerProps = {
     /** The policyID we are getting tags for */
     // It's used in withOnyx HOC.
     // eslint-disable-next-line react/no-unused-prop-types
@@ -51,7 +42,9 @@ type TagPickerProps = TagPickerOnyxProps & {
     tagListIndex: number;
 };
 
-function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) {
+function TagPicker({selectedTag, tagListName, policyID, tagListIndex, shouldShowDisabledAndSelectedOption = false, onSubmit}: TagPickerProps) {
+    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`);
+    const [policyRecentlyUsedTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
@@ -122,13 +115,6 @@ function TagPicker({selectedTag, tagListName, policyTags, tagListIndex, policyRe
 
 TagPicker.displayName = 'TagPicker';
 
-export default withOnyx<TagPickerProps, TagPickerOnyxProps>({
-    policyTags: {
-        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`,
-    },
-    policyRecentlyUsedTags: {
-        key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`,
-    },
-})(TagPicker);
+export default TagPicker;
 
 export type {SelectedTagOption};
diff --git a/src/pages/EditReportFieldDropdown.tsx b/src/pages/EditReportFieldDropdown.tsx
@@ -1,6 +1,5 @@
 import React, {useCallback, useMemo} from 'react';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import SelectionList from '@components/SelectionList';
@@ -12,7 +11,6 @@ import useTheme from '@hooks/useTheme';
 import localeCompare from '@libs/LocaleCompare';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {RecentlyUsedReportFields} from '@src/types/onyx';
 
 type EditReportFieldDropdownPageComponentProps = {
     /** Value of the policy report field */
@@ -32,13 +30,10 @@ type EditReportFieldDropdownPageComponentProps = {
     onSubmit: (form: Record<string, string>) => void;
 };
 
-type EditReportFieldDropdownPageOnyxProps = {
-    recentlyUsedReportFields: OnyxEntry<RecentlyUsedReportFields>;
-};
-
-type EditReportFieldDropdownPageProps = EditReportFieldDropdownPageComponentProps & EditReportFieldDropdownPageOnyxProps;
+type EditReportFieldDropdownPageProps = EditReportFieldDropdownPageComponentProps;
 
-function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptions, recentlyUsedReportFields}: EditReportFieldDropdownPageProps) {
+function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptions}: EditReportFieldDropdownPageProps) {
+    const [recentlyUsedReportFields] = useOnyx(ONYXKEYS.RECENTLY_USED_REPORT_FIELDS);
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -105,8 +100,4 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
 
 EditReportFieldDropdownPage.displayName = 'EditReportFieldDropdownPage';
 
-export default withOnyx<EditReportFieldDropdownPageProps, EditReportFieldDropdownPageOnyxProps>({
-    recentlyUsedReportFields: {
-        key: () => ONYXKEYS.RECENTLY_USED_REPORT_FIELDS,
-    },
-})(EditReportFieldDropdownPage);
+export default EditReportFieldDropdownPage;