@eohjsc/react-native-smart-city 0.2.20 → 0.2.26

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: [] });
@@ -102,11 +103,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))
     ) {
@@ -131,24 +132,25 @@ 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,
     listMenuItemDefault,
+    sensor,
+    isOwner,
+    unit,
     addToFavorites,
     removeFromFavorites,
   ]);
@@ -299,7 +301,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);
@@ -379,13 +381,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 +401,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 +567,7 @@ const DeviceDetail = ({ account, route }) => {
         childRef={childRef}
         onItemClick={onItemMenuClicked}
         wrapStyle={styles.menuAction}
+        isTextCenter={false}
       />
     </View>
   );
@@ -609,6 +633,7 @@ const SensorDisplayItem = ({
   offsetTitle,
   setOffsetTitle,
 }) => {
+  const t = useTranslations();
   const doAction = useCallback(
     (action, data) => {
       sendRemoteCommand(sensor, action, data);
@@ -691,16 +716,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',
+  },
+});

package/src/screens/EditActionsList/index.js

@@ -0,0 +1,186 @@
+import React, { useState, useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import DraggableFlatList from 'react-native-draggable-flatlist';
+import { useNavigation, useRoute } from '@react-navigation/core';
+import ParsedText from 'react-native-parsed-text';
+
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Text from '../../commons/Text';
+import styles from './Styles/indexStyles';
+import { API, Colors } from '../../configs';
+import FImage from '../../commons/FImage';
+import Rearrange from '../../../assets/images/Rearrange.svg';
+import Close from '../../../assets/images/Close.svg';
+import { axiosDelete, axiosPut } from '../../utils/Apis/axios';
+import { ModalBottom } from '../../commons/Modal';
+import { ToastBottomHelper } from '../../utils/Utils';
+
+const EditActionsList = () => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const { params = {} } = useRoute();
+  const { data = [], id, setData } = params;
+  const [itemRemove, setItemRemove] = useState({
+    id: '',
+    actionName: '',
+    stationName: '',
+  });
+  const [isVisible, setIsVisible] = useState(false);
+  const [actionsList, setActionList] = useState(
+    [...data].map((item) => {
+      return {
+        ...item,
+        key: `item-${item?.id}`,
+      };
+    })
+  );
+
+  const onPressCancel = useCallback(() => {
+    goBack();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPressSave = useCallback(async () => {
+    const { success } = await axiosPut(API.AUTOMATE.ORDER_SCRIPT_ACTION(id), {
+      id_script_actions: actionsList.map((i) => i.id),
+    });
+    if (success) {
+      setData && setData(actionsList);
+      ToastBottomHelper.success(t('text_done'));
+      goBack();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actionsList, id, setData]);
+
+  const onPressRemove = (item) => () => {
+    setIsVisible(true);
+    setItemRemove(item);
+  };
+
+  const onClose = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onRemove = useCallback(async () => {
+    const { success } = await axiosDelete(
+      API.AUTOMATE.DELETE_SCRIPT_ACTION(id, itemRemove.id)
+    );
+    if (success) {
+      ToastBottomHelper.success(t('removed_successfully'));
+      onClose();
+      const temp = [...actionsList];
+      const index = actionsList.findIndex((item) => item.id === itemRemove.id);
+      temp.splice(index, 1);
+      setActionList(temp);
+      setData && setData(temp);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, itemRemove, actionsList]);
+
+  const renderItem = useCallback(({ item, index, drag }) => {
+    return (
+      <TouchableOpacity style={styles.wrapItem} onLongPress={drag}>
+        <View style={styles.leftItem}>
+          <Text color={Colors.Gray9} type="H4" semibold>
+            {index + 1 < 10 ? '0' + (index + 1) : index + 1}
+          </Text>
+          <Rearrange />
+        </View>
+        <View style={styles.rightItem}>
+          <FImage
+            source={{ uri: item?.sensor_icon_kit }}
+            style={styles.iconItem}
+          />
+          <View style={styles.contentItem}>
+            <Text numberOfLines={1} type="Label" color={Colors.Gray7}>
+              {item?.station_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9} semibold>
+              {item?.sensor_name}
+            </Text>
+            <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+              {item?.action_name}
+            </Text>
+          </View>
+          <TouchableOpacity
+            onPress={onPressRemove({
+              id: item?.id,
+              actionName: item?.sensor_name,
+              stationName: item?.station_name,
+            })}
+            style={styles.closeButton}
+          >
+            <Close />
+          </TouchableOpacity>
+        </View>
+      </TouchableOpacity>
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('edit_actions_list')}
+        headerAniStyle={styles.headerAniStyle}
+      >
+        <View style={styles.wrapContent}>
+          <Text type="Body" color={Colors.Gray8}>
+            {t('des_edit_actions_list')}
+          </Text>
+          <DraggableFlatList
+            data={actionsList}
+            renderItem={renderItem}
+            keyExtractor={(item) => `draggable-item-${item.key}`}
+            onDragEnd={({ data }) => setActionList(data)}
+            extraData={actionsList}
+            containerStyle={styles.containerStyle}
+          />
+        </View>
+      </WrapHeaderScrollable>
+      <View style={styles.wrapBottom}>
+        <TouchableOpacity onPress={onPressCancel}>
+          <Text type="H4" hilight semibold>
+            {t('cancel')}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity onPress={onPressSave}>
+          <Text type="H4" hilight semibold>
+            {t('save')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+      <ModalBottom
+        isVisible={isVisible}
+        title={t('delette_action')}
+        onClose={onClose}
+        onRemove={onRemove}
+      >
+        <View style={styles.wrapChildModal}>
+          <ParsedText
+            style={styles.messageDelete}
+            parse={[
+              {
+                pattern: new RegExp(itemRemove?.actionName),
+                style: styles.textHighlight,
+              },
+              {
+                pattern: new RegExp(itemRemove?.stationName),
+                style: styles.textHighlight,
+              },
+            ]}
+            childrenProps={{ allowFontScaling: false }}
+          >
+            {t('message_delete_action', {
+              actionName: itemRemove?.actionName,
+              stationName: itemRemove?.stationName,
+            })}
+          </ParsedText>
+        </View>
+      </ModalBottom>
+    </View>
+  );
+};
+
+export default EditActionsList;

package/src/screens/EmergencyContacts/EmergencyContactsAddNew.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { SafeAreaView, StyleSheet, TextInput } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { API, Colors } from '../../configs';
@@ -11,6 +11,7 @@ import { axiosPost } from '../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../utils/Utils';
 
 export const EmergencyContactsAddNew = ({ route }) => {
+  const t = useTranslations();
   const { group } = route.params;
   const { goBack } = useNavigation();
   const { keyboardBottomPadding } = useKeyboardShow();
@@ -42,7 +43,7 @@ export const EmergencyContactsAddNew = ({ route }) => {
     } else {
       ToastBottomHelper.error(t('create_contact_failed'));
     }
-  }, [goBack, group.id, textName, textPhone]);
+  }, [goBack, group.id, t, textName, textPhone]);
 
   return (
     <SafeAreaView

package/src/screens/EmergencyContacts/EmergencyContactsList.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { AlertAction, MenuActionList, Section } from '../../commons';
 import { RowUser } from '../../commons/RowUser';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -17,6 +17,7 @@ import { ToastBottomHelper } from '../../utils/Utils';
 const MAX_EMERGENCY_CONTACTS = 5;
 
 export const EmergencyContactsList = ({ route }) => {
+  const t = useTranslations();
   const { unitId, group } = route.params;
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
@@ -48,7 +49,13 @@ export const EmergencyContactsList = ({ route }) => {
       ToastBottomHelper.error(message);
     }
     hideAlertRemoveContact();
-  }, [stateAlertRemoveContact, getListContacts, group, hideAlertRemoveContact]);
+  }, [
+    stateAlertRemoveContact.member.id,
+    hideAlertRemoveContact,
+    t,
+    getListContacts,
+    group.id,
+  ]);
 
   const onAddNew = useCallback(() => {
     setShowAddnewModal();

package/src/screens/EmergencyContacts/EmergencyContactsSelectContacts.js

@@ -2,7 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { SafeAreaView, StyleSheet, View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { Section, ViewButtonBottom } from '../../commons';
 import { RowUser } from '../../commons/RowUser';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -29,6 +29,7 @@ const dataContact = [
 ];
 
 export const EmergencyContactsSelectContacts = ({ route }) => {
+  const t = useTranslations();
   const { goBack } = useNavigation();
   // const { unitId } = route.params;