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,27 +22,31 @@ 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) => {
-	<KeyboardView
+	const { theme } = useTheme();
-		style={{ backgroundColor: themes[theme].backgroundColor }}
+
-		contentContainerStyle={sharedStyles.container}
+	return (
-		keyboardVerticalOffset={128}>
+		<KeyboardView
-		<StatusBar />
+			style={{ backgroundColor: themes[theme].backgroundColor }}
-		<ScrollView
+			contentContainerStyle={sharedStyles.container}
-			style={sharedStyles.container}
+			keyboardVerticalOffset={128}>
-			contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
+			<StatusBar />
-			{...scrollPersistTaps}
+			<ScrollView
-			{...props}>
+				style={sharedStyles.container}
-			<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
+				contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}
-				{children}
+				{...scrollPersistTaps}
-				<AppVersion theme={theme} />
+				{...props}>
-			</SafeAreaView>
+				<SafeAreaView testID={testID} style={{ backgroundColor: themes[theme].backgroundColor }}>
-		</ScrollView>
+					{children}
-	</KeyboardView>
+					<AppVersion theme={theme} />
-);
+				</SafeAreaView>
+			</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,60 +172,64 @@ class RegisterView extends React.Component<IProps, any> {
 			return null;
 		}
 		try {
-			return Object.keys(this.parsedCustomFields).map((key, index, array) => {
+			return (
-				if (this.parsedCustomFields[key].type === 'select') {
+				<>
-					const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
+					{Object.keys(this.parsedCustomFields).map((key, index, array) => {
-					return (
+						if (this.parsedCustomFields[key].type === 'select') {
-						<RNPickerSelect
+							const options = this.parsedCustomFields[key].options.map((option: string) => ({ label: option, value: option }));
-							key={key}
+							return (
-							items={options}
+								<RNPickerSelect
-							onValueChange={value => {
+									key={key}
-								const newValue: { [key: string]: string | number } = {};
+									items={options}
-								newValue[key] = value;
+									onValueChange={value => {
-								this.setState({ customFields: { ...customFields, ...newValue } });
+										const newValue: { [key: string]: string | number } = {};
-							}}
+										newValue[key] = value;
-							value={customFields[key]}>
+										this.setState({ customFields: { ...customFields, ...newValue } });
+									}}
+									value={customFields[key]}>
+									<TextInput
+										inputRef={(e: any) => {
+											// @ts-ignore
+											this[key] = e;
+										}}
+										placeholder={key}
+										value={customFields[key]}
+										testID='register-view-custom-picker'
+										theme={theme}
+									/>
+								</RNPickerSelect>
+							);
+						}
+
+						return (
 							<TextInput
 								inputRef={e => {
 									// @ts-ignore
 									this[key] = e;
 								}}
+								key={key}
+								label={key}
 								placeholder={key}
 								value={customFields[key]}
-								testID='register-view-custom-picker'
+								onChangeText={(value: string) => {
+									const newValue: { [key: string]: string | number } = {};
+									newValue[key] = value;
+									this.setState({ customFields: { ...customFields, ...newValue } });
+								}}
+								onSubmitEditing={() => {
+									if (array.length - 1 > index) {
+										// @ts-ignore
+										return this[array[index + 1]].focus();
+									}
+									this.avatarUrl.focus();
+								}}
+								containerStyle={styles.inputContainer}
 								theme={theme}
 							/>
-						</RNPickerSelect>
+						);
-					);
+					})}
-				}
+				</>
-
+			);
-				return (
-					<TextInput
-						inputRef={(e: any) => {
-							// @ts-ignore
-							this[key] = e;
-						}}
-						key={key}
-						label={key}
-						placeholder={key}
-						value={customFields[key]}
-						onChangeText={(value: string) => {
-							const newValue: { [key: string]: string | number } = {};
-							newValue[key] = value;
-							this.setState({ customFields: { ...customFields, ...newValue } });
-						}}
-						onSubmitEditing={() => {
-							if (array.length - 1 > index) {
-								// @ts-ignore
-								return this[array[index + 1]].focus();
-							}
-							this.avatarUrl.focus();
-						}}
-						containerStyle={styles.inputContainer}
-						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} />