Chore: Migrate containers: FormContainer to Typescript (#3922)

* Chore: Migrate containers: FormContainer to Typescript

* minor tweak

* theme fix

* fix react.reactelement[]

* minor tweak

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>

app/containers/FormContainer.tsx

@@ -5,15 +5,15 @@ import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
 import scrollPersistTaps from '../utils/scrollPersistTaps';
 import KeyboardView from '../presentation/KeyboardView';
+import { useTheme } from '../theme';
 import StatusBar from './StatusBar';
 import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
 import SafeAreaView from './SafeAreaView';
 
 interface IFormContainer extends ScrollViewProps {
-	theme: string;
 	testID: string;
-	children: React.ReactNode;
+	children: React.ReactElement | React.ReactElement[] | null;
 }
 
 const styles = StyleSheet.create({
@@ -22,11 +22,14 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const FormContainerInner = ({ children }: { children: React.ReactNode }): JSX.Element => (
+export const FormContainerInner = ({ children }: { children: (React.ReactElement | null)[] }) => (
 	<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>{children}</View>
 );
 
-const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => (
+const FormContainer = ({ children, testID, ...props }: IFormContainer) => {
+	const { theme } = useTheme();
+
+	return (
 		<KeyboardView
 			style={{ backgroundColor: themes[theme].backgroundColor }}
 			contentContainerStyle={sharedStyles.container}
@@ -44,5 +47,6 @@ const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): J
 			</ScrollView>
 		</KeyboardView>
 	);
+};
 
 export default FormContainer;

app/views/ForgotPasswordView.tsx

@@ -92,7 +92,7 @@ class ForgotPasswordView extends React.Component<IForgotPasswordViewProps, IForg
 		const { theme } = this.props;
 
 		return (
-			<FormContainer theme={theme} testID='forgot-password-view'>
+			<FormContainer testID='forgot-password-view'>
 				<FormContainerInner>
 					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: themes[theme].titleText }]}>
 						{I18n.t('Forgot_password')}

app/views/LoginView.tsx

@@ -229,7 +229,7 @@ class LoginView extends React.Component<ILoginViewProps, any> {
 	render() {
 		const { Accounts_ShowFormLogin, theme, navigation } = this.props;
 		return (
-			<FormContainer theme={theme} testID='login-view'>
+			<FormContainer testID='login-view'>
 				<FormContainerInner>
 					<LoginServices separator={Accounts_ShowFormLogin} navigation={navigation} theme={theme} />
 					{this.renderUserForm()}

app/views/NewServerView/index.tsx

@@ -321,7 +321,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 		const marginTop = previousServer ? 0 : 35;
 
 		return (
-			<FormContainer theme={theme} testID='new-server-view' keyboardShouldPersistTaps='never'>
+			<FormContainer testID='new-server-view' keyboardShouldPersistTaps='never'>
 				<FormContainerInner>
 					<Image
 						style={[

app/views/RegisterView.tsx

@@ -172,7 +172,9 @@ class RegisterView extends React.Component<IProps, any> {
 			return null;
 		}
 		try {
-			return Object.keys(this.parsedCustomFields).map((key, index, array) => {
+			return (
+				<>
+					{Object.keys(this.parsedCustomFields).map((key, index, array) => {
 						if (this.parsedCustomFields[key].type === 'select') {
 							const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
 							return (
@@ -186,7 +188,7 @@ class RegisterView extends React.Component<IProps, any> {
 									}}
 									value={customFields[key]}>
 									<TextInput
-								inputRef={e => {
+										inputRef={(e: any) => {
 											// @ts-ignore
 											this[key] = e;
 										}}
@@ -201,7 +203,7 @@ class RegisterView extends React.Component<IProps, any> {
 
 						return (
 							<TextInput
-						inputRef={(e: any) => {
+								inputRef={e => {
 									// @ts-ignore
 									this[key] = e;
 								}}
@@ -225,7 +227,9 @@ class RegisterView extends React.Component<IProps, any> {
 								theme={theme}
 							/>
 						);
-			});
+					})}
+				</>
+			);
 		} catch (error) {
 			return null;
 		}
@@ -235,7 +239,7 @@ class RegisterView extends React.Component<IProps, any> {
 		const { saving } = this.state;
 		const { theme, showLoginButton, navigation } = this.props;
 		return (
-			<FormContainer theme={theme} testID='register-view'>
+			<FormContainer testID='register-view'>
 				<FormContainerInner>
 					<LoginServices navigation={navigation} theme={theme} separator />
 					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>

app/views/SendEmailConfirmationView.tsx

@@ -62,7 +62,7 @@ const SendEmailConfirmationView = ({ navigation, route }: ISendEmailConfirmation
 	}, []);
 
 	return (
-		<FormContainer theme={theme} testID='send-email-confirmation-view'>
+		<FormContainer testID='send-email-confirmation-view'>
 			<FormContainerInner>
 				<TextInput
 					autoFocus

app/views/WorkspaceView/index.tsx

@@ -74,7 +74,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 		const { theme, Site_Name, Site_Url, Assets_favicon_512, server, showLoginButton } = this.props;
 
 		return (
-			<FormContainer theme={theme} testID='workspace-view'>
+			<FormContainer testID='workspace-view'>
 				<FormContainerInner>
 					<View style={styles.alignItemsCenter}>
 						<ServerAvatar theme={theme} url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />