separating states into multiple states

App.js

@@ -52,12 +52,17 @@ export function MyApp() {
         "appColorScheme",
         "userExpertMode",
         "userDeveloperMode",
+        "userColorSwatchesFavorites",
       ]);
 
       const appLanguage = GetDataFromList(data, "appLanguage");
       const appColorScheme = GetDataFromList(data, "appColorScheme");
       const userExpertMode = GetDataFromList(data, "userExpertMode");
       const userDeveloperMode = GetDataFromList(data, "userDeveloperMode");
+      const userColorSwatchesFavorites = GetDataFromList(
+        data,
+        "userColorSwatchesFavorites"
+      );
 
       appContext.setAppLanguage(
         appLanguage === null ? Constants.defaultLanguage : appLanguage
@@ -73,6 +78,10 @@ export function MyApp() {
       appContext.setUserIsDeveloperModeEnabled(
         userDeveloperMode == null ? false : userDeveloperMode
       );
+
+      appContext.setUserColorSwatchesFavorites(
+        userColorSwatchesFavorites === null ? [] : userColorSwatchesFavorites
+      );
     };
 
     loadData();
@@ -255,7 +264,7 @@ function MyDrawer() {
           key={device.id}
           name={device.displayName}
           component={DeviceScreenStack}
-          initialParams={{ device: device }}
+          initialParams={{ deviceDisplayName: device.displayName }}
         />
       ))}
 
@@ -272,7 +281,7 @@ const DeviceScreenStack = (props) => {
   return (
     <MyScreenStack
       name="device"
-      pageTitle={props.route.params.device.displayName}
+      pageTitle={props.route.params.deviceDisplayName}
       component={DeviceScreen}
       navigation={props.navigation}
       params={props.route.params}

locales/de.json

@@ -28,7 +28,7 @@
         "modalSettingsChangeDeviceDisplayName": {
           "pageTitle": "Gerätename anpassen",
           "textTitle": "Gerätename",
-          "textDescription": "Der Name des Geräts wird lokal auf dem Gerät gespeichert und dient Ihnen dazu, die verbundenen Geräte in der App voneinander zu unterscheiden."
+          "textDescription": "Der Name wird lokal auf dem Gerät gespeichert und dient dazu, die verbundenen Geräte in der App voneinander zu unterscheiden."
         }
       },
       "scenes": {

src/Components/ColorPicker/index.js

@@ -250,9 +250,8 @@ export default function MyColorPicker({ colorLayer }) {
 }
 
 export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
+  const appContext = useContext(AppContext);
   const selectedColorPickerColor = useSharedValue("#fff");
-  const [colorSwatchesFavorites, setColorSwatchesFavorites] = useState([]);
-
   const pickerRef = useRef(ColorPickerRef);
 
   const onColorSelect = (color) => {
@@ -283,15 +282,18 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
             marginTop: 10,
           }}
         >
-          {colorSwatchesFavorites.map((color, i) => (
+          {appContext.userColorSwatchesFavorites.map((color, i) => (
             <TouchableHighlight
               key={i}
               style={{ borderRadius: 16 }}
               onPress={() => pickerRef.current.setColor(color)}
               onLongPress={() => {
-                setColorSwatchesFavorites((colors) =>
+                let filteredColors =
-                  colors.filter((c) => c !== color)
+                  appContext.userColorSwatchesFavorites.filter(
-                );
+                    (c) => c !== color
+                  );
+
+                appContext.setUserColorSwatchesFavorites(filteredColors);
 
                 VibrateShort();
               }}
@@ -313,10 +315,12 @@ export function MyColorPickerV2({ isUserExpertModeEnabled, appThemeText }) {
           <TouchableHighlight
             onPress={() => {
               if (
-                !colorSwatchesFavorites.includes(selectedColorPickerColor.value)
+                !appContext.userColorSwatchesFavorites.includes(
+                  selectedColorPickerColor.value
+                )
               ) {
-                setColorSwatchesFavorites([
+                appContext.setUserColorSwatchesFavorites([
-                  ...colorSwatchesFavorites,
+                  ...appContext.userColorSwatchesFavorites,
                   selectedColorPickerColor.value,
                 ]);
               }

src/Components/SideBar/index.js

@@ -11,6 +11,7 @@ export default function Sidebar(props) {
   const { t } = useTranslation();
 
   const MyDrawerItem = ({
+    _deviceId,
     label,
     onPress,
     iconName,
@@ -27,7 +28,12 @@ export default function Sidebar(props) {
       ? appContext.appTheme.drawer.item.activeTintColor
       : appContext.appTheme.drawer.item.inactiveTintColor;
 
-    if (isFocused && isDevice) AppSelectedUserDevice.current = routeName;
+    if (isFocused && isDevice) {
+      AppSelectedUserDevice.current = {
+        id: _deviceId,
+        routeName: routeName,
+      };
+    }
 
     return (
       <DrawerItem
@@ -127,6 +133,7 @@ export default function Sidebar(props) {
         {appContext.devices.map((device, i) => (
           <MyDrawerItem
             key={device.id}
+            _deviceId={device.id}
             isDevice
             deviceName={device.displayName}
             deviceModel={device.deviceModel}

src/Screens/Device/index.js

@@ -17,18 +17,16 @@ import {
   topThird,
 } from "./deviceTabButton";
 
-export default function DeviceScreen({ route, navigation }) {
+export default function DeviceScreen({ navigation }) {
-  const device = route.params.device;
-
   const appContext = useContext(AppContext);
   const [selectedView, setSelectedView] = useState(2);
 
   const SelectedView = () => {
     switch (selectedView) {
       case 0:
-        return <SettingsView navigation={navigation} device={device} />;
+        return <SettingsView navigation={navigation} />;
       case 2:
-        return <SceneView navigation={navigation} device={device} />;
+        return <SceneView navigation={navigation} />;
       default:
         <Text>Not found</Text>;
     }

src/Screens/Device/modals/AddSceneAction/LayerSelection/index.js

@@ -1,8 +1,16 @@
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { Text, TouchableHighlight, View } from "react-native";
 import MyButton from "../../../../../Components/Button";
 import { useTranslation } from "react-i18next";
-import { AppSelectedUserDevice, ModalContainer } from "../../../../../utils";
+import {
+  AppContext,
+  AppSelectedUserDevice,
+  Constants,
+  GetDevice,
+  ModalContainer,
+  NewAction,
+  NewInitialDeviceSceneAction,
+} from "../../../../../utils";
 
 function Layer({ number, selected, onPress }) {
   return (
@@ -38,6 +46,7 @@ function Layer({ number, selected, onPress }) {
 }
 
 export default function LayerSelectionModalContent({ navigation, route }) {
+  const appContext = useContext(AppContext);
   const { t } = useTranslation();
   const [selectedLayer, setSelectedLayer] = useState([]);
 
@@ -77,7 +86,36 @@ export default function LayerSelectionModalContent({ navigation, route }) {
           style={{ marginTop: 20, width: 180 }}
           disabled={selectedLayer.length === 0}
           onPress={() => {
-            navigation.navigate(AppSelectedUserDevice.current);
+            const newAction = NewAction(Constants.actionType.layers);
+
+            appContext.setDeviceSceneActions((arr) => {
+              let newArr = [...arr];
+
+              const deviceSelectedScene = GetDevice(
+                appContext.devices
+              ).selectedScene;
+
+              const foundDeviceSceneActionIndex = newArr.findIndex(
+                (a) => a.sceneId === deviceSelectedScene
+              );
+
+              if (foundDeviceSceneActionIndex === -1) {
+                const initialDeviceActionScene =
+                  NewInitialDeviceSceneAction(deviceSelectedScene);
+
+                initialDeviceActionScene.actions.push(newAction);
+
+                newArr.push(initialDeviceActionScene);
+              } else {
+                newArr[foundDeviceSceneActionIndex].actions.push(newAction);
+              }
+
+              return newArr;
+            });
+
+            route.params["actionId"] = newAction.id;
+
+            navigation.navigate(AppSelectedUserDevice.current.routeName);
             navigation.navigate("modalLayersEditAction", route.params);
           }}
         />

src/Screens/Device/modals/ChooseScene/CreateScene/index.js

@@ -1,14 +1,16 @@
 import { useContext } from "react";
 import {
   AppContext,
+  AppSelectedUserDevice,
   ModalContainer,
   NewEmptyDeviceScene,
+  NewInitialDeviceScene,
 } from "../../../../../utils";
 import { FlatList } from "react-native";
 import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
 
-export default function CreateSceneModalContent({ navigation, route }) {
+export default function CreateSceneModalContent({ navigation }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
@@ -38,12 +40,28 @@ export default function CreateSceneModalContent({ navigation, route }) {
           <MyPickerModalListItem
             itemName={item.name}
             onPress={() => {
-              appContext.setDevices((arr) => {
+              appContext.setDeviceScenes((arr) => {
-                const newArr = [...arr];
+                let newArr = [...arr];
 
-                newArr[
+                const deviceId = AppSelectedUserDevice.current.id;
-                  arr.findIndex((d) => d.id === route.params.id)
+
-                ].scenes.push(NewEmptyDeviceScene());
+                const foundDeviceSceneIndex = newArr.findIndex(
+                  (s) => s.deviceId === deviceId
+                );
+
+                const newEmptyDeviceScene = NewEmptyDeviceScene("Leere Szene");
+
+                if (foundDeviceSceneIndex === -1) {
+                  const initalDeviceScene = NewInitialDeviceScene(deviceId);
+
+                  initalDeviceScene.scenes.push(newEmptyDeviceScene);
+
+                  newArr.push(initalDeviceScene);
+                } else {
+                  newArr[foundDeviceSceneIndex].scenes.push(
+                    newEmptyDeviceScene
+                  );
+                }
 
                 return newArr;
               });

src/Screens/Device/modals/ChooseScene/index.js

@@ -1,6 +1,10 @@
 import { useContext } from "react";
 import { FlatList } from "react-native";
-import { AppContext, ModalContainer } from "../../../../utils";
+import {
+  AppContext,
+  AppSelectedUserDevice,
+  ModalContainer,
+} from "../../../../utils";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
 import { MyTextButton } from "../../../../Components/Button";
@@ -10,35 +14,47 @@ export default function ChooseSceneModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
-  const device = route.params;
+  const { device } = route.params;
+
+  let scenes = [];
+
+  const deviceScenes = appContext.deviceScenes.find(
+    (s) => s.deviceId === AppSelectedUserDevice.current.id
+  );
+
+  if (deviceScenes !== undefined) {
+    scenes = deviceScenes.scenes;
+  }
 
   return (
     <ModalContainer>
-      {device.scenes.length === 0 ? (
+      {scenes.length === 0 ? (
         <MyResult
           text={"Keine Szenen vorhanden"}
           iconName={"selection-search"}
         />
       ) : (
         <FlatList
-          data={device.scenes}
+          data={scenes}
           keyExtractor={(item) => item.id}
           renderItem={({ item }) => (
             <MyPickerModalListItem
               itemName={item.name}
               itemSelected={device.selectedScene === item.id}
               onPress={() => {
+                navigation.goBack();
+
                 appContext.setDevices((arr) => {
                   const newArr = [...arr];
 
                   newArr[
-                    arr.findIndex((d) => d.id === device.id)
+                    arr.findIndex(
+                      (d) => d.id === AppSelectedUserDevice.current.id
+                    )
                   ].selectedScene = item.id;
 
                   return newArr;
                 });
-
-                navigation.goBack();
               }}
             />
           )}
@@ -47,10 +63,8 @@ export default function ChooseSceneModalContent({ navigation, route }) {
 
       <MyTextButton
         style={{ marginTop: 10 }}
-        actionColor={!device.scenes.length}
+        actionColor={!scenes.length}
-        onPress={() =>
+        onPress={() => navigation.navigate("modalCreateScene")}
-          navigation.navigate("modalCreateScene", { id: device.id })
-        }
         title={t("screens.device.scenes.modalChooseScene.textButtonAddScene")}
       />
     </ModalContainer>

src/Screens/Device/modals/EditActions/Lights/index.js

@@ -7,18 +7,20 @@ import {
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
 import { useContext, useState } from "react";
-import { AppContext, ModalContainer } from "../../../../../utils";
+import {
-import MyModal, {
+  AppContext,
-  MyDefaultModalHeader,
+  GetDevice,
-  MyPickerModalListItem,
+  GetDeviceSceneAction,
-} from "../../../../../Components/Modal";
+  ModalContainer,
+} from "../../../../../utils";
+import { MyPickerModalListItem } from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
 
 export function LightsEditActionModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
-  const [modalColorModeSelectionIsOpen, setModalColorSelectionModeIsOpen] =
+  //const [selectedLightModeId, setSelectedLightMode] = useState(null);
-    useState(false);
+
-  const [selectedLightMode, setSelectedLightMode] = useState(null);
+  const { actionId } = route.params;
 
   const supportedLightModes = appContext.deviceFirmwareModes.lightModes.filter(
     (lightMode) =>
@@ -27,6 +29,12 @@ export function LightsEditActionModalContent({ navigation, route }) {
       )
   );
 
+  const selectedLightModeId = GetDeviceSceneAction(
+    appContext.deviceSceneActions,
+    GetDevice(appContext.devices).selectedScene,
+    actionId
+  ).modeId;
+
   return (
     <View style={{ backgroundColor: appContext.appTheme.backgroundColor }}>
       {appContext.isUserDeveloperModeEnabled ? (
@@ -47,10 +55,10 @@ export function LightsEditActionModalContent({ navigation, route }) {
         />
       )}
 
-      <MyDeviceTabButton iconName="play-network-outline" top={topFirst + 20} />
+      <MyDeviceTabButton iconName="play-network-outline" top={topFirst + 10} />
       <MyDeviceTabButton
         iconName="play-box-multiple-outline"
-        top={topSecond + 30}
+        top={topSecond + 15}
       />
 
       <ScrollView>
@@ -58,16 +66,16 @@ export function LightsEditActionModalContent({ navigation, route }) {
           <MyDropdown
             label="Wähle einen Farbmodus"
             selectedItemLabel={
-              selectedLightMode === null
+              selectedLightModeId === ""
                 ? "Kein Farbmodus ausgewählt"
-                : supportedLightModes[selectedLightMode].name[
+                : supportedLightModes.find((s) => s.id === selectedLightModeId)
-                    appContext.appLanguage
+                    .name[appContext.appLanguage]
-                  ]
             }
             onPress={() =>
               navigation.navigate("modalLayersEditActionColorModeSelection", {
                 supportedLightModes: supportedLightModes,
-                selectedLightMode: selectedLightMode,
+                selectedLightModeId: selectedLightModeId,
+                actionId: route.params.actionId,
               })
             }
           />
@@ -99,9 +107,31 @@ export function LayersEditActionColorModeSelectionModalContent({
         renderItem={({ item, index }) => (
           <MyPickerModalListItem
             itemName={item.name[appContext.appLanguage]}
-            itemSelected={route.params.selectedLightMode === index}
+            itemSelected={route.params.selectedLightModeId === item.id}
             onPress={() => {
-              // TODO: set selected light mode directly in appContext actions
+              const deviceScene = GetDevice(appContext.devices).selectedScene;
+
+              appContext.setDeviceSceneActions((arr) => {
+                const newArr = [...arr];
+
+                const deviceActionIndex = newArr.findIndex(
+                  (a) => a.sceneId === deviceScene
+                );
+
+                if (deviceActionIndex !== -1) {
+                  const actionIndex = newArr[
+                    deviceActionIndex
+                  ].actions.findIndex((a) => a.id === route.params.actionId);
+
+                  if (actionIndex !== -1) {
+                    newArr[deviceActionIndex].actions[actionIndex].modeId =
+                      item.id;
+                  }
+                }
+
+                return newArr;
+              });
+
               navigation.goBack();
             }}
           />

src/Screens/Device/scene.js

@@ -1,19 +1,59 @@
 import { FlatList, Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
-import { AppContext } from "../../utils";
+import {
-import { useContext } from "react";
+  AppContext,
+  AppSelectedUserDevice,
+  Constants,
+  GetDevice,
+} from "../../utils";
+import { useCallback, useContext, useEffect, useState } from "react";
 import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
 import { useTranslation } from "react-i18next";
 import MyResult from "../../Components/Result";
 import { MyTextButton } from "../../Components/Button";
+import { useFocusEffect } from "@react-navigation/native";
 
-export default function SceneView({ navigation, device }) {
+export default function SceneView({ navigation }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
-  const deviceScene = device.scenes.find(
+  const [device, setDevice] = useState();
-    (scene) => scene.id === device.selectedScene
+
+  useFocusEffect(
+    useCallback(() => {
+      setDevice(GetDevice(appContext.devices));
+      console.log("callback");
+    }, [device])
+  );
+
+  console.log("device", device !== undefined);
+
+  if (device === undefined) return <></>;
+
+  const getActionTypeIcon = (actionType) => {
+    let iconName = "";
+
+    switch (actionType) {
+      case Constants.actionType.layers:
+        iconName = "lightbulb-on-outline";
+        break;
+      case Constants.actionType.ambilight:
+        iconName = "television-ambient-light";
+        break;
+      case Constants.actionType.motor:
+        iconName = "axis-z-rotate-counterclockwise";
+        break;
+      default:
+        iconName = "help";
+        break;
+    }
+
+    return <MyIcon name={iconName} size={24} />;
+  };
+
+  const deviceSceneActions = appContext.deviceSceneActions.find(
+    (a) => a.sceneId === device.selectedScene
   );
 
   return (
@@ -23,9 +63,7 @@ export default function SceneView({ navigation, device }) {
           label={t("screens.device.scenes.dropdownSceneSelection.label")}
           onPress={() =>
             navigation.navigate("modalChooseScene", {
-              id: device.id,
+              device: { selectedScene: device.selectedScene },
-              selectedScene: device.selectedScene,
-              scenes: device.scenes,
             })
           }
           selectedItemLabel={
@@ -33,7 +71,9 @@ export default function SceneView({ navigation, device }) {
               ? t(
                   "screens.device.scenes.dropdownSceneSelection.noSceneSelected"
                 )
-              : deviceScene.name
+              : appContext.deviceScenes
+                  .find((s) => s.deviceId === AppSelectedUserDevice.current.id)
+                  .scenes.find((s) => s.id === device.selectedScene).name
           }
         />
       </Card>
@@ -45,7 +85,8 @@ export default function SceneView({ navigation, device }) {
         />
       ) : (
         <View>
-          {deviceScene.actions.length === 0 ? (
+          {deviceSceneActions === undefined ||
+          deviceSceneActions.actions.length === 0 ? (
             <MyResult
               text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
               iconName={"selection-search"}
@@ -53,36 +94,49 @@ export default function SceneView({ navigation, device }) {
           ) : (
             <FlatList
               scrollEnabled={false}
-              data={deviceScene.actions}
+              data={deviceSceneActions.actions}
               keyExtractor={(item) => item.id}
-              renderItem={({ item }) => (
+              renderItem={({ item }) => {
-                <Card cardBackgroundColor={appContext.appTheme.colors.primary}>
+                console.log("item", item);
-                  <View
+
-                    style={{
+                return (
-                      flexDirection: "row",
+                  <Card cardBackgroundColor={"#e67e22"}>
-                      justifyContent: "space-between",
+                    <View
-                    }}
+                      style={{
-                  >
+                        flexDirection: "row",
-                    <Text>{item.name}</Text>
+                        justifyContent: "space-between",
-                    <TouchableOpacity
+                      }}
-                      onPress={() =>
-                        navigation.navigate("modalLayersEditAction", {
-                          deviceFirmwareVersion: device.firmware.version,
-                        })
-                      }
                     >
-                      <MyIcon name="pencil" size={24} />
+                      {getActionTypeIcon(item.type)}
-                    </TouchableOpacity>
+                      <View>
-                  </View>
+                        <Text>Layer 1 wird auf rot setzen</Text>
-                </Card>
+                        <Text>Animation In: Fade in</Text>
-              )}
+                        <Text>Animation out: Fade out</Text>
+                      </View>
+                      <TouchableOpacity
+                        onPress={() =>
+                          navigation.navigate("modalLayersEditAction", {
+                            actionId: item.id,
+                            deviceFirmwareVersion: device.firmware.version,
+                          })
+                        }
+                      >
+                        <MyIcon name="pencil" size={24} />
+                      </TouchableOpacity>
+                    </View>
+                  </Card>
+                );
+              }}
             />
           )}
 
           <MyTextButton
             title={t("screens.device.scenes.buttonAddAction")}
             style={{ marginTop: 10 }}
-            actionColor={deviceScene.actions.length === 0}
+            actionColor={
+              deviceSceneActions === undefined ||
+              deviceSceneActions.actions.length === 0
+            }
             onPress={() =>
               navigation.navigate("modalAddSceneAction", {
                 deviceFirmwareVersion: device.firmware.version,

src/Screens/Device/settings.js

@@ -1,18 +1,27 @@
 import { Text, View } from "react-native";
 import Card from "../../Components/Card";
 import { useContext, useEffect, useState } from "react";
-import { AppContext, AppStyles, ModalContainer } from "../../utils";
+import {
+  AppContext,
+  AppSelectedUserDevice,
+  AppStyles,
+  ModalContainer,
+} from "../../utils";
 import { Divider } from "../../Components/Divider";
 import { useTranslation } from "react-i18next";
 import MySwitch from "../../Components/Switch";
 import MyTextInput from "../../Components/TextInput";
 import { MyIconButton } from "../../Components/Button";
 
-export default function SettingsView({ navigation, device }) {
+export default function SettingsView({ navigation }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
   const [switchState, setSwitchState] = useState(false);
 
+  const device = appContext.devices.find(
+    (d) => d.id === AppSelectedUserDevice.current.id
+  );
+
   return (
     <>
       <Card>

src/utils.js

@@ -1,5 +1,5 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { createContext, createRef, useState } from "react";
+import { createContext, createRef, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Appearance,
@@ -22,6 +22,11 @@ export const Constants = {
       label: "English",
     },
   ],
+  actionType: {
+    layers: 0,
+    ambilight: 1,
+    motor: 2,
+  },
 };
 
 export const AppStyles = StyleSheet.create({
@@ -178,20 +183,11 @@ export function GetUuid() {
   return uuid.v4();
 }
 
-const appContextPreview = {
-  appColorScheme: "",
-  appLanguage: "",
-  isUserExpertModeEnabled: "",
-  isUserDeveloperModeEnabled: "",
-  appTheme: DarkAppTheme,
-  devices: [],
-  deviceFirmwareModes: [],
-};
-
 // data set in the app by default or provided by our servers on firmware update
 const devDevicesFirmwareModes = {
   lightModes: [
     {
+      id: "6138e651-54c5-4fd4-8f40-3364f4e9dfe2",
       type: "solidColor",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
@@ -202,8 +198,9 @@ const devDevicesFirmwareModes = {
       adjustments: [],
     },
     {
+      id: "c7097a60-faa9-4928-a531-0a8ecbc115d9",
       type: "multipleColors",
-      supportedFirmwareVersions: ["1.0.0"],
+      supportedFirmwareVersions: ["1.0.1"],
       name: {
         de: "Zufällig",
         en: "Random",
@@ -225,6 +222,7 @@ const devDevicesFirmwareModes = {
       adjustments: [],
     },
     {
+      id: "b42c665a-c2ab-4029-9162-2280caae3274",
       type: "multipleColors",
       supportedFirmwareVersions: ["1.0.1"],
       name: {
@@ -245,6 +243,7 @@ const devDevicesFirmwareModes = {
   ],
   motorModes: [
     {
+      type: "motor",
       name: {
         de: "Hin und her",
         en: "Back and forth",
@@ -312,36 +311,18 @@ const devDevices = [
       lastUpdated: "11.07.2023 um 20:33 Uhr",
     },
     selectedScene: null,
-    scenes: [
+    /*scenes: [
       {
         id: "2f21a12a-0bec-4336-99bb-df3f9fc9f537",
         name: "Szene 1",
-        actions: [
+        actions: [],
-          {
-            id: 0,
-            name: "Test",
-          },
-          {
-            id: 1,
-            name: "Test1",
-          },
-        ],
       },
       {
         id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
         name: "Szene 2",
-        actions: [
+        actions: [],
-          {
-            id: 0,
-            name: "Haha",
-          },
-          {
-            id: 1,
-            name: "Haha 1",
-          },
-        ],
       },
-    ],
+    ],*/
   },
   {
     id: "5b331a12a-0bec-4336-99bb-df3f9fc9f537", // deviceId
@@ -352,30 +333,88 @@ const devDevices = [
       lastUpdated: "11.07.2023 um 20:33 Uhr",
     },
     selectedScene: null,
+    //scenes: [],
+  },
+];
+
+const devDeviceScenes = [
+  {
+    deviceId: "",
     scenes: [
       {
-        id: "3f21a12a-0bec-4336-99bb-df3f9fc9f537",
+        id: "",
-        name: "Yolo",
+        name: "",
-        actions: [
-          {
-            id: 0,
-            name: "Haha",
-          },
-        ],
       },
     ],
   },
 ];
 
-export function NewEmptyDeviceScene() {
+const devDeviceSceneActions = [
+  {
+    sceneId: "",
+    actions: [
+      {
+        id: "",
+        modeId: "",
+      },
+    ],
+  },
+];
+
+export function NewInitialDeviceScene(deviceId) {
   return {
-    id: GetUuid(),
+    deviceId: deviceId,
-    name: "Leere Szene",
+    scenes: [],
+  };
+}
+
+export function NewInitialDeviceSceneAction(sceneId) {
+  return {
+    sceneId: sceneId,
     actions: [],
   };
 }
 
-export const AppSelectedUserDevice = createRef(null);
+export function NewEmptyDeviceScene(name) {
+  return {
+    id: GetUuid(),
+    name: name,
+  };
+}
+
+export function NewAction(actionType) {
+  return {
+    id: GetUuid(),
+    type: actionType, // layers, ambilight, motor
+    modeId: "",
+  };
+}
+
+export function GetDevice(devices) {
+  return devices.find((d) => d.id === AppSelectedUserDevice.current.id);
+}
+
+export function GetDeviceSceneAction(sceneActions, sceneId, actionId) {
+  return sceneActions
+    .find((s) => s.sceneId === sceneId)
+    .actions.find((a) => a.id === actionId);
+}
+
+const appContextPreview = {
+  appColorScheme: "",
+  appLanguage: "",
+  isUserExpertModeEnabled: "",
+  isUserDeveloperModeEnabled: "",
+  appTheme: DarkAppTheme,
+  devices: [],
+  deviceScenes: [],
+  deviceSceneActions: [],
+  deviceFirmwareModes: [],
+  userColorSwatchesFavorites: [],
+};
+
+export const AppSelectedUserDevice = createRef();
+AppSelectedUserDevice.current = { id: "", routeName: "" };
 
 export const AppContext = createContext(appContextPreview);
 
@@ -385,9 +424,14 @@ export function AppProvider({ children }) {
   const [appTheme, setAppTheme] = useState(DarkAppTheme);
   const [isUserExpertModeEnabled, setIsUserExpertModeEnabled] = useState(false);
   const [devices, setDevices] = useState(devDevices);
+  const [deviceScenes, setDeviceScenes] = useState([]);
+  const [deviceSceneActions, setDeviceSceneActions] = useState([]);
   const [deviceFirmwareModes, setDeviceFirmwareModes] = useState(
     devDevicesFirmwareModes
   );
+  const [userColorSwatchesFavorites, setUserColorSwatchesFavorites] = useState(
+    []
+  );
   const { i18n } = useTranslation();
 
   // TODO: only while development
@@ -422,6 +466,11 @@ export function AppProvider({ children }) {
     setIsUserDeveloperModeEnabled(value);
   };
 
+  const saveUserColorSwatchesFavorites = async (value) => {
+    StoreData("userColorSwatchesFavorites", value);
+    setUserColorSwatchesFavorites(value);
+  };
+
   return (
     <AppContext.Provider
       value={{
@@ -432,12 +481,18 @@ export function AppProvider({ children }) {
         appTheme: appTheme,
         isUserExpertModeEnabled: isUserExpertModeEnabled,
         setIsUserExpertModeEnabled: saveUserExpertMode,
-        isUserDeveloperModeEnabled: isUserDeveloperModeEnabled,
-        setUserIsDeveloperModeEnabled: saveUserDeveloperMode,
         devices: devices,
         setDevices: setDevices,
+        deviceScenes: deviceScenes,
+        setDeviceScenes: setDeviceScenes,
+        deviceSceneActions: deviceSceneActions,
+        setDeviceSceneActions: setDeviceSceneActions,
         deviceFirmwareModes: deviceFirmwareModes,
         setDeviceFirmwareModes: setDeviceFirmwareModes,
+        userColorSwatchesFavorites: userColorSwatchesFavorites,
+        setUserColorSwatchesFavorites: saveUserColorSwatchesFavorites,
+        isUserDeveloperModeEnabled: isUserDeveloperModeEnabled,
+        setUserIsDeveloperModeEnabled: saveUserDeveloperMode,
       }}
     >
       {children}