delete action

locales/de.json

@@ -86,6 +86,10 @@
           },
           "modeSpecificColors": "Modus spezifische Farben"
         },
+        "modalDotsEditAction": {
+          "duplicateAction": "Aktion duplizieren",
+          "deleteAction": "Aktion löschen"
+        },
         "editActionAnimationsCardContent": {
           "animationsIn": "Animations in",
           "animationsOut": "Animations out",

locales/en.json

@@ -86,6 +86,10 @@
           },
           "modeSpecificColors": "Mode specific colors"
         },
+        "modalDotsEditAction": {
+          "duplicateAction": "Duplicate action",
+          "deleteAction": "Delete action"
+        },
         "editActionAnimationsCardContent": {
           "animationsIn": "Animations in",
           "animationsOut": "Animations out",

src/Components/Modal/index.js

@@ -112,7 +112,28 @@ export function MyDefaultModalHeader({ title, closeModal }) {
   );
 } */
 
-export function MyDotsModal({ isOpen, closeModal, data }) {
+export function MyDotsModal({ modalData }) {
+  const [isDotsModalOpen, setIsDotsModalOpen] = useState(false);
+
+  return (
+    <>
+      <MyIconButton
+        iconName="dots-vertical"
+        iconSize={24}
+        style={AppStyles.headerNavigationIcons}
+        onPress={() => setIsDotsModalOpen(true)}
+      />
+
+      <DotsModal
+        isOpen={isDotsModalOpen}
+        closeModal={() => setIsDotsModalOpen(false)}
+        data={modalData}
+      />
+    </>
+  );
+}
+
+function DotsModal({ isOpen, closeModal, data }) {
   const appContext = useContext(AppContext);
 
   const listItemStyle = (isFirst, isLast) => {

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

@@ -13,9 +13,12 @@ import {
 } from "../../../deviceTabButton";
 import Card from "../../../../../Components/Card";
 import MyDropdown from "../../../../../Components/Dropdown";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { AppContext, AppStyles, ModalContainer } from "../../../../../utils";
-import { MyPickerModalListItem } from "../../../../../Components/Modal";
+import {
+  MyDotsModal,
+  MyPickerModalListItem,
+} from "../../../../../Components/Modal";
 import { MyColorPickerV2 } from "../../../../../Components/ColorPicker";
 import Animated, {
   useAnimatedStyle,
@@ -27,6 +30,7 @@ import EditActionAnimationsCardContent, {
   EditActionAdjustmentsContent,
 } from "..";
 import { useTranslation } from "react-i18next";
+import { useFocusEffect } from "@react-navigation/native";
 
 function LightModeDefaultColor({
   sharedColor,
@@ -79,6 +83,39 @@ export function LightsEditActionModalContent({ navigation, route }) {
 
   const { actionId, deviceFirmwareVersion } = route.params;
 
+  useFocusEffect(
+    useCallback(() => {
+      navigation.setOptions({
+        headerRight: () => (
+          <MyDotsModal
+            modalData={[
+              {
+                icon: "content-duplicate",
+                label: t(
+                  "screens.device.scenes.modalDotsEditAction.duplicateAction"
+                ),
+                onPress: () => {},
+              },
+              {
+                icon: "trash-can",
+                label: t(
+                  "screens.device.scenes.modalDotsEditAction.deleteAction"
+                ),
+                onPress: () => {
+                  appContext.setDeviceSceneActions((actions) =>
+                    actions.filter((a) => a.actionId !== actionId)
+                  );
+
+                  navigation.goBack();
+                },
+              },
+            ]}
+          />
+        ),
+      });
+    }, [])
+  );
+
   const supportedDeviceLightModes =
     appContext.deviceFirmwareModes.lightModes.filter((lightMode) =>
       lightMode.supportedFirmwareVersions.includes(deviceFirmwareVersion)
@@ -90,8 +127,9 @@ export function LightsEditActionModalContent({ navigation, route }) {
 
   const [lightModeDefaultColors, setLightModeDefaultColors] = useState([]);
 
+  // check if selectedSceneAction exists before accessing modeId as the action could be deleted by the user
   const selectedLightMode = supportedDeviceLightModes.find(
-    (s) => s.id === selectedSceneAction.modeId
+    (s) => s.id === (selectedSceneAction && selectedSceneAction.modeId)
   );
 
   useEffect(() => {
@@ -109,7 +147,7 @@ export function LightsEditActionModalContent({ navigation, route }) {
       setLightModeDefaultColors(selectedSceneAction.modeAdjustments.colors);
       setSelectedDefaultLightModeColor(0);
     }
-  }, [selectedSceneAction.modeId]);
+  }, [selectedSceneAction?.modeId]);
 
   const saveColorsToModeAdjustments = () => {
     appContext.setDeviceSceneActions((arr) => {
@@ -128,6 +166,8 @@ export function LightsEditActionModalContent({ navigation, route }) {
     });
   };
 
+  if (!selectedSceneAction) return null;
+
   return (
     <View
       style={{

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

@@ -3,7 +3,6 @@ import Card from "../../../../Components/Card";
 import {
   AppContext,
   AppStyles,
-  Constants,
   IsPlatformIos,
   ModalContainer,
 } from "../../../../utils";

src/Screens/Device/scene.js

@@ -1,9 +1,8 @@
-import { FlatList, Text, TouchableOpacity, View } from "react-native";
+import { Text, TouchableOpacity, View } from "react-native";
 import Card from "../../Components/Card";
 import {
   AppContext,
   AppSelectedUserDevice,
-  AppStyles,
   Constants,
   GetDevice,
   VibrateShort,
@@ -13,14 +12,12 @@ import MyDropdown from "../../Components/Dropdown";
 import MyIcon from "../../Components/Icon";
 import { useTranslation } from "react-i18next";
 import MyResult from "../../Components/Result";
-import { MyIconButton, MyTextButton } from "../../Components/Button";
+import { MyTextButton } from "../../Components/Button";
 import { useFocusEffect } from "@react-navigation/native";
 import { Divider } from "../../Components/Divider";
 import { MyColorSwatch } from "../../Components/ColorPicker";
 import { MyDotsModal } from "../../Components/Modal";
 import DraggableFlatList, {
-  NestableDraggableFlatList,
-  NestableScrollContainer,
   ScaleDecorator,
 } from "react-native-draggable-flatlist";
 
@@ -29,7 +26,6 @@ export default function SceneView({ navigation }) {
   const { t } = useTranslation();
 
   const [device, setDevice] = useState();
-  const [isDotsModalOpen, setIsDotsModalOpen] = useState(false);
 
   const getSelectedDeviceSceneName = () => {
     let scene;
@@ -53,11 +49,57 @@ export default function SceneView({ navigation }) {
         navigation.setOptions({
           headerRight: () =>
             device.selectedScene !== "" ? (
-              <MyIconButton
+              <MyDotsModal
-                iconName="dots-vertical"
+                modalData={[
-                iconSize={24}
+                  {
-                style={AppStyles.headerNavigationIcons}
+                    icon: "pencil",
-                onPress={() => setIsDotsModalOpen(true)}
+                    label: t(
+                      "screens.device.scenes.modalDotsScene.changeSceneName"
+                    ),
+                    onPress: () =>
+                      navigation.navigate("modalUpdateSceneName", {
+                        deviceSelectedScene: device.selectedScene,
+                        sceneName: getSelectedDeviceSceneName(),
+                      }),
+                  },
+                  {
+                    icon: "trash-can",
+                    label: t(
+                      "screens.device.scenes.modalDotsScene.deleteScene"
+                    ),
+                    onPress: () => {
+                      appContext.setDeviceScenes((scenes) =>
+                        scenes.filter(
+                          (scene) =>
+                            scene.sceneId !==
+                            GetDevice(appContext.devices).selectedScene
+                        )
+                      );
+
+                      appContext.setDevices((arr) => {
+                        const newArr = [...arr];
+
+                        const foundDeviceIndex = arr.findIndex(
+                          (d) => d.id === AppSelectedUserDevice.current.id
+                        );
+
+                        if (foundDeviceIndex !== -1) {
+                          newArr[foundDeviceIndex].selectedScene = "";
+
+                          appContext.setDeviceSceneActions((actions) =>
+                            actions.filter(
+                              (action) =>
+                                action.sceneId !==
+                                newArr[foundDeviceIndex].selectedScene
+                            )
+                          );
+                        }
+
+                        return newArr;
+                      });
+                    },
+                  },
+                ]}
               />
             ) : null,
         });
@@ -158,57 +200,6 @@ export default function SceneView({ navigation }) {
           onRelease={VibrateShort}
         />
       )}
-
-      <MyDotsModal
-        isOpen={isDotsModalOpen}
-        closeModal={() => setIsDotsModalOpen(false)}
-        data={[
-          {
-            icon: "pencil",
-            label: t("screens.device.scenes.modalDotsScene.changeSceneName"),
-            onPress: () =>
-              navigation.navigate("modalUpdateSceneName", {
-                deviceSelectedScene: device.selectedScene,
-                sceneName: getSelectedDeviceSceneName(),
-              }),
-          },
-          {
-            icon: "trash-can",
-            label: t("screens.device.scenes.modalDotsScene.deleteScene"),
-            onPress: () => {
-              appContext.setDeviceScenes((scenes) =>
-                scenes.filter(
-                  (scene) =>
-                    scene.sceneId !==
-                    GetDevice(appContext.devices).selectedScene
-                )
-              );
-
-              appContext.setDevices((arr) => {
-                const newArr = [...arr];
-
-                const foundDeviceIndex = arr.findIndex(
-                  (d) => d.id === AppSelectedUserDevice.current.id
-                );
-
-                if (foundDeviceIndex !== -1) {
-                  newArr[foundDeviceIndex].selectedScene = "";
-
-                  appContext.setDeviceSceneActions((actions) =>
-                    actions.filter(
-                      (action) =>
-                        action.sceneId !==
-                        newArr[foundDeviceIndex].selectedScene
-                    )
-                  );
-                }
-
-                return newArr;
-              });
-            },
-          },
-        ]}
-      />
     </>
   );
 }