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/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;