Chore: Migrate WorkspaceView to Typescript (#3416)

* [CHORE] WorkspaceView migration to Typescript

* minor tweak

app/containers/FormContainer.tsx

@@ -22,11 +22,11 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const FormContainerInner = ({ children }: { children: JSX.Element }) => (
+export const FormContainerInner = ({ children }: { children: React.ReactNode }): JSX.Element => (
 	<View style={[sharedStyles.container, isTablet && sharedStyles.tabletScreenContent]}>{children}</View>
 );
 
-const FormContainer = ({ children, theme, testID, ...props }: IFormContainer) => (
+const FormContainer = ({ children, theme, testID, ...props }: IFormContainer): JSX.Element => (
 	// @ts-ignore
 	<KeyboardView
 		style={{ backgroundColor: themes[theme].backgroundColor }}

app/views/WorkspaceView/ServerAvatar.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
 import { createImageProgress } from 'react-native-image-progress';
 import * as Progress from 'react-native-progress';
 import FastImage from '@rocket.chat/react-native-fast-image';
@@ -41,15 +40,24 @@ const styles = StyleSheet.create({
 	}
 });
 
-const getInitial = url => url && url.replace(/http(s?):\/\//, '').slice(0, 1);
+const getInitial = (url: string) => url && url.replace(/http(s?):\/\//, '').slice(0, 1);
 
-const Fallback = ({ theme, initial }) => (
+interface IFallback {
+	theme: string;
+	initial: string;
+}
+const Fallback = ({ theme, initial }: IFallback) => (
 	<View style={[styles.container, styles.fallback, { backgroundColor: themes[theme].dangerColor }]}>
 		<Text style={[styles.initial, { color: themes[theme].buttonText }]}>{initial}</Text>
 	</View>
 );
 
-const ServerAvatar = React.memo(({ theme, url, image }) => (
+interface IServerAvatar {
+	theme: string;
+	url: string;
+	image: string;
+}
+const ServerAvatar = React.memo(({ theme, url, image }: IServerAvatar) => (
 	<View style={styles.container}>
 		{image && (
 			<ImageProgress
@@ -66,16 +74,6 @@ const ServerAvatar = React.memo(({ theme, url, image }) => (
 	</View>
 ));
 
-ServerAvatar.propTypes = {
-	theme: PropTypes.string,
-	url: PropTypes.string,
-	image: PropTypes.string
-};
 ServerAvatar.displayName = 'ServerAvatar';
 
-Fallback.propTypes = {
-	theme: PropTypes.string,
-	initial: PropTypes.string
-};
-
 export default ServerAvatar;

app/views/WorkspaceView/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text, View } from 'react-native';
-import PropTypes from 'prop-types';
+import { StackNavigationProp, StackNavigationOptions } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
 import I18n from '../../i18n';
@@ -12,23 +12,27 @@ import { getShowLoginButton } from '../../selectors/login';
 import ServerAvatar from './ServerAvatar';
 import styles from './styles';
 
-class WorkspaceView extends React.Component {
+interface IWorkSpaceProp {
-	static navigationOptions = () => ({
+	// TODO: waiting for the RootStackParamList https://reactnavigation.org/docs/typescript/#type-checking-screens
-		title: I18n.t('Your_workspace')
+	navigation: StackNavigationProp<any, 'WorkspaceView'>;
-	});
+	theme: string;
+	Site_Name: string;
+	Site_Url: string;
+	server: string;
+	Assets_favicon_512: {
+		url?: string;
+		defaultUrl: string;
+	};
+	registrationForm: string;
+	registrationText: string;
+	showLoginButton: boolean;
+	Accounts_iframe_enabled: boolean;
+	inviteLinkToken: string;
+}
 
-	static propTypes = {
+class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
-		navigation: PropTypes.object,
+	static navigationOptions: StackNavigationOptions = {
-		theme: PropTypes.string,
+		title: I18n.t('Your_workspace')
-		Site_Name: PropTypes.string,
-		Site_Url: PropTypes.string,
-		server: PropTypes.string,
-		Assets_favicon_512: PropTypes.object,
-		registrationForm: PropTypes.string,
-		registrationText: PropTypes.string,
-		showLoginButton: PropTypes.bool,
-		Accounts_iframe_enabled: PropTypes.bool,
-		inviteLinkToken: PropTypes.string
 	};
 
 	get showRegistrationButton() {
@@ -94,7 +98,7 @@ class WorkspaceView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	server: state.server.server,
 	Site_Name: state.settings.Site_Name,
 	Site_Url: state.settings.Site_Url,