diff --git a/src/components/TagPicker/index.tsx b/src/components/TagPicker/index.tsx index 6046a5bf2bbd..9d3a70d4d50c 100644 --- 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; - - /** List of recently used tags */ - policyRecentlyUsedTags: OnyxEntry; -}; - -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({ - 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 index dad93dce7964..a6bccdf3fa12 100644 --- 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) => void; }; -type EditReportFieldDropdownPageOnyxProps = { - recentlyUsedReportFields: OnyxEntry; -}; - -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({ - recentlyUsedReportFields: { - key: () => ONYXKEYS.RECENTLY_USED_REPORT_FIELDS, - }, -})(EditReportFieldDropdownPage); +export default EditReportFieldDropdownPage;