From 3445cbac09103ab5f185cdf9d068ec0c154dacd8 Mon Sep 17 00:00:00 2001
From: alex <alex@roese.dev>
Date: Fri, 4 Aug 2023 01:26:42 +0000
Subject: [PATCH] added scene sorting

---
 src/Components/Modal/index.js                 |   1 -
 .../Device/modals/ChooseScene/index.js        |  60 ++++++-
 src/Screens/Device/scene.js                   | 170 +++++++++---------
 3 files changed, 138 insertions(+), 93 deletions(-)

diff --git a/src/Components/Modal/index.js b/src/Components/Modal/index.js
index c44ffac..210357f 100644
--- a/src/Components/Modal/index.js
+++ b/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={[
                       {
diff --git a/src/Screens/Device/modals/ChooseScene/index.js b/src/Screens/Device/modals/ChooseScene/index.js
index 8ed30c4..4159a41 100644
--- a/src/Screens/Device/modals/ChooseScene/index.js
+++ b/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")}
diff --git a/src/Screens/Device/scene.js b/src/Screens/Device/scene.js
index af06422..1527bdf 100644
--- a/src/Screens/Device/scene.js
+++ b/src/Screens/Device/scene.js
@@ -108,109 +108,105 @@ 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}
-              renderItem={({ item }) => {
-                console.log("item", item);
+          <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);
 
-                return (
-                  <View style={{ marginLeft: 10, marginRight: 10 }}>
-                    <TouchableOpacity
-                      onPress={() =>
-                        navigation.navigate("modalLayersEditAction", {
-                          actionId: item.actionId,
-                          deviceFirmwareVersion: device.firmware.version,
-                        })
-                      }
+              return (
+                <View style={{ marginLeft: 10, marginRight: 10 }}>
+                  <TouchableOpacity
+                    onPress={() =>
+                      navigation.navigate("modalLayersEditAction", {
+                        actionId: item.actionId,
+                        deviceFirmwareVersion: device.firmware.version,
+                      })
+                    }
+                  >
+                    <View
+                      style={{
+                        flexDirection: "row",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                      }}
                     >
                       <View
-                        style={{
-                          flexDirection: "row",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                        }}
+                        style={{ flexDirection: "row", alignItems: "center" }}
                       >
-                        <View
-                          style={{ flexDirection: "row", alignItems: "center" }}
-                        >
-                          {getActionTypeIcon(item.type)}
-                          <View style={{ marginLeft: 12 }}>
+                        {getActionTypeIcon(item.type)}
+                        <View style={{ marginLeft: 12 }}>
+                          <Text
+                            style={{
+                              color: appContext.appTheme.text,
+                            }}
+                          >
+                            Rainbow
+                          </Text>
+
+                          <View
+                            style={{
+                              flexDirection: "row",
+                              alignItems: "center",
+                            }}
+                          >
                             <Text
                               style={{
-                                color: appContext.appTheme.text,
+                                color: appContext.appTheme.textSecondary,
                               }}
                             >
-                              Rainbow
+                              Set to
                             </Text>
 
-                            <View
-                              style={{
-                                flexDirection: "row",
-                                alignItems: "center",
-                              }}
-                            >
-                              <Text
-                                style={{
-                                  color: appContext.appTheme.textSecondary,
-                                }}
-                              >
-                                Set to
-                              </Text>
-
-                              <MyColorSwatch
-                                style={{ marginLeft: 6 }}
-                                size={16}
-                                backgroundColor={"red"}
-                              />
-                              <MyColorSwatch
-                                size={16}
-                                backgroundColor={"orange"}
-                              />
-                              <MyColorSwatch
-                                size={16}
-                                backgroundColor={"blue"}
-                              />
-                            </View>
+                            <MyColorSwatch
+                              style={{ marginLeft: 6 }}
+                              size={16}
+                              backgroundColor={"red"}
+                            />
+                            <MyColorSwatch
+                              size={16}
+                              backgroundColor={"orange"}
+                            />
+                            <MyColorSwatch size={16} backgroundColor={"blue"} />
                           </View>
                         </View>
-
-                        <MyIcon name="menu" size={20} />
                       </View>
 
-                      <Divider />
-                    </TouchableOpacity>
-                  </View>
-                );
-              }}
-            />
-          )}
+                      <MyIcon name="menu" size={20} />
+                    </View>
 
-          <MyTextButton
-            title={t("screens.device.scenes.buttonAddAction")}
-            styleContainer={{
-              alignItems: "center",
-              marginTop: 10,
+                    <Divider />
+                  </TouchableOpacity>
+                </View>
+              );
             }}
-            style={{ padding: 8 }}
-            actionColor={
-              deviceSceneActions === undefined ||
-              deviceSceneActions.length === 0
-            }
-            onPress={() =>
-              navigation.navigate("modalAddSceneAction", {
-                deviceFirmwareVersion: device.firmware.version,
-              })
-            }
-            iconName="plus-circle-outline"
           />
         </View>
       )}