jump to new connected device

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",

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

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 }}>

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={

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);