@eohjsc/react-native-smart-city 0.5.5 → 0.5.7-rc1

package/src/screens/Automate/EditActionsList/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import DraggableFlatList from 'react-native-draggable-flatlist';
 import { useNavigation, useRoute } from '@react-navigation/native';
@@ -15,35 +15,43 @@ import Notify from '../../../../assets/images/Notify.svg';
 import Delay from '../../../../assets/images/Delay.svg';
 import Close from '../../../../assets/images/Close.svg';
 import { axiosDelete, axiosPut } from '../../../utils/Apis/axios';
-import { ModalBottom } from '../../../commons/Modal';
+import { ModalBottom, ModalCustom } from '../../../commons/Modal';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
+import UpdateDelayScript from './UpdateDelayScript';
+import UpdateNotifyScript from './UpdateNotifyScript';
+import { FullLoading } from '../../../commons';
 
-const EditActionsList = memo(() => {
+const EditActionsList = () => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const { params = {} } = useRoute() || {};
-  const { data = [], id, unit } = params;
+  const { data, id, unitId } = params;
   const [itemRemove, setItemRemove] = useState({});
   const [isVisible, setIsVisible] = useState(false);
-  const [actionsList, setActionList] = useState(data);
+  const [actionsList, setActionList] = useState([]);
+  const [showPopupUpdate, setShowPopupUpdate] = useState(false);
+  const [scriptItem, setScriptItem] = useState({});
+  const [updateIndex, setUpdateIndex] = useState();
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const [processing, setProcessing] = useState(false);
+  const onClosePopup = () => setShowPopupUpdate(false);
 
-  const onPressSave = useCallback(async () => {
-    const { success } = await axiosPut(API.AUTOMATE.ORDER_SCRIPT_ITEMS(id), {
-      id_script_items: actionsList.map((i) => i.id),
-    });
-    if (success) {
-      ToastBottomHelper.success(t('text_done'));
-      navigate({
-        name: Routes.ScriptDetail,
-        merge: true,
-        params: {
-          newActionsList: actionsList,
-        },
+  useEffect(() => {
+    setActionList(data);
+  }, [data]);
+
+  const onPressSave = useCallback(
+    async (dragData) => {
+      const { success } = await axiosPut(API.AUTOMATE.ORDER_SCRIPT_ITEMS(id), {
+        id_script_items: dragData.map((i) => i.id),
       });
-    }
-  }, [actionsList, id, navigate, t]);
+      success && ToastBottomHelper.success(t('updated_action_order'));
+      setProcessing(false);
+    },
+    [id, t]
+  );
 
   const onCancel = useCallback(() => {
     navigate({
@@ -79,6 +87,12 @@ const EditActionsList = memo(() => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, itemRemove, actionsList]);
 
+  const onShowPopupUpdate = useCallback((item, index) => {
+    setShowPopupUpdate(true);
+    setScriptItem(item);
+    setUpdateIndex(index);
+  }, []);
+
   const CommonItem = ({
     paddedIndex,
     icon,
@@ -86,19 +100,27 @@ const EditActionsList = memo(() => {
     onPress,
     isActive,
     drag,
+    onPressUpdate,
   }) => (
-    <TouchableOpacity
-      style={[styles.wrapItem, isActive ? styles.isDragging : {}]}
-      onPressIn={drag}
-      disabled={isActive}
-    >
-      <View style={styles.leftItem}>
-        <Text color={Colors.Gray9} type="H4" semibold>
-          {paddedIndex}
-        </Text>
-        <Rearrange />
-      </View>
-      <View style={styles.rightItem}>
+    <View style={[styles.wrapItem, isActive ? styles.isDragging : {}]}>
+      <TouchableOpacity
+        onPressIn={drag}
+        disabled={isActive}
+        accessibilityLabel={AccessibilityLabel.SCRIPT_ITEM}
+      >
+        <View style={styles.leftItem}>
+          <Text color={Colors.Gray9} type="H4" semibold>
+            {paddedIndex}
+          </Text>
+          <Rearrange />
+        </View>
+      </TouchableOpacity>
+      <TouchableOpacity
+        style={styles.rightItem}
+        delayLongPress={1100}
+        onLongPress={onPressUpdate}
+        accessibilityLabel={AccessibilityLabel.BUTTON_UPDATE}
+      >
         {icon}
         <View style={styles.contentItem}>{content}</View>
         <TouchableOpacity
@@ -108,109 +130,228 @@ const EditActionsList = memo(() => {
         >
           <Close />
         </TouchableOpacity>
-      </View>
-    </TouchableOpacity>
+      </TouchableOpacity>
+    </View>
   );
-  const renderItem = useCallback(({ item, index, drag, isActive }) => {
-    const paddedIndex = (index + 1).toString().padStart(2, '0');
-    const { action_script, notify_script, delay_script } = item;
-    if (action_script) {
-      const { sensor_icon_kit, station_name, sensor_name, action_name } =
-        action_script;
+  const renderItem = useCallback(
+    ({ item, index, drag, isActive }) => {
+      const paddedIndex = (index + 1).toString().padStart(2, '0');
+      const { action_script, notify_script, delay_script } = item;
+      if (action_script) {
+        const {
+          sensor_icon_kit,
+          station_name,
+          sensor_name,
+          action_name,
+          data: data_action,
+        } = action_script;
 
-      return (
-        <CommonItem
-          paddedIndex={paddedIndex}
-          icon={
-            <FImage source={{ uri: sensor_icon_kit }} style={styles.iconItem} />
-          }
-          content={
-            <>
-              <View style={styles.titleItem}>
-                <Text
-                  numberOfLines={1}
-                  semibold
-                  type="Label"
-                  color={Colors.Gray7}
-                  style={styles.paddingRight4}
-                >
-                  {unit?.name}
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <FImage
+                source={{ uri: sensor_icon_kit }}
+                style={styles.iconItem}
+              />
+            }
+            content={
+              <>
+                <View style={styles.titleItem}>
+                  <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+                    {station_name}
+                  </Text>
+                </View>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                  {sensor_name}
                 </Text>
-                <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
-                  {station_name}
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {action_name} {data_action}
                 </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
+
+      if (notify_script) {
+        const { title, message } = notify_script;
+
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <View style={styles.iconItem}>
+                <Notify />
               </View>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-                {sensor_name}
-              </Text>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-                {action_name}
-              </Text>
-            </>
-          }
-          onPress={() => onPressRemove(item)}
-          isActive={isActive}
-          drag={drag}
+            }
+            content={
+              <>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                  {title}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {message}
+                </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
+      if (delay_script) {
+        const { delay } = delay_script;
+
+        return (
+          <CommonItem
+            paddedIndex={paddedIndex}
+            icon={
+              <View style={styles.iconItem}>
+                <Delay />
+              </View>
+            }
+            content={
+              <>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+                  {t('wait')}
+                </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {t('wait_time_seconds', { delay })}
+                </Text>
+              </>
+            }
+            onPress={() => onPressRemove(item)}
+            onPressUpdate={() => onShowPopupUpdate(item, index)}
+            isActive={isActive}
+            drag={drag}
+          />
+        );
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [needRefresh]
+  );
+
+  const renderAction = useMemo(() => {
+    const {
+      action_script,
+      notify_script,
+      delay_script,
+      id: scriptItemId,
+    } = scriptItem;
+
+    if (action_script) {
+      onClosePopup();
+      setScriptItem({});
+      navigate(Routes.UpdateActionScript, {
+        unitId,
+        automateId: id,
+        device: {
+          id: action_script.end_device_id,
+        },
+        numberActionAdded: actionsList.length,
+        scriptItemId: scriptItemId,
+        closeScreen: Routes.EditActionsList,
+      });
+    }
+    if (notify_script) {
+      return (
+        <UpdateNotifyScript
+          unitId={unitId}
+          automateId={id}
+          scriptItemId={scriptItemId}
+          notify_script={notify_script}
+          t={t}
+          onClosePopup={onClosePopup}
+          actionsList={actionsList}
+          updateIndex={updateIndex}
+          setActionList={setActionList}
+          setNeedRefresh={setNeedRefresh}
         />
       );
     }
+    if (delay_script) {
+      return (
+        <UpdateDelayScript
+          automateId={id}
+          scriptItemId={scriptItemId}
+          delay_script={delay_script}
+          t={t}
+          onClosePopup={onClosePopup}
+          actionsList={actionsList}
+          updateIndex={updateIndex}
+          setActionList={setActionList}
+          setNeedRefresh={setNeedRefresh}
+        />
+      );
+    }
+  }, [actionsList, id, navigate, scriptItem, t, unitId, updateIndex]);
 
-    if (notify_script) {
-      const { title, message } = notify_script;
+  const onDragEnd = useCallback(
+    ({ data: dragData, from, to }) => {
+      if (from === to) {
+        return;
+      }
+      setProcessing(true);
+      setActionList(dragData);
+      onPressSave(dragData);
+    },
+    [onPressSave]
+  );
 
+  const renderMessageRemove = useMemo(() => {
+    const { action_script, notify_script, delay_script } = itemRemove;
+    if (action_script) {
       return (
-        <CommonItem
-          paddedIndex={paddedIndex}
-          icon={
-            <View style={styles.iconItem}>
-              <Notify />
-            </View>
-          }
-          content={
-            <>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-                {title}
-              </Text>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-                {message}
-              </Text>
-            </>
-          }
-          onPress={() => onPressRemove(item)}
-          isActive={isActive}
-          drag={drag}
-        />
+        <ParsedText
+          style={styles.messageDelete}
+          parse={[
+            {
+              pattern: new RegExp(itemRemove.action_script.action_name),
+              style: styles.textHighlight,
+            },
+            {
+              pattern: new RegExp(itemRemove.action_script.station_name),
+              style: styles.textHighlight,
+            },
+          ]}
+          childrenProps={{ allowFontScaling: false }}
+        >
+          {t('message_delete_action', {
+            actionName: itemRemove.action_script.action_name,
+            stationName: itemRemove.action_script.station_name,
+          })}
+        </ParsedText>
+      );
+    }
+    if (notify_script) {
+      return (
+        <ParsedText
+          style={styles.messageDelete}
+          childrenProps={{ allowFontScaling: false }}
+        >
+          {t('message_delete_notify', { title: notify_script.title })}
+        </ParsedText>
       );
     }
     if (delay_script) {
-      const { delay } = delay_script;
-
       return (
-        <CommonItem
-          paddedIndex={paddedIndex}
-          icon={
-            <View style={styles.iconItem}>
-              <Delay />
-            </View>
-          }
-          content={
-            <>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
-                {t('wait')}
-              </Text>
-              <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
-                {t('wait_time_seconds', { delay })}
-              </Text>
-            </>
-          }
-          onPress={() => onPressRemove(item)}
-          isActive={isActive}
-          drag={drag}
-        />
+        <ParsedText
+          style={styles.messageDelete}
+          childrenProps={{ allowFontScaling: false }}
+        >
+          {t('message_delete_delay', { delay: delay_script.delay })}
+        </ParsedText>
       );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [itemRemove, t]);
 
   return (
     <View style={styles.wrap}>
@@ -219,73 +360,41 @@ const EditActionsList = memo(() => {
         <Text type="Body" color={Colors.Gray8}>
           {t('des_edit_actions_list')}
         </Text>
+        <Text type="Body" color={Colors.Gray8}>
+          {t('hold_longer_than_1s')}
+        </Text>
+
         <DraggableFlatList
           showsVerticalScrollIndicator={false}
           data={actionsList}
           renderItem={renderItem}
           keyExtractor={(item) => `draggable-item-${item.id}`}
-          onDragEnd={({ data: dragData }) => setActionList(dragData)}
+          onDragEnd={onDragEnd}
           extraData={actionsList}
           containerStyle={styles.containerStyle}
         />
       </View>
-      <View style={styles.wrapBottom}>
-        <TouchableOpacity
-          onPress={onCancel}
-          accessibilityLabel={AccessibilityLabel.BUTTON_CANCEL_EDIT_ACTION_LIST}
-        >
-          <Text type="H4" highlight semibold>
-            {t('cancel')}
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={onPressSave}
-          accessibilityLabel={AccessibilityLabel.BUTTON_SAVE_EDIT_ACTION_LIST}
-        >
-          <Text type="H4" highlight semibold>
-            {t('save')}
-          </Text>
-        </TouchableOpacity>
-      </View>
+      {processing && <FullLoading />}
       <ModalBottom
         isVisible={isVisible}
         title={t('delete_action')}
         onClose={onClose}
         onRemove={onRemove}
       >
-        <View style={styles.wrapChildModal}>
-          {itemRemove?.action_script ? (
-            <ParsedText
-              style={styles.messageDelete}
-              parse={[
-                {
-                  pattern: new RegExp(itemRemove?.action_script.action_name),
-                  style: styles.textHighlight,
-                },
-                {
-                  pattern: new RegExp(itemRemove?.action_script.station_name),
-                  style: styles.textHighlight,
-                },
-              ]}
-              childrenProps={{ allowFontScaling: false }}
-            >
-              {t('message_delete_action', {
-                actionName: itemRemove?.action_script.action_name,
-                stationName: itemRemove?.action_script.station_name,
-              })}
-            </ParsedText>
-          ) : (
-            <ParsedText
-              style={styles.messageDelete}
-              childrenProps={{ allowFontScaling: false }}
-            >
-              {t('message_delete_notify')}
-            </ParsedText>
-          )}
-        </View>
+        <View style={styles.wrapChildModal}>{renderMessageRemove}</View>
       </ModalBottom>
+      <ModalCustom
+        isVisible={showPopupUpdate}
+        onBackButtonPress={onClosePopup}
+        onBackdropPress={onClosePopup}
+        accessibilityLabel={AccessibilityLabel.MODAL_CUSTOM}
+      >
+        <View style={styles.popoverStyle}>
+          <View style={styles.modalHeader}>{renderAction}</View>
+        </View>
+      </ModalCustom>
     </View>
   );
-});
+};
 
 export default EditActionsList;

package/src/screens/Automate/ScriptDetail/index.js

@@ -21,7 +21,7 @@ import MenuActionMore from '../../../commons/MenuActionMore';
 import Add from '../../../../assets/images/Add.svg';
 import Notify from '../../../../assets/images/Notify.svg';
 import Delay from '../../../../assets/images/Delay.svg';
-import { useNavigation } from '@react-navigation/native';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
 import Routes from '../../../utils/Route';
 import { ToastBottomHelper } from '../../../utils/Utils';
@@ -52,6 +52,7 @@ const ScriptDetail = ({ route }) => {
     newActionsList, // updated actions list
   } = params;
   const [automate, setAutomate] = useState(preAutomate);
+  const isFocused = useIsFocused();
   const [data, setData] = useState([]);
   const [isShowRename, setIsShowRename] = useState(false);
   const [isShowDelete, setIsShowDelete] = useState(false);
@@ -129,7 +130,7 @@ const ScriptDetail = ({ route }) => {
       id,
       unitId: automate.unit,
     });
-  }, [data, id, navigate, automate.unit]);
+  }, [navigate, data, id, automate.unit]);
 
   const handleScriptAction = useCallback(async () => {
     const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
@@ -172,8 +173,10 @@ const ScriptDetail = ({ route }) => {
   );
 
   useEffect(() => {
-    fetchAutomate();
-  }, [fetchAutomate]);
+    if (isFocused) {
+      fetchAutomate();
+    }
+  }, [fetchAutomate, isFocused]);
 
   useEffect(() => {
     newActionsList && setData(newActionsList);
@@ -198,8 +201,10 @@ const ScriptDetail = ({ route }) => {
   );
 
   useEffect(() => {
-    fetchAutomateActions();
-  }, [fetchAutomateActions]);
+    if (isFocused) {
+      fetchAutomateActions();
+    }
+  }, [fetchAutomateActions, isFocused]);
 
   useEffect(() => {
     saveAt && fetchAutomateActions();

package/src/screens/ChangePosition/index.js

@@ -52,7 +52,7 @@ const ChangePosition = () => {
   const renderItem = ({ item, index, drag, isActive }) => {
     return (
       <View style={styles.widgetItem}>
-        <View style={styles.itemOrder}>
+        <View style={[styles.itemOrder, isActive ? styles.isDragging : {}]}>
           <TouchableOpacity style={styles.indexOrder} onPressIn={drag}>
             <Text type="H4">{index + 1}</Text>
             <ReOrder />

package/src/screens/ChangePosition/styles.js

@@ -99,4 +99,8 @@ export default StyleSheet.create({
     backgroundColor: Colors.White,
     marginBottom: getBottomSpace() || 16,
   },
+  isDragging: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Red,
+  },
 });

package/src/utils/I18n/translations/en.js

@@ -722,6 +722,10 @@ export default {
   notification: 'Notification',
   send_notification: 'Send Notification',
   title_notification: 'Subject: “Warning”',
+  update_title_notification: 'Update title',
+  update_message_notification: 'Update warning content',
+  update_action: 'Update action',
+  updated_action_order: 'Updated action order',
   message_notification:
     'Warning content: "The temperature in the office is high, please check."',
   promotions: 'Promotions',
@@ -987,7 +991,10 @@ export default {
   modbus_fail: 'Modbus failrate',
   rssi_node: 'RSSI Node',
   edit_actions_list: 'Edit Actions List',
-  des_edit_actions_list: 'Hold and hover to rearrange actions order',
+  des_edit_actions_list:
+    'Press and hold the number and drag to rearrange the order of the actions.',
+  hold_longer_than_1s:
+    'Press and hold the action name for more than 1 second to update the action.',
   please_add_your_phone_number_and_chip_name:
     'Please add your phone number and chip name',
   Please_add_gateway_name: 'Please add gateway name',
@@ -1012,6 +1019,7 @@ export default {
   tap_to_run: 'Tap to run',
   how_to_start: 'How to start',
   'set_up {name}': 'Setup {name}',
+  choose_action: 'Choose action',
   action: 'action',
   power: 'Power',
   actions_list: 'Actions list',
@@ -1019,7 +1027,9 @@ export default {
   message_delete_action:
     'Are you sure you want to delete action of \n{actionName} in {stationName}?',
   message_delete_notify:
-    'Are you sure you want to remove sending notifications?',
+    'Are you sure you want to remove this "{title}" message?',
+  message_delete_delay:
+    'Are you sure you want to remove this "{delay} seconds" delay?',
   add_script: 'Add Script',
   delete_script: 'Delete Script',
   title_delete_script: 'Delete script "{scriptName}"?',
@@ -1054,6 +1064,8 @@ export default {
   delay_the_action: 'Delay the action',
   wait: 'Wait',
   set_timeout_seconds: 'Set timeout (seconds)',
+  update_waiting_time: 'Update waiting time (seconds)',
+  update_successfully: 'Update successfully',
   maximum_3600_seconds: 'Maximum 3600 seconds',
   wait_time_seconds: 'Wait {delay} seconds',
   end_device_not_support_script:
@@ -1418,7 +1430,8 @@ export default {
   io_method: 'Input/Output method',
   change_position: 'Change position',
   updated_widget_successfully: 'Updated widget successfully',
-  sub_text_change_position: 'Hold and hover to rearrange the widgets',
+  sub_text_change_position:
+    'Press and hold the number and drag to rearrange the widgets.',
   transfer_ownership: 'Transfer ownership',
   text_change_owner:
     'Ownership permissions of this unit to the user you have selected.',
@@ -1428,7 +1441,7 @@ export default {
     'To provide a better user experience, [Era] will perform a system upgrade.The upgrade will take about 10 ' +
     'minutes.\n\n Some device control functions will be interrupted during the upgrade.[Era] would like to ask ' +
     'for your understanding for this inconvenience.\n\nBest regards.',
-  please_enter_a_number: 'Please enter a number',
+  please_enter_a_number: 'Please enter a number and select a condition',
   not_support_plug_and_play: 'Not support plug and play',
   reach_max_stations_per_unit:
     'You have reached the maximum number of {length} sub-unit per unit.',