From f45f5cb66d5a2de2b9a72eb7811be8996811c676 Mon Sep 17 00:00:00 2001
From: Anthony Gress <the.techx.guy@gmail.com>
Date: Wed, 22 Jan 2025 21:10:38 -0500
Subject: [PATCH] remember last 5 connected device ips

---
 package.json                                  |  3 +-
 src/renderer/App.css                          |  2 +-
 src/renderer/components/ConnectionActions.tsx | 70 +++++++++++++++++--
 src/renderer/theme.ts                         | 13 ++++
 4 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/theme.ts

diff --git a/package.json b/package.json
index 91abf8b..293593d 100644
--- a/package.json
+++ b/package.json
@@ -222,7 +222,8 @@
     "react-router-dom": "^5.3.0",
     "regenerator-runtime": "^0.13.9",
     "semver": "^7.5.4",
-    "sweetalert2": "^11.7.12"
+    "sweetalert2": "^11.7.12",
+    "uuid": "^11.0.5"
   },
   "browserslist": [],
   "prettier": {
diff --git a/src/renderer/App.css b/src/renderer/App.css
index 33ae6ea..69df875 100644
--- a/src/renderer/App.css
+++ b/src/renderer/App.css
@@ -131,7 +131,7 @@ a:hover {
     height: 2rem;
     min-width: 30vw;
     border-radius: 8px;
-    border-color: transparent;
+    border-color: transparent !important;
     appearance: none;
     font-size: 1rem;
     background-color: white;
diff --git a/src/renderer/components/ConnectionActions.tsx b/src/renderer/components/ConnectionActions.tsx
index 9b32f71..adad81e 100644
--- a/src/renderer/components/ConnectionActions.tsx
+++ b/src/renderer/components/ConnectionActions.tsx
@@ -1,15 +1,42 @@
 import { FormEvent, useState } from 'react';
 import { FixedWidthBtn } from './FixedWidthBtn';
-import { Box, Divider, Typography } from '@mui/material';
+import { Autocomplete, Box, createFilterOptions, Divider, FilterOptionsState, InputAdornment, TextField, Typography } from '@mui/material';
 import { adbCommand } from '../api';
+import { styles } from '../theme';
+import { v4 } from 'uuid';
 
 export const ConnectionActions = () => {
     const [ipAddress, setIpAddress] = useState('');
     const [pairingIp, setPairingIp] = useState('');
     const [pairingCode, setPairingCode] = useState('');
 
+    const handleChange = (_event: any, newValue: string | null) => setIpAddress(newValue ? newValue : '');
+
+    const recentlyConnected = localStorage.getItem('recentlyConnected');
+    console.log('recentlyConnected', recentlyConnected);
+
+    const recentlyConnectedArr: string[] | undefined = recentlyConnected && JSON.parse(recentlyConnected);
+    console.log('recentlyConnectedArr', recentlyConnectedArr);
+
+    if (recentlyConnectedArr && recentlyConnectedArr.length > 5) {
+        for (let i = 0; i < recentlyConnectedArr.length - 5; i++) {
+            recentlyConnectedArr.pop();
+        }
+    }
+
     const onSubmitConnect = (e: FormEvent) => {
         e.preventDefault();
+
+        if (recentlyConnectedArr) {
+            const existingIp = recentlyConnectedArr.find((e: string) => e === ipAddress);
+            if (!existingIp && ipAddress) {
+                recentlyConnectedArr.unshift(ipAddress);
+                localStorage.setItem('recentlyConnected', JSON.stringify(recentlyConnectedArr));
+            }
+        } else {
+            localStorage.setItem('recentlyConnected', JSON.stringify([ipAddress]));
+        }
+
         adbCommand(`adb connect ${ipAddress}`);
     };
 
@@ -43,15 +70,50 @@ export const ConnectionActions = () => {
 
                 <form onSubmit={onSubmitConnect}>
                     <Box display={'flex'} justifyContent={'center'} sx={{ flexDirection: { xs: 'column', sm: 'column', md: 'row', lg: 'row' } }} >
-                        <input
+                        {/* <input
                             type="text"
                             value={ipAddress}
                             onChange={updateIp}
                             placeholder="Device ip:port"
                             className="ip-input"
                             required
-                        />
-                        <Box ml={{ xs: 0, md:1 }} sx={{ marginTop: { xs: 2, sm: 2, md: 0 } }} display={'flex'} justifyContent={'center'}>
+                        /> */}
+
+                        <Box sx={styles.center}>
+                            <Autocomplete
+                                freeSolo
+                                options={recentlyConnectedArr && recentlyConnectedArr.length > 0 ? recentlyConnectedArr : []}
+                                renderOption={(props, option: string) => (
+                                    <li {...props} key={v4()}>
+                                        {option}
+                                    </li>
+                                )}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        InputProps={{
+                                            ...params.InputProps,
+                                            type: 'text',
+                                        }}
+                                        placeholder={'Device ip:port'}
+                                        sx={{ backgroundColor: 'white', borderRadius: '8px', borderColor: 'white', minWidth: '30vw' }}
+                                        onChange={updateIp}
+                                    />
+                                )}
+                                onChange={handleChange}
+                                sx={{ width: '95%', borderRadius: '8px', borderColor: 'white',  '& .MuiOutlinedInput-root': {
+                                    border: 'none',
+                                    borderRadius: '8px',
+                                    padding: '0'
+                                },
+                                '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
+                                    border: '1px solid #eee'
+                                }
+                                }}
+                            />
+                        </Box>
+
+                        <Box ml={{ xs: 0, md:2 }} sx={{ marginTop: { xs: 2, sm: 2, md: 0 } }} display={'flex'} justifyContent={'center'}>
                             <FixedWidthBtn title='Connect' command={`adb connect ${ipAddress}`}/>
                         </Box>
                     </Box>
diff --git a/src/renderer/theme.ts b/src/renderer/theme.ts
new file mode 100644
index 0000000..6cb0c6c
--- /dev/null
+++ b/src/renderer/theme.ts
@@ -0,0 +1,13 @@
+export const styles = {
+    center: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
+    },
+    vcenter : {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }
+};