From e8b58323c7a2937fd5131047d47a0418173badb5 Mon Sep 17 00:00:00 2001
From: AlexAlexandre <alexalexandrejr@gmail.com>
Date: Fri, 23 Jul 2021 16:33:40 -0300
Subject: [PATCH] [IMPROVE] - migrating the TwoFactor container

---
 app/containers/Button/index.tsx               |  9 ++++----
 .../TwoFactor/{index.js => index.tsx}         | 23 ++++++++++---------
 .../TwoFactor/{styles.js => styles.ts}        |  0
 3 files changed, 17 insertions(+), 15 deletions(-)
 rename app/containers/TwoFactor/{index.js => index.tsx} (89%)
 rename app/containers/TwoFactor/{styles.js => styles.ts} (100%)

diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index 55f40c207..9faa12648 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -6,7 +6,7 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 
-interface IButton {
+interface IButtonProps {
 	title: string;
 	type: string
 	onPress(): void;
@@ -17,6 +17,7 @@ interface IButton {
 	color: string
 	fontSize: any
 	style: any
+	testID: string;
 }
 
 const styles = StyleSheet.create({
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default class Button extends React.PureComponent<IButton, any> {
+export default class Button extends React.PureComponent<Partial<IButtonProps>, any> {
 
 	render() {
 		const {
@@ -45,7 +46,7 @@ export default class Button extends React.PureComponent<IButton, any> {
 		} = this.props;
 		const isPrimary = type === 'primary';
 
-		let textColor = isPrimary ? themes[theme].buttonText : themes[theme].bodyText;
+		let textColor = isPrimary ? themes[theme!].buttonText : themes[theme!].bodyText;
 		if (color) {
 			textColor = color;
 		}
@@ -58,7 +59,7 @@ export default class Button extends React.PureComponent<IButton, any> {
 					styles.container,
 					backgroundColor
 						? { backgroundColor }
-						: { backgroundColor: isPrimary ? themes[theme].actionTintColor : themes[theme].backgroundColor },
+						: { backgroundColor: isPrimary ? themes[theme!].actionTintColor : themes[theme!].backgroundColor },
 					disabled && styles.disabled,
 					style
 				]}
diff --git a/app/containers/TwoFactor/index.js b/app/containers/TwoFactor/index.tsx
similarity index 89%
rename from app/containers/TwoFactor/index.js
rename to app/containers/TwoFactor/index.tsx
index deb5c25db..7a873b577 100644
--- a/app/containers/TwoFactor/index.js
+++ b/app/containers/TwoFactor/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, InteractionManager } from 'react-native';
 import isEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
 import { sha256 } from 'js-sha256';
 import Modal from 'react-native-modal';
 import useDeepCompareEffect from 'use-deep-compare-effect';
@@ -19,7 +18,12 @@ import styles from './styles';
 
 export const TWO_FACTOR = 'TWO_FACTOR';
 
-const methods = {
+interface ITwoFactor {
+	theme: string;
+	isMasterDetail: boolean;
+}
+
+const methods: any = {
 	totp: {
 		text: 'Open_your_authentication_app_and_enter_the_code',
 		keyboardType: 'numeric'
@@ -36,9 +40,9 @@ const methods = {
 	}
 };
 
-const TwoFactor = React.memo(({ theme, isMasterDetail }) => {
+const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 	const [visible, setVisible] = useState(false);
-	const [data, setData] = useState({});
+	const [data, setData] = useState<any>({});
 	const [code, setCode] = useState('');
 
 	const method = methods[data.method];
@@ -55,7 +59,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }) => {
 		}
 	}, [data]);
 
-	const showTwoFactor = args => setData(args);
+	const showTwoFactor = (args: any) => setData(args);
 
 	useEffect(() => {
 		const listener = EventEmitter.addEventListener(TWO_FACTOR, showTwoFactor);
@@ -86,6 +90,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }) => {
 	const color = themes[theme].titleText;
 	return (
 		<Modal
+			//@ts-ignore
 			transparent
 			avoidKeyboard
 			useNativeDriver
@@ -99,7 +104,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }) => {
 					<TextInput
 						value={code}
 						theme={theme}
-						inputRef={e => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
+						inputRef={(e: any) => InteractionManager.runAfterInteractions(() => e?.getNativeRef()?.focus())}
 						returnKeyType='send'
 						autoCapitalize='none'
 						onChangeText={setCode}
@@ -133,12 +138,8 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }) => {
 		</Modal>
 	);
 });
-TwoFactor.propTypes = {
-	theme: PropTypes.string,
-	isMasterDetail: PropTypes.bool
-};
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	isMasterDetail: state.app.isMasterDetail
 });
 
diff --git a/app/containers/TwoFactor/styles.js b/app/containers/TwoFactor/styles.ts
similarity index 100%
rename from app/containers/TwoFactor/styles.js
rename to app/containers/TwoFactor/styles.ts