From bca7d0cdd6961fcab49bdabf2a46ec3ca39a766d Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Fri, 25 Feb 2022 17:35:36 -0800
Subject: [PATCH] RealmInputScreen: Offer nicer experience for copied URL

Related: #5228
---
 src/start/RealmInputScreen.js        | 33 ++++++++++++++++++++++++++++
 static/translations/messages_en.json |  1 +
 2 files changed, 34 insertions(+)

diff --git a/src/start/RealmInputScreen.js b/src/start/RealmInputScreen.js
index 44a650c175..8698ed2a54 100644
--- a/src/start/RealmInputScreen.js
+++ b/src/start/RealmInputScreen.js
@@ -2,6 +2,7 @@
 import React, { useState, useCallback } from 'react';
 import type { Node } from 'react';
 import { Keyboard } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -15,6 +16,7 @@ import ZulipButton from '../common/ZulipButton';
 import { tryParseUrl } from '../utils/url';
 import * as api from '../api';
 import { navigateToAuth } from '../actions';
+import { useClipboardHasURL } from '../@react-native-clipboard/clipboard';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'realm-input'>,
@@ -79,6 +81,24 @@ export default function RealmInputScreen(props: Props): Node {
     button: { marginTop: 8 },
   };
 
+  const tryCopiedUrl = useCallback(async () => {
+    // The copied string might not be a valid realm URL:
+    // - It might not be a URL because useClipboardHasURL is subject to
+    //   races (and Clipboard.getString is itself async).
+    // - It might not be a valid Zulip realm that the client can connect to.
+    //
+    // So…
+    const url = await Clipboard.getString();
+
+    // …let the user see what string is being tried and edit it if it fails…
+    setRealmInputValue(url);
+
+    // …and run it through our usual validation.
+    await tryRealm(url);
+  }, [tryRealm]);
+
+  const clipboardHasURL = useClipboardHasURL();
+
   return (
     <Screen
       title="Welcome"
@@ -109,6 +129,19 @@ export default function RealmInputScreen(props: Props): Node {
         onPress={handleInputSubmit}
         disabled={urlFromInputValue(realmInputValue) === undefined}
       />
+      {clipboardHasURL === true && (
+        // Recognize when the user has copied a URL, and let them use it
+        // without making them enter it into the input.
+        //
+        // TODO(?): Instead, use a FAB that persists while
+        //   clipboardHasURL !== true && !progress
+        <ZulipButton
+          style={styles.button}
+          text="Use copied URL"
+          progress={progress}
+          onPress={tryCopiedUrl}
+        />
+      )}
     </Screen>
   );
 }
diff --git a/static/translations/messages_en.json b/static/translations/messages_en.json
index 2c70cfb573..2a2d51a2a3 100644
--- a/static/translations/messages_en.json
+++ b/static/translations/messages_en.json
@@ -48,6 +48,7 @@
   "Welcome": "Welcome",
   "Enter your Zulip server URL:": "Enter your Zulip server URL:",
   "e.g. zulip.example.com": "e.g. zulip.example.com",
+  "Use copied URL": "Use copied URL",
   "Subscriptions": "Subscriptions",
   "Search": "Search",
   "Log in": "Log in",