@eohjsc/react-native-smart-city 0.3.68 → 0.3.70

package/src/commons/DevMode/CardDevMode.js

@@ -1,42 +1,18 @@
 import React, { memo } from 'react';
 import { View } from 'react-native';
 import Text from '../Text';
-import { useSCContextSelector } from '../../context';
-import t from '../../hooks/Common/useTranslations';
 import styles from './Styles/CardStyles';
 
-const CardDevMode = ({
-  title = t('label'),
-  children,
-  style,
-  rightHeaderComponent,
-  id,
-  isWrap,
-}) => {
-  const { itemDraggingId, isEditingTemplate, isInEditTemplateScreen } =
-    useSCContextSelector((state) => state.devMode);
-
-  if (isEditingTemplate || isWrap) {
-    return (
-      <View
-        style={[
-          styles.card,
-          isEditingTemplate && styles.isEditingTemplate,
-          style,
-          id === itemDraggingId && styles.activeCard,
-        ]}
-      >
-        <View style={styles.headerTitle}>
-          <Text style={styles.headerLeft}>{title}</Text>
-          {!!rightHeaderComponent && rightHeaderComponent}
-        </View>
-        {children}
-        {/* // NOTE: For user can not control sensor at EditTemplateScreen */}
-        {isInEditTemplateScreen && <View style={styles.editing} />}
+const CardDevMode = ({ title = '', children, rightHeaderComponent }) => {
+  return (
+    <View style={styles.card}>
+      <View style={styles.headerTitle}>
+        {!!title && <Text style={styles.headerLeft}>{title}</Text>}
+        {!!rightHeaderComponent && rightHeaderComponent}
       </View>
-    );
-  }
-  return children;
+      {children}
+    </View>
+  );
 };
 
 export default memo(CardDevMode);

package/src/commons/DevMode/Styles/CardStyles.js

@@ -3,6 +3,9 @@ import { Colors } from '../../../configs';
 
 export default StyleSheet.create({
   card: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     marginVertical: 14,
     marginHorizontal: 16,
     padding: 16,

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

@@ -11,6 +11,6 @@ export default StyleSheet.create({
     justifyContent: 'center',
   },
   wrap: {
-    marginVertical: 16,
+    marginBottom: 16,
   },
 });

package/src/commons/Device/RainningSensor/CurrentRainSensor.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
@@ -7,6 +7,7 @@ import { CircleView } from '../../../commons';
 import Text from '../../../commons/Text';
 import IconRain from '../../../../assets/images/Device/rain.svg';
 import IconSunny from '../../../../assets/images/Device/sunny.svg';
+import IconSunnyBlack from '../../../../assets/images/Device/inactive-icon.svg';
 
 const CurrentRainSensor = memo(({ data = [] }) => {
   const item = data.length
@@ -14,9 +15,17 @@ const CurrentRainSensor = memo(({ data = [] }) => {
     : {
         evaluate: {},
       };
-  const { text, raining, backgroundColor, borderColor } = item.evaluate
-    ? item.evaluate
-    : {};
+  const { text, raining, backgroundColor, borderColor } = item.evaluate || {};
+  const renderIcon = useMemo(() => {
+    let icon = <IconSunny />;
+    if (raining) {
+      icon = <IconRain />;
+    } else {
+      const isOn = String(text)?.toLowerCase() === 'on';
+      icon = isOn ? <IconSunny /> : <IconSunnyBlack width={32} height={32} />;
+    }
+    return icon;
+  }, [raining, text]);
 
   return (
     <View style={styles.standard}>
@@ -33,8 +42,7 @@ const CurrentRainSensor = memo(({ data = [] }) => {
           start={{ x: 1, y: 0 }}
           end={{ x: 1, y: 1 }}
         />
-        {raining ? <IconRain /> : <IconSunny />}
-        {/* TODO: change this to general icon */}
+        {renderIcon}
         <Text style={styles.text}>{text}</Text>
       </CircleView>
     </View>
@@ -46,8 +54,8 @@ export default CurrentRainSensor;
 const styles = StyleSheet.create({
   standard: {
     flexDirection: 'row',
-    marginTop: 16,
     justifyContent: 'center',
+    marginBottom: 16,
   },
   flatlistContent: {
     paddingHorizontal: 16,

package/src/commons/Device/WindDirection/Compass/index.js

@@ -598,5 +598,6 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     backgroundColor: Colors.White,
+    marginBottom: 16,
   },
 });

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

@@ -1,4 +1,4 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import Svg, { Path, Text, Circle } from 'react-native-svg';
 import { View, StyleSheet } from 'react-native';
 
@@ -13,7 +13,6 @@ const { PI } = Math;
 const Anemometer = memo(
   ({
     data = [],
-    maxValue,
     width = 240,
     size = 170,
     strokeWidth = 16,
@@ -21,12 +20,17 @@ const Anemometer = memo(
     startAngle = -45,
     endAngle = 225,
     txtColor = Colors.Gray8,
+    item,
   }) => {
     const center = {
       x: size / 2,
       y: size / 2,
     };
 
+    const maxValue = useMemo(() => {
+      return Number(item?.configuration?.max_value) || 60;
+    }, [item?.configuration?.max_value]);
+
     const value = data.length ? data[0].value : 0;
     const measure = data.length ? data[0].measure : 'm/s';
 

package/src/commons/IconComponent/index.js

@@ -13,6 +13,8 @@ const IconComponent = memo(
     iconSize = 30,
     style,
     color,
+    colorInActive,
+    active,
   }) => {
     let extraStyle = {
       width: size,
@@ -45,6 +47,13 @@ const IconComponent = memo(
       return isUrl !== null;
     }, [icon]);
 
+    const colorIcon = useMemo(() => {
+      if (isSendingCommand || !active) {
+        return colorInActive || Colors.TextGray;
+      }
+      return color || Colors.Green7;
+    }, [active, color, colorInActive, isSendingCommand]);
+
     if (!icon) {
       return null;
     }
@@ -59,16 +68,21 @@ const IconComponent = memo(
       return (
         <IconFill
           name={displayIcon}
-          color={isSendingCommand ? Colors.TextGray : color || Colors.Green7}
+          color={colorIcon}
           size={iconSize}
           style={[extraStyle, style]}
         />
       );
     } else {
+      const textLowercase = displayIcon?.toLowerCase();
+      const iconCT =
+        textLowercase === 'on' || textLowercase === 'off'
+          ? 'poweroff'
+          : displayIcon;
       return (
         <IconOutline
-          name={displayIcon}
-          color={isSendingCommand ? Colors.TextGray : color || Colors.Green7}
+          name={iconCT}
+          color={colorIcon}
           size={iconSize}
           style={[extraStyle, style]}
         />

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

@@ -6,10 +6,23 @@ import { Text } from 'react-native';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { getPusher } from '../../../utils/Pusher';
+import ViewButtonBottom from '../../ViewButtonBottom';
 
-const wrapComponent = ({ onReady, onMessage }) => (
+const wrapComponent = ({
+  onReady,
+  onMessage,
+  setHidePopupTurnOnGuide,
+  setIsRecallChipScan,
+  isChangeAddressSuccess,
+}) => (
   <SCProvider initState={mockSCStore({})}>
-    <Processing onReady={onReady} onMessage={onMessage} />
+    <Processing
+      onReady={onReady}
+      onMessage={onMessage}
+      setHidePopupTurnOnGuide={setHidePopupTurnOnGuide}
+      setIsRecallChipScan={setIsRecallChipScan}
+      isChangeAddressSuccess={isChangeAddressSuccess}
+    />
   </SCProvider>
 );
 describe('Test Processing', () => {
@@ -74,4 +87,27 @@ describe('Test Processing', () => {
     });
     expect(getPusher().unsubscribe).toBeCalledWith(channelName);
   });
+
+  it('test click ok', async () => {
+    const mockSetHidePopupTurnOnGuide = jest.fn();
+    const mockSetIsRecallChipScan = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent({
+          onReady: setChannelName,
+          setHidePopupTurnOnGuide: mockSetHidePopupTurnOnGuide,
+          setIsRecallChipScan: mockSetIsRecallChipScan,
+          isChangeAddressSuccess: true,
+        })
+      );
+    });
+
+    const viewButtonBottom = tree.root.findByType(ViewButtonBottom);
+    await act(async () => {
+      tree = viewButtonBottom.props.onRightClick();
+    });
+
+    expect(mockSetHidePopupTurnOnGuide).toHaveBeenCalled();
+    expect(mockSetIsRecallChipScan).toHaveBeenCalledWith(true);
+  });
 });

package/src/commons/Processing/index.js

@@ -1,7 +1,6 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import * as Progress from 'react-native-progress';
-import uuid from 'uuid';
 
 import Text from '../Text';
 import { HeaderCustom } from '../Header';
@@ -24,11 +23,9 @@ const Processing = ({
   setHidePopupTurnOnGuide,
   setIsRecallChipScan,
   isChangeAddressSuccess,
+  channelName,
 }) => {
   const t = useTranslations();
-  const channelName = useMemo(() => {
-    return 'cache-' + uuid.v4();
-  }, []);
 
   // eslint-disable-next-line no-unused-vars
   const [state, setState] = useState(initState);
@@ -81,7 +78,6 @@ const Processing = ({
     channel.bind('progress', (message) => {
       processMessage(channel, message);
     });
-
     return () => {
       getPusher().unsubscribe(channelName);
     };

package/src/context/reducer.ts

@@ -14,7 +14,7 @@ import {
   DevModeType,
   BluetoothType,
 } from './actionType';
-import { uniq, reduce } from 'lodash';
+import _ from 'lodash';
 import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
 
 export type ContextData = {
@@ -257,7 +257,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
         ...currentState,
         unit: {
           ...currentState.unit,
-          favoriteDeviceIds: uniq(
+          favoriteDeviceIds: _.uniq(
             currentState.unit.favoriteDeviceIds.concat(payload)
           ),
         },
@@ -286,7 +286,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
         ...currentState,
         automate: {
           ...currentState.automate,
-          starredScriptIds: uniq(
+          starredScriptIds: _.uniq(
             currentState.automate.starredScriptIds.concat(payload)
           ),
         },
@@ -374,6 +374,8 @@ export const reducer = (currentState: ContextData, action: Action) => {
     case Action.SET_DEVICES_STATUS:
       // eslint-disable-next-line no-case-declarations
       let newStatuses = currentState.iot.internet.statuses;
+      // eslint-disable-next-line no-case-declarations
+      let currentStatus = { ...newStatuses };
       (payload || []).map(
         (i) =>
           (newStatuses[i.id] = {
@@ -381,6 +383,9 @@ export const reducer = (currentState: ContextData, action: Action) => {
             isConnected: i.is_connected,
           })
       );
+      if (_.isEqual(newStatuses, currentStatus)) {
+        return currentState;
+      }
       return {
         ...currentState,
         iot: {
@@ -401,7 +406,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           currentState.fetchedValueEvaluationUnits.indexOf(unitId) !== -1
             ? currentState.fetchedValueEvaluationUnits
             : [...currentState.fetchedValueEvaluationUnits, unitId],
-        valueEvaluations: reduce(
+        valueEvaluations: _.reduce(
           data,
           (dict, item) => {
             dict[item.config] = item;

package/src/screens/AddNewGateway/ConnectingDevice.js

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { Alert } from 'react-native';
+import uuid from 'uuid';
 
 import Processing from '../../commons/Processing';
 import Routes from '../../utils/Route';
@@ -41,6 +42,14 @@ const ConnectingDevice = ({
     [navigate, renameParams]
   );
 
+  const channelName = useMemo(() => {
+    return 'cache-' + uuid.v4();
+  }, []);
+
+  const onPressContinue = useCallback(() => {
+    onReady && onReady(channelName);
+  }, [channelName, onReady]);
+
   useEffect(() => {
     timeout = setTimeout(() => {
       Alert.alert(t('continue_to_wait'), t('it_has_been_5_minutes'), [
@@ -50,13 +59,14 @@ const ConnectingDevice = ({
         },
         {
           text: t('continue'),
+          onPress: onPressContinue,
         },
       ]);
-    }, 300 * 1000); // when test, it takes more than 3 min
+    }, 120 * 1000); // when test, it takes more than 3 min
     return () => {
       clearTimeout(timeout);
     };
-  }, [fail, goBack, t]);
+  }, [fail, goBack, onPressContinue, t]);
 
   const onMessage = useCallback(
     (data) => {
@@ -99,6 +109,7 @@ const ConnectingDevice = ({
       setHidePopupTurnOnGuide={setHidePopupTurnOnGuide}
       setIsRecallChipScan={setIsRecallChipScan}
       isChangeAddressSuccess={isChangeAddressSuccess}
+      channelName={channelName}
     />
   );
 };

package/src/screens/AllGateway/DetailConfigActionInternal/index.js

@@ -60,7 +60,7 @@ const DetailConfigActionInternal = () => {
         {
           id: 3,
           title: 'default_value',
-          data: itemActionConfig?.default_value || '--',
+          data: itemActionConfig?.value >= 0 ? itemActionConfig?.value : '--',
         },
       ];
     }

package/src/screens/AllGateway/DetailConfigActionModbus/index.js

@@ -21,7 +21,7 @@ const DetailConfigActionModbus = () => {
   } = params;
 
   const sa = useMemo(() => {
-    if (itemActionConfig?.sa1 && itemActionConfig?.sa2) {
+    if (itemActionConfig?.sa1 >= 0 && itemActionConfig?.sa2 >= 0) {
       return calculateStartAddress(
         itemActionConfig?.sa1,
         itemActionConfig?.sa2
@@ -31,7 +31,7 @@ const DetailConfigActionModbus = () => {
   }, [itemActionConfig?.sa1, itemActionConfig?.sa2]);
 
   const len = useMemo(() => {
-    if (itemActionConfig?.len1 && itemActionConfig?.len2) {
+    if (itemActionConfig?.len1 >= 0 && itemActionConfig?.len2 >= 0) {
       return calculateLength(itemActionConfig?.len1, itemActionConfig?.len2);
     }
     return '--';

package/src/screens/AllGateway/DetailConfigActionZigbee/index.js

@@ -23,18 +23,18 @@ const DetailConfigActionZigbee = () => {
         id: 2,
         title: (isConfig && 'key') || (isAction && 'control_payload') || '',
         data:
-          (isConfig && itemActionConfig?.config?.key) ||
-          (isAction && itemActionConfig?.action?.control_payload) ||
+          (isConfig && itemActionConfig?.key) ||
+          (isAction && itemActionConfig?.control_payload) ||
           '--',
       },
     ],
     [
       isAction,
       isConfig,
-      itemActionConfig?.action?.control_payload,
       itemActionConfig?.action?.name,
-      itemActionConfig?.config?.key,
       itemActionConfig?.config?.name,
+      itemActionConfig?.control_payload,
+      itemActionConfig?.key,
     ]
   );
 

package/src/screens/AllGateway/DeviceGatewayInfo/__test__/index.test.js

@@ -39,6 +39,7 @@ describe('Test DeviceGatewayInfo', () => {
           ieee_address: '1111',
           model_name: '1111',
           sensor: { name: 'sensor', connection_time: 30 },
+          used_pins: [{ pin_number: 1 }, { pin_number: 2 }],
         },
         isZigbee: true,
         isModbus: false,
@@ -59,6 +60,7 @@ describe('Test DeviceGatewayInfo', () => {
           delay: 0,
           index: '1',
           sensor: { name: 'sensor', connection_time: 30 },
+          used_pins: [{ pin_number: 1 }, { pin_number: 2 }],
         },
         isZigbee: false,
         isModbus: true,

package/src/screens/AllGateway/DeviceGatewayInfo/index.js

@@ -2,11 +2,20 @@ import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 import { useRoute } from '@react-navigation/native';
 
-import t from '../../../hooks/Common/useTranslations';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './styles';
 import Information from '../components/Information';
 
+const formatArrayUsedPin = (used_pins) => {
+  let strArray = used_pins[0]?.pin_number;
+  for (let i = 1; i < used_pins?.length; i++) {
+    strArray += ', ' + used_pins[i]?.pin_number;
+  }
+  return strArray;
+};
+
 const DeviceGatewayInfo = () => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const {
     device = {},
@@ -35,10 +44,10 @@ const DeviceGatewayInfo = () => {
       {
         id: 2,
         title: 'used_pin',
-        data: used_pins?.join(','),
+        data: used_pins?.length ? formatArrayUsedPin(used_pins) : t('no_data'),
       },
     ],
-    [name, used_pins]
+    [name, t, used_pins]
   );
 
   const deviceInformationZigbee = useMemo(

package/src/screens/AllGateway/DeviceInternalDetail/__test__/index.test.js

@@ -69,14 +69,14 @@ describe('Test DeviceInternalDetail', () => {
   const listConfigReads = [
     {
       id: 1,
-      config: { name: 'config1' },
+      config: { name: 'config1', is_write: false, is_read: true },
       value_type: 'boolean',
       pin_number: 0,
       pin_mode: 'input',
     },
     {
       id: 2,
-      config: { name: 'config2' },
+      config: { name: 'config2', is_write: false, is_read: true },
       value_type: 'integer',
       pin_number: 0,
       pin_mode: 'input',
@@ -85,14 +85,14 @@ describe('Test DeviceInternalDetail', () => {
   const listConfigWrites = [
     {
       id: 1,
-      config: { name: 'config1' },
+      config: { name: 'config1', is_write: true, is_read: false },
       value_type: 'boolean',
       pin_number: 0,
       pin_mode: 'output',
     },
     {
       id: 2,
-      config: { name: 'config2' },
+      config: { name: 'config2', is_write: true, is_read: true },
       value_type: 'integer',
       pin_number: 0,
       pin_mode: 'output',

package/src/screens/AllGateway/components/GatewayItem/index.js

@@ -13,11 +13,6 @@ const GatewayItem = ({ item, onPress }) => {
             {item?.name}
           </Text>
         </View>
-        <View style={styles.viewValue}>
-          <Text type="Body" color={Colors.Gray20} style={styles.textValue}>
-            {`${item?.last_healthy?.signal || '--'} dBm`}
-          </Text>
-        </View>
         <StatusBox status={item?.is_connected} />
       </TouchableOpacity>
     </View>

package/src/screens/AllGateway/components/GatewayItem/styles.js

@@ -19,17 +19,11 @@ export default StyleSheet.create({
   viewTitle: {
     marginBottom: 6,
   },
-  viewValue: {
-    marginBottom: 6,
-  },
   textTitle: {
     lineHeight: 20,
     height: 40,
     fontWeight: '600',
   },
-  textValue: {
-    fontWeight: '400',
-  },
   borderDisconnect: {
     borderColor: Colors.Red10,
     borderWidth: 1,

package/src/screens/AllGateway/hooks/useGateway.js

@@ -6,10 +6,6 @@ import { axiosGet, axiosDelete, axiosPost } from '../../../utils/Apis/axios';
 import API from '../../../configs/API';
 import t from '../../../hooks/Common/useTranslations';
 
-const WRITE_PIN_MODE = ['output', 'open_drain', 'pwm'];
-
-const READ_PIN_MODE = ['input', 'input_pull_up', 'input_pull_down', 'analog'];
-
 export const useGateway = () => {
   const navigation = useNavigation();
   const [refresh, setRefresh] = useState(false);
@@ -68,12 +64,8 @@ export const useGateway = () => {
           API.DEV_MODE.ARDUINO.CONFIG_PINS(gatewayId, deviceId)
         );
         if (success) {
-          const config_read = data?.filter((item) =>
-            READ_PIN_MODE.includes(item?.pin_mode)
-          );
-          const config_write = data?.filter((item) =>
-            WRITE_PIN_MODE.includes(item?.pin_mode)
-          );
+          const config_read = data?.filter((item) => item?.config?.is_read);
+          const config_write = data?.filter((item) => item?.config?.is_write);
           setDetailDeviceInternal((prev) => ({
             ...prev,
             config_read,

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

@@ -581,7 +581,6 @@ describe('test DeviceDetail', () => {
             id: 170,
             order: 1,
             template: 'value',
-            type: 'value',
             configuration: {
               type: 'circle',
               configs: [