@eohjsc/react-native-smart-city 0.3.55 → 0.3.57

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.55",
+  "version": "0.3.57",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -64,9 +64,9 @@
   "license": "MIT",
   "licenseFilename": "LICENSE",
   "peerDependencies": {
+    "@react-native-community/clipboard": "*",
     "react": "*",
-    "react-native": "*",
-    "@react-native-community/clipboard": "*"
+    "react-native": "*"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -136,7 +136,7 @@
     "i18n-js": "^3.7.1",
     "i18next": "^20.1.0",
     "lodash": "^4.17.19",
-    "lottie-react-native": "^5.1.4",
+    "lottie-react-native": "4.0.3",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
     "numeral": "^2.0.6",

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -13,7 +13,7 @@ import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
-const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
+export const WheelColorPicker = ({ color, onChangeColorComplete, onStart }) => {
   const regex = /^#([0-9a-f]{3}){1,2}$/i;
   const isCheckHex = regex.test(color);
   // check crash if valueColor value wrong

package/src/commons/ActionGroup/OnOffSmartLock/PasscodeList/__test__/index.test.js

@@ -6,6 +6,7 @@ import { AccessibilityLabel } from '../../../../../configs/Constants';
 import { SCProvider } from '../../../../../context';
 import PasscodeList from '../index';
 import { TouchableOpacity } from 'react-native';
+import Routes from '../../../../../utils/Route';
 
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => {
@@ -43,5 +44,15 @@ describe('Test SetupGeneratePasscode', () => {
     );
 
     expect(passcode_list).toHaveLength(3);
+
+    await act(async () => {
+      await passcode_list[0].props.onPress();
+    });
+    expect(mockNavigate).toBeCalledWith(Routes.SmartLockStack, {
+      screen: Routes.ItemPasscode,
+      params: {
+        item: { code: 123361, name: 'Do Loi' },
+      },
+    });
   });
 });

package/src/commons/ActionGroup/SmartTiviActionTemplate/SmartTiviActionTemplate.js

@@ -70,8 +70,6 @@ const SmartTiviActionTemplate = memo(
           case SMART_TIVI_BUTTON.BACK_BUTTON:
           case SMART_TIVI_BUTTON.CHANNEL_BUTTON:
             return notImplemented(t);
-          default:
-            return <></>;
         }
       },
       [t]
@@ -86,8 +84,6 @@ const SmartTiviActionTemplate = memo(
           return <Netflix style={styles.iconChannel} />;
         case 'spotify':
           return <Spotify style={styles.iconChannel} />;
-        default:
-          return <></>;
       }
     }, []);
     return (

package/src/commons/ActionGroup/SmartTiviActionTemplate/__test__/RectangleButton.test.js

@@ -111,4 +111,17 @@ describe('Test RectangleButton', () => {
       RectangleButtonDown.props.onPress();
     });
   });
+
+  it('render type not handle', async () => {
+    type = 'not-handle';
+    const mockOnPress = jest.fn();
+    await act(async () => {
+      wrapper = await create(
+        wrapComponent(type, mockOnPress, mockOnPress, mockOnPress)
+      );
+    });
+    const instance = wrapper.root;
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(0);
+  });
 });

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

@@ -2,10 +2,22 @@ import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import ColorPickerTemplate from '../ColorPickerTemplate';
+import { WheelColorPicker } from '../ColorPickerTemplate';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
 import ColorPicker from 'react-native-wheel-color-picker';
+import { DEVICE_TYPE } from '../../../configs/Constants';
+
+const mockSetAction = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      setAction: mockSetAction,
+    }),
+  };
+});
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -46,6 +58,7 @@ describe('Test ColorPickerTemplate', () => {
       },
       title: '',
     };
+    mockSetAction.mockClear();
   });
 
   it('render template ColorPickerTemplate', async () => {
@@ -58,10 +71,50 @@ describe('Test ColorPickerTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const picker = instance.findAllByType(ColorPicker);
-    expect(picker).toHaveLength(1);
+    const pickers = instance.findAllByType(ColorPicker);
+    expect(pickers).toHaveLength(1);
+    expect(pickers[0].props.color).toEqual('#ffffff');
+    await act(async () => {
+      await pickers[0].props.onColorChangeComplete();
+    });
+  });
+
+  it('render template ColorPickerTemplate config value not null', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 3093151,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+      device_type: DEVICE_TYPE.LG_THINQ,
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const pickers = instance.findAllByType(ColorPicker);
+    expect(pickers[0].props.color).toEqual(`#${3093151?.toString(16)}`);
+  });
+
+  it('test WheelColorPicker onStartPick set global state lock view', async () => {
+    const sensor = {
+      is_managed_by_backend: true,
+      name: 'Sensor',
+      device_type: DEVICE_TYPE.LG_THINQ,
+    };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const wheelpicker = instance.findByType(WheelColorPicker);
     await act(async () => {
-      await picker[0].props.onColorChangeComplete();
+      await wheelpicker.props.onStart();
     });
+    expect(mockSetAction).toBeCalled();
   });
 });

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

@@ -85,4 +85,22 @@ describe('Test SliderRangeTemplate', () => {
       JSON.stringify({ value_brness: 50 })
     );
   });
+
+  it('render template SliderRangeTemplate with config value not null', async () => {
+    useConfigGlobalState.mockImplementation(() => [
+      {
+        5: {
+          value: 50,
+        },
+      },
+      jest.fn(),
+    ]);
+    const sensor = { is_managed_by_backend: true, name: 'Sensor' };
+    await act(async () => {
+      wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = wrapper.root;
+    const silderRange = instance.findByType(SliderRange);
+    expect(silderRange.props.value).toBe(50);
+  });
 });

package/src/commons/ActionTemplate/__test__/index.test.js

@@ -62,6 +62,28 @@ describe('Test ActionTemplate', () => {
         action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
       },
     },
+    {
+      title: '',
+      template: 'curtain_action_template',
+      configuration: {
+        open_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        close_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        stop_action: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        text1: 'One',
+        text2: 'Two',
+        text3: 'Three',
+      },
+    },
+    {
+      title: '',
+      template: 'OnOffSmartLockActionTemplate',
+      configuration: {
+        action_on: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        action_off: '94ae262d-46e3-42ff-9d10-516831ecc830',
+        text_on: 'on',
+        text_off: 'off',
+      },
+    },
   ];
   it('test onPress SelectActionCard', async () => {
     await act(async () => {

package/src/commons/Device/HorizontalBarChart.js

@@ -126,6 +126,8 @@ const HorizontalBarChart = memo(({ datas, config }) => {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });
     }
 
+    const isAllZero = dataY.every((item) => item.y === 0);
+
     setChartOptions((options) => ({
       ...options,
       chart: {
@@ -135,6 +137,10 @@ const HorizontalBarChart = memo(({ datas, config }) => {
         ...options.xAxis,
         categories: dataX,
       },
+      yAxis: {
+        ...options.yAxis,
+        minRange: isAllZero ? 0.5 : 0,
+      },
       series: [
         {
           name: JSON.stringify(config),

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

@@ -17,6 +17,7 @@ const CurrentRainSensor = memo(({ data = [] }) => {
   const { text, raining, backgroundColor, borderColor } = item.evaluate
     ? item.evaluate
     : {};
+
   return (
     <View style={styles.standard}>
       <CircleView

package/src/screens/AddNewGateway/ConnectingWifiDevice.js

@@ -71,11 +71,7 @@ const ConnectingWifiDevice = ({ route }) => {
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
-      if (
-        state.isConnected &&
-        state.details?.ssid === selectedWifi.ssid &&
-        channelName
-      ) {
+      if (state.isConnected && channelName) {
         onReady(channelName);
       }
     });

package/src/screens/AddNewGateway/ConnectingWifiGuide.js

@@ -53,7 +53,7 @@ const ConnectingWifiGuide = ({ route }) => {
       },
       {
         text: t('retry'),
-        onPress: connectToDeviceWifi,
+        onPress: () => connectToDeviceWifi(),
       },
     ],
     [connectToDeviceWifi, goBack, t]
@@ -104,7 +104,7 @@ const ConnectingWifiGuide = ({ route }) => {
       if (!wifi) {
         phoneWifiList = null;
         Alert.alert(
-          t('fail_to_discover_device_wifi'),
+          t('cannot_find_device_wifi'),
           t('try_to_turn_on_device_or_try_again'),
           buttons
         );

package/src/screens/AddNewGateway/__test__/ConnectingWifiGuide.test.js

@@ -138,9 +138,7 @@ describe('test share wifi password', () => {
       tree = await renderer.create(wrapComponent(route));
     });
     await ConnectWifiActionButton(tree.root);
-    expect(Alert.alert.mock.calls[0][0]).toEqual(
-      'Fail to discover device wifi'
-    );
+    expect(Alert.alert.mock.calls[0][0]).toEqual("Cannot find Device's Wifi");
     expect(Alert.alert.mock.calls[0][1]).toEqual(
       'Try to turn on device or Try again'
     );
@@ -153,7 +151,7 @@ describe('test share wifi password', () => {
   it('fail connect to wifi android show error push retry', async () => {
     jest.spyOn(Alert, 'alert');
     Alert.alert(
-      'Fail to discover device wifi',
+      "Cannot find Device's Wifi",
       'Try to turn on device or Try again',
       [
         { text: 'Cancel', onPress: mockedGoBack },
@@ -175,9 +173,7 @@ describe('test share wifi password', () => {
       tree = await renderer.create(wrapComponent(route));
     });
     await ConnectWifiActionButton(tree.root);
-    expect(Alert.alert.mock.calls[1][0]).toEqual(
-      'Fail to discover device wifi'
-    );
+    expect(Alert.alert.mock.calls[1][0]).toEqual("Cannot find Device's Wifi");
     expect(Alert.alert.mock.calls[1][1]).toEqual(
       'Try to turn on device or Try again'
     );

package/src/screens/Device/components/SensorDisplayItem.js

@@ -41,7 +41,7 @@ export const SensorDisplayItem = ({
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
   const { configuration = {}, id: idTemplate } = item;
-  const { type, uri, id, name, title } = configuration;
+  const { type, template, uri, id, name, title } = configuration;
 
   const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
 
@@ -94,7 +94,7 @@ export const SensorDisplayItem = ({
     case 'history':
       return <DetailHistoryChart item={item} sensor={sensor} />;
     case 'value':
-      switch (type) {
+      switch (type || template) {
         case 'circle':
           return (
             <CardDevMode id={idTemplate}>

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

@@ -56,7 +56,7 @@ const evaluateBoolean = (value, configuration) => {
   return { text: value };
 };
 
-const valueEvaluationFuncs = {
+export const valueEvaluationFuncs = {
   range: evaluateRange,
   boolean: evaluateBoolean,
 };

package/src/screens/Template/detail.js

@@ -20,6 +20,8 @@ import Routes from '../../utils/Route';
 import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
 import { axiosGet } from '../../utils/Apis/axios';
 import { watchMultiConfigs } from '../../iot/Monitor';
+import { useConfigGlobalState } from '../../iot/states';
+import { evaluateValue } from './utils/ValueEvaluation';
 
 const TemplateDetail = () => {
   const refMenuAction = useRef();
@@ -31,6 +33,9 @@ const TemplateDetail = () => {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  // eslint-disable-next-line no-unused-vars
+  const [configValues, setConfigValues] = useConfigGlobalState('configValues');
+
   const listIds = useMemo(() => {
     const configIds = [];
     // eslint-disable-next-line no-shadow
@@ -45,7 +50,7 @@ const TemplateDetail = () => {
           configIds.push(item?.configuration?.configuration?.config);
       }
     });
-    return configIds;
+    return configIds.filter((id) => id);
   }, [data]);
 
   // eslint-disable-next-line no-shadow
@@ -136,6 +141,32 @@ const TemplateDetail = () => {
     listIds.length && watchMultiConfigs(listIds);
   }, [listIds]);
 
+  const getData = useCallback(
+    (_item) => {
+      if (!_item.configuration) {
+        return;
+      }
+
+      const _data = _item?.configuration?.configs.map((config) => {
+        const configValue = configValues[config.id]?.value;
+        if ([null, undefined, NaN].includes(configValue)) {
+          return;
+        }
+        const value = {
+          id: config.id,
+          value: configValue,
+          evaluate: evaluateValue(
+            configValue,
+            _item?.configuration?.value_evaluation
+          ),
+        };
+        return { ...config, ...value };
+      });
+      return _data.filter((value) => value);
+    },
+    [configValues]
+  );
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -152,7 +183,7 @@ const TemplateDetail = () => {
               return (
                 <SensorDisplayItem
                   item={item}
-                  getData={() => {}}
+                  getData={getData}
                   offsetTitle={'offsetTitle'}
                   setOffsetTitle={'setOffsetTitle'}
                   maxValue={100}

package/src/screens/Template/utils/ValueEvaluation.js

@@ -0,0 +1,18 @@
+import { valueEvaluationFuncs } from '../../Device/hooks/useEvaluateValue';
+
+export const evaluateValue = (value, valueEvaluation) => {
+  if (!valueEvaluation) {
+    return { text: value };
+  }
+
+  const evaluateFunc = valueEvaluationFuncs[valueEvaluation.template];
+  if (!evaluateFunc) {
+    return { text: value };
+  }
+
+  try {
+    return evaluateFunc(value, valueEvaluation.configuration);
+  } catch (e) {
+    return { text: value };
+  }
+};

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

@@ -1100,5 +1100,6 @@
   "text_under_development": "This feature is under development.",
   "text_working_hard": "We are working hard to get this running",
   "photo_request_permission": "Photo request permission",
+  "cannot_find_device_wifi": "Cannot find Device's Wifi",
   "photo_request_permission_des": "To select photo from gallery, please unlock access photo permission"
 }

package/src/utils/I18n/translations/vi.json

@@ -1099,5 +1099,6 @@
   "text_under_development": "Tính năng này đang được phát triển.",
   "text_working_hard": "Chúng tôi đang làm việc chăm chỉ để làm cho điều này hoạt động",
   "photo_request_permission": "Quyền yêu cầu ảnh",
+  "cannot_find_device_wifi": "Không thể tìm thấy Wifi của thiết bị",
   "photo_request_permission_des": "Để chọn ảnh từ thư viện, vui lòng mở khóa quyền truy cập ảnh"
 }