@eohjsc/react-native-smart-city 0.4.48 → 0.4.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.48",
+  "version": "0.4.50",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Action/ItemQuickAction.js

@@ -7,8 +7,7 @@ import { useConfigGlobalState } from '../../iot/states';
 import IconComponent from '../IconComponent';
 
 const ItemQuickAction = memo(
-  ({ sensor, wrapperStyle, setStatus, iconSize = 40 }) => {
-    const [isSendingCommand, setIsSendingCommand] = useState(false);
+  ({ sensor, wrapperStyle, setStatus, iconSize = 30 }) => {
     const [action, setAction] = useState(sensor.action);
     // eslint-disable-next-line no-unused-vars
     const [configValues, _] = useConfigGlobalState('configValues');
@@ -64,7 +63,6 @@ const ItemQuickAction = memo(
         data = JSON.stringify(data);
       }
       await sendRemoteCommand(sensor, action, data, userId);
-      setIsSendingCommand(true);
 
       if (!sensor.quick_action.will_auto_update_status) {
         setTimeout(() => {
@@ -86,7 +84,7 @@ const ItemQuickAction = memo(
         <View style={wrapperStyle}>
           <IconComponent
             icon={action?.icon_kit || action?.icon || 'PoweroffOutlined'}
-            isSendingCommand={isSendingCommand}
+            isOn={isOn}
             iconSize={iconSize}
             size={iconSize}
           />

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -49,13 +49,10 @@ const NumberUpDownActionTemplate = ({
 
   const doActionAndWatchConfig = useCallback(
     async (actionData, actionValue) => {
-      let data = actionValue;
-      if (device_type !== DEVICE_TYPE.GOOGLE_HOME) {
-        data = { temperature: actionValue };
-        if (allow_config_store_value && config) {
-          data.config_id = config;
-          data.config_value = actionValue;
-        }
+      let data = { value: actionValue, temperature: actionValue };
+      if (allow_config_store_value && config) {
+        data.config_id = config;
+        data.config_value = actionValue;
       }
       await doAction(actionData, data);
       if (!is_managed_by_backend) {

package/src/commons/ActionGroup/OnOffTemplate/OnOffButtonTemplate.js

@@ -36,7 +36,7 @@ const OnOffButtonTemplate = memo(
               <IconComponent
                 icon={icon}
                 iconSize={30}
-                active={isOn}
+                isOn={isOn}
                 colorInActive={Colors.Gray6}
                 color={Colors.Green7}
               />

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -28,15 +28,16 @@ const OptionsDropdownActionTemplate = ({
   isWidgetOrder,
 }) => {
   const t = useTranslations();
-  const { configuration = {}, title = '' } = item;
   const {
+    title,
     action_data,
     options = [],
     icon_kit_data,
     icon,
     config,
     allow_config_store_value,
-  } = configuration;
+  } = item?.configuration || {};
+
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
   const checkIcon = /\d/.test(icon); // to do check icon svg and icon antDesign
@@ -96,7 +97,7 @@ const OptionsDropdownActionTemplate = ({
     hideAlertAction,
   ]);
 
-  useUnwatchLGDeviceConfigControl(sensor, [configuration.config]);
+  useUnwatchLGDeviceConfigControl(sensor, [config]);
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
 
@@ -117,7 +118,6 @@ const OptionsDropdownActionTemplate = ({
         {!checkIcon && (
           <IconComponent
             icon={iconKit || icon}
-            isSendingCommand={false}
             iconSize={27}
             size={27}
             style={styles.marginRight}

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -79,7 +79,7 @@ const GridItem = ({ item, doAction, sensor }) => {
         {!checkIcon && (
           <IconComponent
             icon={iconKit || icon}
-            active={active}
+            isOn={active}
             color={Colors.White}
             style={styles.iconComponent}
           />

package/src/commons/ActionGroup/__test__/NumberUpDownTemplate.test.js

@@ -400,7 +400,10 @@ describe('Test NumberUpDownTemplate', () => {
         id: 20,
         key: '5ed1d4dc-a905-47cd-b0c9-f979644bd21a',
       },
-      26
+      {
+        value: 26,
+        temperature: 26,
+      }
     );
   });
 

package/src/commons/ActionGroup/__test__/OptionsDropdownTemplate.test.js

@@ -56,8 +56,8 @@ describe('Test OptionsDropdownActionTemplate', () => {
   beforeEach(() => {
     watchMultiConfigs.mockClear();
     displayItem = {
-      title: 'Fan Speed',
       configuration: {
+        title: 'Fan Speed',
         action_data: actionData,
         config: 5,
         action: 'e5d23347-ee31-4fe3-9fb5-bbce05bf4b61',

package/src/commons/Dashboard/MyUnit/index.js

@@ -189,13 +189,15 @@ const MyUnit = ({ refreshing }) => {
 
   useEffect(() => {
     if (isDeleteUnitSuccessFully || previousMyUnits?.length > myUnits?.length) {
-      const to = setTimeout(() => {
-        carouselRef?.current?.snapToItem();
-        setAction(Action.RESET_DELETE_UNIT_ACTION);
-      }, 60);
-      return () => clearTimeout(to);
+      carouselRef?.current?.snapToItem(0, true);
+      setAction(Action.RESET_DELETE_UNIT_ACTION);
     }
-  }, [isDeleteUnitSuccessFully, setAction, previousMyUnits, myUnits]);
+  }, [
+    isDeleteUnitSuccessFully,
+    setAction,
+    previousMyUnits?.length,
+    myUnits?.length,
+  ]);
 
   return (
     <>

package/src/commons/Device/HorizontalBarChart.js

@@ -49,6 +49,9 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       enabled: false,
       followTouchMove: false,
     },
+    exporting: {
+      enabled: false,
+    },
     plotOptions: {
       bar: {
         dataLabels: {

package/src/commons/IconComponent/index.js

@@ -8,14 +8,13 @@ import FImage from '../FImage';
 const IconComponent = memo(
   ({
     icon,
-    isSendingCommand = false,
+    isOn = false,
     size = 30,
     iconSize = 30,
     style,
     antIconStyle,
     color,
     colorInActive,
-    active,
   }) => {
     let extraStyle = {
       width: size,
@@ -49,11 +48,8 @@ const IconComponent = memo(
     }, [icon]);
 
     const colorIcon = useMemo(() => {
-      if (isSendingCommand || !active) {
-        return colorInActive || Colors.TextGray;
-      }
-      return color || Colors.Green7;
-    }, [active, color, colorInActive, isSendingCommand]);
+      return isOn ? color || Colors.Green7 : colorInActive || Colors.TextGray;
+    }, [color, colorInActive, isOn]);
 
     if (!icon) {
       return null;

package/src/commons/Modal/ModalCustom.js

@@ -16,8 +16,8 @@ const ModalCustom = (props) => {
       useNativeDriver
       animationIn={'slideInUp'}
       animationOut={'slideOutDown'}
-      animationInTiming={500}
-      animationOutTiming={500}
+      animationInTiming={400}
+      animationOutTiming={400}
       backdropColor={Colors.BlackTransparent5}
       hideModalContentWhileAnimating
       {...props}

package/src/configs/API.js

@@ -76,6 +76,7 @@ const API = {
     END_DEVICE_DETAIL: (id) => `/property_manager/devices/${id}/`,
     ORDER_DISPLAY_ITEMS: (id) =>
       `/property_manager/devices/${id}/display/order_display_items/`,
+    DELETE_END_DEVICES: () => '/chip_manager/end_devices/delete_end_devices/',
   },
   SHARED_SENSOR: {
     ACCESS: (id) => `/property_manager/shared_sensors/${id}/access/`,

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -50,10 +50,10 @@ const ConnectingWifiDevice = ({ route }) => {
               channel_name: channelName,
             }
           );
-          if (!success) {
-            addingWifiDeviceFail(JSON.stringify(problem || data));
-          } else {
+          if (success) {
             setChipId(data.id);
+          } else {
+            addingWifiDeviceFail(JSON.stringify(problem || data));
           }
           clearTimeout(timeout);
           isCallingAPI = false;
@@ -75,7 +75,8 @@ const ConnectingWifiDevice = ({ route }) => {
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
-      if (state.isConnected) {
+      const { isConnected, isInternetReachable } = state || {};
+      if (isConnected && isInternetReachable) {
         channelName && onReady(channelName);
       }
     });

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -7,7 +7,6 @@ import LottieView from 'lottie-react-native';
 import WifiManager from 'react-native-wifi-reborn';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { ToastBottomHelper } from '../../utils/Utils';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import Routes from '../../utils/Route';
@@ -40,6 +39,7 @@ const ConnectingWifiGuide = ({ route }) => {
   const [currentState, setCurrentState] = useState(0);
   const [isDisabled, setIsDisabled] = useState(false);
   const [isPressButton, setIsPressButton] = useState(false);
+  const [wifiDevice, setWifiDevice] = useState();
 
   const buttons = useMemo(
     () => [
@@ -74,9 +74,10 @@ const ConnectingWifiGuide = ({ route }) => {
         }
         setIsDisabled(false);
         setCurrentState(1);
+        setWifiDevice(wifiSsid);
       } catch (e) {
         Alert.alert(
-          t('cannot_connect_to_device_wifi'),
+          t('cannot_connect_to_device_wifi', { wifiDevice: wifiSsid }),
           t('try_to_turn_on_device_or_try_again'),
           buttons
         );
@@ -105,7 +106,7 @@ const ConnectingWifiGuide = ({ route }) => {
       if (!wifi) {
         phoneWifiList = null;
         Alert.alert(
-          t('cannot_find_device_wifi'),
+          t('cannot_find_device_wifi', { wifiDevice: wifiPrefix }),
           t('try_to_turn_on_device_or_try_again'),
           buttons
         );
@@ -132,7 +133,13 @@ const ConnectingWifiGuide = ({ route }) => {
       });
 
       socket.on('error', () => {
-        ToastBottomHelper.error(t('fail_trigger_scan_wifi_on_device'));
+        socket?.close(); // Close here to stop receiving error events
+        socket = null;
+        Alert.alert(
+          t('fail_trigger_scan_wifi_on_device', { wifiDevice }),
+          t('try_to_turn_on_device_or_try_again'),
+          buttons
+        );
       });
 
       intervalSend = setInterval(() => {
@@ -148,11 +155,19 @@ const ConnectingWifiGuide = ({ route }) => {
       // eslint-disable-next-line no-empty
     } catch (error) {}
     setIsPressButton(false);
-  }, [buttons, connectWifiSsid, qrData?.org_slug, qrData?.prefix, t]);
+  }, [
+    buttons,
+    connectWifiSsid,
+    qrData?.org_slug,
+    qrData?.prefix,
+    t,
+    wifiDevice,
+  ]);
 
   useEffect(() => {
     if (isFocused) {
       if (isBackFromOtherScreen) {
+        setCurrentState(0);
         const currentConnectingWifi = getCurrentWifiSSID();
         disconnectWifi(currentConnectingWifi);
       }
@@ -179,9 +194,21 @@ const ConnectingWifiGuide = ({ route }) => {
         qrData: qrData,
         addDeviceType,
         stationId,
+        wifiDevice: wifiDevice,
+        reconnectWifiSSID: connectWifiSsid,
       });
     }
-  }, [addDeviceType, navigate, qrData, stationId, subUnit, unit, wifiList]);
+  }, [
+    addDeviceType,
+    connectWifiSsid,
+    navigate,
+    qrData,
+    stationId,
+    subUnit,
+    unit,
+    wifiDevice,
+    wifiList,
+  ]);
 
   return (
     <View style={styles.container}>
@@ -211,12 +238,20 @@ const ConnectingWifiGuide = ({ route }) => {
             />
           </>
         ) : (
-          <LottieView
-            source={LoadingCircle}
-            autoPlay
-            loop
-            style={styles.loading}
-          />
+          <>
+            <LottieView
+              source={LoadingCircle}
+              autoPlay
+              loop
+              style={styles.loading}
+            />
+            <Text style={styles.txtContent}>
+              {t('connecting_to_wifi_device', {
+                appName: SCConfig.appName,
+                wifiDevice: wifiDevice,
+              })}
+            </Text>
+          </>
         )}
       </View>
       {isDisabled && isPressButton && (

package/src/screens/AddNewGateway/RenameNewDevices.js

@@ -16,6 +16,7 @@ import { HeaderCustom } from '../../commons/Header';
 import IconComponent from '../../commons/IconComponent';
 import FullLoading from '../../commons/FullLoading';
 import { ToastBottomHelper } from '../../utils/Utils';
+import { CheckBoxCustom } from '../Sharing/Components';
 
 const RenameNewDevices = memo(({ route }) => {
   const t = useTranslations();
@@ -29,6 +30,9 @@ const RenameNewDevices = memo(({ route }) => {
   const [loading, setLoading] = useState(false);
   const [isChangedName, setIsChangedName] = useState(false);
   const [isDisabled, setIsDisabled] = useState(false);
+  const [selectedDevice, setSelectedDevice] = useState([]);
+  const [originalDevices, setOriginalDevices] = useState([]);
+  const [isAutoFocus, setIsAutoFocus] = useState(true);
 
   const renameLabel = AccessibilityLabel.CONNECTED_DEVICE_RENAME_DEVICE;
 
@@ -94,14 +98,60 @@ const RenameNewDevices = memo(({ route }) => {
       return;
     }
     setLoading(true);
-    const { success } = await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
-    if (success) {
-      goBackUnitDetail();
+
+    let filteredInfo;
+    let devicesToDelete;
+    if (selectedDevice.length === 0) {
+      filteredInfo = info;
+      devicesToDelete = [];
     } else {
+      filteredInfo = {
+        ...info,
+        sensors: info.sensors.map((sensor) => ({
+          ...sensor,
+          end_devices: sensor.end_devices.filter((device) =>
+            selectedDevice.includes(device.id)
+          ),
+        })),
+      };
+
+      devicesToDelete = originalDevices.filter(
+        (device) => !selectedDevice.includes(device)
+      );
+    }
+
+    let response, success1, success2;
+    response = await axiosPost(
+      API.CHIP.RENAME_DEVICES(filteredInfo.id),
+      filteredInfo
+    );
+    success1 = response.success;
+
+    if (devicesToDelete?.length > 0) {
+      response = await axiosPost(API.DEVICE.DELETE_END_DEVICES(), {
+        list_device: devicesToDelete,
+      });
+      success2 = response.success;
+    }
+
+    if (success1 || success2) {
+      goBackUnitDetail();
+    }
+    if (!success1) {
       ToastBottomHelper.error(t('rename_device_fail'));
     }
+    if (!success2) {
+      ToastBottomHelper.error(t('select_device_failed'));
+    }
     setLoading(false);
-  }, [goBackUnitDetail, info, isChangedName, t]);
+  }, [
+    goBackUnitDetail,
+    info,
+    isChangedName,
+    originalDevices,
+    selectedDevice,
+    t,
+  ]);
 
   useEffect(() => {
     (async () => {
@@ -117,6 +167,11 @@ const RenameNewDevices = memo(({ route }) => {
       );
       if (success) {
         setInfo(data);
+        const listIdDevice = data?.sensors?.flatMap((sensor) =>
+          sensor?.end_devices?.map((device) => device?.id)
+        );
+        setSelectedDevice(listIdDevice || []);
+        setOriginalDevices(listIdDevice || []);
       }
     })();
   }, [chipId, sensorId, subUnit]);
@@ -140,6 +195,32 @@ const RenameNewDevices = memo(({ route }) => {
     });
   };
 
+  const handleSetSelectedDevice = useCallback(
+    (value) => () => {
+      setIsAutoFocus(false);
+      const index = selectedDevice.indexOf(value);
+      if (index !== -1) {
+        setSelectedDevice([
+          ...selectedDevice.slice(0, index),
+          ...selectedDevice.slice(index + 1),
+        ]);
+      } else {
+        setSelectedDevice((oldArray) => [...oldArray, value]);
+      }
+    },
+    [selectedDevice]
+  );
+
+  const onSetSelectAllDevice = () => {
+    setIsAutoFocus(false);
+    if (selectedDevice?.length >= 0) {
+      setSelectedDevice([...originalDevices]);
+    }
+    if (selectedDevice?.length === originalDevices?.length) {
+      setSelectedDevice([]);
+    }
+  };
+
   const ItemDevice = useCallback(
     ({
       item,
@@ -149,16 +230,25 @@ const RenameNewDevices = memo(({ route }) => {
       accessibilityLabelTextInput,
       onChange,
       onSubmitEditing,
+      isSelected,
+      onSetSelectedDevice,
     }) => {
       const isCanRenameItem = isGateway
         ? item?.can_rename && isCanRename
         : isFocus;
+
       return (
         <TouchableOpacity
           style={[styles.boxDevice, isGateway && styles.marginTop16]}
           accessibilityLabel={`${renameLabel}-button-${item?.id}`}
           onPress={onPress}
         >
+          <CheckBoxCustom
+            isChecked={isSelected}
+            onPress={onSetSelectedDevice}
+            wrapStyle={styles.checkBox}
+            wrapViewCustom={styles.wrapViewCustom}
+          />
           {isGateway ? (
             <GatewayIcon width={43} height={43} />
           ) : (
@@ -198,6 +288,7 @@ const RenameNewDevices = memo(({ route }) => {
 
   const handleOnPressDeviceItem = useCallback(
     (item) => () => {
+      setIsAutoFocus(true);
       setSelectedItem(item);
     },
     []
@@ -229,13 +320,15 @@ const RenameNewDevices = memo(({ route }) => {
                 key={`${end_device?.id}`}
                 item={end_device}
                 onPress={handleOnPressDeviceItem(end_device)}
-                isFocus={end_device?.id === selectedItem?.id}
+                isFocus={isAutoFocus && end_device?.id === selectedItem?.id}
                 accessibilityLabelTextInput={`${renameLabel}-end_device-${end_device?.id}`}
                 onChange={updateItemName(
                   'end_device',
                   sensor_index,
                   end_device_index
                 )}
+                isSelected={selectedDevice.includes(end_device?.id)}
+                onSetSelectedDevice={handleSetSelectedDevice(end_device?.id)}
               />
             ))
           )}
@@ -245,11 +338,14 @@ const RenameNewDevices = memo(({ route }) => {
   }, [
     addDeviceType,
     scrollViewHeight,
+    renameLabel,
     info,
     handleOnPressGatewayItem,
-    renameLabel,
     handleOnPressDeviceItem,
-    selectedItem,
+    isAutoFocus,
+    selectedItem?.id,
+    selectedDevice,
+    handleSetSelectedDevice,
   ]);
 
   return (
@@ -273,10 +369,30 @@ const RenameNewDevices = memo(({ route }) => {
           <Text size={14} color={Colors.Gray9}>
             {[unit?.name, subUnit?.name].filter(Boolean).join(' - ')}
           </Text>
-          {renderListItem}
-          <Text size={16} color={Colors.Gray8} style={styles.textRename}>
-            {t('click_on_box_to_rename_device')}
+          <Text size={14} color={Colors.Gray7} style={styles.textClickBox}>
+            {t('click_on_the_box_to_rename')}
           </Text>
+          {originalDevices?.length > 0 && (
+            <View style={styles.wrapHeaderDeviceAdd}>
+              <View style={styles.wrapCheckBox}>
+                <CheckBoxCustom
+                  isChecked={selectedDevice?.length === originalDevices?.length}
+                  onPress={onSetSelectAllDevice}
+                  wrapStyle={styles.checkBoxSelectAll}
+                  wrapViewCustom={styles.wrapViewCustom}
+                />
+                <Text size={12} color={Colors.Gray9}>
+                  {t('select_all')}
+                </Text>
+              </View>
+              <Text size={12} color={Colors.Gray9}>
+                {`${selectedDevice?.length} / ${originalDevices?.length} ${t(
+                  'end_devices_added'
+                )}`}
+              </Text>
+            </View>
+          )}
+          {renderListItem}
         </View>
       </View>
       {loading && <FullLoading />}

package/src/screens/AddNewGateway/RenameNewDevicesStyles.js

@@ -1,5 +1,6 @@
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
+import { normalize } from '../../configs/Constants';
 
 const styles = StyleSheet.create({
   container: {
@@ -56,9 +57,6 @@ const styles = StyleSheet.create({
     textAlign: 'left',
     paddingLeft: 16,
   },
-  textRename: {
-    marginTop: 16,
-  },
   devicesWrapper: {
     marginTop: 16,
     paddingHorizontal: 16,
@@ -70,10 +68,9 @@ const styles = StyleSheet.create({
     marginTop: 0,
   },
   viewIconSuccess: {
-    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingTop: 32,
+    paddingTop: 100,
   },
   marginTop16: {
     marginTop: 16,
@@ -85,6 +82,30 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
   },
+  textClickBox: {
+    lineHeight: 24,
+    marginTop: 17,
+    marginBottom: 16,
+    paddingHorizontal: 60,
+    textAlign: 'center',
+  },
+  wrapHeaderDeviceAdd: {
+    width: 275,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  wrapCheckBox: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkBoxSelectAll: {
+    marginLeft: 17,
+  },
+  wrapViewCustom: {
+    borderRadius: normalize(0),
+  },
 });
 
 export default styles;