@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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

@@ -7,13 +7,15 @@ import { API } from '../../../configs';
 import { AlertSendConfirm } from '../../../commons/EmergencyButton/AlertSendConfirm';
 import { AlertSent } from '../../../commons/EmergencyButton/AlertSent';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
-import { t } from 'i18n-js';
 import { TESTID } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
 import { IconFill } from '@ant-design/icons-react-native';
 // import CurrentRainSensor from 'components/Device/RainningSensor/CurrentRainSensor';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import { ConnectedViewHeader } from '../../../commons/Device';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
@@ -66,6 +68,12 @@ const mockAxios = (
   });
 };
 
+const wrapComponent = (account, route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceDetail account={account} route={route} />
+  </SCProvider>
+);
+
 describe('test DeviceDetail', () => {
   let tree;
   let route;
@@ -205,7 +213,7 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2, responseRemoteControl);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledTimes(4);
@@ -265,7 +273,7 @@ describe('test DeviceDetail', () => {
 
   test('AlertSendConfirm onSendNowAlert', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const alertSendConfirm = instance.findByType(AlertSendConfirm);
@@ -300,7 +308,7 @@ describe('test DeviceDetail', () => {
 
   test('ButtonPopup onClick', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const buttonPopup = instance.find(
@@ -327,7 +335,7 @@ describe('test DeviceDetail', () => {
       await jest.runOnlyPendingTimers();
     });
     expect(buttonPopup.props.visible).toEqual(true);
-    expect(buttonPopup.props.mainTitle).toEqual(t('ok'));
+    expect(buttonPopup.props.mainTitle).toEqual(getTranslate('en', 'ok'));
     await act(async () => {
       await buttonPopup.props.onPressMain();
       await buttonPopup.props.onClose();
@@ -337,7 +345,7 @@ describe('test DeviceDetail', () => {
 
   test('ButtonPopup render', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const buttonPopupTitle = instance.find(
@@ -360,7 +368,7 @@ describe('test DeviceDetail', () => {
 
   test('ScrollView onRefresh', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const scrollView = instance.findByType(ScrollView);
@@ -369,7 +377,7 @@ describe('test DeviceDetail', () => {
     await act(async () => {
       refreshControl.props.onRefresh();
     });
-    expect(axios.get).toHaveBeenCalledTimes(8);
+    expect(axios.get).toHaveBeenCalledTimes(7);
   });
 
   test('Should render SensorDisplayItem', async () => {
@@ -500,14 +508,78 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
+    });
+
+    const instance = tree.root;
+    const sensorDisplayItem = instance.findAll(
+      (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
+    );
+    expect(sensorDisplayItem).toHaveLength(4);
+  });
+
+  test('render SensorDisplayItem emercency', async () => {
+    const responseDisplay = {
+      status: 200,
+      data: {
+        items: [
+          {
+            id: 1,
+            order: 1,
+            template: 'emergency',
+            type: 'emergency',
+            configuration: {
+              camera: null,
+              device: {
+                configs: { id: 521, value: null, time: null },
+                last_event: { id: 374, reportedAt: '' },
+                id: 1,
+                group: {
+                  id: 1,
+                  contacts: [
+                    {
+                      id: 1,
+                      group: 1,
+                      name: 'user1',
+                      phone_number: '038111111',
+                    },
+                    {
+                      id: 2,
+                      group: 1,
+                      name: 'user1',
+                      phone_number: '038111112',
+                    },
+                    { id: 3, group: 1, name: 'user1', phone_number: '' },
+                  ],
+                },
+              },
+              title: '',
+            },
+          },
+        ],
+      },
+    };
+
+    const responseDisplayValueV2 = {
+      status: 200,
+      data: {
+        configs: [],
+        is_connected: true,
+        last_updated: '2021-01-24T12:00:00.000Z',
+      },
+    };
+
+    mockAxios(responseDisplay, responseDisplayValueV2);
+
+    await act(async () => {
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
       (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
     );
-    expect(sensorDisplayItem).toHaveLength(2);
+    expect(sensorDisplayItem).toHaveLength(1);
   });
 
   test('render CurrentRainSensor', async () => {
@@ -548,24 +620,24 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
     const sensorDisplayItem = instance.findAll(
       (el) => el.props.testID === TESTID.SENSOR_DISPLAY_ITEM
     );
-    expect(sensorDisplayItem).toHaveLength(4);
+    expect(sensorDisplayItem).toHaveLength(1);
 
     const currentRainSensor = instance.findAllByType(CurrentRainSensor);
-    expect(currentRainSensor).toHaveLength(0); // not crash app
+    expect(currentRainSensor).toHaveLength(1); // not crash app
   });
 
   test('not fetch value if not managed by backend', async () => {
     route.params.sensor.is_managed_by_backend = false;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     expect(axios.get).not.toBeCalledWith(API.SENSOR.DISPLAY_VALUES_V2(1));
@@ -612,7 +684,7 @@ describe('test DeviceDetail', () => {
     mockAxios(responseDisplay, responseDisplayValueV2);
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
 
     const instance = tree.root;
@@ -626,7 +698,7 @@ describe('test DeviceDetail', () => {
 
   test('HeaderDevice button more onClick', async () => {
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
     const menu = instance.findByType(MenuActionMore);
@@ -648,7 +720,7 @@ describe('test DeviceDetail', () => {
     sensor.is_favourite = false;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
 
@@ -677,7 +749,7 @@ describe('test DeviceDetail', () => {
     sensor.is_favourite = true;
 
     await act(async () => {
-      tree = await create(<DeviceDetail account={account} route={route} />);
+      tree = await create(wrapComponent(account, route));
     });
     const instance = tree.root;
 

package/src/screens/Device/detail.js

@@ -1,7 +1,7 @@
 import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { RefreshControl, ScrollView, View } from 'react-native';
 import { connect } from 'react-redux';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 import _ from 'lodash';
 import { get } from 'lodash';
@@ -37,7 +37,7 @@ import Text from '../../commons/Text';
 import { transformDatetime } from '../../utils/Converter/time';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../commons';
 import EmergencyButton from '../../commons/Device/Emergency/EmergencyButton';
-import { TESTID } from '../../configs/Constants';
+import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 import FooterInfo from '../../commons/Device/FooterInfo';
 import Routes from '../../utils/Route';
 import { sendRemoteCommand } from '../../iot/RemoteControl';
@@ -55,6 +55,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 );
 
 const DeviceDetail = ({ account, route }) => {
+  const t = useTranslations();
   const navigation = useNavigation();
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
@@ -75,6 +76,12 @@ const DeviceDetail = ({ account, route }) => {
   const [isFavourite, setIsFavourite] = useState(sensor.is_favourite);
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
 
+  const isShowSetupEmergencyContact =
+    display.items.filter(
+      (item) =>
+        item.type === 'emergency' && item.configuration.type === 'button'
+    ).length > 0;
+
   const addToFavorites = useCallback(async () => {
     const { success } = await axiosPost(
       API.SENSOR.ADD_TO_FAVOURITES(unit.id, sensor.station.id, sensor.id)
@@ -102,11 +109,11 @@ const DeviceDetail = ({ account, route }) => {
         text: t('remove_device'),
       },
     ],
-    []
+    [t]
   );
 
   const listMenuItem = useMemo(() => {
-    const menuItems = [];
+    const menuItems = [...listMenuItemDefault];
     if (
       display.items.some((i) => getActionComponent(i.configuration.template))
     ) {
@@ -123,6 +130,13 @@ const DeviceDetail = ({ account, route }) => {
         });
       }
     }
+    if (isShowSetupEmergencyContact) {
+      menuItems.push({
+        route: Routes.ActivityLog,
+        data: { sensor },
+        text: t('activity_log'),
+      });
+    }
     menuItems.push({
       route: Routes.DeviceInfo,
       text: t('device_info'),
@@ -131,24 +145,26 @@ const DeviceDetail = ({ account, route }) => {
       },
     });
     if (!isFavourite) {
-      menuItems.push({
+      menuItems.unshift({
         doAction: addToFavorites,
         text: t('add_to_favorites'),
       });
     } else {
-      menuItems.push({
+      menuItems.unshift({
         doAction: removeFromFavorites,
         text: t('remove_from_favorites'),
       });
     }
-    return [...listMenuItemDefault, ...menuItems];
+    return [...menuItems];
   }, [
-    display,
-    sensor,
-    unit,
-    isOwner,
+    display.items,
+    t,
     isFavourite,
+    isShowSetupEmergencyContact,
     listMenuItemDefault,
+    sensor,
+    isOwner,
+    unit,
     addToFavorites,
     removeFromFavorites,
   ]);
@@ -299,7 +315,7 @@ const DeviceDetail = ({ account, route }) => {
         setLastUpdated(data.last_updated);
       }
     };
-    if (sensor.is_managed_by_backend) {
+    if (sensor.is_managed_by_backend && !sensor.is_other_device) {
       const updateInterval = setInterval(() => fetchValues(), 5000);
       fetchValues();
       return () => clearInterval(updateInterval);
@@ -331,12 +347,6 @@ const DeviceDetail = ({ account, route }) => {
         item.type === 'emergency' && item.configuration.type === 'detail'
     ).length > 0;
 
-  const isShowSetupEmergencyContact =
-    display.items.filter(
-      (item) =>
-        item.type === 'emergency' && item.configuration.type === 'button'
-    ).length > 0;
-
   const isDisplayTime =
     display.items.filter(
       (item) => item.type !== 'action' && item.type !== 'camera'
@@ -358,7 +368,9 @@ const DeviceDetail = ({ account, route }) => {
           <>
             <ConnectedViewHeader
               lastUpdated={lastUpdated}
-              isDisplayTime={isDisplayTime}
+              isDisplayTime={
+                isShowSetupEmergencyContact ? false : isDisplayTime
+              }
             />
             {display.items.map((item) => (
               <SensorDisplayItem
@@ -379,13 +391,10 @@ const DeviceDetail = ({ account, route }) => {
         return <DisconnectedView sensor={sensor} />;
       }
     } else {
-      if (isGGHomeConnected) {
+      if (sensor.device_type === DEVICE_TYPE.LG_THINQ) {
         return (
           <>
-            <ConnectedViewHeader
-              lastUpdated={lastUpdated}
-              type={'GoogleHome'}
-            />
+            <ConnectedViewHeader lastUpdated={lastUpdated} />
             {display.items.map((item) => (
               <SensorDisplayItem
                 testID={TESTID.SENSOR_DISPLAY_ITEM}
@@ -402,7 +411,31 @@ const DeviceDetail = ({ account, route }) => {
           </>
         );
       } else {
-        return <DisconnectedView sensor={sensor} type={'GoogleHome'} />;
+        if (isGGHomeConnected) {
+          return (
+            <>
+              <ConnectedViewHeader
+                lastUpdated={lastUpdated}
+                type={'GoogleHome'}
+              />
+              {display.items.map((item) => (
+                <SensorDisplayItem
+                  testID={TESTID.SENSOR_DISPLAY_ITEM}
+                  key={item.id.toString()}
+                  item={item}
+                  emergency={onEmergencyButtonPress}
+                  sensor={sensor}
+                  getData={getData}
+                  maxValue={maxValue}
+                  offsetTitle={offsetTitle}
+                  setOffsetTitle={setOffsetTitle}
+                />
+              ))}
+            </>
+          );
+        } else {
+          return <DisconnectedView sensor={sensor} type={'GoogleHome'} />;
+        }
       }
     }
   };
@@ -544,6 +577,7 @@ const DeviceDetail = ({ account, route }) => {
         childRef={childRef}
         onItemClick={onItemMenuClicked}
         wrapStyle={styles.menuAction}
+        isTextCenter={false}
       />
     </View>
   );
@@ -609,6 +643,7 @@ const SensorDisplayItem = ({
   offsetTitle,
   setOffsetTitle,
 }) => {
+  const t = useTranslations();
   const doAction = useCallback(
     (action, data) => {
       sendRemoteCommand(sensor, action, data);
@@ -691,16 +726,19 @@ const SensorDisplayItem = ({
   return false;
 };
 
-const EmergencyCountdown = memo(({ countUpStr }) => (
-  <View style={styles.countDown}>
-    <Text type="Label" center style={styles.messageCountDown}>
-      {t('time_since_the_emergency_button_was_pressed')}
-    </Text>
-    <Text type="H3" center semibold color={Colors.Red6}>
-      {countUpStr}
-    </Text>
-  </View>
-));
+const EmergencyCountdown = memo(({ countUpStr }) => {
+  const t = useTranslations();
+  return (
+    <View style={styles.countDown}>
+      <Text type="Label" center style={styles.messageCountDown}>
+        {t('time_since_the_emergency_button_was_pressed')}
+      </Text>
+      <Text type="H3" center semibold color={Colors.Red6}>
+        {countUpStr}
+      </Text>
+    </View>
+  );
+});
 
 const mapStateToProps = (state) => ({
   account: state.auth.account,

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

@@ -16,6 +16,10 @@ export const useCountUp = (eventTime) => {
     };
   }, [eventTime]);
 
+  if (!eventTime) {
+    return {};
+  }
+
   const diffSeconds = currentTime.diff(eventTime, 'seconds');
   const seconds = diffSeconds > 0 ? diffSeconds % 60 : 0;
   const minutes = parseInt(diffSeconds / 60, 10) % 60;

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

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 import { API } from '../../../configs';
 import { axiosPost, axiosPut } from '../../../utils/Apis/axios';
@@ -80,6 +80,7 @@ const useEmergencyButton = (fetchDataDeviceDetail) => {
 };
 
 export const useAlertResolveEmergency = (lastEvent, fetchDataDeviceDetail) => {
+  const t = useTranslations();
   const [showPopupResolveSuccess, setShowPopupResolveSuccess] = useState(false);
   const [stateAlertResolve, setStateAlertResolve] = useState({
     visible: false,
@@ -125,7 +126,7 @@ export const useAlertResolveEmergency = (lastEvent, fetchDataDeviceDetail) => {
       hideAlertResolve();
       ToastBottomHelper.error(t('alert_resolve_error'));
     }
-  }, [hideAlertResolve, lastEvent, fetchDataDeviceDetail]);
+  }, [lastEvent.id, hideAlertResolve, fetchDataDeviceDetail, t]);
 
   return {
     showPopupResolveSuccess,

package/src/screens/Device/styles.js

@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Colors, Device } from '../../configs';
 import { standardizeCameraScreenSize } from '../../utils/Utils';
 
@@ -67,6 +67,10 @@ export default StyleSheet.create({
     borderRadius: 10,
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
+    marginTop: Platform.select({
+      ios: 0,
+      android: -25,
+    }),
   },
   wrapTemplate: {
     marginBottom: 20,

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
-import { TESTID } from 'configs/Constants';
+import { TESTID } from '../../../configs/Constants';
 import DeviceInfo from '../';
 import { View } from 'react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -32,12 +34,19 @@ jest.mock('@react-navigation/core', () => {
     }),
   };
 });
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceInfo />
+  </SCProvider>
+);
+
 describe('Test DeviceInfo', () => {
   let tree;
 
   it('render DeviceInfo', async () => {
     await act(async () => {
-      tree = await create(<DeviceInfo />);
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
     const battety = instance.findAll(
@@ -55,6 +64,6 @@ describe('Test DeviceInfo', () => {
       (el) =>
         el.props.testID === TESTID.DEVICE_INFO_CHIP_INFO && el.type === View
     );
-    expect(chip.length).toEqual(1);
+    expect(chip.length).toEqual(5);
   });
 });

package/src/screens/DeviceInfo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../commons/Header';
 import { useRoute } from '@react-navigation/native';
 import Text from '../../commons/Text';
@@ -8,6 +8,7 @@ import styles from './DeviceInfoStyles';
 import { TESTID } from '../../configs/Constants';
 
 const DeviceInfo = () => {
+  const t = useTranslations();
   const { params = {} } = useRoute();
   const { deviceInfo } = params;
   const configuration = deviceInfo[0] ? deviceInfo[0].configuration : {};

package/src/screens/EditActionsList/Styles/indexStyles.js

@@ -0,0 +1,84 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  wrapContent: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  wrapItem: {
+    flexDirection: 'row',
+    height: 100,
+    marginBottom: 16,
+  },
+  leftItem: {
+    width: 41,
+    height: '100%',
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+  },
+  rightItem: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+    borderWidth: 1,
+    flexDirection: 'row',
+    paddingVertical: 15,
+    paddingHorizontal: 16,
+  },
+  rightItemAdd: {
+    flex: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    borderColor: Colors.Gray4,
+  },
+  noBorder: {
+    borderWidth: 0,
+  },
+  iconItem: {
+    width: 40,
+    height: 40,
+    marginRight: 24,
+  },
+  contentItem: {
+    flex: 1,
+  },
+  containerStyle: {
+    marginVertical: 16,
+  },
+  wrapBottom: {
+    height: 80,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 70,
+  },
+  closeButton: {
+    width: 40,
+    height: 30,
+    alignItems: 'center',
+    marginRight: -10,
+  },
+  wrapChildModal: {
+    padding: 16,
+  },
+  messageDelete: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  textHighlight: {
+    fontWeight: 'bold',
+  },
+});