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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.39",
+  "version": "0.3.40",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/StatusBox/index.js

@@ -0,0 +1,19 @@
+import React, { memo } from 'react';
+import { View } from 'react-native';
+
+import Text from '../Text';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const StatusBox = ({ status }) => {
+  const t = useTranslations();
+  return (
+    <View style={[styles.viewStatus, status && styles.viewOnline]}>
+      <Text style={[styles.textStatus, status && styles.textOnline]}>
+        {t(status ? 'online' : 'offline')}
+      </Text>
+    </View>
+  );
+};
+
+export default memo(StatusBox);

package/src/commons/StatusBox/styles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  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',
+  },
+  textOnline: {
+    fontStyle: 'bold',
+  },
+  viewOnline: {
+    backgroundColor: Colors.LightGreen,
+    borderWidth: 0,
+  },
+});

package/src/commons/index.js

@@ -16,7 +16,10 @@ import RadioCircle from './RadioCircle';
 import { CircleButton } from './CircleButton';
 import HorizontalPicker from './HorizontalPicker';
 import FullLoading from './FullLoading';
-
+import Text from './Text';
+import { HeaderCustom } from './Header';
+import StatusBox from './StatusBox';
+import WrapHeaderScrollable from './Sharing/WrapHeaderScrollable';
 export {
   ButtonPopup,
   CircleView,
@@ -36,4 +39,8 @@ export {
   CircleButton,
   HorizontalPicker,
   FullLoading,
+  Text,
+  HeaderCustom,
+  StatusBox,
+  WrapHeaderScrollable,
 };

package/src/configs/API.js

@@ -211,6 +211,10 @@ const API = {
     GET_TEMPLATES: '/property_manager/iot_dashboard/dev_mode/templates/',
     GET_WIDGETS: (templateId) =>
       `/property_manager/iot_dashboard/dev_mode/templates/${templateId}/list_widgets/`,
+    GATEWAY: {
+      LIST: () => '/chip_manager/developer_mode_chips/',
+      DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
+    },
   },
 };
 

package/src/configs/AccessibilityLabel.js

@@ -638,7 +638,8 @@ export default {
   BUTTON_CANCEL_EDIT_ACTION_LIST: 'BUTTON_CANCEL_EDIT_ACTION_LIST',
   BUTTON_SAVE_EDIT_ACTION_LIST: 'BUTTON_SAVE_EDIT_ACTION_LIST',
   BUTTON_REMOVE_EDIT_ACTION_LIST: 'BUTTON_REMOVE_EDIT_ACTION_LIST',
-
+  // GATEWAY
+  LIST_GATEWAY: 'LIST_GATEWAY',
   //Notification
   CUSTOM_TEXT: 'CUSTOM_TEXT',
   //ButtonWrapper

package/src/configs/Colors.js

@@ -60,6 +60,7 @@ export const Colors = {
   Gray17: '#D3D3D3',
   Gray18: '#9B9A9B',
   Gray19: '#E5E5E5',
+  Gray20: '#808080',
 
   // Range Green
   Green1: '#F6FFED',

package/src/screens/Device/detail.js

@@ -220,6 +220,15 @@ const DeviceDetail = ({ route }) => {
     }
   }, [fetchSensorDetail, sensorId, sensorData]);
 
+  const fetchRemoteControlOptions = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
+      {},
+      true
+    );
+    success && setControlOptions(data);
+  }, [sensor]);
+
   const fetchDataDeviceDetail = useCallback(async () => {
     if (!token) {
       return;
@@ -259,16 +268,11 @@ const DeviceDetail = ({ route }) => {
     }
     setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
-    const controlResult = await axiosGet(
-      API.DEVICE.REMOTE_CONTROL_OPTIONS(sensor?.id),
-      {},
-      true
-    );
-
-    if (controlResult.success) {
-      setControlOptions(controlResult.data);
-    }
-  }, [token, sensor, setDeviceId, setLastEvent]);
+    success &&
+      data.items.length &&
+      data.items.some((item) => item.type === 'action') &&
+      (await fetchRemoteControlOptions());
+  }, [token, sensor, setDeviceId, fetchRemoteControlOptions]);
 
   const {
     deviceId: emergencyDeviceId,

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/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",

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",

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',