[TS migration] Migrate 'TagPicker' component to TypeScript

src/components/TagPicker/index.js → src/components/TagPicker/index.tsx

@@ -1,7 +1,7 @@
-import lodashGet from 'lodash/get';
 import React, {useMemo, useState} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
+import type {EdgeInsets} from 'react-native-safe-area-context';
 import OptionsSelector from '@components/OptionsSelector';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -10,22 +10,64 @@
 import * as PolicyUtils from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {defaultProps, propTypes} from './tagPickerPropTypes';
+import type {PolicyTag, PolicyTagList, PolicyTags, RecentlyUsedTags} from '@src/types/onyx';
 
-function TagPicker({selectedTag, tag, tagIndex, policyTags, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption, insets, onSubmit}) {
+type SelectedTagOption = {
+    name: string;
+    enabled?: boolean;
+    accountID: number | null;
+};
+
+type TagPickerOnyxProps = {
+    /** Collection of tags attached to a policy */
+    policyTags: OnyxEntry<PolicyTagList>;
+
+    /** List of recently used tags */
+    policyRecentlyUsedTags: OnyxEntry<RecentlyUsedTags>;
+};
+
+type TagPickerProps = TagPickerOnyxProps & {
+    /** The policyID we are getting tags for */
+    // It's used in withOnyx HOC.
+    // eslint-disable-next-line react/no-unused-prop-types
+    policyID: string;
+
+    /** The selected tag of the money request */
+    selectedTag: string;
+
+    /** The name of tag list we are getting tags for */
+    tag: string;
+
+    /** Callback to submit the selected tag */
+    onSubmit: () => void;
+
+    /**
+     * Safe area insets required for reflecting the portion of the view,
+     * that is not covered by navigation bars, tab bars, toolbars, and other ancestor views.
+     */
+    insets: EdgeInsets;
+
+    /** Should show the selected option that is disabled? */
+    shouldShowDisabledAndSelectedOption?: boolean;
+
+    /** The index of a tag list */
+    tagIndex: number;
+};
+
+function TagPicker({selectedTag, tag, policyTags, tagIndex, policyRecentlyUsedTags, shouldShowDisabledAndSelectedOption = false, insets, onSubmit}: TagPickerProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
-    const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []);
+    const policyRecentlyUsedTagsList = useMemo(() => policyRecentlyUsedTags?.[tag] ?? [], [policyRecentlyUsedTags, tag]);
     const policyTagList = PolicyUtils.getTagList(policyTags, tagIndex);
     const policyTagsCount = PolicyUtils.getCountOfEnabledTagsOfList(policyTagList.tags);
     const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD;
 
     const shouldShowTextInput = !isTagsCountBelowThreshold;
 
-    const selectedOptions = useMemo(() => {
+    const selectedOptions: SelectedTagOption[] = useMemo(() => {
         if (!selectedTag) {
             return [];
         }
@@ -39,26 +81,27 @@
         ];
     }, [selectedTag]);
 
-    const enabledTags = useMemo(() => {
+    const enabledTags: PolicyTags | Array<PolicyTag | SelectedTagOption> = useMemo(() => {
         if (!shouldShowDisabledAndSelectedOption) {
             return policyTagList.tags;
         }
-        const selectedNames = _.map(selectedOptions, (s) => s.name);
-        const tags = [...selectedOptions, ..._.filter(policyTagList.tags, (policyTag) => policyTag.enabled && !selectedNames.includes(policyTag.name))];
-        return tags;
+        const selectedNames = selectedOptions.map((s) => s.name);
+
+        return [...selectedOptions, ...Object.values(policyTagList.tags).filter((policyTag) => policyTag.enabled && !selectedNames.includes(policyTag.name))];
     }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]);
 
     const sections = useMemo(
         () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, enabledTags, policyRecentlyUsedTagsList, false).tagOptions,
         [searchValue, enabledTags, selectedOptions, policyRecentlyUsedTagsList],
     );
 
-    const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue);
+    const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList((sections?.[0]?.data?.length ?? 0) > 0, searchValue);
 
-    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (policyTag) => policyTag.searchText === selectedTag)[0], 'keyForList');
+    const selectedOptionKey = sections[0]?.data?.filter((policyTag) => policyTag.searchText === selectedTag)?.[0]?.keyForList;
 
     return (
         <OptionsSelector
+            // @ts-expect-error TODO: Remove this once OptionsSelector (https://github.com/Expensify/App/issues/25125) is migrated to TypeScript.
             contentContainerStyles={[{paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]}
             optionHoveredStyle={styles.hoveredComponentBG}
             sectionHeaderStyle={styles.mt5}
@@ -81,14 +124,14 @@
 }
 
 TagPicker.displayName = 'TagPicker';
-TagPicker.propTypes = propTypes;
-TagPicker.defaultProps = defaultProps;
 
-export default withOnyx({
+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 type {SelectedTagOption};

src/libs/OptionsListUtils.ts

@@ -7,6 +7,7 @@ import lodashSet from 'lodash/set';
 import lodashSortBy from 'lodash/sortBy';
 import Onyx from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {SelectedTagOption} from '@components/TagPicker';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -53,12 +54,6 @@ import * as TaskUtils from './TaskUtils';
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
-type Tag = {
-    enabled: boolean;
-    name: string;
-    accountID: number | null;
-};
-
 type Option = Partial<ReportUtils.OptionData>;
 
 /**
@@ -130,7 +125,7 @@ type GetOptionsConfig = {
     categories?: PolicyCategories;
     recentlyUsedCategories?: string[];
     includeTags?: boolean;
-    tags?: Record<string, Tag>;
+    tags?: PolicyTagList | Array<SelectedTagOption | PolicyTag>;
     recentlyUsedTags?: string[];
     canInviteUser?: boolean;
     includeSelectedOptions?: boolean;
@@ -886,7 +881,7 @@ function sortCategories(categories: Record<string, Category>): Category[] {
 /**
  * Sorts tags alphabetically by name.
  */
-function sortTags(tags: Record<string, Tag> | Tag[]) {
+function sortTags(tags: Record<string, PolicyTag | SelectedTagOption> | Array<PolicyTag | SelectedTagOption>) {
     let sortedTags;
 
     if (Array.isArray(tags)) {
@@ -1060,7 +1055,7 @@ function getCategoryListSections(
  *
  * @param tags - an initial tag array
  */
-function getTagsOptions(tags: Category[]): Option[] {
+function getTagsOptions(tags: Array<Pick<PolicyTag, 'name' | 'enabled'>>): Option[] {
     return tags.map((tag) => {
         // This is to remove unnecessary escaping backslash in tag name sent from backend.
         const cleanedName = PolicyUtils.getCleanedTagName(tag.name);
@@ -1077,7 +1072,13 @@ function getTagsOptions(tags: Category[]): Option[] {
 /**
  * Build the section list for tags
  */
-function getTagListSections(tags: Tag[], recentlyUsedTags: string[], selectedOptions: Category[], searchInputValue: string, maxRecentReportsToShow: number) {
+function getTagListSections(
+    tags: Array<PolicyTag | SelectedTagOption>,
+    recentlyUsedTags: string[],
+    selectedOptions: SelectedTagOption[],
+    searchInputValue: string,
+    maxRecentReportsToShow: number,
+) {
     const tagSections = [];
     const sortedTags = sortTags(tags);
     const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.name);
@@ -1389,7 +1390,7 @@ function getOptions(
     }
 
     if (includeTags) {
-        const tagOptions = getTagListSections(Object.values(tags), recentlyUsedTags, selectedOptions as Category[], searchInputValue, maxRecentReportsToShow);
+        const tagOptions = getTagListSections(Object.values(tags), recentlyUsedTags, selectedOptions as SelectedTagOption[], searchInputValue, maxRecentReportsToShow);
 
         return {
             recentReports: [],
@@ -1813,7 +1814,7 @@ function getFilteredOptions(
     categories: PolicyCategories = {},
     recentlyUsedCategories: string[] = [],
     includeTags = false,
-    tags: Record<string, Tag> = {},
+    tags: PolicyTagList | Array<PolicyTag | SelectedTagOption> = {},
     recentlyUsedTags: string[] = [],
     canInviteUser = true,
     includeSelectedOptions = false,

src/types/onyx/PolicyTag.ts

@@ -3,11 +3,17 @@ type PolicyTag = {
     name: string;
 
     /** Flag that determines if a tag is active and able to be selected */
-    enabled: boolean;
+    enabled?: boolean;
 
     /** "General Ledger code" that corresponds to this tag in an accounting system. Similar to an ID. */
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    'GL Code': string;
+    'GL Code'?: string;
+
+    /** Nested tags */
+    tags: PolicyTags;
+
+    /** Flag that determines if a tag is required */
+    required: boolean;
 };
 
 type PolicyTags = Record<string, PolicyTag>;