From 91e656654267b0b37361c1ba3f768ccfba95f3b0 Mon Sep 17 00:00:00 2001
From: AlexAlexandre <alexalexandrejr@gmail.com>
Date: Thu, 29 Jul 2021 15:21:04 -0300
Subject: [PATCH] [IMPROVE] - migrate KeyboardView presentation layer

---
 .../{KeyboardView.js => KeyboardView.tsx}     | 22 ++++++-------
 .../{TextInput.js => TextInput.tsx}           | 13 ++++----
 .../{UserItem.js => UserItem.tsx}             | 32 +++++++++----------
 3 files changed, 31 insertions(+), 36 deletions(-)
 rename app/presentation/{KeyboardView.js => KeyboardView.tsx} (63%)
 rename app/presentation/{TextInput.js => TextInput.tsx} (81%)
 rename app/presentation/{UserItem.js => UserItem.tsx} (79%)

diff --git a/app/presentation/KeyboardView.js b/app/presentation/KeyboardView.tsx
similarity index 63%
rename from app/presentation/KeyboardView.js
rename to app/presentation/KeyboardView.tsx
index 628213825..0cc5b5e56 100644
--- a/app/presentation/KeyboardView.js
+++ b/app/presentation/KeyboardView.tsx
@@ -1,19 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { KeyboardAwareScrollView } from '@codler/react-native-keyboard-aware-scroll-view';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 
-export default class KeyboardView extends React.PureComponent {
-	static propTypes = {
-		style: PropTypes.any,
-		contentContainerStyle: PropTypes.any,
-		keyboardVerticalOffset: PropTypes.number,
-		scrollEnabled: PropTypes.bool,
-		children: PropTypes.oneOfType([
-			PropTypes.arrayOf(PropTypes.node),
-			PropTypes.node
-		])
-	}
+interface IKeyboardViewProps {
+	style: any,
+	contentContainerStyle: any,
+	keyboardVerticalOffset: number,
+	scrollEnabled: boolean,
+	children: JSX.Element;
+}
+
+export default class KeyboardView extends React.PureComponent<IKeyboardViewProps, any> {
 
 	render() {
 		const {
@@ -28,6 +25,7 @@ export default class KeyboardView extends React.PureComponent {
 				scrollEnabled={scrollEnabled}
 				alwaysBounceVertical={false}
 				extraHeight={keyboardVerticalOffset}
+				// @ts-ignore
 				behavior='position'
 			>
 				{children}
diff --git a/app/presentation/TextInput.js b/app/presentation/TextInput.tsx
similarity index 81%
rename from app/presentation/TextInput.js
rename to app/presentation/TextInput.tsx
index 74e5de219..ee7980439 100644
--- a/app/presentation/TextInput.js
+++ b/app/presentation/TextInput.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { TextInput, StyleSheet, I18nManager } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { themes } from '../constants/colors';
 
@@ -12,7 +11,12 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ThemedTextInput = React.forwardRef(({ style, theme, ...props }, ref) => (
+interface IThemedTextInput {
+	style: object;
+	theme: string;
+}
+
+const ThemedTextInput = React.forwardRef(({ style, theme, ...props }: IThemedTextInput, ref: any) => (
 	<TextInput
 		ref={ref}
 		style={[{ color: themes[theme].titleText }, style, styles.input]}
@@ -22,9 +26,4 @@ const ThemedTextInput = React.forwardRef(({ style, theme, ...props }, ref) => (
 	/>
 ));
 
-ThemedTextInput.propTypes = {
-	style: PropTypes.object,
-	theme: PropTypes.string
-};
-
 export default ThemedTextInput;
diff --git a/app/presentation/UserItem.js b/app/presentation/UserItem.tsx
similarity index 79%
rename from app/presentation/UserItem.js
rename to app/presentation/UserItem.tsx
index 5ffc4c6a2..4a718a5e6 100644
--- a/app/presentation/UserItem.js
+++ b/app/presentation/UserItem.tsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import {
-	Text, View, StyleSheet, Pressable
-} from 'react-native';
-import PropTypes from 'prop-types';
+// @ts-ignore
+import { Text, View, StyleSheet, Pressable } from 'react-native';
 
 import Avatar from '../containers/Avatar';
 import { CustomIcon } from '../lib/Icons';
@@ -41,9 +39,20 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IUserItem {
+	name: string;
+	username: string;
+	onPress(): void;
+	testID: string;
+	onLongPress(): void;
+	style: any;
+	icon: string;
+	theme: string;
+}
+
 const UserItem = ({
 	name, username, onPress, testID, onLongPress, style, icon, theme
-}) => (
+}: IUserItem) => (
 	<Pressable
 		onPress={onPress}
 		onLongPress={onLongPress}
@@ -51,7 +60,7 @@ const UserItem = ({
 		android_ripple={{
 			color: themes[theme].bannerBackground
 		}}
-		style={({ pressed }) => ({
+		style={({ pressed }: any) => ({
 			backgroundColor: isIOS && pressed
 				? themes[theme].bannerBackground
 				: 'transparent'
@@ -68,15 +77,4 @@ const UserItem = ({
 	</Pressable>
 );
 
-UserItem.propTypes = {
-	name: PropTypes.string.isRequired,
-	username: PropTypes.string.isRequired,
-	onPress: PropTypes.func.isRequired,
-	testID: PropTypes.string.isRequired,
-	onLongPress: PropTypes.func,
-	style: PropTypes.any,
-	icon: PropTypes.string,
-	theme: PropTypes.string
-};
-
 export default UserItem;