From aba0e4919450ab70576db329d8c319809976a704 Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Tue, 5 Oct 2021 17:48:04 -0300
Subject: [PATCH] Chore: Migrate WorkspaceView to Typescript (#3416)

* [CHORE] WorkspaceView migration to Typescript

* minor tweak
---
 app/containers/FormContainer.tsx              |  4 +-
 .../{ServerAvatar.js => ServerAvatar.tsx}     | 26 ++++++------
 .../WorkspaceView/{index.js => index.tsx}     | 40 ++++++++++---------
 .../WorkspaceView/{styles.js => styles.ts}    |  0
 4 files changed, 36 insertions(+), 34 deletions(-)
 rename app/views/WorkspaceView/{ServerAvatar.js => ServerAvatar.tsx} (80%)
 rename app/views/WorkspaceView/{index.js => index.tsx} (81%)
 rename app/views/WorkspaceView/{styles.js => styles.ts} (100%)

diff --git a/app/containers/FormContainer.tsx b/app/containers/FormContainer.tsx
index 522bf489e..46522508b 100644
--- a/app/containers/FormContainer.tsx
+++ b/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 }}
diff --git a/app/views/WorkspaceView/ServerAvatar.js b/app/views/WorkspaceView/ServerAvatar.tsx
similarity index 80%
rename from app/views/WorkspaceView/ServerAvatar.js
rename to app/views/WorkspaceView/ServerAvatar.tsx
index 749c4b10e..54b90b9bb 100644
--- a/app/views/WorkspaceView/ServerAvatar.js
+++ b/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;
diff --git a/app/views/WorkspaceView/index.js b/app/views/WorkspaceView/index.tsx
similarity index 81%
rename from app/views/WorkspaceView/index.js
rename to app/views/WorkspaceView/index.tsx
index dbd1c69e0..68ac5157b 100644
--- a/app/views/WorkspaceView/index.js
+++ b/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 {
-	static navigationOptions = () => ({
-		title: I18n.t('Your_workspace')
-	});
+interface IWorkSpaceProp {
+	// TODO: waiting for the RootStackParamList https://reactnavigation.org/docs/typescript/#type-checking-screens
+	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 = {
-		navigation: PropTypes.object,
-		theme: PropTypes.string,
-		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
+class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
+	static navigationOptions: StackNavigationOptions = {
+		title: I18n.t('Your_workspace')
 	};
 
 	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,
diff --git a/app/views/WorkspaceView/styles.js b/app/views/WorkspaceView/styles.ts
similarity index 100%
rename from app/views/WorkspaceView/styles.js
rename to app/views/WorkspaceView/styles.ts