@eohjsc/react-native-smart-city 0.3.41 → 0.3.44

package/package.json

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

package/src/commons/AlertAction/index.js

@@ -1,11 +1,10 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, View, Platform, Animated, Easing } from 'react-native';
 
 import ModalCustom from '../../commons/Modal/ModalCustom';
 import Text from '../../commons/Text';
 import ViewButtonBottom from '../ViewButtonBottom';
 import { Colors, Device } from '../../configs';
-import Animated from 'react-native-reanimated';
 
 const AlertAction = ({
   visible,
@@ -21,10 +20,21 @@ const AlertAction = ({
   onHide,
   children,
   accessibilityLabelPrefix = '',
-  animatedStyle,
   boxLeftButtonStyle,
   boxRightButtonStyle,
+  transY,
 }) => {
+  const [keyboardAnim] = useState(new Animated.Value(0));
+
+  useEffect(() => {
+    Animated.timing(keyboardAnim, {
+      toValue: transY,
+      duration: 220,
+      easing: Easing.linear,
+      useNativeDriver: false,
+    }).start();
+  }, [keyboardAnim, transY]);
+
   return (
     <ModalCustom
       isVisible={visible}
@@ -36,7 +46,14 @@ const AlertAction = ({
       style={styles.container}
       hideModalContentWhileAnimating
     >
-      <Animated.View style={[styles.popoverStyle, animatedStyle]}>
+      <Animated.View
+        style={[
+          styles.popoverStyle,
+          Platform.OS === 'ios' && {
+            marginBottom: keyboardAnim,
+          },
+        ]}
+      >
         <View style={styles.modalWrapper}>
           <View style={styles.modalHeader}>
             <Text

package/src/commons/Device/FlatListItems.js

@@ -82,7 +82,7 @@ const FlatListItems = memo(({ data, style, title, offsetTitle }) => {
 
       {filtersNeedReplace.length > 0 && filtersNeedReplace[0].measure === 'H' && (
         <AlertStatusMachine
-          message={t('%{number}_filter_need_to_be_replaced', {
+          message={t('{number}_filter_need_to_be_replaced', {
             number: filtersNeedReplace.length,
           })}
           style={styles.alertReplaceFilter}

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

@@ -14,7 +14,7 @@ const PMSensorIndicatior = memo(({ data = [], style }) => {
           key={item.id.toString()}
           color={item.color}
           standard={item.standard}
-          value={item.value}
+          value={item.value || '--'}
           evaluate={item.evaluate}
           measure={item.measure}
           style={style}

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -1,7 +1,6 @@
 import React, { memo, useCallback } from 'react';
 import Svg, { Path, Text, G, Circle } from 'react-native-svg';
 import { View, StyleSheet } from 'react-native';
-import Animated from 'react-native-reanimated';
 
 import {
   drawArc,
@@ -10,8 +9,6 @@ import {
 import { Colors, Fonts } from '../../../../configs';
 
 const { PI } = Math;
-const { multiply } = Animated;
-const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 const Anemometer = memo(
   ({
@@ -31,7 +28,6 @@ const Anemometer = memo(
     };
 
     const value = data.length ? data[0].value : 0;
-
     const radius = (size - strokeWidth) / 2;
     const viewBox = `0 0 ${width} ${width}`;
     const d = drawArc(center.x, center.y, radius, startAngle, endAngle);
@@ -39,14 +35,10 @@ const Anemometer = memo(
     const strokeAngle = (endAngle - startAngle) / numberOfSection;
     const strokeLength = (strokeAngle * circumference) / 360 - 1;
     const strokeDasharrayBg = `${strokeLength} 1`;
-    const strokeDasharray = `${
-      ((endAngle - startAngle) / 360) * circumference
-    } ${((endAngle - startAngle) / 360) * circumference}`;
     const totalAngle = (3 * PI) / 2;
     const alpha = (value * totalAngle) / maxValue;
-    const currentAngle = alpha - totalAngle;
-
-    const strokeDashoffset = multiply(currentAngle, radius);
+    const arc = circumference * 0.75;
+    const offset = arc - (value / maxValue) * arc;
 
     const textAngles = useCallback(() => {
       let arr = [];
@@ -128,6 +120,20 @@ const Anemometer = memo(
 
     return (
       <View style={styles.standard}>
+        <View style={styles.wrapOffset}>
+          <Svg width={width} height={width} {...viewBox}>
+            <Circle
+              cx={'50%'}
+              cy={'50%'}
+              fill="none"
+              r={radius}
+              stroke={Colors.Lime6}
+              strokeDasharray={`${circumference * 0.75} ${circumference}`}
+              strokeDashoffset={offset}
+              strokeWidth={strokeWidth}
+            />
+          </Svg>
+        </View>
         <Svg width={width} height={width} {...viewBox}>
           <Path
             x={(width - size) / 2}
@@ -137,13 +143,6 @@ const Anemometer = memo(
             strokeDasharray={strokeDasharrayBg}
             {...{ d, strokeWidth }}
           />
-          <AnimatedPath
-            x={(width - size) / 2}
-            y={(width - size) / 2}
-            fill="none"
-            stroke={Colors.Lime6}
-            {...{ d, strokeWidth, strokeDasharray, strokeDashoffset }}
-          />
           {textAngles()}
           <Text
             fill={Colors.Gray8}
@@ -194,4 +193,9 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  wrapOffset: {
+    transform: [{ rotate: '135deg' }],
+    position: 'absolute',
+    zIndex: 2,
+  },
 });

package/src/commons/OneTapTemplate/__test__/OptionsDropdownActionTemplate.test.js

@@ -108,7 +108,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
     expect(radioCircle[0].props.active).toEqual(true);
   });
 
-  it.only('Test onPressDone', async () => {
+  it('Test onPressDone', async () => {
     await act(async () => {
       tree = await create(wrapComponent(data));
     });

package/src/commons/Processing/__test__/Connecting.test.js

@@ -65,7 +65,7 @@ describe('Test Processing', () => {
     const bar = tree.root.findByType(Progress.Bar);
     expect(bar.props.progress).toEqual(0.5);
     const state = tree.root.findAllByType(Text);
-    expect(state[1].props.children).toEqual('xxx');
+    expect(state[1].props.children).toEqual('Connecting');
   });
   it('unmount component will unsubscribe from channel', async () => {
     await act(async () => {

package/src/commons/Processing/index.js

@@ -1,12 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
+import uuid from 'uuid';
+
 import Text from '../Text';
-import { Colors, Constants } from '../../configs';
-import styles from './styles';
 import { HeaderCustom } from '../Header';
 import { getPusher } from '../../utils/Pusher';
-import uuid from 'uuid';
+import { ModalCustom } from '../Modal';
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import ViewButtonBottom from '../ViewButtonBottom';
 
 const Processing = ({
   title,
@@ -15,13 +19,22 @@ const Processing = ({
   complete,
   onReady,
   onMessage,
+  goBack,
+  showPopupTurnOnGuide,
+  setHidePopupTurnOnGuide,
+  setIsRecallChipScan,
+  isChangeAddressSuccess,
 }) => {
+  const t = useTranslations();
   const channelName = useMemo(() => {
     return 'cache-' + uuid.v4();
   }, []);
 
+  // eslint-disable-next-line no-unused-vars
   const [state, setState] = useState(initState);
   const [percent, setPercent] = useState(0);
+  const [basePercent, setBasePercent] = useState(0);
+  const [totalPercent, setTotalPercent] = useState(0);
 
   const processMessage = useCallback(
     (
@@ -58,6 +71,11 @@ const Processing = ({
     [complete, fail, onMessage]
   );
 
+  const handleOk = useCallback(() => {
+    setHidePopupTurnOnGuide();
+    setIsRecallChipScan(true);
+  }, [setHidePopupTurnOnGuide, setIsRecallChipScan]);
+
   useEffect(() => {
     const channel = getPusher().subscribe(channelName);
     channel.bind('progress', (message) => {
@@ -73,6 +91,20 @@ const Processing = ({
     onReady && onReady(channelName);
   }, [onReady, channelName]);
 
+  useEffect(() => {
+    if (isChangeAddressSuccess) {
+      setBasePercent(0.5);
+    }
+  }, [isChangeAddressSuccess]);
+
+  useEffect(() => {
+    if (basePercent === 0.5) {
+      setTotalPercent(basePercent + percent * 0.5);
+    } else {
+      setTotalPercent(percent);
+    }
+  }, [basePercent, percent]);
+
   return (
     <View style={styles.wrap}>
       <View style={styles.screen}>
@@ -80,12 +112,12 @@ const Processing = ({
         <View style={styles.body}>
           <View style={styles.connecting}>
             <Text type="H4" bold>
-              {state}
+              {t('connecting')}
             </Text>
           </View>
           <View style={styles.percentLoad}>
             <Progress.Bar
-              progress={percent}
+              progress={totalPercent}
               animated={true}
               color={Colors.Primary}
               indeterminateAnimationDuration={1000}
@@ -94,12 +126,34 @@ const Processing = ({
               useNativeDriver={true}
             />
             <Text style={styles.textPercentLoad}>{`${parseInt(
-              percent * 100,
+              totalPercent * 100,
               10
             )}%`}</Text>
           </View>
         </View>
       </View>
+      <ModalCustom
+        onBackButtonPress={goBack}
+        isVisible={showPopupTurnOnGuide}
+        style={styles.modal}
+      >
+        <View style={styles.modalWrapper}>
+          <View style={styles.modalContent}>
+            <Text type="H4" semibold style={styles.txtCenter}>
+              {t('turn_on_device')}
+            </Text>
+            <Text style={styles.txtCenter}>
+              {t('turn_on_device_after_change_address_success')}
+            </Text>
+          </View>
+          <ViewButtonBottom
+            leftTitle={t('cancel')}
+            onLeftClick={goBack}
+            rightTitle={t('ok')}
+            onRightClick={handleOk}
+          />
+        </View>
+      </ModalCustom>
     </View>
   );
 };

package/src/commons/Processing/styles.js

@@ -33,4 +33,23 @@ export default StyleSheet.create({
   textPercentLoad: {
     marginLeft: 10,
   },
+  modal: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalWrapper: {
+    backgroundColor: Colors.White,
+    borderRadius: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 280,
+  },
+  modalContent: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  txtCenter: {
+    textAlign: 'center',
+  },
 });

package/src/commons/SubUnit/ShortDetail.js

@@ -102,10 +102,9 @@ const ShortDetailSubUnit = ({ unit, station, isOwner }) => {
     navigate(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
-        unitId: unit.id,
-        unitName: unit.name,
-        stationId: station?.id,
-        stationName: station?.name,
+        unitId: unit?.id,
+        unitName: unit?.name,
+        subUnit: station,
       },
     });
   };

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

@@ -174,10 +174,9 @@ describe('test ShortDetail Subunit', () => {
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
-        stationName: props.station.name,
-        stationId: props.station.id,
         unitId: props.unit.id,
         unitName: props.unit.name,
+        subUnit: props.station,
       },
     });
   });

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -117,9 +117,12 @@ const ConfigHistoryChart = memo(({ configs }) => {
       });
       params.append(
         'date_from',
-        moment(startDate).format('YYYY-MM-DD HH:mm:ss')
+        moment(startDate).utc().format('YYYY-MM-DD HH:mm:ss')
+      );
+      params.append(
+        'date_to',
+        moment(endDate).utc().format('YYYY-MM-DD HH:mm:ss')
       );
-      params.append('date_to', moment(endDate).format('YYYY-MM-DD HH:mm:ss'));
       const { success, data } = await axiosGet(API.CONFIG.DISPLAY_HISTORY(), {
         params,
       });

package/src/configs/AccessibilityLabel.js

@@ -252,6 +252,7 @@ export default {
   EMERGENCY_SELECT_CONTACT: 'EMERGENCY_SELECT_CONTACT',
   EMERGENCY_TITLE: 'EMERGENCY_TITLE',
   EMERGENCY_BUTTON: 'EMERGENCY_BUTTON',
+  CONTACT_NAME: 'CONTACT_NAME',
 
   // ADD SUB UNIT
   ADD_SUB_UNIT_SCREEN: 'ADD_SUB_UNIT_SCREEN',

package/src/hooks/Explore/useKeyboardAnimated.js

@@ -1,41 +1,32 @@
-import { Clock, Value } from 'react-native-reanimated';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Keyboard, Platform } from 'react-native';
-import { runTiming } from '../../utils/runTiming';
 
-const useKeyboardAnimated = (tabHeight) => {
-  const clock = new Clock();
-  const marginStart = useMemo(() => new Value(0), []);
-  const marginEnd = useMemo(() => new Value(0), []);
+const action = Platform.OS === 'ios' ? 'Will' : 'Did';
+
+const useKeyboardAnimated = (tabHeight = 0) => {
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
   const _keyboardWillHide = useCallback(() => {
-    marginStart.setValue(marginEnd);
-    marginEnd.setValue(0);
-  }, [marginStart, marginEnd]);
+    setKeyboardHeight(0);
+  }, []);
+
   const _keyboardWillShow = useCallback(
     (e) => {
-      marginStart.setValue(marginEnd);
-      marginEnd.setValue(e.endCoordinates.height - tabHeight);
+      setKeyboardHeight(e.endCoordinates.height - tabHeight);
     },
-    [marginEnd, marginStart, tabHeight]
+    [tabHeight]
   );
 
-  const transY = runTiming(clock, marginStart, marginEnd);
-
-  const action = Platform.OS === 'ios' ? 'Will' : 'Did';
-
   useEffect(() => {
-    // @ts-ignore
     Keyboard.addListener('keyboard' + action + 'Hide', _keyboardWillHide);
-    // @ts-ignore
     Keyboard.addListener('keyboard' + action + 'Show', _keyboardWillShow);
-    // cleanup function
     return () => {
       Keyboard.removeListener('keyboard' + action + 'Show', _keyboardWillShow);
       Keyboard.removeListener('keyboard' + action + 'Hide', _keyboardWillHide);
     };
-  }, [_keyboardWillHide, _keyboardWillShow, action, tabHeight]);
+  }, [_keyboardWillHide, _keyboardWillShow, tabHeight]);
 
-  return [transY];
+  return keyboardHeight;
 };
 
 export default useKeyboardAnimated;

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

@@ -89,7 +89,7 @@ describe('Test useRemoteControl', () => {
 
   it('test send remote command via bluetooth failed then send via internet', async () => {
     action.command_prefer_over_bluetooth = true;
-    action.command_prefer_over_internet = true;
+    action.command_prefer_over_internet = false;
     const { result: sendRemoteCommand } = renderHook(() => useRemoteControl(), {
       wrapper,
     });

package/src/hooks/IoT/useRemoteControl.js

@@ -29,10 +29,17 @@ const useRemoteControl = () => {
         try {
           result = await sendCommandOverBluetooth(device, action, data, userId);
         } catch (err) {
-          if (err !== SEND_COMMAND_OVER_BLUETOOTH_FAIL) {
+          result = false;
+          if (err === SEND_COMMAND_OVER_BLUETOOTH_FAIL) {
+            result = await sendCommandOverInternet(
+              device,
+              action,
+              data,
+              'bluetooth'
+            );
+          } else {
             throw err;
           }
-          result = false;
         }
       }
 

package/src/iot/RemoteControl/HomeAssistant.js

@@ -122,7 +122,7 @@ export const homeAssistantConnect = async (
   onDisconnected,
   onReconnected
 ) => {
-  let connections = {};
+  let connections = { ...oldConnections };
 
   for (let i = 0; i < options.length; i++) {
     const option = options[i];

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Processing from '../../commons/Processing';
 import Routes from '../../utils/Route';
 
@@ -9,18 +9,21 @@ const ConnectingDevice = ({
   initState,
   onReady,
   unitId,
-  stationId,
-  stationName,
+  subUnit,
   chipId,
   sensorId,
   addDeviceType,
+  goBack,
+  showPopupTurnOnGuide,
+  setHidePopupTurnOnGuide,
+  setIsRecallChipScan,
+  isChangeAddressSuccess,
 }) => {
   const { navigate } = useNavigation();
 
   const [renameParams, setRenameParams] = useState({
     unitId,
-    stationId,
-    stationName,
+    subUnit,
     chipId,
     sensorId,
     addDeviceType,
@@ -28,9 +31,9 @@ const ConnectingDevice = ({
 
   const complete = useCallback(
     (deviceInfo) => {
-      navigate(Routes.RenameNewDevices, { ...renameParams, chipId, sensorId });
+      navigate(Routes.RenameNewDevices, renameParams);
     },
-    [chipId, navigate, renameParams, sensorId]
+    [navigate, renameParams]
   );
 
   const onMessage = useCallback(
@@ -52,6 +55,15 @@ const ConnectingDevice = ({
     [setRenameParams]
   );
 
+  useEffect(() => {
+    if (!!chipId) {
+      setRenameParams((prev) => ({ ...prev, chipId }));
+    }
+    if (!!sensorId) {
+      setRenameParams((prev) => ({ ...prev, sensorId }));
+    }
+  }, [chipId, sensorId]);
+
   return (
     <Processing
       title={title}
@@ -60,6 +72,11 @@ const ConnectingDevice = ({
       complete={complete}
       onReady={onReady}
       onMessage={onMessage}
+      goBack={goBack}
+      showPopupTurnOnGuide={showPopupTurnOnGuide}
+      setHidePopupTurnOnGuide={setHidePopupTurnOnGuide}
+      setIsRecallChipScan={setIsRecallChipScan}
+      isChangeAddressSuccess={isChangeAddressSuccess}
     />
   );
 };

package/src/screens/AddNewGateway/ConnectingModbusDevice.js

@@ -1,50 +1,68 @@
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useState } from 'react';
-import { Alert } from 'react-native';
+import React, { useCallback, useEffect, useState } from 'react';
 import API from '../../configs/API';
+import { useBoolean } from '../../hooks/Common';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosPost } from '../../utils/Apis/axios';
+import { getPusher } from '../../utils/Pusher';
 import ConnectingDevice from './ConnectingDevice';
 
 const ConnectingModbusDevice = ({ route }) => {
   const t = useTranslations();
-  const { unitId, stationId, stationName, chipId, qrData } =
-    route?.params || {};
+  const { unitId, subUnit, chipId, qrData } = route?.params || {};
   const [sensorId, setSensorId] = useState(null);
+  const [channelNameTemp, setChannelNameTemp] = useState('');
+  const [isChangeAddressSuccess, setIsChangeAddressSuccess] = useState(false);
+  const [isRecallChipScan, setIsRecallChipScan] = useState(false);
+  const [
+    showPopupTurnOnGuide,
+    setShowPopupTurnOnGuide,
+    setHidePopupTurnOnGuide,
+  ] = useBoolean();
+
   const { goBack } = useNavigation();
 
-  const addingModbusDeviceFail = useCallback(
-    (message) => {
-      Alert.alert(t('fail_add_modbus_device'), message, [
-        {
-          text: t('ok'),
-          onPress: goBack,
-        },
-      ]);
-    },
-    [goBack, t]
-  );
+  const addingModbusDeviceFail = useCallback(async (message, channelName) => {
+    const channel = getPusher().subscribe(channelName);
+    channel.bind('change_modbus_address_completed', (messageRes) => {
+      setIsChangeAddressSuccess(messageRes.success);
+    });
+  }, []);
 
   const onReady = useCallback(
     async (channelName) => {
+      setChannelNameTemp(channelName);
       const { success, problem, data } = await axiosPost(
         API.CHIP.SCAN_SENSOR(chipId),
         {
           imei: qrData.imei,
           unit: unitId,
-          station: stationId,
+          station: subUnit?.id,
           channel_name: channelName,
         }
       );
       if (!success) {
-        addingModbusDeviceFail(JSON.stringify(problem || data));
+        addingModbusDeviceFail(JSON.stringify(problem || data), channelName);
         return;
       }
       setSensorId(data.id);
     },
-    [chipId, addingModbusDeviceFail, qrData, stationId, unitId]
+    [chipId, addingModbusDeviceFail, qrData, subUnit, unitId]
   );
 
+  useEffect(() => {
+    if (isChangeAddressSuccess && channelNameTemp) {
+      setShowPopupTurnOnGuide();
+      getPusher().unsubscribe(channelNameTemp);
+    }
+  }, [isChangeAddressSuccess, channelNameTemp, setShowPopupTurnOnGuide]);
+
+  useEffect(() => {
+    if (isRecallChipScan && channelNameTemp) {
+      onReady(channelNameTemp);
+    }
+  }, [isRecallChipScan, channelNameTemp, onReady]);
+
   return (
     <ConnectingDevice
       title={t('connect_device')}
@@ -52,10 +70,14 @@ const ConnectingModbusDevice = ({ route }) => {
       onReady={onReady}
       fail={addingModbusDeviceFail}
       unitId={unitId}
-      stationId={stationId}
-      stationName={stationName}
+      subUnit={subUnit}
       chipId={chipId}
       sensorId={sensorId}
+      goBack={goBack}
+      showPopupTurnOnGuide={showPopupTurnOnGuide}
+      setHidePopupTurnOnGuide={setHidePopupTurnOnGuide}
+      setIsRecallChipScan={setIsRecallChipScan}
+      isChangeAddressSuccess={isChangeAddressSuccess}
     />
   );
 };