[NEW] Show server history

app/containers/FormContainer.js

@@ -30,7 +30,7 @@ const FormContainer = ({ children, theme, testID }) => (
 		keyboardVerticalOffset={128}
 	>
 		<StatusBar theme={theme} />
-		<ScrollView {...scrollPersistTaps} style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
+		<ScrollView {...scrollPersistTaps} keyboardShouldPersistTaps='never' style={sharedStyles.container} contentContainerStyle={[sharedStyles.containerScrollView, styles.scrollView]}>
 			<SafeAreaView testID={testID} theme={theme} style={{ backgroundColor: themes[theme].backgroundColor }}>
 				{children}
 				<AppVersion theme={theme} />

app/lib/database/index.js

@@ -17,6 +17,7 @@ import Permission from './model/Permission';
 import SlashCommand from './model/SlashCommand';
 import User from './model/User';
 import Server from './model/Server';
+import ServerLinks from './model/ServerLinks';
 
 import serversSchema from './schema/servers';
 import appSchema from './schema/app';
@@ -71,7 +72,7 @@ class DB {
 				schema: serversSchema,
 				migrations: serversMigrations
 			}),
-			modelClasses: [Server, User],
+			modelClasses: [Server, User, ServerLinks],
 			actionsEnabled: true
 		})
 	}

app/lib/database/model/ServerLinks.js

@@ -0,0 +1,8 @@
+import { Model } from '@nozbe/watermelondb';
+import { field } from '@nozbe/watermelondb/decorators';
+
+export default class ServerLinks extends Model {
+	static table = 'server_links';
+
+	@field('link') link;
+}

app/lib/database/model/serversMigrations.js

@@ -1,4 +1,4 @@
-import { schemaMigrations, addColumns } from '@nozbe/watermelondb/Schema/migrations';
+import { schemaMigrations, addColumns, createTable } from '@nozbe/watermelondb/Schema/migrations';
 
 export default schemaMigrations({
 	migrations: [
@@ -48,6 +48,17 @@ export default schemaMigrations({
 					]
 				})
 			]
+		},
+		{
+			toVersion: 7,
+			steps: [
+				createTable({
+					name: 'server_links',
+					columns: [
+						{ name: 'link', type: 'string', isOptional: true }
+					]
+				})
+			]
 		}
 	]
 });

app/lib/database/schema/servers.js

@@ -1,7 +1,7 @@
 import { appSchema, tableSchema } from '@nozbe/watermelondb';
 
 export default appSchema({
-	version: 6,
+	version: 7,
 	tables: [
 		tableSchema({
 			name: 'users',
@@ -32,6 +32,12 @@ export default appSchema({
 				{ name: 'unique_id', type: 'string', isOptional: true },
 				{ name: 'enterprise_modules', type: 'string', isOptional: true }
 			]
+		}),
+		tableSchema({
+			name: 'server_links',
+			columns: [
+				{ name: 'link', type: 'string', isOptional: true }
+			]
 		})
 	]
 });

app/sagas/selectServer.js

@@ -135,11 +135,25 @@ const handleServerRequest = function* handleServerRequest({ server, certificate
 		}
 
 		const serverInfo = yield getServerInfo({ server });
+		const serversDB = database.servers;
+		const serverLinksCollection = serversDB.collections.get('server_links');
 
 		if (serverInfo) {
 			yield RocketChat.getLoginServices(server);
 			yield RocketChat.getLoginSettings({ server });
 			Navigation.navigate('WorkspaceView');
+			yield serversDB.action(async() => {
+				try {
+					const allServerLinks = await serverLinksCollection.query().fetch();
+					if (!allServerLinks.find(savedServer => savedServer.link === server)) {
+						await serverLinksCollection.create((record) => {
+							record.link = server;
+						});
+					}
+				} catch (e) {
+					log(e);
+				}
+			});
 			yield put(selectServerRequest(server, serverInfo.version, false));
 		}
 	} catch (e) {

app/views/NewServerView.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	Text, Keyboard, StyleSheet, TouchableOpacity, View, Alert, BackHandler
+	Text, Keyboard, StyleSheet, View, Alert, BackHandler, FlatList
 } from 'react-native';
 import { connect } from 'react-redux';
 import * as FileSystem from 'expo-file-system';
 import DocumentPicker from 'react-native-document-picker';
 import { Base64 } from 'js-base64';
 import parse from 'url-parse';
 
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import UserPreferences from '../lib/userPreferences';
 import EventEmitter from '../utils/events';
 import { selectServerRequest, serverRequest } from '../actions/server';
@@ -27,6 +28,8 @@ import { withTheme } from '../theme';
 import { setBasicAuth, BASIC_AUTH_KEY } from '../utils/fetch';
 import { CloseModalButton } from '../containers/HeaderButton';
 import { showConfirmationAlert } from '../utils/info';
+import database from '../lib/database';
+import { CustomIcon } from '../lib/Icons';
 
 const styles = StyleSheet.create({
 	title: {
@@ -58,9 +61,47 @@ const styles = StyleSheet.create({
 	},
 	connectButton: {
 		marginBottom: 0
+	},
+	item: {
+		padding: 15,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between'
+	},
+	itemText: {
+		...sharedStyles.textRegular,
+		fontSize: 16
+	},
+	serverHistory: {
+		maxHeight: 180,
+		width: '100%',
+		top: '75%',
+		zIndex: 1,
+		position: 'absolute',
+		borderWidth: 0.5
 	}
 });
 
+const Item = ({
+	item, onPress, theme, deleteServerLink
+}) => (
+	<View style={styles.item}>
+		<TouchableOpacity onPress={() => onPress(item.link)}>
+			<Text style={[styles.itemText, { color: themes[theme].titleText }]}>{item.link}</Text>
+		</TouchableOpacity>
+		<TouchableOpacity onPress={() => deleteServerLink(item)}>
+			<CustomIcon name='close' size={16} color={themes[theme].auxiliaryText} />
+		</TouchableOpacity>
+	</View>
+);
+
+Item.propTypes = {
+	item: PropTypes.object,
+	theme: PropTypes.string,
+	onPress: PropTypes.func,
+	deleteServerLink: PropTypes.func
+};
+
 class NewServerView extends React.Component {
 	static navigationOptions = () => ({
 		title: I18n.t('Workspaces')
@@ -84,12 +125,25 @@ class NewServerView extends React.Component {
 		this.state = {
 			text: '',
 			connectingOpen: false,
-			certificate: null
+			certificate: null,
+			focused: false,
+			serverLinks: []
 		};
 		EventEmitter.addEventListener('NewServer', this.handleNewServerEvent);
 		BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
 	}
 
+	async componentDidMount() {
+		const db = database.servers;
+		try {
+			const serverLinksCollection = db.collections.get('server_links');
+			const serverLinks = await serverLinksCollection.query().fetch();
+			this.setState({ serverLinks });
+		} catch {
+			// Do nothing
+		}
+	}
+
 	componentDidUpdate(prevProps) {
 		const { adding } = this.props;
 		if (prevProps.adding !== adding) {
@@ -251,6 +305,20 @@ class NewServerView extends React.Component {
 		});
 	}
 
+	deleteServerLink = async(item) => {
+		const { serverLinks } = this.state;
+		const db = database.servers;
+		try {
+			await db.action(async() => {
+				await item.destroyPermanently();
+			});
+			const newServerLinks = serverLinks.filter(server => server.link !== item.link);
+			this.setState({ serverLinks: newServerLinks });
+		} catch {
+			// Nothing
+		}
+	}
+
 	renderCertificatePicker = () => {
 		const { certificate } = this.state;
 		const { theme } = this.props;
@@ -283,25 +351,43 @@ class NewServerView extends React.Component {
 
 	render() {
 		const { connecting, theme } = this.props;
-		const { text, connectingOpen } = this.state;
+		const {
+			text, connectingOpen, serverLinks, focused
+		} = this.state;
 		return (
 			<FormContainer theme={theme} testID='new-server-view'>
 				<FormContainerInner>
 					<Text style={[styles.title, { color: themes[theme].titleText }]}>{I18n.t('Join_your_workspace')}</Text>
-					<TextInput
-						label='Enter workspace URL'
-						placeholder='Ex. your-company.rocket.chat'
-						containerStyle={styles.inputContainer}
-						value={text}
-						returnKeyType='send'
-						onChangeText={this.onChangeText}
-						testID='new-server-view-input'
-						onSubmitEditing={this.submit}
-						clearButtonMode='while-editing'
-						keyboardType='url'
-						textContentType='URL'
-						theme={theme}
-					/>
+					<View>
+						<TextInput
+							label='Enter workspace URL'
+							placeholder='Ex. your-company.rocket.chat'
+							containerStyle={styles.inputContainer}
+							value={text}
+							returnKeyType='send'
+							onChangeText={this.onChangeText}
+							testID='new-server-view-input'
+							onSubmitEditing={this.submit}
+							clearButtonMode='while-editing'
+							keyboardType='url'
+							textContentType='URL'
+							theme={theme}
+							onFocus={() => this.setState({ focused: true })}
+							onBlur={() => this.setState({ focused: false })}
+						/>
+						{
+							focused
+								? (
+									<View style={[{ backgroundColor: themes[theme].backgroundColor, borderColor: themes[theme].separatorColor }, styles.serverHistory]}>
+										<FlatList
+											data={serverLinks}
+											renderItem={({ item }) => <Item item={item} onPress={this.onChangeText} theme={theme} deleteServerLink={this.deleteServerLink} />}
+											keyExtractor={item => item.id}
+										/>
+									</View>
+								) : null
+						}
+					</View>
 					<Button
 						title={I18n.t('Connect')}
 						type='primary'
@@ -325,7 +411,7 @@ class NewServerView extends React.Component {
 						testID='new-server-view-open'
 					/>
 				</FormContainerInner>
-				{ isIOS ? this.renderCertificatePicker() : null }
+				{isIOS ? this.renderCertificatePicker() : null}
 			</FormContainer>
 		);
 	}