chore: created hooks and separated components

app/views/NewServerView/components/CertificatePicker/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import I18n from 'i18n-js';
+
+import { themes } from '../../../../lib/constants';
+import { TCertificatePicker } from '../../types';
+import { isAndroid, isTablet } from '../../../../lib/methods/helpers';
+import styles from './styles';
+
+const CertificatePicker = ({ previousServer, certificate, theme, chooseCertificate, handleRemove }: TCertificatePicker) => (
+	<View
+		style={[
+			styles.certificatePicker,
+			{
+				marginTop: isAndroid ? 20 : 0,
+				marginBottom: previousServer && !isTablet ? 10 : 30
+			}
+		]}>
+		<Text style={[styles.chooseCertificateTitle, { color: themes[theme].fontSecondaryInfo, fontSize: 13 }]}>
+			{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
+		</Text>
+		<TouchableOpacity onPress={certificate ? handleRemove : chooseCertificate} testID='new-server-choose-certificate'>
+			<Text style={[styles.chooseCertificate, { color: themes[theme].fontInfo, fontSize: 13 }]}>
+				{certificate ?? I18n.t('Apply_Your_Certificate')}
+			</Text>
+		</TouchableOpacity>
+	</View>
+);
+
+export default CertificatePicker;

app/views/NewServerView/components/CertificatePicker/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from "react-native";
+
+import sharedStyles from '../../../Styles';
+
+
+const styles = StyleSheet.create({
+	certificatePicker: {
+		alignItems: 'center',
+		justifyContent: 'flex-end'
+	},
+	chooseCertificateTitle: {
+		...sharedStyles.textRegular
+	},
+	chooseCertificate: {
+		...sharedStyles.textSemibold
+	}
+});
+
+export default styles;

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { themes } from '../../../lib/constants';
-import { CustomIcon } from '../../../containers/CustomIcon';
-import sharedStyles from '../../Styles';
-import Touch from '../../../containers/Touch';
-import { TServerHistoryModel } from '../../../definitions/IServerHistory';
-import { TSupportedThemes } from '../../../theme';
+import { themes } from '../../../../lib/constants';
+import { CustomIcon } from '../../../../containers/CustomIcon';
+import sharedStyles from '../../../Styles';
+import Touch from '../../../../containers/Touch';
+import { TServerHistoryModel } from '../../../../definitions/IServerHistory';
+import { TSupportedThemes } from '../../../../theme';
 
 const styles = StyleSheet.create({
 	container: {

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

@@ -1,13 +1,13 @@
 import React, { useState } from 'react';
 import { FlatList, StyleSheet, TextInputProps, View } from 'react-native';
 
-import { FormTextInput } from '../../../containers/TextInput';
-import * as List from '../../../containers/List';
-import { themes } from '../../../lib/constants';
-import I18n from '../../../i18n';
-import { TServerHistoryModel } from '../../../definitions';
+import { FormTextInput } from '../../../../containers/TextInput';
+import * as List from '../../../../containers/List';
+import { themes } from '../../../../lib/constants';
+import I18n from '../../../../i18n';
+import { TServerHistoryModel } from '../../../../definitions';
 import Item from './Item';
-import { TSupportedThemes } from '../../../theme';
+import { TSupportedThemes } from '../../../../theme';
 
 const styles = StyleSheet.create({
 	container: {
@@ -67,8 +67,7 @@ const ServerInput = ({
 			/>
 			{focused && serversHistory?.length ? (
 				<View
-					style={[styles.serverHistory, { backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].strokeLight }]}
-				>
+					style={[styles.serverHistory, { backgroundColor: themes[theme].surfaceRoom, borderColor: themes[theme].strokeLight }]}>
 					<FlatList
 						data={serversHistory}
 						renderItem={({ item }) => (

app/views/NewServerView/hooks/useCertificate.tsx

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import I18n from 'i18n-js';
+
+import { showConfirmationAlert } from '../../../lib/methods/helpers/info';
+import SSLPinning from '../../../lib/methods/helpers/sslPinning';
+
+const useCertificate = () => {
+	const [certificate, setCertificate] = useState<string | null>(null);
+
+	const chooseCertificate = async () => {
+		try {
+			const certificate = await SSLPinning?.pickCertificate();
+			setCertificate(certificate);
+		} catch {
+			// Do nothing
+		}
+	};
+
+	const removeCertificate = () => {
+		showConfirmationAlert({
+			message: I18n.t('You_will_unset_a_certificate_for_this_server'),
+			confirmationText: I18n.t('Remove'),
+			onPress: () => setCertificate(null) // We not need delete file from DocumentPicker because it is a temp file
+		});
+	};
+
+	return {
+		certificate,
+		chooseCertificate,
+		removeCertificate
+	};
+};
+
+export default useCertificate;

app/views/NewServerView/hooks/useServersHistory.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { Q } from '@nozbe/watermelondb';
+import { sanitizeLikeString } from '@nozbe/watermelondb/QueryDescription';
+
+import { TServerHistoryModel } from '../../../definitions';
+import database from '../../../lib/database';
+
+const useServersHistory = () => {
+	const [serversHistory, setServersHistory] = useState<TServerHistoryModel[]>([]);
+
+	const queryServerHistory = async (text?: string) => {
+		const db = database.servers;
+		try {
+			const serversHistoryCollection = db.get('servers_history');
+			let whereClause = [Q.where('username', Q.notEq(null)), Q.sortBy('updated_at', Q.desc), Q.take(3)];
+			if (text) {
+				const likeString = sanitizeLikeString(text);
+				whereClause = [...whereClause, Q.where('url', Q.like(`%${likeString}%`))];
+			}
+			const serversHistory = await serversHistoryCollection.query(...whereClause).fetch();
+
+			setServersHistory(serversHistory);
+		} catch {
+			// Do nothing
+		}
+	};
+
+	const deleteServerHistory = async (item: TServerHistoryModel) => {
+		const db = database.servers;
+		try {
+			await db.write(async () => {
+				await item.destroyPermanently();
+			});
+			setServersHistory(prevState => prevState.filter(prevServerHistory => prevServerHistory?.id !== item?.id));
+		} catch {
+			// Nothing
+		}
+	};
+
+	return {
+		serversHistory,
+		queryServerHistory,
+		deleteServerHistory
+	};
+};
+
+export default useServersHistory;