From 03edfe10c37a4e8c3d51be4f48d9d46629a0f4b3 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 17 Feb 2024 19:41:59 +0100 Subject: [PATCH 1/6] Migrate Components Group 1 to TypeScript --- ...ification.js => FocusModeNotification.tsx} | 1 - ...gIndicator.js => SAMLLoadingIndicator.tsx} | 10 ++++++-- .../{TaxPicker/index.js => TaxPicker.tsx} | 25 +++++++++++++------ .../TaxPicker/taxPickerPropTypes.js | 21 ---------------- src/libs/OptionsListUtils.ts | 2 +- 5 files changed, 27 insertions(+), 32 deletions(-) rename src/components/{FocusModeNotification.js => FocusModeNotification.tsx} (97%) rename src/components/{SAMLLoadingIndicator.js => SAMLLoadingIndicator.tsx} (79%) rename src/components/{TaxPicker/index.js => TaxPicker.tsx} (77%) delete mode 100644 src/components/TaxPicker/taxPickerPropTypes.js diff --git a/src/components/FocusModeNotification.js b/src/components/FocusModeNotification.tsx similarity index 97% rename from src/components/FocusModeNotification.js rename to src/components/FocusModeNotification.tsx index e846c1f188e2..c4fcbae33224 100644 --- a/src/components/FocusModeNotification.js +++ b/src/components/FocusModeNotification.tsx @@ -27,7 +27,6 @@ function FocusModeNotification() { {translate('focusModeUpdateModal.prompt')} { User.clearFocusModeNotification(); diff --git a/src/components/SAMLLoadingIndicator.js b/src/components/SAMLLoadingIndicator.tsx similarity index 79% rename from src/components/SAMLLoadingIndicator.js rename to src/components/SAMLLoadingIndicator.tsx index 84f9098e564f..2be7b76e6cae 100644 --- a/src/components/SAMLLoadingIndicator.js +++ b/src/components/SAMLLoadingIndicator.tsx @@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import variables from '@styles/variables'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import * as Illustrations from './Icon/Illustrations'; @@ -23,8 +24,13 @@ function SAMLLoadingIndicator() { /> {translate('samlSignIn.launching')} - - {translate('samlSignIn.oneMoment')} + + + {translate('samlSignIn.oneMoment')} + diff --git a/src/components/TaxPicker/index.js b/src/components/TaxPicker.tsx similarity index 77% rename from src/components/TaxPicker/index.js rename to src/components/TaxPicker.tsx index f25a1b84bf64..86d9581d0798 100644 --- a/src/components/TaxPicker/index.js +++ b/src/components/TaxPicker.tsx @@ -1,5 +1,5 @@ -import lodashGet from 'lodash/get'; import React, {useMemo, useState} from 'react'; +import type {EdgeInsets} from 'react-native-safe-area-context'; import _ from 'underscore'; import OptionsSelector from '@components/OptionsSelector'; import useLocalize from '@hooks/useLocalize'; @@ -8,9 +8,22 @@ import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import CONST from '@src/CONST'; -import {defaultProps, propTypes} from './taxPickerPropTypes'; -function TaxPicker({selectedTaxRate, policyTaxRates, insets, onSubmit}) { +type TaxPickerProps = { + /** Collection of tax rates attached to a policy */ + policyTaxRates?: OptionsListUtils.PolicyTaxRateWithDefault; + + /** The selected tax rate of an expense */ + selectedTaxRate?: string; + + /** Safe area insets */ + insets?: EdgeInsets; + + /** Callback to fire when a tax is pressed */ + onSubmit: () => void; +}; + +function TaxPicker({selectedTaxRate = '', policyTaxRates = {} as OptionsListUtils.PolicyTaxRateWithDefault, insets, onSubmit}: TaxPickerProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); @@ -58,11 +71,11 @@ function TaxPicker({selectedTaxRate, policyTaxRates, insets, onSubmit}) { ); return policyTaxRatesOptions; }, [policyTaxRates, searchValue, selectedOptions]); - - const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (taxRate) => taxRate.searchText === selectedTaxRate)[0], 'keyForList'); + const selectedOptionKey = sections?.[0]?.data?.filter((taxRate) => taxRate.searchText === selectedTaxRate)[0]?.keyForList; return ( Date: Sat, 17 Feb 2024 20:08:05 +0100 Subject: [PATCH 2/6] Migrate ShowMoreButton component to TypeScript --- .../index.js => ShowMoreButton.tsx} | 27 ++++++------------- 1 file changed, 8 insertions(+), 19 deletions(-) rename src/components/{ShowMoreButton/index.js => ShowMoreButton.tsx} (75%) diff --git a/src/components/ShowMoreButton/index.js b/src/components/ShowMoreButton.tsx similarity index 75% rename from src/components/ShowMoreButton/index.js rename to src/components/ShowMoreButton.tsx index 28c33d185cff..178b122830d4 100644 --- a/src/components/ShowMoreButton/index.js +++ b/src/components/ShowMoreButton.tsx @@ -1,7 +1,5 @@ -import PropTypes from 'prop-types'; import React from 'react'; -import {View} from 'react-native'; -import _ from 'underscore'; +import {View, ViewStyle} from 'react-native'; import Button from '@components/Button'; import * as Expensicons from '@components/Icon/Expensicons'; import Text from '@components/Text'; @@ -9,34 +7,27 @@ import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as NumberFormatUtils from '@libs/NumberFormatUtils'; -import stylePropTypes from '@styles/stylePropTypes'; -const propTypes = { +type ShowMoreButtonProps = { /** Additional styles for container */ - containerStyle: stylePropTypes, + containerStyle?: ViewStyle; /** The number of currently shown items */ - currentCount: PropTypes.number, + currentCount?: number; /** The total number of items that could be shown */ - totalCount: PropTypes.number, + totalCount?: number; /** A handler that fires when button has been pressed */ - onPress: PropTypes.func.isRequired, + onPress: () => void; }; -const defaultProps = { - containerStyle: {}, - currentCount: undefined, - totalCount: undefined, -}; - -function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) { +function ShowMoreButton({containerStyle = {}, currentCount, totalCount, onPress}: ShowMoreButtonProps) { const {translate, preferredLocale} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); - const shouldShowCounter = _.isNumber(currentCount) && _.isNumber(totalCount); + const shouldShowCounter = typeof currentCount === 'number' && typeof totalCount === 'number'; return ( @@ -67,7 +58,5 @@ function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}) { } ShowMoreButton.displayName = 'ShowMoreButton'; -ShowMoreButton.propTypes = propTypes; -ShowMoreButton.defaultProps = defaultProps; export default ShowMoreButton; From 2918adc8609dfb6291a9cc194fb392a3fca2c8fa Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 17 Feb 2024 20:18:30 +0100 Subject: [PATCH 3/6] fix lint errors --- src/components/ShowMoreButton.tsx | 9 +++++---- src/components/TaxPicker.tsx | 3 +-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/ShowMoreButton.tsx b/src/components/ShowMoreButton.tsx index 178b122830d4..c0b99a76e5bf 100644 --- a/src/components/ShowMoreButton.tsx +++ b/src/components/ShowMoreButton.tsx @@ -1,12 +1,13 @@ import React from 'react'; -import {View, ViewStyle} from 'react-native'; -import Button from '@components/Button'; -import * as Expensicons from '@components/Icon/Expensicons'; -import Text from '@components/Text'; +import {View} from 'react-native'; +import type {ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as NumberFormatUtils from '@libs/NumberFormatUtils'; +import Button from './Button'; +import * as Expensicons from './Icon/Expensicons'; +import Text from './Text'; type ShowMoreButtonProps = { /** Additional styles for container */ diff --git a/src/components/TaxPicker.tsx b/src/components/TaxPicker.tsx index 86d9581d0798..1b192212b203 100644 --- a/src/components/TaxPicker.tsx +++ b/src/components/TaxPicker.tsx @@ -1,13 +1,12 @@ import React, {useMemo, useState} from 'react'; import type {EdgeInsets} from 'react-native-safe-area-context'; -import _ from 'underscore'; -import OptionsSelector from '@components/OptionsSelector'; import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import CONST from '@src/CONST'; +import OptionsSelector from './OptionsSelector'; type TaxPickerProps = { /** Collection of tax rates attached to a policy */ From bb1e907937ac7298fd2830f10a7410a2d3251e3e Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 20 Feb 2024 14:24:04 +0100 Subject: [PATCH 4/6] address review comments --- src/components/ShowMoreButton.tsx | 8 ++++---- src/components/TaxPicker.tsx | 7 ++++--- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/ShowMoreButton.tsx b/src/components/ShowMoreButton.tsx index c0b99a76e5bf..3411066a5376 100644 --- a/src/components/ShowMoreButton.tsx +++ b/src/components/ShowMoreButton.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {View} from 'react-native'; -import type {ViewStyle} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -11,7 +11,7 @@ import Text from './Text'; type ShowMoreButtonProps = { /** Additional styles for container */ - containerStyle?: ViewStyle; + containerStyle?: StyleProp; /** The number of currently shown items */ currentCount?: number; @@ -23,12 +23,12 @@ type ShowMoreButtonProps = { onPress: () => void; }; -function ShowMoreButton({containerStyle = {}, currentCount, totalCount, onPress}: ShowMoreButtonProps) { +function ShowMoreButton({containerStyle, currentCount, totalCount, onPress}: ShowMoreButtonProps) { const {translate, preferredLocale} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); - const shouldShowCounter = typeof currentCount === 'number' && typeof totalCount === 'number'; + const shouldShowCounter = !!(currentCount && totalCount); return ( diff --git a/src/components/TaxPicker.tsx b/src/components/TaxPicker.tsx index 1b192212b203..be3e3ff6dc9d 100644 --- a/src/components/TaxPicker.tsx +++ b/src/components/TaxPicker.tsx @@ -4,13 +4,14 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; +import type {PolicyTaxRateWithDefault} from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import CONST from '@src/CONST'; import OptionsSelector from './OptionsSelector'; type TaxPickerProps = { /** Collection of tax rates attached to a policy */ - policyTaxRates?: OptionsListUtils.PolicyTaxRateWithDefault; + policyTaxRates: PolicyTaxRateWithDefault; /** The selected tax rate of an expense */ selectedTaxRate?: string; @@ -70,11 +71,11 @@ function TaxPicker({selectedTaxRate = '', policyTaxRates = {} as OptionsListUtil ); return policyTaxRatesOptions; }, [policyTaxRates, searchValue, selectedOptions]); - const selectedOptionKey = sections?.[0]?.data?.filter((taxRate) => taxRate.searchText === selectedTaxRate)[0]?.keyForList; + const selectedOptionKey = sections?.[0]?.data?.find((taxRate) => taxRate.searchText === selectedTaxRate)?.keyForList; return ( Date: Tue, 20 Feb 2024 23:53:52 +0100 Subject: [PATCH 5/6] Update src/components/TaxPicker.tsx Co-authored-by: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com> --- src/components/TaxPicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TaxPicker.tsx b/src/components/TaxPicker.tsx index be3e3ff6dc9d..faa3508a3cb4 100644 --- a/src/components/TaxPicker.tsx +++ b/src/components/TaxPicker.tsx @@ -23,7 +23,7 @@ type TaxPickerProps = { onSubmit: () => void; }; -function TaxPicker({selectedTaxRate = '', policyTaxRates = {} as OptionsListUtils.PolicyTaxRateWithDefault, insets, onSubmit}: TaxPickerProps) { +function TaxPicker({selectedTaxRate = '', policyTaxRates, insets, onSubmit}: TaxPickerProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); From 7c2b9989e72d7afe5fa659343cbdcb1dc7db2512 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 2 Mar 2024 01:38:11 +0100 Subject: [PATCH 6/6] Fix type error --- src/components/TaxPicker.tsx | 4 ++-- src/libs/OptionsListUtils.ts | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TaxPicker.tsx b/src/components/TaxPicker.tsx index 11c46ee33e0a..664aa741c400 100644 --- a/src/components/TaxPicker.tsx +++ b/src/components/TaxPicker.tsx @@ -4,14 +4,14 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import type {PolicyTaxRateWithDefault} from '@libs/OptionsListUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import CONST from '@src/CONST'; +import type {TaxRatesWithDefault} from '@src/types/onyx'; import OptionsSelector from './OptionsSelector'; type TaxPickerProps = { /** Collection of tax rates attached to a policy */ - taxRates: PolicyTaxRateWithDefault; + taxRates: TaxRatesWithDefault; /** The selected tax rate of an expense */ selectedTaxRate?: string; diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 313897c5c023..342006eca710 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -2054,4 +2054,4 @@ export { getShareLogOptions, }; -export type {MemberForList, CategorySection, GetOptions, PolicyTaxRateWithDefault}; +export type {MemberForList, CategorySection, GetOptions};