@eohjsc/react-native-smart-city 0.4.0 → 0.4.2

package/src/screens/Device/detail.js

@@ -8,11 +8,9 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 import moment from 'moment';
-import { get } from 'lodash';
 
 import { SCContext } from '../../context';
 import { Action } from '../../context/actionType';
@@ -130,7 +128,9 @@ const DeviceDetail = ({ route }) => {
     if (display.items.length === 0) {
       return false;
     }
-    const action = display.items.filter((item) => item.type === 'action');
+    const action = display.items.filter(
+      (item) => (item.template || item.type) === 'action'
+    );
     if (action.length === 0) {
       return false;
     }
@@ -176,8 +176,8 @@ const DeviceDetail = ({ route }) => {
   const { isFavorite, addToFavorites, removeFromFavorites } =
     useFavoriteDevice(sensor);
 
-  const currentUserId = useSelector((state) =>
-    get(state, 'auth.account.user.id', 0)
+  const currentUserId = useSCContextSelector(
+    (state) => state.auth.account.user.id
   );
 
   const canManageSubUnit = useMemo(() => {
@@ -297,7 +297,7 @@ const DeviceDetail = ({ route }) => {
 
     success &&
       data.items.length &&
-      data.items.some((item) => item.type === 'action') &&
+      data.items.some((item) => (item?.template || item?.type) === 'action') &&
       (await fetchRemoteControlOptions());
   }, [token, sensor, setDeviceId, fetchRemoteControlOptions]);
 
@@ -365,9 +365,9 @@ const DeviceDetail = ({ route }) => {
       menuItems.push({
         route: Routes.ChangePosition,
         data: {
-          unit,
           sensor,
-          displayItems: display.items,
+          display,
+          setDisplay,
           evaluate,
           station,
           fetchDataDeviceDetail,
@@ -454,7 +454,7 @@ const DeviceDetail = ({ route }) => {
     }
     return [...menuItems];
   }, [
-    display.items,
+    display,
     isOwner,
     isShowSetupEmergencyContact,
     sideMenu,
@@ -572,9 +572,10 @@ const DeviceDetail = ({ route }) => {
               lastUpdated: lastUpdated,
             };
           });
-          const configsData = data.configs.filter(
-            (id) => !mqttConfigs.includes(id)
-          );
+          let configsData = data?.configs || [];
+          if (![null, undefined, NaN].includes(mqttConfigs)) {
+            configsData = configsData.filter((item) => !mqttConfigs[item.id]);
+          }
           let configValues = getConfigGlobalState('configValues');
           let hasValueChange = false;
           configsData.map((config) => {

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

@@ -3,7 +3,11 @@ import { DEVICE_TYPE } from '../../../configs/Constants';
 import { getConfigControlFromDeviceDisplay } from '../utils';
 import { useWatchConfigs } from '../../../hooks/IoT';
 
-export const useDeviceWatchConfigControl = (device, display, mqttConfigs) => {
+export const useDeviceWatchConfigControl = (
+  device,
+  display,
+  mqttConfigs = {}
+) => {
   const configsNeedWatching = useMemo(() => {
     if (
       !device?.is_managed_by_backend ||
@@ -13,10 +17,11 @@ export const useDeviceWatchConfigControl = (device, display, mqttConfigs) => {
     ) {
       return [];
     }
-
-    const configsControl = getConfigControlFromDeviceDisplay(display);
-    if (mqttConfigs?.length) {
-      return configsControl.filter((id) => !mqttConfigs.includes(id));
+    let configsControl = getConfigControlFromDeviceDisplay(display);
+    if (![null, undefined, NaN].includes(mqttConfigs)) {
+      configsControl = configsControl.filter(
+        (configId) => !mqttConfigs[configId]
+      );
     }
     return configsControl;
   }, [
@@ -25,6 +30,5 @@ export const useDeviceWatchConfigControl = (device, display, mqttConfigs) => {
     device?.is_managed_by_backend,
     display,
   ]);
-
   useWatchConfigs(configsNeedWatching);
 };

package/src/screens/Device/styles.js

@@ -29,7 +29,7 @@ export default StyleSheet.create({
     width: '100%',
     height: 150,
     paddingHorizontal: 16,
-    marginBottom: 16,
+    marginBottom: 0,
   },
   bottomButtonEmergencyResolve: {
     borderTopWidth: 1,

package/src/screens/Notification/__test__/NotificationItem.test.js

@@ -56,6 +56,8 @@ describe('test NotificationItem', () => {
     NOTIFICATION_TYPES.NOTIFY_REMOVE_DEVICE,
     NOTIFICATION_TYPES.NOTIFY_CHANGE_UNIT_OLD_OWNER,
     NOTIFICATION_TYPES.SUBSCRIBE_SUCCESS,
+    NOTIFICATION_TYPES.NOTIFY_UPGRADE_SYSTEM,
+    NOTIFICATION_TYPES.TRIAL_WILL_END,
   ];
 
   for (const content_code of listCase2) {

package/src/screens/PlayBackCamera/Styles/index.js

@@ -50,7 +50,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     marginTop: -10,
   },
-  commomButton: {
+  commonButton: {
     height: 40,
     justifyContent: 'center',
     alignItems: 'center',

package/src/screens/PlayBackCamera/index.js

@@ -205,7 +205,7 @@ const PlayBackCamera = () => {
           <TouchableOpacity
             accessibilityLabel={AccessibilityLabel.ON_PRESS_SUB_DATE}
             onPress={onSubtractDate}
-            style={styles.commomButton}
+            style={styles.commonButton}
           >
             <Image source={Images.arrowLeft} />
           </TouchableOpacity>
@@ -219,14 +219,14 @@ const PlayBackCamera = () => {
           </Text>
           <TouchableOpacity
             onPress={onOpenDateModal}
-            style={styles.commomButton}
+            style={styles.commonButton}
           >
             <Image source={Images.file} style={styles.iconDate} />
           </TouchableOpacity>
           <TouchableOpacity
             accessibilityLabel={AccessibilityLabel.ON_PRESS_ADD_DATE}
             onPress={onAddDate}
-            style={styles.commomButton}
+            style={styles.commonButton}
           >
             <Image source={Images.arrowLeft} style={styles.arrowRight} />
           </TouchableOpacity>
@@ -283,19 +283,19 @@ const PlayBackCamera = () => {
           <View style={styles.wrapBottomButton}>
             <TouchableOpacity
               onPress={onPressCancel}
-              style={styles.commomButton}
+              style={styles.commonButton}
               accessibilityLabel={AccessibilityLabel.ON_PRESS_CANCEL}
             >
-              <Text type="h4" semibold hilight>
+              <Text type="h4" semibold highlight>
                 {t('cancel')}
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
               accessibilityLabel={AccessibilityLabel.ON_PRESS_OK}
               onPress={onPressOk}
-              style={styles.commomButton}
+              style={styles.commonButton}
             >
-              <Text type="h4" semibold hilight>
+              <Text type="h4" semibold highlight>
                 {t('done')}
               </Text>
             </TouchableOpacity>

package/src/screens/SharedUnit/__test__/ShareUnit.test.js

@@ -21,11 +21,6 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),

package/src/screens/Sharing/__test__/SelectUser.test.js

@@ -26,13 +26,6 @@ const mockedGoBack = jest.fn();
 const mockedDangerouslyGetState = jest.fn();
 const mockedDangerouslyGetParentGoBack = jest.fn();
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: jest.fn(),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),

package/src/screens/SmartAccount/index.js

@@ -1,12 +1,6 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import {
-  Image,
-  View,
-  ScrollView,
-  TouchableOpacity,
-  Keyboard,
-} from 'react-native';
-
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import { Image, View, TouchableOpacity, Keyboard } from 'react-native';
+import { KeyboardAwareScrollView } from '@eohjsc/react-native-keyboard-aware-scroll-view';
 import { HeaderCustom } from '../../commons/Header';
 import Text from '../../commons/Text';
 import TextInput from '../../commons/Form/TextInput';
@@ -29,6 +23,8 @@ const SmartAccount = ({ route }) => {
   const [password, setPassword] = useState('');
   const [passwordError, setPasswordlErrorState] = useState();
   const [selectItemActive, setSelectItemActive] = useState(null);
+  const [disableKeyBoardAnimated, setDisableKeyBoardAnimated] = useState(true);
+  const keyboardAwareRef = useRef();
 
   const supplierItems = useMemo(() => {
     return [
@@ -106,13 +102,23 @@ const SmartAccount = ({ route }) => {
     [navigate]
   );
 
+  const onFocus = () => {
+    keyboardAwareRef?.current?.scrollToEnd(true);
+    setDisableKeyBoardAnimated(false);
+  };
+
   return (
     <View style={styles.container}>
       <HeaderCustom
         title={t('add_new_smart_account')}
         titleStyle={styles.title}
       />
-      <ScrollView contentContainerStyle={styles.scroll}>
+      <KeyboardAwareScrollView
+        innerRef={(ref) => (keyboardAwareRef.current = ref)}
+        contentContainerStyle={styles.scroll}
+        enableOnAndroid
+        extraScrollHeight={100}
+      >
         <Text bold type="H4" color={Colors.Gray9} style={styles.text}>
           {t('smart_supplier')}
         </Text>
@@ -147,6 +153,8 @@ const SmartAccount = ({ route }) => {
           secureTextEntry={true}
           placeholder={t('enter_password')}
           onChange={(value) => setPassword(value)}
+          onFocus={onFocus}
+          onBlur={() => setDisableKeyBoardAnimated(true)}
           value={password}
           errorText={passwordError}
           returnKeyType={'done'}
@@ -158,13 +166,14 @@ const SmartAccount = ({ route }) => {
             AccessibilityLabel.ON_CHANGE_SEARCH_PASSWORD_SMART_ACCOUNT
           }
         />
-      </ScrollView>
+      </KeyboardAwareScrollView>
       <BottomButtonView
         style={styles.bottomButtonView}
         mainTitle={t('save')}
         onPressMain={validate}
         typeMain={'primary'}
         accessibilityLabelPrefix={AccessibilityLabel.LOGIN_SMART_ACCOUNT}
+        disableKeyBoardAnimated={disableKeyBoardAnimated}
       />
     </View>
   );

package/src/screens/SubUnit/EditSubUnit.js

@@ -1,6 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity, Image } from 'react-native';
-import { connect } from 'react-redux';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -280,4 +279,4 @@ const EditSubUnit = ({ route }) => {
   );
 };
 
-export default connect()(EditSubUnit);
+export default EditSubUnit;

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -23,20 +23,12 @@ const wrapComponent = (route, storeData = {}) => (
 );
 
 const mockedNavigate = jest.fn();
-const mockedDispatch = jest.fn();
 const mockedGoBack = jest.fn();
 
 const mock = new MockAdapter(api.axiosInstance);
 jest.mock('react-native-toast-message');
 jest.mock('react-native-image-resizer');
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useDispatch: () => mockedDispatch,
-  };
-});
-
 const mockNavigationDispatch = jest.fn();
 const mockReplace = jest.fn();
 
@@ -69,7 +61,6 @@ describe('Test AddSubUnit', () => {
         },
       },
     };
-    mockedDispatch.mockClear();
     mockedNavigate.mockClear();
     mockNavigationDispatch.mockClear();
     Toast.show.mockClear();

package/src/screens/SubUnit/__test__/Detail.test.js

@@ -16,13 +16,6 @@ const mockedDangerouslyGetState = jest.fn();
 const mockedDangerouslyGetStatePop = jest.fn();
 const mockedPop = jest.fn();
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useSelector: jest.fn(),
-  };
-});
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),

package/src/screens/SubUnit/__test__/EditSubUnit.test.js

@@ -25,18 +25,6 @@ const mockedPop = jest.fn();
 const mock = new MockAdapter(api.axiosInstance);
 jest.mock('react-native-toast-message');
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useDispatch: () => mockedDispatch,
-    useSelector: jest.fn(),
-    connect: () => {
-      return (component) => component;
-    },
-    useIsFocused: jest.fn(),
-  };
-});
-
 const mockUseIsFocused = jest.fn();
 
 jest.mock('@react-navigation/native', () => {

package/src/screens/TDSGuide/__test__/TDSGuide.test.js

@@ -14,12 +14,6 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-  useDispatch: jest.fn(),
-}));
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),

package/src/screens/UVIndexGuide/__test__/UVIndexGuide.test.js

@@ -14,12 +14,6 @@ const wrapComponent = () => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-  useDispatch: jest.fn(),
-}));
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),

package/src/screens/Unit/__test__/CheckSendEmail.test.js

@@ -11,17 +11,6 @@ import NavBar from '../../../commons/NavBar';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockDispatch = jest.fn();
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: () => mockDispatch,
-  useSelector: () => 'vi',
-  connect: () => {
-    return (component) => component;
-  },
-}));
-
 jest.mock('../../../iot/RemoteControl/HomeAssistant', () => ({
   ...jest.requireActual('../../../iot/RemoteControl/HomeAssistant'),
   homeAssistantConnect: jest.fn(async () => ({

package/src/screens/Unit/__test__/Detail.test.js

@@ -22,7 +22,6 @@ import PreventAccess from '../../../commons/PreventAccess';
 import Routes from '../../../utils/Route';
 import { storeData } from '../../../utils/Storage';
 
-const mockDispatch = jest.fn();
 jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
 const wrapComponent = (route, account) => (
   <SCProvider initState={mockSCStore({})}>
@@ -30,17 +29,6 @@ const wrapComponent = (route, account) => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => {
-  return {
-    ...jest.requireActual('react-redux'),
-    useDispatch: mockDispatch, // fix problem of re-render continuously
-    useSelector: () => 'vi',
-    connect: () => {
-      return (component) => component;
-    },
-  };
-});
-
 const mockConnectHomeAssistant = jest.fn();
 jest.mock('../../../hooks/IoT', () => {
   return {

package/src/screens/Unit/__test__/ManageUnit.test.js

@@ -27,12 +27,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-const mockedDispatch = jest.fn();
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(),
-  useDispatch: () => mockedDispatch,
-}));
-
 jest.mock('../../../hooks/Common', () => {
   return {
     useIsOwnerOfUnit: () => ({ isOwner: true }),
@@ -179,7 +173,6 @@ describe('Test Manage Unit', () => {
     await act(async () => {
       await bottomButton.props.onPress();
     });
-    expect(mockedDispatch).not.toBeCalled();
   });
 
   it('rename Unit success', async () => {
@@ -201,7 +194,6 @@ describe('Test Manage Unit', () => {
       await alertActions[0].props.rightButtonClick();
     });
 
-    expect(mockedDispatch).not.toBeCalled();
     expect(spyToast).toBeCalled();
     spyToast.mockReset();
     spyToast.mockRestore();

package/src/screens/UnitSummary/components/PowerConsumption/index.js

@@ -1,17 +1,17 @@
 import React, { memo, useMemo, useEffect, useState } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 import moment from 'moment';
+
 import { API, Colors } from '../../../../configs';
 import Text from '../../../../commons/Text';
 import { Section, Today } from '../../../../commons';
 import ListQualityIndicator from '../../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
 import PMSensorIndicator from '../../../../commons/Device/PMSensor/PMSensorIndicator';
-import ConfigHistoryChart from '../../../../commons/UnitSummary/ConfigHistoryChart';
 import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { AccessibilityLabel } from '../../../../configs/Constants';
-
 import { axiosGet } from '../../../../utils/Apis/axios';
+import VisualChart from '../../../Device/components/VisualChart';
 
 const PowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
@@ -141,9 +141,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
           accessibilityLabel={AccessibilityLabel.LIST_QUALITY_INDICATOR_PC}
         />
         {showBoxHistory && (
-          <View>
-            <ConfigHistoryChart configs={configs} />
-          </View>
+          <VisualChart item={{ configuration: { configs } }} />
         )}
       </Section>
 

package/src/screens/WaterQualityGuide/__test__/index.test.js

@@ -6,11 +6,6 @@ import Text from '../../../commons/Text';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 jest.mock('react', () => ({
   ...jest.requireActual('react'),
   useLayoutEffect: jest.fn(),

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

@@ -1005,7 +1005,7 @@ export default {
   tap_to_run: 'Tap to run',
   how_to_start: 'How to start',
   'set_up {name}': 'Setup {name}',
-  action: 'Action',
+  action: 'action',
   power: 'Power',
   actions_list: 'Actions list',
   delette_action: 'Delete action?',
@@ -1421,5 +1421,7 @@ export default {
     'View action log is incomplete. Please visit app.e-ra.io to complete your operation.',
   no_permission_smart_script_for_multi_unit:
     'Smart script for Multi Unit is incomplete. Please visit app.e-ra.io to complete your operation.',
+  you_can_only_add_more: 'You can only add more {number}',
+  actions: 'actions',
   value_must_be_6_digits_or_less: 'Value must be 6 digits or less',
 };

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

@@ -1018,7 +1018,7 @@ export default {
   tap_to_run: 'Nhấn để chạy',
   how_to_start: 'Cách khởi động',
   'set_up {name}': 'Thiết lập {name}',
-  action: 'Hành động',
+  action: 'hành động',
   power: 'Nguồn điện',
   actions_list: 'Dánh sách hành động',
   delette_action: 'Xoá hành động ?',
@@ -1431,5 +1431,7 @@ export default {
     'Xem lịch sử hoạt động chưa hoàn tất. Hãy truy cập app.e-ra.io để hoàn thiện thao tác của bạn.',
   no_permission_smart_script_for_multi_unit:
     'Kịch bản thông minh cho nhiều địa điểm chưa hoàn tất. Hãy truy cập app.e-ra.io để hoàn thiện thao tác của bạn.',
+  you_can_only_add_more: 'Bạn chỉ có thể thêm {number}',
+  actions: 'hành động',
   value_must_be_6_digits_or_less: 'Giá trị phải nhỏ hơn 6 chữ số',
 };

package/src/utils/Route/index.js

@@ -145,7 +145,6 @@ const Routes = {
   SmartAccountConnecting: 'SmartAccountConnecting',
   EmergencySetting: 'EmergencySetting',
   FirstWarning: 'FirstWarning',
-  ConnectRouterGuide: 'ConnectRouterGuide',
   ZigbeeDeviceConnectGuide: 'ZigbeeDeviceConnectGuide',
   ConfirmUnitDeletion: 'ConfirmUnitDeletion',
   SmartAccount: 'SmartAccount',

package/src/screens/AddNewGateway/PlugAndPlay/ConnectRouterGuide.js

@@ -1,49 +0,0 @@
-import React, { useCallback } from 'react';
-import { View } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { HeaderCustom } from '../../../commons/Header';
-import { ViewButtonBottom } from '../../../commons';
-import RouterConnectIcon from '../../../../assets/images/AddNewDevice/router-connect-icon.svg';
-import Routes from '../../../utils/Route';
-import { Colors } from '../../../configs';
-import Text from '../../../commons/Text';
-import styles from './ConnectRouterGuideStyles';
-
-const ConnectRouterGuide = ({ route }) => {
-  const t = useTranslations();
-  const { navigate, goBack } = useNavigation();
-
-  const onRight = useCallback(() => {
-    navigate(Routes.SelectZigbeeGateway, {
-      ...route?.params,
-    });
-  }, [navigate, route]);
-
-  return (
-    <View style={styles.container}>
-      <HeaderCustom isShowSeparator />
-      <View style={styles.contentContainer}>
-        <View style={styles.guideContent}>
-          <RouterConnectIcon width={94} height={94} />
-          <Text type="H4" semibold style={styles.txtContent}>
-            {t('connect_to_router')}
-          </Text>
-          <Text style={styles.txtContent}>{t('connect_router_content')}</Text>
-          <Text semibold color={Colors.Gray7} style={styles.txtContent}>
-            {t('read_device_manual_guide')}
-          </Text>
-        </View>
-      </View>
-      <ViewButtonBottom
-        leftTitle={t('cancel')}
-        onLeftClick={goBack}
-        rightTitle={t('text_next')}
-        onRightClick={onRight}
-        styleButtonLeftText={styles.buttonLeftText}
-      />
-    </View>
-  );
-};
-
-export default ConnectRouterGuide;