From 99b6c3d0732603f40543bb5432da270ecf34b3b7 Mon Sep 17 00:00:00 2001
From: AlexAlexandre <alexalexandrejr@gmail.com>
Date: Thu, 15 Jul 2021 16:47:30 -0300
Subject: [PATCH] [IMPROVE] migrate the ActivityIndicator and the Button
 component

---
 ...vityIndicator.js => ActivityIndicator.tsx} | 23 ++++++------
 app/containers/Button/{index.js => index.tsx} | 36 ++++++++-----------
 2 files changed, 26 insertions(+), 33 deletions(-)
 rename app/containers/{ActivityIndicator.js => ActivityIndicator.tsx} (52%)
 rename app/containers/Button/{index.js => index.tsx} (72%)

diff --git a/app/containers/ActivityIndicator.js b/app/containers/ActivityIndicator.tsx
similarity index 52%
rename from app/containers/ActivityIndicator.js
rename to app/containers/ActivityIndicator.tsx
index 964d9c267..3f21cac6a 100644
--- a/app/containers/ActivityIndicator.js
+++ b/app/containers/ActivityIndicator.tsx
@@ -1,8 +1,13 @@
 import React from 'react';
-import { ActivityIndicator, StyleSheet } from 'react-native';
-import { PropTypes } from 'prop-types';
+import { ActivityIndicator, ActivityIndicatorProps, StyleSheet } from 'react-native';
 import { themes } from '../constants/colors';
 
+interface IActivityIndicator extends ActivityIndicatorProps{
+	theme?: 'light' | 'dark' | 'black',
+	absolute?: boolean,
+	props?: object
+}
+
 const styles = StyleSheet.create({
 	indicator: {
 		padding: 16,
@@ -19,7 +24,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-const RCActivityIndicator = ({ theme, absolute, ...props }) => (
+const RCActivityIndicator = ({ theme = 'light', absolute, ...props }: IActivityIndicator) => (
 	<ActivityIndicator
 		style={[styles.indicator, absolute && styles.absolute]}
 		color={themes[theme].auxiliaryText}
@@ -27,14 +32,10 @@ const RCActivityIndicator = ({ theme, absolute, ...props }) => (
 	/>
 );
 
-RCActivityIndicator.propTypes = {
-	theme: PropTypes.string,
-	absolute: PropTypes.bool,
-	props: PropTypes.object
-};
 
-RCActivityIndicator.defaultProps = {
-	theme: 'light'
-};
+// TODO - test the app without the theme default
+// RCActivityIndicator.defaultProps = {
+// 	theme: 'light'
+// };
 
 export default RCActivityIndicator;
diff --git a/app/containers/Button/index.js b/app/containers/Button/index.tsx
similarity index 72%
rename from app/containers/Button/index.js
rename to app/containers/Button/index.tsx
index 75a09290f..55f40c207 100644
--- a/app/containers/Button/index.js
+++ b/app/containers/Button/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheet, Text } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
@@ -7,6 +6,19 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
 
+interface IButton {
+	title: string;
+	type: string
+	onPress(): void;
+	disabled: boolean;
+	backgroundColor: string
+	loading: boolean;
+	theme: string
+	color: string
+	fontSize: any
+	style: any
+}
+
 const styles = StyleSheet.create({
 	container: {
 		paddingHorizontal: 14,
@@ -25,27 +37,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-export default class Button extends React.PureComponent {
-	static propTypes = {
-		title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-		type: PropTypes.string,
-		onPress: PropTypes.func,
-		disabled: PropTypes.bool,
-		backgroundColor: PropTypes.string,
-		loading: PropTypes.bool,
-		theme: PropTypes.string,
-		color: PropTypes.string,
-		fontSize: PropTypes.string,
-		style: PropTypes.any
-	}
-
-	static defaultProps = {
-		title: 'Press me!',
-		type: 'primary',
-		onPress: () => alert('It works!'),
-		disabled: false,
-		loading: false
-	}
+export default class Button extends React.PureComponent<IButton, any> {
 
 	render() {
 		const {