@eohjsc/react-native-smart-city 0.2.95 → 0.2.98

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.2.95",
+  "version": "0.2.98",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -81,10 +81,11 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-native": "^3.10.0",
     "factory-girl": "^5.0.4",
+    "husky": "^8.0.1",
     "jest": "^26.6.3",
     "jest-circus": "^26.6.3",
     "jetifier": "^1.6.6",
-    "lint-staged": "^8.2.1",
+    "lint-staged": "^12.4.1",
     "metro-react-native-babel-preset": "^0.66.2",
     "node-html-parser": "^2.0.2",
     "react": "17.0.2",
@@ -97,7 +98,8 @@
   "dependencies": {
     "@ant-design/icons-react-native": "^2.2.1",
     "@ant-design/react-native": "^4.0.5",
-    "@eohjsc/highcharts": "^1.0.6",
+    "@babel/helper-environment-visitor": "^7.16.7",
+    "@eohjsc/highcharts": "^1.0.8",
     "@eohjsc/react-native-keyboard-aware-scroll-view": "^0.9.5",
     "@formatjs/intl-getcanonicallocales": "^1.4.5",
     "@formatjs/intl-numberformat": "^5.6.2",
@@ -188,7 +190,7 @@
     "react-native-unimodules": "^0.11.0",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.39",
-    "react-native-webview": "^10.9.3",
+    "react-native-webview": "11.17.2",
     "react-native-wheel-color-picker": "^1.2.0",
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
@@ -209,5 +211,15 @@
   "bugs": {
     "url": "https://github.com/github_account/react-native-smart-city/issues"
   },
-  "homepage": "https://github.com/github_account/react-native-smart-city#readme"
+  "homepage": "https://github.com/github_account/react-native-smart-city#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js, ts}": [
+      "yarn lint"
+    ]
+  }
 }

package/src/Images/Common/member.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C13.1046 6 14 5.10457 14 4C14 2.89543 13.1046 2 12 2C10.8954 2 10 2.89543 10 4C10 5.10457 10.8954 6 12 6Z" fill="#262626"/>
+<path d="M15.89 8.11C15.5 7.72 14.83 7 13.53 7C13.32 7 12.11 7 10.99 7C8.24 6.99 6 4.75 6 2H4C4 5.16 6.11 7.84 9 8.71V22H11V16H13V22H15V10.05L18.95 14L20.36 12.59L15.89 8.11Z" fill="#262626"/>
+</svg>

package/src/Images/Common/owner.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.753 9.0184C21.753 9.66253 21.2308 10.1847 20.5867 10.1847C20.4682 10.1847 20.3559 10.1617 20.2483 10.1291L18.5961 15.808H5.15687L3.50472 10.1291C3.39711 10.1617 3.28483 10.1847 3.16633 10.1847C2.52221 10.1847 2 9.66253 2 9.0184C2 8.37428 2.52221 7.85207 3.16633 7.85207C3.81046 7.85207 4.33266 8.37428 4.33266 9.0184C4.33266 9.24732 4.26424 9.45912 4.15041 9.6392L7.88142 12.1939L8.36195 7.3196C7.78003 7.25367 7.32625 6.76567 7.32625 6.16633C7.32625 5.52221 7.84846 5 8.49258 5C9.13671 5 9.65892 5.52221 9.65892 6.16633C9.65892 6.59305 9.42752 6.96224 9.08539 7.16565L11.8765 11.7398L14.6863 7.13517C14.3743 6.92585 14.1687 6.57035 14.1687 6.16633C14.1687 5.52221 14.6909 5 15.3351 5C15.9792 5 16.5014 5.52221 16.5014 6.16633C16.5014 6.79118 16.0091 7.2969 15.392 7.32707L15.8716 12.1939L19.6026 9.6392C19.4888 9.45912 19.4203 9.24732 19.4203 9.0184C19.4203 8.37428 19.9425 7.85207 20.5867 7.85207C21.2308 7.85207 21.753 8.37428 21.753 9.0184ZM5.15782 16.6384H18.5962V18.712H5.15782V16.6384Z" fill="#262626"/>
+</svg>

package/src/commons/Action/ItemQuickAction.js

@@ -43,8 +43,9 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus, unit }) => {
   useEffect(() => {
     sensor.quick_action &&
       sensor.quick_action.config_id &&
+      sensor.device_type !== 'GOOGLE_HOME' &&
       watchMultiConfigs([sensor.quick_action.config_id]);
-  }, [sensor.quick_action]);
+  }, [sensor.quick_action, sensor?.device_type]);
 
   useEffect(() => {
     if (!sensor.quick_action) {
@@ -59,7 +60,9 @@ const ItemQuickAction = memo(({ sensor, wrapperStyle, setStatus, unit }) => {
   const userId = useSCContextSelector((state) => state?.auth.account.user.id);
   const onActionPress = useCallback(() => {
     sendRemoteCommand(sensor, action, null, userId);
-    sensor.quick_action && watchMultiConfigs([sensor.quick_action.config_id]);
+    sensor.quick_action &&
+      sensor.device_type !== 'GOOGLE_HOME' &&
+      watchMultiConfigs([sensor.quick_action.config_id]);
     setIsSendingCommand(true);
 
     if (!sensor.quick_action) {

package/src/commons/ActionGroup/ColorPickerTemplate.js

@@ -35,7 +35,7 @@ const ColorPickerTemplate = memo(({ actionGroup, doAction, sensor }) => {
   }, [configuration.config, configValues, configuration]);
 
   useEffect(() => {
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs([configuration.config]);
     }
   }, [sensor, configuration.config]);

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -39,7 +39,11 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
 
   const doActionAndWatchConfig = useCallback(
     (actionData, actionValue, actionName) => {
-      doAction(actionData, actionValue, actionName);
+      doAction(
+        actionData,
+        JSON.stringify({ temperature: actionValue }),
+        actionName
+      );
       if (!sensor?.is_managed_by_backend) {
         return;
       }
@@ -50,9 +54,17 @@ const NumberUpDownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         return;
       }
 
-      config && watchMultiConfigs([config]);
+      config &&
+        sensor.device_type !== 'GOOGLE_HOME' &&
+        watchMultiConfigs([config]);
     },
-    [config, doAction, keep_track_config, sensor.is_managed_by_backend]
+    [
+      config,
+      doAction,
+      keep_track_config,
+      sensor.is_managed_by_backend,
+      sensor.device_type,
+    ]
   );
 
   const doActionUp = useCallback(async () => {

package/src/commons/ActionGroup/OnOffSmartLock/OnOffSmartLock.js

@@ -35,7 +35,9 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
         doAction(action_off_data, JSON.stringify(dataUnlock), actionName);
       }
       if (sensor?.is_managed_by_backend) {
-        configuration.config && watchMultiConfigs([configuration.config]);
+        configuration.config &&
+          sensor.device_type !== 'GOOGLE_HOME' &&
+          watchMultiConfigs([configuration.config]);
       }
     }
   }, [
@@ -47,6 +49,7 @@ const OnOffSmartLock = memo(({ actionGroup, doAction, sensor }) => {
     sensor?.name,
     configuration,
     sensor?.is_managed_by_backend,
+    sensor?.device_type,
   ]);
 
   useEffect(() => {

package/src/commons/ActionGroup/OnOffSmartLock/SetupGeneratePasscode/index.js

@@ -180,6 +180,7 @@ const SetupGeneratePasscode = memo(() => {
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         style={styles.scrollview}
+        scrollIndicatorInsets={{ right: 1 }}
       >
         <View style={styles.wrap}>
           <ButtonWrapper

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

@@ -11,23 +11,25 @@ const OnOffSimpleTemplate = ({
   triggerAction,
   actionGroup,
   disabled,
+  valueOfSwitch,
+  checkValueOfSwitch,
 }) => {
-  const isEnabled = !!isOn;
-
   return (
     <View style={styles.wrap}>
       <View style={styles.iconAndText}>
         <IconOutline name="poweroff" size={20} style={styles.marginRight} />
         <Text type="H4">{actionGroup.title}</Text>
       </View>
-      <Switch
-        trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
-        thumbColor={isEnabled ? Colors.White : Colors.Gray6}
-        ios_backgroundColor={Colors.Gray4}
-        onValueChange={triggerAction}
-        value={isEnabled}
-        disabled={disabled}
-      />
+      {isOn !== null && (
+        <Switch
+          trackColor={{ false: Colors.Gray4, true: Colors.Primary }}
+          thumbColor={isOn ? Colors.White : Colors.Gray6}
+          ios_backgroundColor={Colors.Gray4}
+          onValueChange={triggerAction}
+          value={checkValueOfSwitch ? !!isOn : valueOfSwitch}
+          disabled={disabled}
+        />
+      )}
     </View>
   );
 };

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

@@ -1,10 +1,19 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import { useConfigGlobalState } from '../../../iot/states';
 import OnOffButtonTemplate from './OnOffButtonTemplate';
 import OnOffSimpleTemplate from './OnOffSimpleTemplate';
+import { SCContext } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 const getComponent = (template) => {
   switch (template) {
@@ -20,9 +29,14 @@ const getComponent = (template) => {
 const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
   const { configuration } = actionGroup;
   const { action_data, action_on_data, action_off_data } = configuration;
-  const [isOn, setIsOn] = useState(true);
+  const [isOn, setIsOn] = useState(null);
+  const [valueOfSwitch, setValueOfSwitch] = useState(false);
+  const [checkValueOfSwitch, setCheckValueOfSwitch] = useState(true);
+  //checkValueOfSwitch to check the value real-time of Switch when re-entering the screen
+
   // eslint-disable-next-line no-unused-vars
   const [configValues, _] = useConfigGlobalState('configValues');
+  const { setAction } = useContext(SCContext);
 
   const actionName = useCallback(
     (text) => {
@@ -34,6 +48,10 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     [actionGroup?.title, sensor?.name]
   );
   const triggerAction = useCallback(() => {
+    if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
+      setAction(Action.IS_FULL_LOADING, true);
+    }
+    setCheckValueOfSwitch(false);
     switch (sensor?.device_type) {
       case DEVICE_TYPE.ZIGBEE:
         if (action_on_data && action_off_data) {
@@ -61,6 +79,7 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
           }
         }
         if (action_on_data && action_off_data) {
+          setValueOfSwitch(!isOn);
           if (isOn) {
             doAction(action_off_data, null, actionName('off'));
           } else {
@@ -68,20 +87,32 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
           }
         }
         if (sensor?.is_managed_by_backend) {
-          configuration.config && watchMultiConfigs([configuration.config]);
+          configuration?.config &&
+            sensor?.device_type !== 'GOOGLE_HOME' &&
+            watchMultiConfigs([configuration?.config]);
+          if (actionGroup?.template === 'OnOffSimpleActionTemplate') {
+            const cleanTimeout = setTimeout(() => {
+              setAction(Action.IS_FULL_LOADING, false);
+              clearTimeout(cleanTimeout);
+            }, 2000);
+          }
+        } else {
+          setValueOfSwitch(isOn);
         }
         return;
     }
   }, [
+    actionGroup.template,
     actionName,
     action_data,
     action_off_data,
     action_on_data,
-    configuration.config,
+    configuration?.config,
     doAction,
     isOn,
     sensor?.device_type,
     sensor?.is_managed_by_backend,
+    setAction,
   ]);
 
   useEffect(() => {
@@ -103,7 +134,7 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
     if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return;
     }
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs([configuration.config]);
     }
   }, [sensor, configuration.config]);
@@ -119,6 +150,8 @@ const OnOffTemplate = memo(({ actionGroup, doAction, sensor }) => {
         triggerAction={triggerAction}
         actionGroup={actionGroup}
         disabled={!action_data && !action_on_data && !action_off_data}
+        valueOfSwitch={valueOfSwitch}
+        checkValueOfSwitch={checkValueOfSwitch}
       />
     </>
   );

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -61,9 +61,15 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     const value = getOptionValue(newOption);
     let actionName = `${sensor?.name} ${title?.toLowerCase()} ${value}`;
     actionName = actionName.replace(/\s+/g, ' ').trim();
-    doAction(action_data, value, actionName);
+    doAction(
+      action_data,
+      JSON.stringify({ level: value, key_code: newOption?.value_int }),
+      actionName
+    );
     if (sensor?.is_managed_by_backend) {
-      configuration.config && watchMultiConfigs([configuration.config]);
+      configuration.config &&
+        sensor.device_type !== 'GOOGLE_HOME' &&
+        watchMultiConfigs([configuration.config]);
     }
     hideAlertAction();
   }, [
@@ -75,6 +81,7 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
     selectedIndex,
     sensor?.is_managed_by_backend,
     sensor?.name,
+    sensor?.device_type,
     title,
   ]);
 
@@ -141,7 +148,10 @@ const OptionsDropdownActionTemplate = ({ actionGroup, doAction, sensor }) => {
         rightButtonClick={onDone}
       >
         <View style={styles.wrapRename}>
-          <ScrollView style={styles.scrollView}>
+          <ScrollView
+            style={styles.scrollView}
+            scrollIndicatorInsets={{ right: 1 }}
+          >
             {!action_data && (
               <Text
                 color={Colors.Gray6}

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -37,7 +37,7 @@ const SliderRangeTemplate = memo(({ actionGroup, doAction, sensor }) => {
   }, [configuration.config, configValues, configuration]);
 
   useEffect(() => {
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs([configuration.config]);
     }
   }, [sensor, configuration.config]);

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

@@ -91,7 +91,10 @@ const SmartTiviActionTemplate = memo(
     }, []);
     return (
       <>
-        <ScrollView scrollEnabled={scrollEnabled}>
+        <ScrollView
+          scrollEnabled={scrollEnabled}
+          scrollIndicatorInsets={{ right: 1 }}
+        >
           <View style={styles.wrap}>
             <View style={styles.rowOnOff}>
               <CircleButton

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -45,10 +45,20 @@ const GridItem = ({ item, index, length, doAction, sensor, title }) => {
       actionName = actionName.replace(/\s+/g, ' ').trim();
       doAction(actionData, null, actionName);
       if (sensor?.is_managed_by_backend) {
-        config && watchMultiConfigs([config]);
+        config &&
+          sensor.device_type !== 'GOOGLE_HOME' &&
+          watchMultiConfigs([config]);
       }
     },
-    [config, doAction, sensor?.is_managed_by_backend, sensor?.name, text, title]
+    [
+      config,
+      doAction,
+      sensor?.is_managed_by_backend,
+      sensor?.name,
+      sensor?.device_type,
+      text,
+      title,
+    ]
   );
 
   const iconKit = !!icon_kit_data && icon_kit_data.icon;
@@ -114,10 +124,10 @@ const StatesGridActionTemplate = ({ actionGroup, doAction, sensor }) => {
   }, [configuration, configValues]);
 
   useEffect(() => {
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs(configuration.options.map((option) => option.config));
     }
-  }, [sensor.is_managed_by_backend, configuration.options]);
+  }, [sensor.is_managed_by_backend, sensor.device_type, configuration.options]);
 
   return (
     <View style={styles.wrap}>

package/src/commons/ActionGroup/TimerActionTemplate.js

@@ -94,6 +94,7 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
       if (sensor.is_managed_by_backend) {
         hour !== undefined &&
           minute !== undefined &&
+          sensor.device_type !== 'GOOGLE_HOME' &&
           watchMultiConfigs([
             configuration.config_hour,
             configuration.config_minute,
@@ -106,13 +107,17 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
       configuration.config_minute,
       doAction,
       sensor.is_managed_by_backend,
+      sensor.device_type,
     ]
   );
 
   const doActionHour = useCallback(
     (hour) => {
       doAction(configuration.action_data, hour);
-      if (sensor.is_managed_by_backend) {
+      if (
+        sensor.is_managed_by_backend &&
+        sensor.device_type !== 'GOOGLE_HOME'
+      ) {
         hour && watchMultiConfigs([configuration.config_hour]);
       }
     },
@@ -121,6 +126,7 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
       configuration.config_hour,
       doAction,
       sensor.is_managed_by_backend,
+      sensor.device_type,
     ]
   );
 
@@ -201,6 +207,8 @@ const TimerActionTemplate = ({ actionGroup, doAction, sensor }) => {
         onConfirm={onConfirmTime}
         onCancel={onHideTime}
         display="spinner"
+        cancelTextIOS={t('cancel')}
+        confirmTextIOS={t('confirm')}
       />
       <BottomScrollPicker
         min={configuration.min}

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

@@ -37,7 +37,9 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
       }
     }
     if (sensor?.is_managed_by_backend) {
-      configuration.config && watchMultiConfigs([configuration.config]);
+      configuration.config &&
+        sensor.device_type !== 'GOOGLE_HOME' &&
+        watchMultiConfigs([configuration.config]);
     }
   }, [
     actionName,
@@ -46,6 +48,7 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     doAction,
     isOn,
     sensor?.is_managed_by_backend,
+    sensor?.device_type,
   ]);
 
   const triggerAction2 = useCallback(() => {
@@ -56,7 +59,7 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
         doAction(button2?.action_on_data, null, actionName('start'));
       }
     }
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       configuration.config && watchMultiConfigs([configuration.config]);
     }
   }, [
@@ -67,6 +70,7 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     doAction,
     isStart,
     sensor?.is_managed_by_backend,
+    sensor?.device_type,
   ]);
 
   useEffect(() => {
@@ -98,7 +102,7 @@ const TwoButtonTemplate = memo(({ actionGroup, doAction, sensor }) => {
     if (sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return;
     }
-    if (sensor?.is_managed_by_backend) {
+    if (sensor?.is_managed_by_backend && sensor.device_type !== 'GOOGLE_HOME') {
       watchMultiConfigs([configuration.config]);
     }
   }, [sensor, configuration.config]);

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

@@ -1,6 +1,14 @@
 import React, { useState } from 'react';
 import { act, create } from 'react-test-renderer';
-import Index from '../OnOffTemplate';
+import OnOffTemplate from '../OnOffTemplate';
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+
+const wrapComponent = (actionGroup, mockDoAction) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OnOffTemplate actionGroup={actionGroup} doAction={mockDoAction} />
+  </SCProvider>
+);
 
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
@@ -49,21 +57,15 @@ describe('Test OneBigButtonTemplate', () => {
   const assertRender = (state, text) => {
     useState.mockImplementationOnce((init) => [state, setState]);
     const mockDoAction = jest.fn();
+
     act(() => {
-      wrapper = create(
-        <Index actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+      wrapper = create(wrapComponent(actionGroup, mockDoAction));
     });
 
     const renderJson = wrapper.toJSON();
 
-    expect(renderJson?.children[0].children[0].children[1].children).toEqual(
-      undefined
-    );
-
-    expect(
-      renderJson?.children[0].children[0].children[1].children
-    ).not.toEqual([text]);
+    expect(renderJson?.props?.visible).toEqual(false);
+    expect(renderJson?.type).toEqual('Modal');
   };
 
   test('render state on', () => {
@@ -78,9 +80,7 @@ describe('Test OneBigButtonTemplate', () => {
     useState.mockImplementationOnce((init) => [state, setState]);
     const mockDoAction = jest.fn();
     act(() => {
-      wrapper = create(
-        <Index actionGroup={actionGroup} doAction={mockDoAction} />
-      );
+      wrapper = create(wrapComponent(actionGroup, mockDoAction));
     });
 
     expect(mockDoAction).not.toHaveBeenCalled();