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

package/src/screens/AddNewGateway/hooks/useWifiManage.js

@@ -0,0 +1,29 @@
+import { useCallback } from 'react';
+import WifiManager from 'react-native-wifi-reborn';
+import { Platform } from 'react-native';
+
+const useWifiManage = () => {
+  const getCurrentWifiSSID = useCallback(async () => {
+    const currentConnectingWifi =
+      (await WifiManager.getCurrentWifiSSID()) || '';
+    return currentConnectingWifi;
+  }, []);
+
+  const disconnectWifi = useCallback(async (ssid) => {
+    try {
+      Platform.OS === 'ios'
+        ? await WifiManager.disconnectFromSSID(ssid)
+        : await WifiManager.disconnect();
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('wifiManage-disconnect', e);
+    }
+  }, []);
+
+  return {
+    getCurrentWifiSSID,
+    disconnectWifi,
+  };
+};
+
+export { useWifiManage };

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

@@ -106,7 +106,13 @@ describe('test DeviceDetail', () => {
           name: 'Unit name',
           address: '298 Dien Bien Phu',
           remote_control_options: {
-            googlehome: true,
+            googlehome: [
+              {
+                config_maps: [],
+                auth: {},
+                chip_id: 1,
+              },
+            ],
           },
         },
         station: {

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

@@ -43,13 +43,20 @@ export const SensorDisplayItem = ({
   const { configuration = {}, id: idTemplate } = item;
   const { type, uri, id, name, title } = configuration;
 
+  const { isEditingTemplate } = useSCContextSelector((state) => state.devMode);
+
   const sendRemoteCommand = useRemoteControl();
 
   const doAction = useCallback(
     (action, data) => {
-      sendRemoteCommand(sensor, action, data, userId);
+      sendRemoteCommand(
+        isEditingTemplate ? action?.end_device : sensor,
+        action,
+        data,
+        userId
+      );
     },
-    [sensor, userId, sendRemoteCommand]
+    [isEditingTemplate, sensor, sendRemoteCommand, userId]
   );
 
   if (type === 'compass') {
@@ -81,6 +88,7 @@ export const SensorDisplayItem = ({
           doAction={doAction}
           sensor={sensor}
           id={idTemplate}
+          item={item}
         />
       );
     case 'history':

package/src/screens/Gateway/GatewayInfo/__test__/index.test.js

@@ -91,7 +91,7 @@ describe('Test GatewayInfo', () => {
     const btnConnect = buttonConnect(instance);
     const btnDelete = buttonDelete(instance);
     expect(headerCustom).toHaveLength(1);
-    expect(alert.props.children[1].props.children).toEqual(
+    expect(alert.props.children[1].props.children.props.children).toEqual(
       t('go_to_eoh_web_to_see_firmware')
     );
     expect(flatList).toHaveLength(1);

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

@@ -46,7 +46,7 @@ describe('Test Gateway screen', () => {
       accessibilityLabel: AccessibilityLabel.LIST_GATEWAY,
     });
     const flatLists = instance.findAllByType(FlatList);
-    expect(view.props.children[0].props.children).toEqual('Gateway');
+    expect(view.props.children[0].props.name).toEqual('Gateway');
     expect(flatLists).toHaveLength(1);
   });
 

package/src/screens/Gateway/components/GatewayItem/index.js

@@ -6,7 +6,7 @@ import styles from './styles';
 
 const GatewayItem = ({ item, onPress }) => {
   return (
-    <View style={styles.wrap}>
+    <View style={[styles.wrap, !item?.is_connected && styles.borderDisconnect]}>
       <TouchableOpacity style={styles.button} onPress={onPress}>
         <View style={styles.viewTitle}>
           <Text type="Body" bold color={Colors.Gray9} style={styles.textTitle}>

package/src/screens/Gateway/components/GatewayItem/styles.js

@@ -30,4 +30,8 @@ export default StyleSheet.create({
   textValue: {
     fontWeight: '400',
   },
+  borderDisconnect: {
+    borderColor: Colors.Red10,
+    borderWidth: 1,
+  },
 });

package/src/screens/Gateway/components/Information/__test__/index.test.js

@@ -49,7 +49,7 @@ describe('Test Information', () => {
     const flatList = instance.findAllByType(FlatList);
     expect(headerCustom).toHaveLength(1);
     expect(flatList).toHaveLength(1);
-    expect(viewAlert.props.children[1].props.children).toEqual(
+    expect(viewAlert.props.children[1].props.children.props.children).toEqual(
       'Go to EoH web to see firmware configuration'
     );
     const buttonConnect = instance.findByProps({

package/src/screens/Gateway/components/Information/index.js

@@ -44,9 +44,11 @@ const Information = ({
               accessibilityLabel={AccessibilityLabel.GATEWAY_INFO_ALERT}
             >
               <Image source={Images.inforCode} />
-              <Text type="H4" style={styles.marginLeft16}>
-                {t('go_to_eoh_web_to_see_firmware')}
-              </Text>
+              <View style={styles.flex1}>
+                <Text type="H4" style={styles.marginLeft16}>
+                  {t('go_to_eoh_web_to_see_firmware')}
+                </Text>
+              </View>
             </View>
           </View>
         )}

package/src/screens/Gateway/components/Information/styles.js

@@ -55,4 +55,7 @@ export default StyleSheet.create({
   marginLeft16: {
     marginLeft: 16,
   },
+  flex1: {
+    flex: 1,
+  },
 });

package/src/screens/Gateway/components/TabPaneCT/index.js

@@ -1,5 +1,11 @@
 import React, { useCallback, memo, useMemo, useRef } from 'react';
-import { View, TouchableOpacity, FlatList, Image } from 'react-native';
+import {
+  View,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  RefreshControl,
+} from 'react-native';
 import SegmentedControl from '@react-native-community/segmented-control';
 import Carousel from 'react-native-snap-carousel';
 
@@ -33,7 +39,7 @@ const TabPaneCT = ({
     },
     [onPressRow]
   );
-  const renderItem = useCallback(
+  const ItemGateWay = useCallback(
     ({ item }) => {
       const { sensor = {}, config = {}, action = {} } = item || {};
       const { name = '', is_connected = '' } = {
@@ -47,9 +53,17 @@ const TabPaneCT = ({
           style={[styles.deviceItem, isDevice && styles.buttonItem]}
           onPress={handleOnPressRow(item)}
         >
-          <Text type="H4">{name}</Text>
+          <View style={styles.flex1}>
+            <Text type="H4" numberOfLines={1}>
+              {name}
+            </Text>
+          </View>
           {!isDevice ? (
-            <StatusBox status={is_connected} />
+            <StatusBox
+              status={is_connected}
+              typeConnect
+              styleWrap={styles.statusBox}
+            />
           ) : (
             <Image style={styles.arrowRight} source={Images.arrowLeft} />
           )}
@@ -62,7 +76,14 @@ const TabPaneCT = ({
   const renderItemPanel = useCallback(
     ({ item }) => {
       return (
-        <View style={[styles.pane, stylesPane]}>
+        <ScrollView
+          style={[styles.pane, stylesPane]}
+          showsVerticalScrollIndicator={false}
+          refreshControl={
+            <RefreshControl onRefresh={onRefresh} refreshing={refresh} />
+          }
+          accessibilityLabel={AccessibilityLabel.TAB_PANE_CT_SCROLLVIEW}
+        >
           {!isDevice && (
             <View style={styles.titleTab}>
               <Text type="H4" bold>{`${t('device')} (${
@@ -70,30 +91,13 @@ const TabPaneCT = ({
               })`}</Text>
             </View>
           )}
-
-          <FlatList
-            accessibilityLabel={AccessibilityLabel.TAB_PANE_CT_FLATLIST}
-            contentContainerStyle={[
-              {
-                ...styles.contentContainerStyle,
-              },
-              isDevice && { ...styles.paddingTop16 },
-            ]}
-            // eslint-disable-next-line no-shadow
-            keyExtractor={(item) => item?.id}
-            showsVerticalScrollIndicator={false}
-            showsHorizontalScrollIndicator={false}
-            onRefresh={onRefresh}
-            refreshing={refresh}
-            data={item?.data || []}
-            renderItem={renderItem}
-            extraData={item?.data || []}
-            numColumns={1}
-          />
-        </View>
+          {(item?.data || []).map((data, index) => (
+            <ItemGateWay item={data} key={index.toString()} />
+          ))}
+        </ScrollView>
       );
     },
-    [renderItem, isDevice, onRefresh, stylesPane, refresh]
+    [isDevice, onRefresh, stylesPane, refresh]
   );
 
   const onChangeTabs = useCallback(

package/src/screens/Gateway/components/TabPaneCT/styles.js

@@ -25,7 +25,6 @@ export default StyleSheet.create({
     marginBottom: 16,
   },
   contentContainerStyle: {
-    flex: 1,
     width: '100%',
     height: '100%',
   },
@@ -40,6 +39,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     paddingBottom: 16,
+    width: 'auto',
   },
   paddingTop16: {
     paddingTop: 16,
@@ -55,4 +55,10 @@ export default StyleSheet.create({
   colorGray9: {
     color: Colors.Gray9,
   },
+  flex1: {
+    flex: 1,
+  },
+  statusBox: {
+    width: 'auto',
+  },
 });

package/src/screens/Gateway/index.js

@@ -1,15 +1,14 @@
 import React, { useCallback, memo, useEffect, useMemo } from 'react';
 import { View, FlatList } from 'react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
-import { AccessibilityLabel } from '../../configs/Constants';
-import { Colors } from '../../configs';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Text } from '../../commons';
-import styles from './styles';
-import { Search, EmptyComponent } from '../../commons/DevMode';
+
+import { Search, EmptyComponent, Label } from '../../commons/DevMode';
 import GatewayItem from './components/GatewayItem';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useGateway } from './hooks/useGateway';
+import { AccessibilityLabel } from '../../configs/Constants';
 import Routes from '../../utils/Route';
+import styles from './styles';
 
 const Gateway = ({ route }) => {
   const t = useTranslations();
@@ -71,9 +70,7 @@ const Gateway = ({ route }) => {
       style={styles.wrap}
       accessibilityLabel={AccessibilityLabel.LIST_GATEWAY}
     >
-      <Text type="H3" bold color={Colors.Gray9} style={styles.textTitle}>
-        {t('gateway')}
-      </Text>
+      <Label name={t('gateway')} />
       <Search onSearch={setNameSearch} />
       <FlatList
         onRefresh={onRefresh}
@@ -81,7 +78,10 @@ const Gateway = ({ route }) => {
         columnWrapperStyle={styles.spaceBetween}
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
-        contentContainerStyle={styles.contentContainerStyle}
+        contentContainerStyle={[
+          styles.contentContainerStyle,
+          gatewaysSearched?.length === 0 && styles.flex1,
+        ]}
         keyExtractor={(item) => item?.id}
         data={gatewaysSearched}
         renderItem={renderItem}

package/src/screens/Gateway/styles.js

@@ -15,7 +15,6 @@ export default StyleSheet.create({
     lineHeight: 36,
   },
   contentContainerStyle: {
-    flex: 1,
     flexDirection: 'column',
     height: 'auto',
   },
@@ -27,4 +26,7 @@ export default StyleSheet.create({
   spaceBetween: {
     justifyContent: 'space-between',
   },
+  flex1: {
+    flex: 1,
+  },
 });

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 import { Animated, RefreshControl } from 'react-native';
+import { NavigationContext } from '@react-navigation/native';
 
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -12,7 +13,14 @@ import api from '../../../utils/Apis/axios';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
-    <Notification />
+    <NavigationContext.Provider
+      value={{
+        addListener: jest.fn(() => jest.fn()),
+        isFocused: () => true,
+      }}
+    >
+      <Notification />
+    </NavigationContext.Provider>
   </SCProvider>
 );
 

package/src/screens/Notification/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { Icon } from '@ant-design/react-native';
+import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
 import { API, Colors } from '../../configs';
@@ -59,10 +60,12 @@ const Notification = memo(() => {
     }
   }, []);
 
-  useEffect(() => {
-    fetchNotifications(1);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useFocusEffect(
+    useCallback(() => {
+      fetchNotifications(1);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [])
+  );
 
   const handleOnLoadMore = useCallback(() => {
     page += 1;

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

@@ -1,16 +1,28 @@
 import React from 'react';
-import { View } from 'react-native';
 import { act, create } from 'react-test-renderer';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { EmptyComponent } from '../../../commons/DevMode';
+import t from '../../../hooks/Common/useTranslations';
+
 import Smart from '..';
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Smart route={route} />
+  </SCProvider>
+);
+
 describe('Test Template screen', () => {
   let tree;
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(<Smart />);
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(1);
+    const emptyComponent = instance.findByType(EmptyComponent);
+    expect(emptyComponent.props.text1).toEqual(t('text_under_development'));
+    expect(emptyComponent.props.text2).toEqual(t('text_working_hard'));
   });
 });

package/src/screens/Smart/index.js

@@ -1,8 +1,22 @@
 import React from 'react';
 import { View } from 'react-native';
+import { EmptyComponent } from '../../commons/DevMode';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import styles from './styles';
 
 const Smart = () => {
-  return <View />;
+  const t = useTranslations();
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.wrapEmpty}>
+        <EmptyComponent
+          text1={t('text_under_development')}
+          text2={t('text_working_hard')}
+        />
+      </View>
+    </View>
+  );
 };
 
 export default Smart;

package/src/screens/Smart/styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+    padding: 16,
+  },
+  wrapEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 200,
+  },
+});

package/src/screens/Template/EditTemplate.js

@@ -88,7 +88,7 @@ const EditTemplate = () => {
   return (
     <View style={styles.wrap}>
       <HeaderCustom
-        title={t('edit_template')}
+        title={t('edit_dashboard')}
         wrapTitleStyle={styles.wrapTitleStyle}
         iconLeft={Images.close}
         iconBackStyle={styles.iconBackStyle}

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

@@ -15,6 +15,6 @@ export default StyleSheet.create({
   },
 
   contentContainerStyle: {
-    flex: 1,
+    height: 'auto',
   },
 });

package/src/screens/Template/detail.js

@@ -19,6 +19,7 @@ import t from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { SensorDisplayItem } from '../Device/components/SensorDisplayItem';
 import { axiosGet } from '../../utils/Apis/axios';
+import { watchMultiConfigs } from '../../iot/Monitor';
 
 const TemplateDetail = () => {
   const refMenuAction = useRef();
@@ -30,6 +31,23 @@ const TemplateDetail = () => {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(true);
 
+  const listIds = useMemo(() => {
+    const configIds = [];
+    // eslint-disable-next-line no-shadow
+    data.forEach((item) => {
+      switch (item.type) {
+        case 'value':
+          (item?.configuration?.configs || []).forEach((config) => {
+            configIds.push(config.id);
+          });
+          break;
+        default:
+          configIds.push(item?.configuration?.configuration?.config);
+      }
+    });
+    return configIds;
+  }, [data]);
+
   // eslint-disable-next-line no-shadow
   const onItemClick = useCallback((item) => {
     item.doAction();
@@ -67,7 +85,7 @@ const TemplateDetail = () => {
   const listMenuItem = useMemo(
     () => [
       {
-        text: t('edit_template'),
+        text: t('edit_dashboard'),
         doAction: goToDetail(Routes.EditTemplate, { setData, data }),
       },
       {
@@ -79,7 +97,7 @@ const TemplateDetail = () => {
         doAction: goToDetail(Routes.GatewayList),
       },
       {
-        text: t('delete_template'),
+        text: t('delete_dashboard'),
         doAction: goToDetail(Routes.GatewayList),
         textStyle: { color: Colors.Red },
       },
@@ -114,6 +132,10 @@ const TemplateDetail = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    listIds.length && watchMultiConfigs(listIds);
+  }, [listIds]);
+
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable
@@ -121,6 +143,7 @@ const TemplateDetail = () => {
         headerAniStyle={styles.headerAniStyle}
         rightComponent={rightComponent}
         onGoBack={goBack}
+        onRefresh={getWidgets}
       >
         {!isLoading && !data?.length
           ? renderEmpty
@@ -133,6 +156,7 @@ const TemplateDetail = () => {
                   offsetTitle={'offsetTitle'}
                   setOffsetTitle={'setOffsetTitle'}
                   maxValue={100}
+                  sensor={item}
                 />
               );
             })}

package/src/screens/Template/index.js

@@ -71,7 +71,7 @@ const Template = () => {
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={styles.wrap}>
-        <Label name={t('template')} />
+        <Label name={t('dashboard')} />
         <Search onSearch={onSearch} />
         <FlatList
           contentContainerStyle={styles.contentContainerStyle}