Chore: Migrate NewServerView to Typescript

app/containers/FormContainer.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, StyleSheet, View } from 'react-native';
+import { ScrollView, ScrollViewProps, StyleSheet, View } from 'react-native';
 
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
@@ -10,10 +10,10 @@ import AppVersion from './AppVersion';
 import { isTablet } from '../utils/deviceInfo';
 import SafeAreaView from './SafeAreaView';
 
-interface IFormContainer {
+interface IFormContainer extends ScrollViewProps {
 	theme: string;
 	testID: string;
-	children: JSX.Element;
+	children: React.ReactNode;
 }
 
 const styles = StyleSheet.create({

app/containers/TextInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, TextInputProps, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import sharedStyles from '../views/Styles';
@@ -50,23 +50,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IRCTextInputProps {
-	label: string;
-	error: {
+interface IRCTextInputProps extends TextInputProps {
+	label?: string;
+	error?: {
 		error: any;
 		reason: any;
 	};
-	loading: boolean;
-	secureTextEntry: boolean;
-	containerStyle: any;
-	inputStyle: object;
-	inputRef: any;
-	testID: string;
-	iconLeft: string;
-	iconRight: string;
-	placeholder: string;
-	left: JSX.Element;
-	onIconRightPress(): void;
+	loading?: boolean;
+	containerStyle?: any;
+	inputStyle?: object;
+	inputRef?: any;
+	testID?: string;
+	iconLeft?: string;
+	iconRight?: string;
+	left?: JSX.Element;
+	onIconRightPress?(): void;
 	theme: string;
 }
 
@@ -152,7 +150,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 						contentDescription={null}
 						// @ts-ignore
 						accessibilityLabel={null}
-						style={[styles.label, { color: themes[theme].titleText }, error.error && { color: dangerColor }]}>
+						style={[styles.label, { color: themes[theme].titleText }, error?.error && { color: dangerColor }]}>
 						{label}
 					</Text>
 				) : null}
@@ -168,7 +166,7 @@ export default class RCTextInput extends React.PureComponent<IRCTextInputProps,
 								borderColor: themes[theme].separatorColor,
 								color: themes[theme].titleText
 							},
-							error.error && {
+							error?.error && {
 								color: dangerColor,
 								borderColor: dangerColor
 							},

app/utils/scaling.ts

@@ -0,0 +1,16 @@
+import { isTablet } from './deviceInfo';
+
+const guidelineBaseWidth = isTablet ? 600 : 375;
+const guidelineBaseHeight = isTablet ? 800 : 667;
+
+function scale({ size, width }: { size: number; width: number }): number {
+	return (width / guidelineBaseWidth) * size;
+}
+function verticalScale({ size, height }: { size: number; height: number }): number {
+	return (height / guidelineBaseHeight) * size;
+}
+function moderateScale({ size, factor = 0.5, width }: { size: number; factor?: number; width: number }): number {
+	return size + (scale({ size, width }) - size) * factor;
+}
+
+export { scale, verticalScale, moderateScale };

app/views/NewServerView/ServerInput/Item.js → app/views/NewServerView/ServerInput/Item.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import PropTypes from 'prop-types';
 import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import sharedStyles from '../../Styles';
 import Touch from '../../../utils/touch';
+import { IServer } from '../index';
 
 const styles = StyleSheet.create({
 	container: {
@@ -27,13 +27,20 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ item, theme, onPress, onDelete }) => (
+interface IItem {
+	item: IServer;
+	theme: string;
+	onPress(url: string): void;
+	onDelete(item: IServer): void;
+}
+
+const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (
 	<Touch style={styles.container} onPress={() => onPress(item.url)} theme={theme} testID={`server-history-${item.url}`}>
 		<View style={styles.content}>
 			<Text numberOfLines={1} style={[styles.server, { color: themes[theme].bodyText }]}>
 				{item.url}
 			</Text>
-			<Text numberOfLines={1} style={[styles.username, { color: themes[theme].auxiliaryText }]}>
+			<Text numberOfLines={1} style={{ color: themes[theme].auxiliaryText }}>
 				{item.username}
 			</Text>
 		</View>
@@ -43,11 +50,4 @@ const Item = ({ item, theme, onPress, onDelete }) => (
 	</Touch>
 );
 
-Item.propTypes = {
-	item: PropTypes.object,
-	theme: PropTypes.string,
-	onPress: PropTypes.func,
-	onDelete: PropTypes.func
-};
-
 export default Item;

app/views/NewServerView/ServerInput/index.js → app/views/NewServerView/ServerInput/index.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { FlatList, StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import TextInput from '../../../containers/TextInput';
 import * as List from '../../../containers/List';
 import { themes } from '../../../constants/colors';
 import I18n from '../../../i18n';
 import Item from './Item';
+import { IServer } from '../index';
 
 const styles = StyleSheet.create({
 	container: {
@@ -28,7 +28,25 @@ const styles = StyleSheet.create({
 	}
 });
 
-const ServerInput = ({ text, theme, serversHistory, onChangeText, onSubmit, onDelete, onPressServerHistory }) => {
+interface IServerInput {
+	text: string;
+	theme: string;
+	serversHistory: any[];
+	onChangeText(text: string): void;
+	onSubmit(): void;
+	onDelete(item: IServer): void;
+	onPressServerHistory(serverHistory: IServer): void;
+}
+
+const ServerInput = ({
+	text,
+	theme,
+	serversHistory,
+	onChangeText,
+	onSubmit,
+	onDelete,
+	onPressServerHistory
+}: IServerInput): JSX.Element => {
 	const [focused, setFocused] = useState(false);
 	return (
 		<View style={styles.container}>
@@ -68,14 +86,4 @@ const ServerInput = ({ text, theme, serversHistory, onChangeText, onSubmit, onDe
 	);
 };
 
-ServerInput.propTypes = {
-	text: PropTypes.string,
-	theme: PropTypes.string,
-	serversHistory: PropTypes.array,
-	onChangeText: PropTypes.func,
-	onSubmit: PropTypes.func,
-	onDelete: PropTypes.func,
-	onPressServerHistory: PropTypes.func
-};
-
 export default ServerInput;