From 06c22b6a5e95b97e55999a8e9019c795200c464d Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Mon, 14 Aug 2023 22:05:51 +0000
Subject: [PATCH] jump to new connected device

---
 locales/en.json                          |  4 +++-
 src/Screens/Device/settings.js           | 10 +++++++-
 src/Screens/NoDevicesConnected/index.js  | 13 +++++++++-
 src/Screens/SearchForNewDevices/index.js | 30 +++++++++++++++++-------
 src/utils.js                             |  7 ++++--
 5 files changed, 50 insertions(+), 14 deletions(-)

diff --git a/locales/en.json b/locales/en.json
index 63865ef..815cdb9 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -181,7 +181,9 @@
       }
     },
     "noDevicesConnected": {
-      "pageTitle": "No devices connected"
+      "pageTitle": "No devices connected",
+      "textDescription": "No devices are connected to the app. Connect a device to use it.",
+      "buttonSearchForNewDevices": "Search for New Devices"
     },
     "help": {
       "pageTitle": "Help",
diff --git a/src/Screens/Device/settings.js b/src/Screens/Device/settings.js
index f55ed3f..5007312 100644
--- a/src/Screens/Device/settings.js
+++ b/src/Screens/Device/settings.js
@@ -1,7 +1,14 @@
 import { ScrollView, Text, View } from "react-native";
 import Card from "../../Components/Card";
 import { useContext, useEffect, useState } from "react";
-import { AppContext, AppStyles, Constants, GetDevice } from "../../utils";
+import {
+  AppContext,
+  AppSelectedUserDevice,
+  AppSelectedUserDeviceDefaultData,
+  AppStyles,
+  Constants,
+  GetDevice,
+} from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
@@ -74,6 +81,7 @@ export default function SettingsView({ navigation }) {
     // show no devices connected screen if there are no devices left
     if (appContext.devices.length < 2) {
       navigation.navigate("_noDevicesConnected");
+      AppSelectedUserDevice.current = AppSelectedUserDeviceDefaultData;
     }
 
     // TODO: remove device from app async storage if it is not already handled by appContext
diff --git a/src/Screens/NoDevicesConnected/index.js b/src/Screens/NoDevicesConnected/index.js
index ee4f640..5777961 100644
--- a/src/Screens/NoDevicesConnected/index.js
+++ b/src/Screens/NoDevicesConnected/index.js
@@ -2,12 +2,23 @@ import { useTranslation } from "react-i18next";
 import { View } from "react-native";
 import MyResult from "../../Components/Result";
 import { MyTextButton } from "../../Components/Button";
+import { useCallback, useContext } from "react";
+import { useFocusEffect } from "@react-navigation/native";
+import { AppContext } from "../../utils";
 
 // this screen is shown when no devices are connected to the app
 export default function NoDevicesConnectedScreen({ navigation }) {
+  const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
-  // TODO: add ref to faq for help to connect a new device
+  useFocusEffect(
+    useCallback(() => {
+      // navigate user to first device in list after he has added a new device
+      if (appContext.devices.length > 0) {
+        navigation.navigate(appContext.devices[0].displayName);
+      }
+    }, [appContext.devices])
+  );
 
   return (
     <View style={{ alignItems: "center", margin: 20, gap: 10 }}>
diff --git a/src/Screens/SearchForNewDevices/index.js b/src/Screens/SearchForNewDevices/index.js
index 443c23d..4066b12 100644
--- a/src/Screens/SearchForNewDevices/index.js
+++ b/src/Screens/SearchForNewDevices/index.js
@@ -2,6 +2,7 @@ import { useContext, useEffect, useState } from "react";
 import {
   AddNewDevice,
   AppContext,
+  AppSelectedUserDevice,
   AppStyles,
   Constants,
   ModalContainer,
@@ -301,18 +302,29 @@ function FoundDevice({ item, appContext, t }) {
               setTimeout(() => {
                 setConnectingState(FoundDeviceState.connected);
 
+                // TODO: other way for this
                 // generate random two digit number code
                 let code = Math.floor(Math.random() * 100);
 
-                // TODO: add device and fill up with information provided by the esp
-                appContext.setDevices((prev) => [
-                  ...prev,
-                  AddNewDevice(
-                    "New Device " + code,
-                    item.deviceModel,
-                    item.deviceIp
-                  ),
-                ]);
+                const newDevice = AddNewDevice(
+                  "New Device " + code,
+                  item.deviceModel,
+                  item.deviceIp
+                );
+
+                // TODO: add device to app storage and fill up with information provided by the esp
+                appContext.setDevices((prev) => [...prev, newDevice]);
+                /*
+                AppSelectedUserDevice.current = {
+                  id: newDevice.id,
+                  routeName: newDevice.displayName,
+                }; */
+
+                console.log(
+                  "appS",
+                  newDevice.id,
+                  AppSelectedUserDevice.current
+                );
               }, 2000);
             }}
             buttonLeftComponent={
diff --git a/src/utils.js b/src/utils.js
index a44ec6a..76c1703 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -640,8 +640,11 @@ const appContextPreview = {
   userColorSwatchesFavorites: [],
 };
 
-export const AppSelectedUserDevice = createRef();
-AppSelectedUserDevice.current = { id: "", routeName: "" };
+export const AppSelectedUserDeviceDefaultData = { id: "", routeName: "" };
+
+export const AppSelectedUserDevice = createRef(
+  AppSelectedUserDeviceDefaultData
+);
 
 export const AppContext = createContext(appContextPreview);