[TS Migration] Migrate PlaidLink directory to TypeScript

src/components/PlaidLink/index.native.js → src/components/PlaidLink/index.native.tsx

@@ -1,27 +1,28 @@
 import {useEffect} from 'react';
-import {dismissLink, openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk';
+import {dismissLink, LinkEvent, openLink, useDeepLinkRedirector, usePlaidEmitter} from 'react-native-plaid-link-sdk';
 import Log from '@libs/Log';
 import CONST from '@src/CONST';
-import {plaidLinkDefaultProps, plaidLinkPropTypes} from './plaidLinkPropTypes';
+import PlaidLinkProps from './types';
 
-function PlaidLink(props) {
+function PlaidLink({token, onSuccess = () => {}, onExit = () => {}, onEvent}: PlaidLinkProps) {
     useDeepLinkRedirector();
-    usePlaidEmitter((event) => {
-        Log.info('[PlaidLink] Handled Plaid Event: ', false, event);
-        props.onEvent(event.eventName, event.metadata);
+    usePlaidEmitter((event: LinkEvent) => {
+        Log.info('[PlaidLink] Handled Plaid Event: ', false, event.eventName);
+        onEvent?.(event.eventName, event.metadata);
     });
     useEffect(() => {
-        props.onEvent(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN, {});
+        onEvent?.(CONST.BANK_ACCOUNT.PLAID.EVENTS_NAME.OPEN);
         openLink({
             tokenConfig: {
-                token: props.token,
+                token,
+                noLoadingState: false,
             },
             onSuccess: ({publicToken, metadata}) => {
-                props.onSuccess({publicToken, metadata});
+                onSuccess({publicToken, metadata});
             },
-            onExit: (exitError, metadata) => {
-                Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
-                props.onExit();
+            onExit: ({error, metadata}) => {
+                Log.info('[PlaidLink] Exit: ', false, {error, metadata});
+                onExit();
             },
         });
 
@@ -35,8 +36,6 @@ function PlaidLink(props) {
     return null;
 }
 
-PlaidLink.propTypes = plaidLinkPropTypes;
-PlaidLink.defaultProps = plaidLinkDefaultProps;
 PlaidLink.displayName = 'PlaidLink';
 
 export default PlaidLink;

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

@@ -1,35 +1,33 @@
 import {useCallback, useEffect, useState} from 'react';
-import {usePlaidLink} from 'react-plaid-link';
+import {PlaidLinkOnSuccessMetadata, usePlaidLink} from 'react-plaid-link';
 import Log from '@libs/Log';
-import {plaidLinkDefaultProps, plaidLinkPropTypes} from './plaidLinkPropTypes';
+import PlaidLinkProps from './types';
 
-function PlaidLink(props) {
+function PlaidLink({token, onSuccess = () => {}, onError = () => {}, onExit = () => {}, onEvent, receivedRedirectURI}: PlaidLinkProps) {
     const [isPlaidLoaded, setIsPlaidLoaded] = useState(false);
-    const onSuccess = props.onSuccess;
-    const onError = props.onError;
     const successCallback = useCallback(
-        (publicToken, metadata) => {
+        (publicToken: string, metadata: PlaidLinkOnSuccessMetadata) => {
             onSuccess({publicToken, metadata});
         },
         [onSuccess],
     );
 
     const {open, ready, error} = usePlaidLink({
-        token: props.token,
+        token,
         onSuccess: successCallback,
         onExit: (exitError, metadata) => {
             Log.info('[PlaidLink] Exit: ', false, {exitError, metadata});
-            props.onExit();
+            onExit();
         },
         onEvent: (event, metadata) => {
             Log.info('[PlaidLink] Event: ', false, {event, metadata});
-            props.onEvent(event, metadata);
+            onEvent?.(event, metadata);
         },
         onLoad: () => setIsPlaidLoaded(true),
 
         // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the
         // user to their respective bank platform
-        receivedRedirectUri: props.receivedRedirectURI,
+        receivedRedirectUri: receivedRedirectURI,
     });
 
     useEffect(() => {
@@ -52,7 +50,5 @@ function PlaidLink(props) {
     return null;
 }
 
-PlaidLink.propTypes = plaidLinkPropTypes;
-PlaidLink.defaultProps = plaidLinkDefaultProps;
 PlaidLink.displayName = 'PlaidLink';
 export default PlaidLink;

src/components/PlaidLink/types.ts

@@ -0,0 +1,25 @@
+import {LinkEventMetadata, LinkSuccessMetadata} from 'react-native-plaid-link-sdk';
+import {PlaidLinkOnEventMetadata, PlaidLinkOnSuccessMetadata, PlaidLinkStableEvent} from 'react-plaid-link';
+
+type PlaidLinkProps = {
+    // Plaid Link SDK public token used to initialize the Plaid SDK
+    token: string;
+
+    // Callback to execute once the user taps continue after successfully entering their account information
+    onSuccess?: (args: {publicToken?: string; metadata: PlaidLinkOnSuccessMetadata | LinkSuccessMetadata}) => void;
+
+    // Callback to execute when there is an error event emitted by the Plaid SDK
+    onError?: (error: ErrorEvent | null) => void;
+
+    // Callback to execute when the user leaves the Plaid widget flow without entering any information
+    onExit?: () => void;
+
+    // Callback to execute whenever a Plaid event occurs
+    onEvent?: (eventName: PlaidLinkStableEvent | string, metadata?: PlaidLinkOnEventMetadata | LinkEventMetadata) => void;
+
+    // The redirect URI with an OAuth state ID. Needed to re-initialize the PlaidLink after directing the
+    // user to their respective bank platform
+    receivedRedirectURI?: string;
+};
+
+export default PlaidLinkProps;