Improve auto-connect with password

nisargjhaveri · Sep 1, 2024 · dd4495a · dd4495a
1 parent 2236b44
commit dd4495a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/web/components/app.tsx b/src/web/components/app.tsx
@@ -24,6 +24,7 @@ const serverConnection = new ServerConnection(window.location.href);
 
 export function App() {
     let [devices, setDevices] = useState<RemoteAdbDevice[]>([]);
+    let [serverConnectionReady, setServerConnectionReady] = useState(false);
     let [autoConnect, setAutoConnect] = useState(() => localStorage?.getItem(StoredItemKeys.SettingsAutoConnectDevices) === "true");
 
     useEffect(() => {
@@ -46,7 +47,7 @@ export function App() {
                 <Stack.Item align="center">
                     <Text variant="mediumPlus" style={{color: NeutralColors.gray130}}>Share connected Android devices for debugging on the server</Text>
                 </Stack.Item>
-                <Status serverConnection={serverConnection} />
+                <Status serverConnection={serverConnection} onServerConnectionReady={() => setServerConnectionReady(true)} />
                 <Separator>Connected Devices</Separator>
                 <Stack horizontal tokens={{childrenGap: 'm', padding: 's'}} horizontalAlign="center" verticalAlign="center">
                     <Text>Device not visible in the list below?</Text>
@@ -61,7 +62,7 @@ export function App() {
                     </Stack.Item>
                 )}
                 <Stack tokens={{childrenGap: 'l2', padding: 's'}}>
-                    {devices.map((device) => (<Device device={device} key={device.serial} serverConnection={serverConnection} autoConnect={autoConnect} />))}
+                    {devices.map((device) => (<Device device={device} key={device.serial} serverConnection={serverConnection} autoConnect={autoConnect} serverConnectionReady={serverConnectionReady} />))}
                 </Stack>
             </Stack>
         </div>

diff --git a/src/web/components/device.tsx b/src/web/components/device.tsx
@@ -74,17 +74,21 @@ function CommunicationSpeed(props: {device: RemoteAdbDevice}) {
     )
 }
 
-export function Device(props: {device: RemoteAdbDevice, serverConnection: ServerConnection, autoConnect: boolean}) {
+export function Device(props: {device: RemoteAdbDevice, serverConnection: ServerConnection, autoConnect: boolean, serverConnectionReady: boolean}) {
     const [error, setError] = useState(undefined);
     const [isConnecting, setConnecting] = useState(false);
 
-    const { device, serverConnection, autoConnect } = props;
+    const { device, serverConnection, autoConnect, serverConnectionReady } = props;
 
     useEffect(() => {
+        if (!serverConnectionReady) {
+            return;
+        }
+
         if (autoConnect && !device.connected && !isConnecting) {
             onConnect();
         }
-    }, [autoConnect]);
+    }, [autoConnect, serverConnectionReady]);
 
     const onConnect = useCallback(async () => {
         let connecting = true;

diff --git a/src/web/components/status.tsx b/src/web/components/status.tsx
@@ -114,7 +114,7 @@ function StatusItem(props: {type: MessageBarType, message: string, muted?: boole
     );
 }
 
-export function Status(props: {serverConnection: ServerConnection}) {
+export function Status(props: {serverConnection: ServerConnection, onServerConnectionReady: () => void}) {
     const [initialized, setInitialized] = useState(false);
 
     const [statusError, setStatusError] = useState(undefined);
@@ -123,7 +123,7 @@ export function Status(props: {serverConnection: ServerConnection}) {
 
     const [showLoginDialog, setShowLoginDialog] = useState(false);
 
-    const { serverConnection } = props;
+    const { serverConnection, onServerConnectionReady } = props;
 
     const updateStatus = useCallback(async (status: ServerStatus) => {
         if (status._error) {
@@ -145,13 +145,18 @@ export function Status(props: {serverConnection: ServerConnection}) {
 
     // Show login dialog once initialized
     useEffect(() => {
-        if (initialized && loginSupported && loginRequired) {
-            setShowLoginDialog(true);
+        if (initialized) {
+            if (loginSupported && loginRequired) {
+                setShowLoginDialog(true);
+            } else {
+                onServerConnectionReady();
+            }
         }
     }, [initialized]);
 
     const onLoginSuccess = useCallback(() => {
         setLoginRequired(false);
+        onServerConnectionReady();
         serverConnection.getServerStatus();
     }, [setLoginRequired, updateStatus]);