added scene sorting

src/Components/Modal/index.js

@@ -172,7 +172,6 @@ export function MyDotsModal({ isOpen, closeModal, data }) {
                   }}
                   disabled={item.disabled}
                 >
-                  {console.log("dis", item.disabled)}
                   <View
                     style={[
                       {

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

@@ -1,29 +1,79 @@
-import { useContext } from "react";
-import { FlatList, View } from "react-native";
+import { useCallback, useContext, useEffect, useState } from "react";
+import { FlatList } from "react-native";
 import {
   AppContext,
   AppSelectedUserDevice,
+  AppStyles,
   ModalContainer,
 } from "../../../../utils";
 import { MyPickerModalListItem } from "../../../../Components/Modal";
 import { useTranslation } from "react-i18next";
-import { MyTextButton } from "../../../../Components/Button";
+import { MyIconButton, MyTextButton } from "../../../../Components/Button";
 import MyResult from "../../../../Components/Result";
+import { useFocusEffect } from "@react-navigation/native";
 
 export default function ChooseSceneModalContent({ navigation, route }) {
   const appContext = useContext(AppContext);
   const { t } = useTranslation();
 
+  const [isSortingAlphabeticalAscending, setIsSortingAlphabeticalAscending] =
+    useState(true);
+
   const { device } = route.params;
 
-  const deviceScenes = appContext.deviceScenes.filter(
-    (s) => s.deviceId === AppSelectedUserDevice.current.id
+  const deviceScenes = appContext.deviceScenes
+    .filter((s) => s.deviceId === AppSelectedUserDevice.current.id)
+    .sort((a, b) => {
+      if (isSortingAlphabeticalAscending) {
+        if (a.name < b.name) {
+          return -1;
+        }
+
+        if (a.name > b.name) {
+          return 1;
+        }
+
+        return 0;
+      } else {
+        if (a.name > b.name) {
+          return -1;
+        }
+        if (a.name < b.name) {
+          return 1;
+        }
+        return 0;
+      }
+    });
+
+  useFocusEffect(
+    useCallback(() => {
+      navigation.setOptions({
+        headerRight: () =>
+          deviceScenes.length > 0 && (
+            <MyIconButton
+              iconName={
+                isSortingAlphabeticalAscending
+                  ? "sort-alphabetical-ascending"
+                  : "sort-alphabetical-descending"
+              }
+              iconSize={24}
+              style={AppStyles.headerNavigationIcons}
+              onPress={() => {
+                setIsSortingAlphabeticalAscending(
+                  !isSortingAlphabeticalAscending
+                );
+              }}
+            />
+          ),
+      });
+    }, [isSortingAlphabeticalAscending])
   );
 
   return (
     <ModalContainer withoutPadding>
       <FlatList
         data={deviceScenes}
+        extraData={isSortingAlphabeticalAscending}
         ListEmptyComponent={
           <MyResult
             text={t("screens.device.scenes.modalChooseScene.noResult")}

src/Screens/Device/scene.js

@@ -108,17 +108,36 @@ export default function SceneView({ navigation }) {
         />
       ) : (
         <View>
-          {deviceSceneActions === undefined ||
-          deviceSceneActions.length === 0 ? (
-            <MyResult
-              text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
-              iconName={"selection-search"}
-            />
-          ) : (
           <FlatList
             scrollEnabled={false}
             data={deviceSceneActions}
             keyExtractor={(item) => item.actionId}
+            ListEmptyComponent={
+              <MyResult
+                text={t("screens.device.scenes.infoNoActionsAvailableInScene")}
+                iconName={"selection-search"}
+              />
+            }
+            ListFooterComponent={
+              <MyTextButton
+                title={t("screens.device.scenes.buttonAddAction")}
+                styleContainer={{
+                  alignItems: "center",
+                  marginTop: 10,
+                }}
+                style={{ padding: 8 }}
+                actionColor={
+                  deviceSceneActions === undefined ||
+                  deviceSceneActions.length === 0
+                }
+                onPress={() =>
+                  navigation.navigate("modalAddSceneAction", {
+                    deviceFirmwareVersion: device.firmware.version,
+                  })
+                }
+                iconName="plus-circle-outline"
+              />
+            }
             renderItem={({ item }) => {
               console.log("item", item);
 
@@ -175,10 +194,7 @@ export default function SceneView({ navigation }) {
                               size={16}
                               backgroundColor={"orange"}
                             />
-                              <MyColorSwatch
-                                size={16}
-                                backgroundColor={"blue"}
-                              />
+                            <MyColorSwatch size={16} backgroundColor={"blue"} />
                           </View>
                         </View>
                       </View>
@@ -192,26 +208,6 @@ export default function SceneView({ navigation }) {
               );
             }}
           />
-          )}
-
-          <MyTextButton
-            title={t("screens.device.scenes.buttonAddAction")}
-            styleContainer={{
-              alignItems: "center",
-              marginTop: 10,
-            }}
-            style={{ padding: 8 }}
-            actionColor={
-              deviceSceneActions === undefined ||
-              deviceSceneActions.length === 0
-            }
-            onPress={() =>
-              navigation.navigate("modalAddSceneAction", {
-                deviceFirmwareVersion: device.firmware.version,
-              })
-            }
-            iconName="plus-circle-outline"
-          />
         </View>
       )}