@eohjsc/react-native-smart-city 0.2.84 → 0.2.85

package/src/commons/ConnectingProcess/index.js

@@ -0,0 +1,202 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { SafeAreaView, View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+import * as Progress from 'react-native-progress';
+import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
+
+import Text from '../Text';
+import { axiosPost } from '../../utils/Apis/axios';
+import { API, Colors, Constants } from '../../configs';
+import styles from './styles';
+import DeviceItem from './DeviceItem/DeviceItem';
+import { useSCContextSelector } from '../../context';
+
+const ConnectingProcess = ({ route }) => {
+  const { navigate, goBack } = useNavigation();
+  const t = useTranslations();
+
+  const {
+    scan_sensor_data,
+    gateway,
+    station,
+    unit,
+    unit_id,
+    devicePrefixName,
+    wifi_ssid,
+    wifi_pass,
+    chip_id,
+  } = route.params;
+  const [percent, setPercent] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [sensor, setSensor] = useState(null);
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
+  useEffect(() => {
+    processLoading();
+  }, [processLoading]);
+
+  const processLoading = useCallback(() => {
+    let interval;
+    if (isLoading) {
+      interval = setInterval(() => {
+        setPercent((prev) => {
+          if (prev === 1) {
+            clearInterval(interval);
+            return 1;
+          } else {
+            return prev + 0.2;
+          }
+        });
+      }, 180);
+    } else {
+      clearInterval(interval);
+    }
+  }, [isLoading]);
+
+  const ConnectingDevice = useCallback(async () => {
+    setIsLoading(true);
+    switch (devicePrefixName) {
+      case 'SENSOR':
+        {
+          const body = { imei: scan_sensor_data?.imei, chip: gateway?.id };
+          const { success, data } = await axiosPost(
+            API.SUB_UNIT.SENSOR_SCAN(station.id),
+            body
+          );
+          if (success) {
+            setSensor(data);
+          } else {
+            goBack();
+          }
+        }
+        break;
+      case 'ROBOT': {
+        const { success, data } = await axiosPost(API.UNIT.CHIP_SCAN(unit.id), {
+          imei: gateway?.imei,
+          qr_code: scan_sensor_data?.imei,
+          name: gateway?.model,
+          station: station?.id,
+          wifi_ssid: wifi_ssid,
+          wifi_pass: wifi_pass,
+          phone: user?.phone_number,
+        });
+        if (success) {
+          setSensor(data);
+        } else {
+          goBack();
+        }
+        break;
+      }
+      case 'LITE': {
+        const { success } = await axiosPost(API.UNIT.ADD_GATEWAY(unit_id), {
+          chip: chip_id,
+          imei: gateway?.imei,
+          chip_name: gateway?.model,
+        });
+        if (success) {
+          setSensor({ name: gateway?.model });
+        } else {
+          goBack();
+        }
+        break;
+      }
+    }
+    setIsLoading(false);
+  }, [
+    devicePrefixName,
+    scan_sensor_data?.imei,
+    gateway?.id,
+    gateway?.imei,
+    gateway?.model,
+    station,
+    goBack,
+    unit,
+    wifi_ssid,
+    wifi_pass,
+    user?.phone_number,
+    unit_id,
+    chip_id,
+  ]);
+
+  const Connecting = useCallback(() => {
+    return (
+      <>
+        <View style={styles.progressBar}>
+          <View style={styles.connecting}>
+            <Text type="H4" bold>
+              {t('connecting')}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.percentLoad}>
+          <Progress.Bar
+            progress={percent}
+            animated={true}
+            color={Colors.Primary}
+            indeterminateAnimationDuration={1000}
+            height={7}
+            width={Constants.width - 80}
+            useNativeDriver={true}
+          />
+          <Text style={styles.textPercentLoad}>{`${parseInt(
+            percent * 100,
+            10
+          )}%`}</Text>
+        </View>
+      </>
+    );
+  }, [percent, t]);
+
+  const ConnectingSuccess = useCallback(() => {
+    return (
+      <View style={styles.ConnectingSuccess}>
+        <ImageSuccessfully />
+        <Text bold style={styles.connectingText}>
+          {t('successfully_connected')}
+        </Text>
+        <Text size={14} style={styles.textHome}>
+          Home - {station?.name}
+        </Text>
+        <DeviceItem icon={sensor?.icon_kit} name={sensor?.name} />
+      </View>
+    );
+  }, [sensor?.icon_kit, sensor?.name, station?.name, t]);
+
+  const handleDone = useCallback(() => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: unit?.id || unit_id,
+        unitData: unit,
+        routeName: 'DashboardStack',
+        stationId: station?.id,
+      },
+    });
+  }, [navigate, station?.id, unit, unit_id]);
+
+  useEffect(() => {
+    ConnectingDevice();
+  }, [ConnectingDevice]);
+
+  return (
+    <SafeAreaView style={styles.wrap}>
+      <View style={styles.boxText}>
+        <Text bold style={styles.connectingText}>
+          {t('connect_device')}
+        </Text>
+        {!!isLoading && <Connecting />}
+        {!isLoading && <ConnectingSuccess />}
+      </View>
+      {!isLoading && (
+        <TouchableOpacity style={styles.buttonDone} onPress={handleDone}>
+          <Text color={Colors.Primary} type={'H4'}>
+            {t('done')}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default ConnectingProcess;

package/src/commons/ConnectingProcess/styles.js

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingTop: getStatusBarHeight(true),
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+  },
+  connectingText: {
+    marginLeft: 30,
+    marginTop: 16,
+    fontSize: 20,
+    color: Colors.Gray9,
+  },
+  animatedEllipsis: {
+    fontSize: 25,
+    color: Colors.Gray9,
+    marginTop: 14,
+  },
+  warningText: {
+    marginHorizontal: 30,
+    marginTop: 16,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+  boxText: {
+    flex: 1,
+  },
+  progressBar: {
+    flexDirection: 'column',
+    marginTop: 180,
+    marginHorizontal: 30,
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+  ConnectingSuccess: {
+    marginTop: 180,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textHome: {
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  buttonDone: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: getBottomSpace() + 24,
+  },
+});

package/src/commons/Device/LinearChart.js

@@ -55,6 +55,7 @@ const chartOptions = {
       },
     },
     minRange: 3600 * 24 * 1000,
+    tickInterval: 24 * 3600 * 1000,
   },
   plotOptions: {
     series: {

package/src/commons/Form/TextInputPassword.js

@@ -111,7 +111,7 @@ const styles = StyleSheet.create({
   icons: {
     position: 'absolute',
     right: 0,
-    top: 7,
+    top: -5,
     bottom: 0,
     width: 40,
     justifyContent: 'center',

package/src/configs/API.js

@@ -53,6 +53,8 @@ const API = {
   CHIP: {
     CHECK_FINALIZED: () =>
       SCConfig.apiRoot + '/property_manager/stations/check_chip_finalized/',
+    GET_CHIPS_FROM_UNIT: (id) =>
+      SCConfig.apiRoot + `/property_manager/get_chips/?unit_id=${id}`,
   },
   SENSOR: {
     SENSOR_DETAIL: (id) =>

package/src/configs/Constants.js

@@ -487,6 +487,12 @@ export const TESTID = {
   TOUCH_SHARED_UNIT: 'TOUCH_SHARED_UNIT',
   SHARED_UNIT_OWN_BY: 'SHARED_UNIT_OWN_BY',
 
+  // Select subunit
+
+  SELECT_SUBUNIT_NAME: 'SELECT_SUBUNIT_NAME',
+  SELECT_SUBUNIT_RADIO_BUTTON: 'SELECT_SUBUNIT_RADIO_BUTTON',
+  SELECT_SUBUNIT_SELECT: 'SELECT_SUBUNIT_SELECT',
+
   // Select unit
   SELECT_UNIT_NAME: 'SELECT_UNIT_NAME',
   SELECT_UNIT_RADIO_BUTTON: 'SELECT_UNIT_RADIO_BUTTON',
@@ -561,6 +567,12 @@ export const TESTID = {
   ADD_NEW_GATEWAY_THEN_SELECT: 'ADD_NEW_GATEWAY_THEN_SELECT',
   ADD_NEW_GATEWAY_TEXT_IMEI: 'ADD_NEW_GATEWAY_TEXT_IMEI',
 
+  // Select Gateway
+
+  SELECT_GATEWAY_NAME: 'SELECT_GATEWAY_NAME',
+  SELECT_GATEWAY_RADIO_BUTTON: 'SELECT_GATEWAY_RADIO_BUTTON',
+  SELECT_GATEWAY_SELECT: 'SELECT_GATEWAY_SELECT',
+
   // Header
   HEADER_ANI_TITLE: 'HEADER_ANI_TITLE',
 
@@ -648,6 +660,9 @@ export const NOTIFICATION_TYPES = {
   NOTIFY_REMOVE_MEMBER: 'NOTIFY_REMOVE_MEMBER',
   NOTIFY_MEMBER_LEAVE_UNIT: 'NOTIFY_MEMBER_LEAVE_UNIT',
   NOTIFY_RENAME_UNIT: 'NOTIFY_RENAME_UNIT',
+  NOTIFY_DEVICE_DISCONNECT: 'NOTIFY_DEVICE_DISCONNECT',
+  NOTIFY_RENAME_SUB_UNIT: 'NOTIFY_RENAME_SUB_UNIT',
+  NOTIFY_UPDATE_ADDRESS: 'NOTIFY_UPDATE_ADDRESS',
 };
 
 export const ACTIVITY_LOG_TYPES = {

package/src/configs/Images.js

@@ -11,4 +11,6 @@ export default {
   buttonLeftCurtain: require('../Images/Common/buttonLeftCurtain.png'),
   buttonRightCurtain: require('../Images/Common/buttonRightCurtain.png'),
   shadowButton: require('../Images/Common/shadowButton.png'),
+  eye: require('../Images/Common/eye.png'),
+  eyeClosed: require('../Images/Common/eye-closed.png'),
 };

package/src/context/actionType.ts

@@ -6,6 +6,7 @@ export const Action = {
   LIST_ACTION: 'LIST_ACTION',
   IS_FIRST_OPEN_CAMERA: 'IS_FIRST_OPEN_CAMERA',
   IS_LAVIDA_SOURCE: 'IS_LAVIDA_SOURCE',
+  IS_CONNECT_WIFI_GATEWAY: 'IS_CONNECT_WIFI_GATEWAY',
 };
 
 export type AuthData = {
@@ -50,4 +51,5 @@ export type ActionDataMap = {
 export type AppType = {
   isFirstOpenCamera: boolean;
   isLavidaSource: boolean;
+  isConnectWifiGateway: boolean;
 };

package/src/context/reducer.ts

@@ -40,6 +40,7 @@ export const initialState = {
   app: {
     isFirstOpenCamera: true,
     isLavidaSource: false,
+    isConnectWifiGateway: false,
   },
 };
 
@@ -107,6 +108,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
     }
+    case Action.IS_CONNECT_WIFI_GATEWAY: {
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          isConnectWifiGateway: payload,
+        },
+      };
+    }
     default:
       return currentState;
   }

package/src/hooks/Common/useBlockBackAndroid.js

@@ -2,10 +2,12 @@ import { useIsFocused } from '@react-navigation/native';
 import { useCallback, useEffect } from 'react';
 import { BackHandler } from 'react-native';
 
-export const useBlockBackAndroid = () => {
+export const useBlockBackAndroid = (actionBack) => {
   const focused = useIsFocused();
   const blockBack = useCallback(() => {
+    actionBack && actionBack();
     return true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   useEffect(() => {
     if (focused) {

package/src/navigations/AddDeviceStack.js

@@ -3,9 +3,11 @@ import React, { memo } from 'react';
 
 import AddCommonSelectUnit from '../screens/AddCommon/SelectUnit';
 import AddCommonSelectSubUnit from '../screens/AddCommon/SelectSubUnit';
+import AddGatewaySelectGateway from '../screens/AddNewGateway/SelectGateway';
 import AddNewDevice from '../screens/AddNewDevice';
 import ConnectDevices from '../screens/AddNewDevice/ConnectDevices';
 import ConnectingDevices from '../screens/AddNewDevice/ConnectingDevices';
+import ConnectingProcess from '../commons/ConnectingProcess';
 import ScanSensorQR from '../screens/ScanSensorQR';
 import Route from '../utils/Route';
 import { screenOptions } from './utils';
@@ -28,6 +30,14 @@ export const AddDeviceStack = memo(() => {
         name={Route.AddCommonSelectSubUnit}
         component={AddCommonSelectSubUnit}
       />
+      <Stack.Screen
+        name={Route.AddGatewaySelectGateway}
+        component={AddGatewaySelectGateway}
+      />
+      <Stack.Screen
+        name={Route.ConnectingProcess}
+        component={ConnectingProcess}
+      />
       <Stack.Screen name={Route.AddNewDevice} component={AddNewDevice} />
       <Stack.Screen name={Route.ScanSensorQR} component={ScanSensorQR} />
       <Stack.Screen

package/src/screens/AddCommon/SelectSubUnit.js

@@ -26,6 +26,11 @@ const AddCommonSelectSubUnit = ({ route }) => {
     smart_account_id_from_backend,
     username,
     brand,
+    scan_sensor_data,
+    gateway,
+    devicePrefixName,
+    wifi_ssid,
+    wifi_pass,
   } = route.params;
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [unit, setUnit] = useState([]);
@@ -45,6 +50,10 @@ const AddCommonSelectSubUnit = ({ route }) => {
       case 'AddVconnexDevice':
         setTitle(t('select_a_sub_unit'));
         break;
+      case 'AddDeviceNewFlow':
+        setTitle(t('text_select_sub_unit'));
+        setSubTitle(t('select_a_sub_unit_want_add_device'));
+        break;
       default:
         setTitle(t('add_new_gateway'));
         setSubTitle(t('select_a_sub_unit'));
@@ -102,6 +111,17 @@ const AddCommonSelectSubUnit = ({ route }) => {
           ),
         });
         break;
+      case 'AddDeviceNewFlow':
+        navigation.navigate(Routes.ConnectingProcess, {
+          station: subUnits[selectedIndex],
+          unit: unit,
+          scan_sensor_data: scan_sensor_data,
+          gateway: gateway,
+          devicePrefixName: devicePrefixName,
+          wifi_ssid: wifi_ssid,
+          wifi_pass: wifi_pass,
+        });
+        break;
       default:
         break;
     }
@@ -110,8 +130,7 @@ const AddCommonSelectSubUnit = ({ route }) => {
     navigation,
     subUnits,
     selectedIndex,
-    unit?.name,
-    unit.user_id,
+    unit,
     route.params,
     nameSubUnit,
     sensor_data,
@@ -121,6 +140,11 @@ const AddCommonSelectSubUnit = ({ route }) => {
     smart_account_id_from_backend,
     username,
     brand,
+    scan_sensor_data,
+    gateway,
+    devicePrefixName,
+    wifi_ssid,
+    wifi_pass,
   ]);
 
   const handleSelectIndex = (index) => {
@@ -131,7 +155,6 @@ const AddCommonSelectSubUnit = ({ route }) => {
       setSelectedIndex(-1);
     }
   };
-
   const addSubUnit = useCallback(() => {
     navigation.navigate(Routes.AddSubUnitStack, {
       screen: Routes.AddSubUnit,
@@ -159,14 +182,14 @@ const AddCommonSelectSubUnit = ({ route }) => {
               >
                 <RadioCircle
                   active={selectedIndex === index}
-                  testID={TESTID.SELECT_UNIT_RADIO_BUTTON}
+                  testID={TESTID.SELECT_SUBUNIT_RADIO_BUTTON}
                 />
                 <TouchableOpacity
                   style={styles.row}
                   onPress={() => handleSelectIndex(index)}
-                  testID={TESTID.SELECT_UNIT_SELECT}
+                  testID={TESTID.SELECT_SUBUNIT_SELECT}
                 >
-                  <Text style={styles.text} testID={TESTID.SELECT_UNIT_NAME}>
+                  <Text style={styles.text} testID={TESTID.SELECT_SUBUNIT_NAME}>
                     {item.name}
                   </Text>
                 </TouchableOpacity>

package/src/screens/AddCommon/SelectUnit.js

@@ -21,7 +21,7 @@ import { TESTID } from '../../configs/Constants';
 const AddCommonSelectUnit = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
-  const { addType } = route.params;
+  const { addType, scan_sensor_data } = route.params;
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [units, setUnits] = useState([]);
   const [title, setTitle] = useState('');
@@ -51,6 +51,10 @@ const AddCommonSelectUnit = ({ route }) => {
       case 'AddVconnexDevice':
         setTitle(t('text_select_a_unit'));
         break;
+      case 'AddDeviceNewFlow':
+        setTitle(t('text_select_a_unit'));
+        setSubTitle(t('text_select_a_unit_have_device'));
+        break;
       default:
         setTitle(t('add_new_sub_unit'));
         setSubTitle(t('add_new_subunit_select_unit'));
@@ -114,10 +118,28 @@ const AddCommonSelectUnit = ({ route }) => {
           },
         });
         break;
+      case 'AddDeviceNewFlow':
+        navigation.navigate(Routes.AddGatewaySelectGateway, {
+          unit_id: units[selectedIndex].id,
+          addType: 'AddDeviceNewFlow',
+          scan_sensor_data,
+        });
+        break;
       default:
         break;
     }
-  }, [addType, navigation, units, selectedIndex, route.params]);
+  }, [
+    addType,
+    navigation,
+    units,
+    selectedIndex,
+    route.params.code,
+    route.params.backend_url,
+    route.params.username,
+    route.params.password,
+    route.params.brand,
+    scan_sensor_data,
+  ]);
 
   const handleSelectIndex = (index) => {
     if (index !== selectedIndex) {

package/src/screens/AddCommon/__test__/SelectSubUnit.test.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
-
+import { TouchableOpacity } from 'react-native';
 import AddCommonSelectSubUnit from '../SelectSubUnit';
 import { ViewButtonBottom } from '../../../commons';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import Text from '../../../commons/Text';
+import axios from 'axios';
+import { TESTID } from '../../../configs/Constants';
 
 jest.mock('axios');
 
@@ -59,3 +62,119 @@ describe('Test SelectSubUnit', () => {
     expect(mockedNavigate).toHaveBeenCalled();
   });
 });
+describe('Test SelectSubUnit container', () => {
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    mockedGoBack.mockClear();
+  });
+  let tree;
+  const list_type = [
+    'AddNewGateway',
+    'AddHassiDevice',
+    'AddVconnexDevice',
+    'AddDeviceNewFlow',
+  ];
+  const result = [
+    'Select a sub-unit that you want to add this gateway',
+    '',
+    '',
+    'Then, select a sub-unit that you want to add this device in',
+  ];
+
+  list_type.forEach(function (type, i) {
+    test(`create SelectSubUnit ${type} container`, () => {
+      const route = { params: { addType: type } };
+      act(() => {
+        tree = renderer.create(wrapComponent(route));
+      });
+      const instance = tree.root;
+      const button = instance.findAllByType(TouchableOpacity);
+      expect(button.length).toBe(3);
+      const button1 = instance.findAllByType(Text);
+      expect(button1[1].props.children).toEqual(result[i]);
+    });
+    test(`press next to navigate ${type}`, async () => {
+      const route = { params: { addType: type } };
+      const response = {
+        status: 200,
+        success: true,
+        data: [
+          { id: 1, name: 'Unit 1' },
+          { id: 2, name: 'Unit 2' },
+        ],
+      };
+
+      axios.get.mockImplementation(async () => {
+        return response;
+      });
+
+      await act(async () => {
+        tree = renderer.create(wrapComponent(route));
+      });
+
+      const instance = tree.root;
+      const selectSubUnit = instance.findAllByType(TouchableOpacity);
+      await act(async () => {
+        selectSubUnit[1].props.onPress();
+      });
+
+      const next = instance.find(
+        (item) =>
+          item.props.testID ===
+          `${TESTID.PREFIX.SELECT_UNIT}${TESTID.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+      );
+
+      await act(async () => {
+        next.props.onPress();
+      });
+
+      switch (type) {
+        case 'AddNewGateway':
+          expect(mockedNavigate).toBeCalledWith('ScanChipQR', {
+            addType: 'AddNewGateway',
+            station: undefined,
+          });
+          break;
+        case 'AddHassiDevice':
+          expect(mockedNavigate).toBeCalledWith('SmartAccountConnecting', {
+            unit_id: undefined,
+            brand: undefined,
+            listSelectDevice: undefined,
+            listSensorIds: undefined,
+            nameSubUnit: '',
+            sensor_data: undefined,
+            smart_account_id: undefined,
+            smart_account_id_from_backend: undefined,
+            station: undefined,
+            username: undefined,
+          });
+          break;
+        case 'AddVconnexDevice':
+          expect(mockedNavigate).toBeCalledWith('Browser', {
+            // eslint-disable-next-line max-len
+            link: 'https://partner-api-stg.vconnex.vn/oauth/authorize?client_id=&redirect_uri=&response_type=code&scope=SYNCH&scope=CONTROL&scope=QUERY&state=undefined@undefined',
+          });
+          break;
+        case 'AddDeviceNewFlow':
+          expect(mockedNavigate).toBeCalledWith('ConnectingProcess', {
+            gateway: undefined,
+            scan_sensor_data: undefined,
+            station: undefined,
+            unit: [
+              {
+                id: 1,
+                name: 'Unit 1',
+              },
+              {
+                id: 2,
+                name: 'Unit 2',
+              },
+            ],
+          });
+          break;
+        default:
+          break;
+      }
+    });
+  });
+});