@eohjsc/react-native-smart-city 0.3.39 → 0.3.41

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

@@ -1,16 +1,43 @@
 import React from 'react';
-import { View } from 'react-native';
+import { FlatList } from 'react-native';
 import { act, create } from 'react-test-renderer';
 import Gateway from '..';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { AccessibilityLabel } from '../../../configs/Constants';
 
-describe('Test Template screen', () => {
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Gateway />
+  </SCProvider>
+);
+
+describe('Test Gateway screen', () => {
   let tree;
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(<Gateway />);
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const view = instance.findByProps({
+      accessibilityLabel: AccessibilityLabel.LIST_GATEWAY,
+    });
+    const flatLists = instance.findAllByType(FlatList);
+    expect(view.props.children[0].props.children).toEqual('Gateway');
+    expect(flatLists).toHaveLength(1);
+  });
+
+  it('Test render empty', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const Views = instance.findAllByType(View);
-    expect(Views).toHaveLength(1);
+    const flatLists = instance.findAllByType(FlatList);
+    expect(
+      flatLists[0].props.ListEmptyComponent.props.children.props.text1
+    ).toEqual('No Gateway yet');
+    expect(
+      flatLists[0].props.ListEmptyComponent.props.children.props.text2
+    ).toEqual("You don't have any gateway");
   });
 });

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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+import { SCProvider } from '../../../../../context';
+import { mockSCStore } from '../../../../../context/mockStore';
+import GatewayItem from '..';
+
+const mockOnPressItem = jest.fn();
+
+const wrapComponent = (item) => (
+  <SCProvider initState={mockSCStore({})}>
+    <GatewayItem item={item} onPress={mockOnPressItem} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+    useIsFocused: jest.fn(),
+  };
+});
+
+describe('Test GatewayItem', () => {
+  let tree;
+  let item;
+  beforeEach(() => {
+    item = {
+      id: 1,
+      name: 'gatewayItem',
+      is_connected: false,
+      last_healthy: 1,
+    };
+    mockNavigate.mockClear();
+  });
+
+  it('test render GatewayItem connect false', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(item));
+    });
+    const instance = tree.root;
+
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+  });
+
+  it('test render GatewayItem connect true', async () => {
+    item = {
+      ...item,
+      is_connected: true,
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(item));
+    });
+    const instance = tree.root;
+
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+  });
+
+  it('test render GatewayItem onPress', async () => {
+    item = {
+      id: 1,
+      name: 'gatewayItem',
+      is_connected: false,
+      last_healthy: 1,
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(item));
+    });
+    const instance = tree.root;
+
+    const buttons = instance.findAllByType(TouchableOpacity);
+    expect(buttons).toHaveLength(1);
+    await act(async () => {
+      await buttons[0].props.onPress();
+    });
+    expect(mockOnPressItem).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { Colors } from '../../../../configs';
+import { Text, StatusBox } from '../../../../commons';
+import styles from './styles';
+
+const GatewayItem = ({ item, onPress }) => {
+  return (
+    <View style={styles.wrap}>
+      <TouchableOpacity style={styles.button} onPress={onPress}>
+        <View style={styles.viewTitle}>
+          <Text type="Body" bold color={Colors.Gray9} style={styles.textTitle}>
+            {item?.name}
+          </Text>
+        </View>
+        <View style={styles.viewValue}>
+          <Text type="Body" color={Colors.Gray20} style={styles.textValue}>
+            {`${item?.last_healthy || '--'} dBm`}
+          </Text>
+        </View>
+        <StatusBox status={item?.is_connected} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default memo(GatewayItem);

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

@@ -0,0 +1,62 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    padding: 16,
+    marginBottom: 16,
+    backgroundColor: Colors.White,
+    borderRadius: 8,
+    width: Constants.width / 2 - 24,
+    borderWidth: 1,
+    borderColor: Colors.Neutral.Neutral3,
+  },
+  button: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  viewTitle: {
+    marginBottom: 6,
+  },
+  viewValue: {
+    marginBottom: 6,
+  },
+  textTitle: {
+    lineHeight: 20,
+    height: 40,
+    fontWeight: 600,
+    textOverflow: 'ellipsis',
+  },
+  textValue: {
+    fontWeight: 400,
+  },
+  viewStatus: {
+    width: 65,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 54,
+    backgroundColor: Colors.White,
+    borderColor: Colors.Neutral.Neutral3,
+    borderWidth: 1,
+  },
+  textStatus: {
+    fontStyle: 'normal',
+    fontWeight: 600,
+    letterSpacing: 0.04,
+    fontSize: 12,
+    lineHeight: 16,
+    textTransform: 'uppercase',
+    textAlign: 'center',
+  },
+  listGateways: {
+    width: '100%',
+    paddingVertical: 16,
+  },
+  textOnline: {
+    fontStyle: 'bold',
+  },
+  viewOnline: {
+    backgroundColor: Colors.LightGreen,
+    borderWidth: 0,
+  },
+});

package/src/screens/Gateway/hooks/useGateway.js

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+import { axiosGet } from '../../../utils/Apis/axios';
+import API from '../../../configs/API';
+
+export default () => {
+  const [loading, setLoading] = useState(true);
+  const [gateways, setGateways] = useState([]);
+  const [nameSearch, setNameSearch] = useState('');
+  const [gatewayDetail, setGatewayDetail] = useState([]);
+
+  const fetchDataDetail = useCallback(async () => {
+    setLoading(true);
+    const { success, data } = await axiosGet(API.DEV_MODE.GATEWAY.LIST());
+    if (success) {
+      setGatewayDetail(data?.results || []);
+    }
+    setLoading(false);
+  }, []);
+
+  const fetchDataGateways = useCallback(async () => {
+    setLoading(true);
+    const { success, data } = await axiosGet(API.DEV_MODE.GATEWAY.LIST());
+    if (success) {
+      setGateways(data?.results || []);
+    }
+    setLoading(false);
+  }, []);
+
+  return {
+    gateways,
+    fetchDataGateways,
+    loading,
+    setNameSearch,
+    nameSearch,
+    gatewayDetail,
+    fetchDataDetail,
+  };
+};

package/src/screens/Gateway/index.js

@@ -1,8 +1,80 @@
-import React from 'react';
-import { View } from 'react-native';
+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 GatewayItem from './components/GatewayItem';
+import useGateway from './hooks/useGateway';
+import Routes from '../../utils/Route';
 
-const Gateway = () => {
-  return <View />;
+const Gateway = ({ route }) => {
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const { navigate } = useNavigation();
+  const { gateways, fetchDataGateways, setNameSearch, nameSearch } =
+    useGateway();
+
+  const goGoDetail = useCallback(
+    (item) => () => {
+      navigate(Routes.GatewayDetail, { item });
+    },
+    [navigate]
+  );
+
+  const gatewaysSearched = useMemo(() => {
+    return gateways.filter(
+      (item) =>
+        item?.name?.toLowerCase()?.indexOf(nameSearch?.toLowerCase()) > -1
+    );
+  }, [gateways, nameSearch]);
+
+  const renderListEmptyComponent = useMemo(() => {
+    return (
+      <View style={styles.wrapEmpty}>
+        <EmptyComponent
+          text1={t('no_gateway_yet')}
+          text2={t('you_dont_have_any_gateway')}
+        />
+      </View>
+    );
+  }, [t]);
+
+  const renderItem = useCallback(
+    ({ item, index }) => (
+      <GatewayItem item={item} key={index} onPress={goGoDetail(item)} />
+    ),
+    [goGoDetail]
+  );
+
+  useEffect(() => {
+    isFocused && fetchDataGateways();
+  }, [isFocused, fetchDataGateways]);
+
+  return (
+    <View
+      style={styles.wrap}
+      accessibilityLabel={AccessibilityLabel.LIST_GATEWAY}
+    >
+      <Text type="H3" bold color={Colors.Gray9} style={styles.textTitle}>
+        {t('gateway')}
+      </Text>
+      <Search onSearch={setNameSearch} />
+      <FlatList
+        columnWrapperStyle={styles.spaceBetween}
+        contentContainerStyle={styles.contentContainerStyle}
+        keyExtractor={(item) => item?.id}
+        data={gatewaysSearched}
+        renderItem={renderItem}
+        extraData={gatewaysSearched}
+        ListEmptyComponent={renderListEmptyComponent}
+        numColumns={2}
+      />
+    </View>
+  );
 };
 
-export default Gateway;
+export default memo(Gateway);

package/src/screens/Gateway/styles.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    paddingTop: 16,
+    paddingHorizontal: 16,
+    backgroundColor: Colors.Gray2,
+  },
+  textTitle: {
+    fontStyle: 'normal',
+    fontWeight: 650,
+    fontSize: 28,
+    lineHeight: 36,
+    marignBottom: 16,
+  },
+  scrollview: {
+    flex: 1,
+  },
+  contentContainerStyle: {
+    flexDirection: 'column',
+  },
+  wrapEmpty: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: Constants.height - 330,
+  },
+  spaceBetween: {
+    justifyContent: 'space-between',
+  },
+});

package/src/screens/SubUnit/Detail.js

@@ -74,8 +74,9 @@ const SubUnitDetail = ({ route }) => {
 
   const onAdd = useCallback(() => {
     navigation.navigate(Routes.AddGatewayStack, {
-      screen: Routes.FirstWarning,
+      screen: Routes.SelectDeviceType,
       params: {
+        stationName: station.name,
         stationId: station.id,
         unitId: unit.id,
         unitName: unit.name,

package/src/screens/Unit/AddMenu.js

@@ -43,7 +43,7 @@ const AddMenu = memo(({ unit, afterItemClick, showAdd, setHideAdd }) => {
         text: t('device'),
         image: <AddDeviceIcon width={43} height={43} />,
         data: {
-          screen: Routes.FirstWarning,
+          screen: Routes.SelectDeviceType,
           params: { unitId: unit?.id, unitName: unit?.name },
         },
       },

package/src/screens/Unit/Detail.js

@@ -265,7 +265,9 @@ const UnitDetail = ({ route }) => {
         />
       );
     } else if (station) {
-      return <ShortDetailSubUnit unit={unit} station={station} />;
+      return (
+        <ShortDetailSubUnit unit={unit} station={station} isOwner={isOwner} />
+      );
     }
   };
 

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

@@ -999,6 +999,10 @@
   "no_template_yet": "No Template yet",
   "add_your_template": "Add your template at web app",
   "edit_template": "Edit template",
+  "no_gateway_yet": "No Gateway yet",
+  "you_dont_have_any_gateway": "You don't have any gateway",
+  "gateway_information": "Gateway information",
+  "reboot": "Reboot",
   "information": "Information",
   "gateway_list": "Gateway list",
   "delete_template": "Delete template",
@@ -1035,12 +1039,24 @@
   "turn_off_device": "Turn off device",
   "turn_off_device_when_scan_qr_guide": "Turn off the device you want to add new before scanning the QR code. Press ‘’OK’’ to continue.",
   "connect_to_router": "Connect to the Router",
-  "connect_router_content": "Please plug in the gatewayand connect it to the router, making sure your phone and the gatewayare under the same network. Then, comfirm that the light is on and press “Next”",
+  "connect_router_content": "Please plug in the gateway and connect it to the router, making sure your phone and the gateway are under the same network. Then, comfirm that the light is on and press “Next”",
   "turn_on_zigbee_device": "Turn on zigbee device",
   "turn_on_device_to_connect": "Turn on device to connect",
   "turn_on_zigbee_device_content": "Power ON the device and keep the device connected to the router. Make sure the end device still ON",
   "read_device_manual_guide": "Read Device's manual guide for more details.",
+  "no_gateway": "No Gateway!",
+  "need_add_gateway_before_add_device": "You need to add a new Gateway before adding the device.",
   "fail_to_discover_device_wifi": "Fail to discover device wifi",
   "try_to_turn_on_device_or_try_again": "Try to turn on device or Try again",
+  "click_on_box_to_rename_device": "Click on the box to rename your device",
+  "cannot_connect_to_device_wifi": "Cannot connect to device's wifi",
+  "try_turn_on_device_or_try_again": "Try turn on device or try again",
+  "fail_trigger_scan_wifi_on_device": "Fail trigger scan wifi on device",
+  "fail_add_wifi_device": "Fail add wifi device",
+  "connecting_wifi_device": "Connecting wifi device",
+  "connecting_to_device": "Connecting to device",
+  "connecting_modbus_device": "Connecting to modbus device",
+  "connecting_zigbee_device": "Connecting to zigbee device",
+  "connecting_to_gateway": "Connecting to gateway",
   "click_here_to_setup_device": "Click here to setup device"
 }

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

@@ -998,6 +998,10 @@
   "no_template_yet": "Chưa có mẫu nào",
   "add_your_template": "Thêm mẫu của bạn trên web",
   "edit_template": "Chỉnh sửa mẫu",
+  "no_gateway_yet": "Chưa có cổng nào",
+  "you_dont_have_any_gateway": "Bạn không có bất kỳ cổng nào",
+  "gateway_information": "Thông tin cổng",
+  "reboot": "Khởi động lại",
   "information": "Thông tin",
   "gateway_list": "Danh sách cổng vào",
   "delete_template": "Xóa mẫu",
@@ -1038,7 +1042,19 @@
   "turn_on_device_to_connect": "Bật thiết bị để kết nối",
   "turn_on_zigbee_device_content": "BẬT nguồn thiết bị và giữ thiết bị kết nối với bộ định tuyến. Đảm bảo thiết bị cuối vẫn BẬT",
   "read_device_manual_guide": "Đọc hướng dẫn sử dụng của Thiết bị để biết thêm chi tiết.",
+  "no_gateway": "Không có Gateway!",
+  "need_add_gateway_before_add_device": "Bạn cần thêm mới 1 Gateway trước khi thêm thiết bị.",
   "fail_to_discover_device_wifi": "Không phát hiện được wifi của thiết bị",
   "try_to_turn_on_device_or_try_again": "Thử bật thiết bị hoặc Thử lại",
+  "click_on_box_to_rename_device": "Nhấp vào ô để đổi tên thiết bị của bạn",
+  "cannot_connect_to_device_wifi": "Không thể kết nối với wifi của thiết bị",
+  "try_turn_on_device_or_try_again": "Hãy thử bật thiết bị hoặc thử lại",
+  "fail_trigger_scan_wifi_on_device": "Không kích hoạt được quét wifi trên thiết bị",
+  "fail_add_wifi_device": "Không thêm được thiết bị Wi-Fi",
+  "connecting_wifi_device": "Kết nối thiết bị wifi",
+  "connecting_to_device": "Đang kết nối với thiết bị",
+  "connecting_modbus_device": "Kết nối với thiết bị modbus",
+  "connecting_zigbee_device": "Kết nối với thiết bị zigbee",
+  "connecting_to_gateway": "Kết nối với gateway",
   "click_here_to_setup_device": "Chọn thiết bị thêm vào phòng"
 }

package/src/utils/Route/index.js

@@ -160,6 +160,7 @@ const Routes = {
   Template: 'Template',
   TemplateDetail: 'TemplateDetail',
   Gateway: 'Gateway',
+  GatewayDetail: 'GatewayDetail',
   Smart: 'Smart',
   TemplateStack: 'TemplateStack',
   GatewayStack: 'GatewayStack',