@eohjsc/react-native-smart-city 0.4.99 → 0.5.0

package/package.json

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

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

@@ -50,19 +50,9 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   }, [config, configValues, is_on_value]);
 
   const [isOn, setIsOn] = useState(false);
-  const [tempIsOn, setTempIsOn] = useState(getIsOnValue());
-  const [timeoutId, setTimeoutId] = useState();
-  const [needUpdateTempIsOn, setNeedUpdateTempIsOn] = useState(false);
-
-  const refreshTempIsOn = useCallback(() => {
-    const timeout = setTimeout(() => {
-      setNeedUpdateTempIsOn(true);
-    }, 7000);
-    setTimeoutId(timeout);
-  }, []);
 
   const triggerAction = useCallback(async () => {
-    const action_data = tempIsOn ? action_off_data : action_on_data;
+    const action_data = isOn ? action_off_data : action_on_data;
     if (!action_data) {
       return;
     }
@@ -77,11 +67,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
         config_value: isOn ? 0 : 1,
       };
     }
-    clearTimeout(timeoutId);
     await doAction(action_data, data);
-    setTempIsOn((prev) => !prev);
-    setNeedUpdateTempIsOn(false);
-    refreshTempIsOn();
     if (
       is_managed_by_backend &&
       config &&
@@ -90,17 +76,14 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
       watchMultiConfigs([config]);
     }
   }, [
-    tempIsOn,
+    isOn,
     action_off_data,
     action_on_data,
     allow_config_store_value,
     config,
     device_type,
-    timeoutId,
     doAction,
-    refreshTempIsOn,
     is_managed_by_backend,
-    isOn,
   ]);
 
   useUnwatchLGDeviceConfigControl(sensor, [config]);
@@ -109,16 +92,6 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
     setIsOn(getIsOnValue());
   }, [getIsOnValue]);
 
-  useEffect(() => {
-    needUpdateTempIsOn && setTempIsOn(getIsOnValue());
-  }, [getIsOnValue, needUpdateTempIsOn]);
-
-  useEffect(() => {
-    if (device_type !== DEVICE_TYPE.LG_THINQ) {
-      setTempIsOn(getIsOnValue());
-    }
-  }, [getIsOnValue, device_type]);
-
   const Component = useMemo(() => {
     return getComponent(item.template);
   }, [item.template]);
@@ -126,7 +99,7 @@ const OnOffTemplate = memo(({ item = {}, doAction, sensor = {} }) => {
   return (
     <View style={styles.wrap}>
       <Component
-        isOn={tempIsOn}
+        isOn={isOn}
         triggerAction={triggerAction}
         actionGroup={configuration}
         disabled={!action_on_data && !action_off_data}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -20,7 +20,7 @@ import _TextInput from '../Form/TextInput';
 const SliderRangeTemplate = memo(
   ({ item = {}, doAction, sensor, isWidgetOrder }) => {
     const t = useTranslations();
-    const { configuration = {} } = item;
+    const { configuration = {}, title, label } = item;
     const [configValues] = useConfigGlobalState('configValues');
     const {
       config = undefined,
@@ -91,7 +91,7 @@ const SliderRangeTemplate = memo(
       <View
         style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
       >
-        <Text type="H4">{item?.title || item?.label || t('brightness')}</Text>
+        <Text type="H4">{title || label || t('brightness')}</Text>
         <View style={styles.wrap}>
           <Slider
             step={1}

package/src/commons/ActionGroup/TerminalBoxTemplate.js

@@ -68,14 +68,14 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
     setValue(e);
   };
 
-  const fromValue = useMemo(() => {
-    return configValues[from_config?.id];
-  }, [configValues, from_config]);
-
   const toValue = useMemo(() => {
     return configValues[to_config?.id];
   }, [configValues, to_config]);
 
+  const fromValue = useMemo(() => {
+    return configValues[from_config?.id];
+  }, [configValues, from_config]);
+
   const configs = useMemo(() => {
     if (!from_config || !to_config) {
       return [];
@@ -172,7 +172,7 @@ const TerminalBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
           accessibilityLabel={AccessibilityLabel.TERMINAL_BOX_BUTTON_SEND}
           disabled={!value}
         >
-          <IconOutline name="send" size={20} />
+          <IconOutline name="send" size={25} />
         </TouchableOpacity>
       </View>
     </View>

package/src/commons/ActionGroup/TerminalBoxTemplateStyle.js

@@ -24,7 +24,10 @@ export default StyleSheet.create({
     width: '100%',
   },
   iconAndTextOption: {
+    justifyContent: 'center',
     marginTop: 25,
+    width: 40,
+    height: 40,
   },
   wrapInputStyle: {
     marginRight: 14,

package/src/commons/ActionGroup/TextBoxTemplate.js

@@ -40,33 +40,35 @@ const TextBoxTemplate = ({ item, doAction, isWidgetOrder }) => {
       </View>
 
       <View style={styles.iconAndText}>
-        <Text type="H4">{valueText}</Text>
+        <Text style={styles.textValue} type="H4">
+          {valueText}
+        </Text>
         <TouchableOpacity
           style={styles.iconAndTextOption}
           onPress={onShowAlert}
           accessibilityLabel={AccessibilityLabel.TEXT_BOX_BUTTON_EDIT}
         >
-          <IconOutline name="edit" size={20} />
+          <IconOutline name="edit" size={25} />
         </TouchableOpacity>
-        <AlertAction
-          visible={stateAlert.visible}
-          hideModal={hideAlertAction}
-          title={t('enter_parameters')}
-          message={stateAlert.message}
-          leftButtonTitle={stateAlert.leftButton}
-          leftButtonClick={hideAlertAction}
-          rightButtonTitle={stateAlert.rightButton}
-          rightButtonClick={onDone}
-          rightDisabled={!value}
-          transY={transY}
-        >
-          <_TextInput
-            wrapStyle={styles.wrapInputStyle}
-            value={value}
-            onChange={onInputChange}
-          />
-        </AlertAction>
       </View>
+      <AlertAction
+        visible={stateAlert.visible}
+        hideModal={hideAlertAction}
+        title={t('enter_parameters')}
+        message={stateAlert.message}
+        leftButtonTitle={stateAlert.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlert.rightButton}
+        rightButtonClick={onDone}
+        rightDisabled={!value}
+        transY={transY}
+      >
+        <_TextInput
+          wrapStyle={styles.wrapInputStyle}
+          value={value}
+          onChange={onInputChange}
+        />
+      </AlertAction>
     </View>
   );
 };

package/src/commons/ActionGroup/TextBoxTemplateStyle.js

@@ -24,6 +24,9 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
   },
+  textValue: {
+    width: '80%',
+  },
   iconAndTextOption: {
     flex: 1,
     flexDirection: 'row',

package/src/commons/Device/PMSensor/PMSensorIndicator.js

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
-import { keyExtractor, roundNumber } from '../../../utils/Utils';
+import { keyExtractor } from '../../../utils/Utils';
 import { useConfigGlobalState } from '../../../iot/states';
 
 const PMSensorIndicator = memo(({ data = [], style, isWidgetOrder }) => {
@@ -12,10 +12,8 @@ const PMSensorIndicator = memo(({ data = [], style, isWidgetOrder }) => {
   const renderItem = useCallback(
     ({ item }) => {
       const { id, color, title, standard, evaluate, unit } = item || {};
-      const getValue =
-        configValues?.[id]?.value === undefined
-          ? '--'
-          : `${roundNumber(configValues[id].value)}`;
+      const value = configValues[id]?.value;
+      const getValue = value === undefined ? '--' : value;
 
       return (
         <QualityIndicatorItem

package/src/commons/HeaderAni/index.js

@@ -9,7 +9,7 @@ import { Colors, Constants } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 const screenHeight = Constants.height;
-const default_height = 44;
+const default_height = 45;
 const paddingIos = getStatusBarHeight() + 10;
 export const title_height = 44;
 export const heightHeader = default_height + title_height + paddingIos;

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -45,6 +45,7 @@ jest.mock('../../../iot/states', () => ({
 describe('test ShortDetail Subunit', () => {
   let tree, props;
   beforeEach(() => {
+    jest.useFakeTimers();
     props = {
       unit: {
         address: null,
@@ -187,6 +188,7 @@ describe('test ShortDetail Subunit', () => {
     await act(async () => {
       tree = await create(wrapComponent(props));
     });
+    jest.runOnlyPendingTimers();
     expect(watchMultiConfigs).toBeCalledWith([1]);
   });
 

package/src/hooks/IoT/__test__/useWatchConfigs.test.js

@@ -40,6 +40,7 @@ describe('Test useWatchConfigs', () => {
     renderHook(() => useWatchConfigs([1]), {
       wrapper,
     });
+    jest.runAllTimers();
     expect(watchMultiConfigs).toBeCalledWith([1]);
     expect(unwatchMultiConfigs).toBeCalledWith([1]);
   });

package/src/hooks/IoT/useWatchConfigs.js

@@ -17,11 +17,13 @@ const useWatchConfigs = (configIds) => {
         return;
       }
 
-      watchMultiConfigs(configIds);
       clearInterval(intervalId);
       intervalId = setInterval(() => {
         watchMultiConfigs(configIds);
       }, SCConfig.intervalWatchConfigTime);
+      setTimeout(() => {
+        watchMultiConfigs(configIds);
+      }, 500); // Delay 500ms to ensure unwatchMultiConfigs will execute before watchMultiConfigs
 
       return () => {
         unwatchMultiConfigs(configIds);

package/src/iot/mqtt.js

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { updateGlobalValue } from './Monitor';
 import { Buffer } from 'buffer';
 
@@ -134,12 +135,16 @@ const get_sensor_data = (sensor, data) => {
 };
 
 const get_scale_value = (value, config) => {
-  value = value && value * (config?.scale || 1);
-  value =
-    config?.decimal_behind || config?.decimal_behind === 0
-      ? value.toFixed(config?.decimal_behind)
-      : value;
-  return value;
+  if (!value || typeof value === 'string') {
+    return value;
+  }
+  const { decimal_behind, scale } = config;
+  let scaledValue = value * (scale || 1);
+
+  if (decimal_behind || decimal_behind === 0) {
+    scaledValue = scaledValue.toFixed(decimal_behind);
+  }
+  return Number(scaledValue);
 };
 
 const updateGlobalValueMqtt = (config, value) => {
@@ -151,7 +156,12 @@ const updateGlobalValueMqtt = (config, value) => {
   }
 
   value = get_scale_value(value, config);
-  updateGlobalValue(config.id, { value: Number(value) });
+  updateGlobalValue(config.id, { value: value });
+};
+
+const arduinoUpdateGlobalValueMqtt = (config, value, last_updated) => {
+  value = get_scale_value(value, config);
+  updateGlobalValue(config.id, { value: value, last_updated: last_updated });
 };
 
 export const handleModbusData = (chip, configById, data) => {
@@ -178,7 +188,11 @@ export const handleModbusData = (chip, configById, data) => {
 };
 
 export const handleChipData = (configById, configId, data) => {
-  updateGlobalValueMqtt(configById[configId], Number(data?.v));
+  arduinoUpdateGlobalValueMqtt(
+    configById[configId],
+    data?.v,
+    moment().format('YYYY-MM-DDTHH:mm:ss.SSSSSS')
+  );
 };
 
 export const handleZigbeeData = (chip, configById, ieee_address, data) => {
@@ -221,7 +235,7 @@ export const handleMqttMessage = (
   if (matchArduinoConfigValue) {
     // Arduino
     // topic: eoh/chip/{code}/config/127363/value
-    // payload: {v: 2130}
+    // payload: {v: 2130} or {v: 'on'}
     handleChipData(configById, matchArduinoConfigValue[1], payloadData);
   }
 

package/src/screens/Device/__test__/mqttDetail.test.js

@@ -318,8 +318,8 @@ describe('test DeviceDetail', () => {
         data: '00012',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('0.2');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(0.2);
   });
 
   it('should render device detail, modbus call updateGlobalValue, int_all exceed 32767', async () => {
@@ -330,8 +330,8 @@ describe('test DeviceDetail', () => {
         data: '0001F000',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('-409.6');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(-409.6);
   });
 
   it('should render device detail, modbus call updateGlobalValue, uint_32', async () => {
@@ -346,8 +346,8 @@ describe('test DeviceDetail', () => {
         data: '0001CCDDBBAA',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('343708356.1');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(343708356.1);
   });
 
   it('should render device detail, modbus call updateGlobalValue, float_cdba', async () => {
@@ -363,8 +363,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('369.6');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(369.6);
   });
 
   it('should render device detail, modbus call updateGlobalValue, float_cdba, data not hex format', async () => {
@@ -380,7 +380,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -396,7 +396,7 @@ describe('test DeviceDetail', () => {
         data: '0001P5670123', // reverse for simple
       }
     );
-    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -412,8 +412,8 @@ describe('test DeviceDetail', () => {
         data: '0001CCDDBBAA',
       }
     );
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('5244.5');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(5244.5);
   });
 
   test('should render device detail, modbus call updateGlobalValue, int_last4', async () => {
@@ -429,8 +429,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('4804.2');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(4804.2);
   });
 
   it('should render device detail, modbus call updateGlobalValue, convert_ai', async () => {
@@ -448,8 +448,8 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
-    expect(valueBoxs[1].props.value).toEqual('10');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
+    expect(valueBoxs[1].props.value).toEqual(10);
   });
 
   it('should render device detail, modbus call updateGlobalValue, convert_ai min_raw same max_raw', async () => {
@@ -467,7 +467,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -482,7 +482,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('0.1');
+    expect(valueBoxs[0].props.value).toEqual(0.1);
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -496,7 +496,20 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('10');
+    expect(valueBoxs[0].props.value).toEqual(10);
+    expect(valueBoxs[1].props.value).toEqual('--');
+  });
+
+  it('arduino pin submit data type string updateGlobalValue', async () => {
+    const valueBoxs = await _receiveDataOnDeviceDetail(
+      [{ id: 128282 }, { id: 128324 }],
+      'config/128282/value/',
+      {
+        v: 'on',
+      }
+    );
+
+    expect(valueBoxs[0].props.value).toEqual('on');
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 
@@ -538,7 +551,7 @@ describe('test DeviceDetail', () => {
       }
     );
 
-    expect(valueBoxs[0].props.value).toEqual('36');
+    expect(valueBoxs[0].props.value).toEqual(36);
     expect(valueBoxs[1].props.value).toEqual('--');
   });
 

package/src/screens/Device/detail.js

@@ -615,7 +615,7 @@ const DeviceDetail = ({ route }) => {
     }, [display.items, isNetworkConnected, sensor, mqttConfigs])
   );
 
-  useWatchConfigs(configIdsTemp.current);
+  useWatchConfigs(chipFiltered.length ? [] : configIdsTemp.current);
 
   const isShowEmergencyResolve =
     display.items.filter(
@@ -751,6 +751,7 @@ const DeviceDetail = ({ route }) => {
               }
               showWindDirection={showWindDirection}
               isDeviceHasBle={isDeviceHasBle}
+              key={`sensor${sensor.id}`}
             >
               {display.items.map((item, index) => {
                 return (

package/src/screens/Device/hooks/useDeviceWatchConfigControl.js

@@ -8,12 +8,11 @@ export const useDeviceWatchConfigControl = (
   display,
   mqttConfigs = {}
 ) => {
+  const { is_managed_by_backend, device_type } = device;
   const configsNeedWatching = useMemo(() => {
     if (
-      !device?.is_managed_by_backend ||
-      [DEVICE_TYPE.GOOGLE_HOME, DEVICE_TYPE.LG_THINQ].includes(
-        device?.device_type
-      )
+      !is_managed_by_backend ||
+      [DEVICE_TYPE.GOOGLE_HOME, DEVICE_TYPE.LG_THINQ].includes(device_type)
     ) {
       return [];
     }
@@ -24,11 +23,6 @@ export const useDeviceWatchConfigControl = (
       );
     }
     return configsControl;
-  }, [
-    mqttConfigs,
-    device?.device_type,
-    device?.is_managed_by_backend,
-    display,
-  ]);
+  }, [is_managed_by_backend, device_type, display, mqttConfigs]);
   useWatchConfigs(configsNeedWatching);
 };