Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[TS migration] Migrate 'ValidateCode' component to TypeScript #31853

Merged
merged 5 commits into from
Dec 18, 2023
Merged

[TS migration] Migrate 'ValidateCode' component to TypeScript #31853

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6800dd2
refactor(ValidateCode): migrate to typescript
pac-guerreiro Nov 24, 2023
9b7570c
refactor: use useLocalize and destruct props
pac-guerreiro Nov 28, 2023
eca5404
Merge branch 'main' into pac-guerreiro/refactor/migrate-validatecode-…
pac-guerreiro Dec 8, 2023
a2b69de
Merge branch 'main' into pac-guerreiro/refactor/migrate-validatecode-…
pac-guerreiro Dec 13, 2023
a919369
Merge branch 'main' into pac-guerreiro/refactor/migrate-validatecode-…
pac-guerreiro Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions .../ValidateCode/ExpiredValidateCodeModal.js → ...ValidateCode/ExpiredValidateCodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@ import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import Text from '@components/Text';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';

const propTypes = {
...withLocalizePropTypes,
};
type ExpiredValidateCodeModalProps = WithLocalizeProps;

function ExpiredValidateCodeModal(props) {
function ExpiredValidateCodeModal(props: ExpiredValidateCodeModalProps) {
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
const theme = useTheme();
const styles = useThemeStyles();
return (
Expand All @@ -28,7 +26,7 @@ function ExpiredValidateCodeModal(props) {
</View>
<Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{props.translate('validateCodeModal.expiredCodeTitle')}</Text>
<View style={[styles.mt2, styles.mb2]}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>{props.translate('validateCodeModal.expiredCodeDescription')}</Text>
<Text style={styles.textAlignCenter}>{props.translate('validateCodeModal.expiredCodeDescription')}</Text>
</View>
</View>
<View style={styles.deeplinkWrapperFooter}>
Expand All @@ -43,6 +41,5 @@ function ExpiredValidateCodeModal(props) {
);
}

ExpiredValidateCodeModal.propTypes = propTypes;
ExpiredValidateCodeModal.displayName = 'ExpiredValidateCodeModal';
export default withLocalize(ExpiredValidateCodeModal);
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
14 changes: 5 additions & 9 deletions ...ponents/ValidateCode/JustSignedInModal.js → ...onents/ValidateCode/JustSignedInModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import PropTypes from 'prop-types';
import React from 'react';
import {View} from 'react-native';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import Text from '@components/Text';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';

const propTypes = {
...withLocalizePropTypes,

type JustSignedInModalProps = WithLocalizeProps & {
/** Whether the 2FA is needed to get fully authenticated. */
is2FARequired: PropTypes.bool.isRequired,
is2FARequired: boolean;
};

function JustSignedInModal(props) {
function JustSignedInModal(props: JustSignedInModalProps) {
const theme = useTheme();
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
const styles = useThemeStyles();
return (
Expand All @@ -34,7 +31,7 @@ function JustSignedInModal(props) {
{props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredTitle' : 'validateCodeModal.successfulSignInTitle')}
</Text>
<View style={[styles.mt2, styles.mb2]}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
<Text style={styles.textAlignCenter}>
{props.translate(props.is2FARequired ? 'validateCodeModal.tfaRequiredDescription' : 'validateCodeModal.successfulSignInDescription')}
</Text>
</View>
Expand All @@ -51,7 +48,6 @@ function JustSignedInModal(props) {
);
}

JustSignedInModal.propTypes = propTypes;
JustSignedInModal.displayName = 'JustSignedInModal';

export default withLocalize(JustSignedInModal);
60 changes: 24 additions & 36 deletions ...ponents/ValidateCode/ValidateCodeModal.js → ...onents/ValidateCode/ValidateCodeModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,37 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useCallback} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import {compose} from 'underscore';
import {OnyxEntry, withOnyx} from 'react-native-onyx';
import Icon from '@components/Icon';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import withLocalize, {WithLocalizeProps} from '@components/withLocalize';
import compose from '@libs/compose';
import useTheme from '@styles/themes/useTheme';
import useThemeStyles from '@styles/useThemeStyles';
import variables from '@styles/variables';
import * as Session from '@userActions/Session';
import ONYXKEYS from '@src/ONYXKEYS';
import {Session as SessionType} from '@src/types/onyx';

const propTypes = {
/** Code to display. */
code: PropTypes.string.isRequired,

/** The ID of the account to which the code belongs. */
accountID: PropTypes.string.isRequired,

type ValidateCodeModalOnyxProps = {
/** Session of currently logged in user */
session: PropTypes.shape({
/** Currently logged in user authToken */
authToken: PropTypes.string,
}),

...withLocalizePropTypes,
session: OnyxEntry<SessionType>;
};

const defaultProps = {
session: {
authToken: null,
},
};
type ValidateCodeModalProps = WithLocalizeProps &
ValidateCodeModalOnyxProps & {
/** Code to display. */
code: string;
/** The ID of the account to which the code belongs. */
accountID: number;
};

function ValidateCodeModal(props) {
function ValidateCodeModal({code, accountID, session = {}, translate}: ValidateCodeModalProps) {
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
const theme = useTheme();
const styles = useThemeStyles();
const signInHere = useCallback(() => Session.signInWithValidateCode(props.accountID, props.code), [props.accountID, props.code]);
const signInHere = useCallback(() => Session.signInWithValidateCode(accountID, code), [accountID, code]);

return (
<View style={styles.deeplinkWrapperContainer}>
Expand All @@ -53,20 +43,20 @@
src={Illustrations.MagicCode}
/>
</View>
<Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{props.translate('validateCodeModal.title')}</Text>
<Text style={[styles.textHeadline, styles.textXXLarge, styles.textAlignCenter]}>{translate('validateCodeModal.title')}</Text>
<View style={[styles.mt2, styles.mb2]}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
{props.translate('validateCodeModal.description')}
{!lodashGet(props, 'session.authToken', null) && (
<Text style={styles.textAlignCenter}>
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
{translate('validateCodeModal.description')}
{!session?.authToken && (
<>
{props.translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{props.translate('validateCodeModal.signInHere')}</TextLink>
{translate('validateCodeModal.or')} <TextLink onPress={signInHere}>{translate('validateCodeModal.signInHere')}</TextLink>

Check failure on line 52 in src/components/ValidateCode/ValidateCodeModal.tsx

View workflow job for this annotation

GitHub Actions / typecheck 

Type '{ children: string; onPress: () => void; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.
</>
)}
{props.shouldShowSignInHere ? '!' : '.'}
.
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
</Text>
</View>
<View style={styles.mt6}>
<Text style={styles.validateCodeDigits}>{props.code}</Text>
<Text style={styles.validateCodeDigits}>{code}</Text>
</View>
</View>
<View style={styles.deeplinkWrapperFooter}>
Expand All @@ -81,13 +71,11 @@
);
}

ValidateCodeModal.propTypes = propTypes;
ValidateCodeModal.defaultProps = defaultProps;
ValidateCodeModal.displayName = 'ValidateCodeModal';

export default compose(
withLocalize,
withOnyx({
withLocalize<ValidateCodeModalProps, unknown>,
withOnyx<ValidateCodeModalProps, ValidateCodeModalOnyxProps>({
session: {key: ONYXKEYS.SESSION},
}),
)(ValidateCodeModal);
pac-guerreiro marked this conversation as resolved.
Show resolved Hide resolved
Loading