@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

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

@@ -2,13 +2,21 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import AddNewDevice from '../index';
 import GroupCheckBox from '../../../commons/GroupCheckBox';
 import { TESTID } from '../../../configs/Constants';
 import API from '../../../configs/API';
 import { ViewButtonBottom } from '../../../commons';
 import Routes from '../../../utils/Route';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewDevice route={route} />
+  </SCProvider>
+);
 
 jest.mock('axios');
 
@@ -52,13 +60,17 @@ describe('Test AddNewDevice', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textAdd = getText(instance, TESTID.ADD_NEW_DEVICE_ADD);
     const textThen = getText(instance, TESTID.ADD_NEW_DEVICE_THEN_SELECT);
-    expect(textAdd.props.children).toEqual(t('add_new_device'));
-    expect(textThen.props.children).toEqual(t('then_select_a_sub_unit_to_add'));
+    expect(textAdd.props.children).toEqual(
+      getTranslate('en', 'add_new_device')
+    );
+    expect(textThen.props.children).toEqual(
+      getTranslate('en', 'then_select_a_sub_unit_to_add')
+    );
 
     const groupCheckBox = instance.findAllByType(GroupCheckBox);
     expect(groupCheckBox).toHaveLength(1);
@@ -79,7 +91,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
@@ -99,7 +111,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     expect(axios.get).toHaveBeenCalledWith(API.UNIT.UNIT_DETAIL(1), {});
@@ -110,18 +122,22 @@ describe('Test AddNewDevice', () => {
 
   test('ViewButtonBottom', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
 
-    expect(viewButtonBottom.props.leftTitle).toEqual(t('text_back'));
-    expect(viewButtonBottom.props.rightTitle).toEqual(t('text_next'));
+    expect(viewButtonBottom.props.leftTitle).toEqual(
+      getTranslate('en', 'text_back')
+    );
+    expect(viewButtonBottom.props.rightTitle).toEqual(
+      getTranslate('en', 'text_next')
+    );
   });
 
   test('ViewButtonBottom onLeftClick', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -133,14 +149,14 @@ describe('Test AddNewDevice', () => {
 
   test('ViewButtonBottom onRightClick without select stationId', async () => {
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
       viewButtonBottom.props.onRightClick();
     });
-    expect(mockedNavigate).not.toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalled();
   });
 
   test('ViewButtonBottom onRightClick with stationId', async () => {
@@ -157,7 +173,7 @@ describe('Test AddNewDevice', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddNewDevice route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 

package/src/screens/AddNewDevice/__test__/ConnectDevices.test.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import axios from 'axios';
 
-import { t } from 'i18n-js';
 import ConnectDevices from '../ConnectDevices';
 import { TESTID } from '../../../configs/Constants';
 import { TouchableOpacity } from 'react-native';
 import _TextInput from '../../../commons/Form/TextInput';
 import { AlertAction } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -21,6 +23,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectDevices route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectDevices', () => {
   let tree;
   let route;
@@ -50,7 +58,7 @@ describe('Test ConnectDevices', () => {
 
   test('create', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
 
@@ -66,16 +74,20 @@ describe('Test ConnectDevices', () => {
     );
     const textDone = getText(instance, TESTID.CONNECTED_DEVICE_DONE);
 
-    expect(textSuccess.props.children).toEqual(t('successfully_connected'));
+    expect(textSuccess.props.children).toEqual(
+      getTranslate('en', 'successfully_connected')
+    );
     expect(textUnitName.props.children).toEqual('Unit name');
     expect(textDeviceName.props.children).toEqual('Sensor name');
-    expect(textRenameDevice.props.children).toEqual(t('rename_your_device'));
-    expect(textDone.props.children).toEqual(t('done'));
+    expect(textRenameDevice.props.children).toEqual(
+      getTranslate('en', 'rename_your_device')
+    );
+    expect(textDone.props.children).toEqual(getTranslate('en', 'done'));
   });
 
   test('hide show alert action', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const button = instance.find(
@@ -97,7 +109,7 @@ describe('Test ConnectDevices', () => {
 
   test('change and rename', async () => {
     await act(async () => {
-      tree = await create(<ConnectDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textDeviceName = getText(

package/src/screens/AddNewDevice/__test__/ConnectingDevices.test.js

@@ -5,8 +5,10 @@ import axios from 'axios';
 import { API } from '../../../configs';
 import ConnectingDevices from '../ConnectingDevices';
 import Text from '../../../commons/Text';
-import { t } from 'i18n-js';
 import Routes from '../../../utils/Route';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { getTranslate } from '../../../utils/I18n';
 
 jest.mock('axios');
 
@@ -20,6 +22,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ConnectingDevices route={route} />
+  </SCProvider>
+);
+
 describe('Test ConnectingDevices', () => {
   let tree;
   let route;
@@ -41,14 +49,16 @@ describe('Test ConnectingDevices', () => {
 
   test('create', () => {
     act(() => {
-      tree = create(<ConnectingDevices route={route} />);
+      tree = create(wrapComponent(route));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts).toHaveLength(2);
-    expect(texts[0].props.children).toEqual(t('connecting_your_device'));
+    expect(texts[0].props.children).toEqual(
+      getTranslate('en', 'connecting_your_device')
+    );
     expect(texts[1].props.children).toEqual(
-      t('dont_turn_off_the_device_or_close_this_app')
+      getTranslate('en', 'dont_turn_off_the_device_or_close_this_app')
     );
   });
 
@@ -63,7 +73,7 @@ describe('Test ConnectingDevices', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();
@@ -86,7 +96,7 @@ describe('Test ConnectingDevices', () => {
     });
 
     await act(async () => {
-      tree = await create(<ConnectingDevices route={route} />);
+      tree = await create(wrapComponent(route));
     });
     await act(async () => {
       await jest.runOnlyPendingTimers();

package/src/screens/AddNewDevice/hooks/useStateAlertRename.js

@@ -1,7 +1,8 @@
-import { t } from 'i18n-js';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useCallback, useState } from 'react';
 
 export const useStateAlertRename = () => {
+  const t = useTranslations();
   const [stateAlertRename, setStateAlertRename] = useState({
     visible: false,
     title: t('rename_device'),

package/src/screens/AddNewDevice/index.js

@@ -7,7 +7,7 @@ import {
   Platform,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { API, Colors } from '../../configs';
 import { Section, ViewButtonBottom } from '../../commons'; //components/Common
@@ -18,6 +18,7 @@ import Routes from '../../utils/Route';
 import { TESTID } from '../../configs/Constants';
 
 const AddNewDevice = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id } = route.params;
   const { navigate, goBack } = useNavigation();
   const [unit, setUnit] = useState({ stations: [] });

package/src/screens/AddNewGateway/ConnectedGateway.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
@@ -11,6 +11,7 @@ import { useConnectGateway } from './hooks';
 import { TESTID } from '../../configs/Constants';
 
 const ConnectedGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { new_chip, unit_id, unit_name } = route.params;
   const { onPressDone } = useConnectGateway(unit_id);
 

package/src/screens/AddNewGateway/ConnectingGateway.js

@@ -1,19 +1,50 @@
-import React, { memo, useEffect } from 'react';
-import { View, StyleSheet } from 'react-native';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
 import { API, Colors } from '../../configs';
 import Text from '../../commons/Text';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
 import { axiosGet } from '../../utils/Apis/axios';
+import { IconOutline } from '@ant-design/icons-react-native';
+import styles from './ConnectingGatewayStyles';
+
+const ProcessItem = ({ title, active, line }) => {
+  return (
+    <>
+      <View style={styles.processItem}>
+        <View
+          style={[styles.processCircle, active && styles.processCircleActive]}
+        >
+          <IconOutline
+            name="radar-chart"
+            size={16}
+            color={active ? Colors.White : Colors.Gray5}
+          />
+        </View>
+        <Text
+          center
+          type="Label"
+          color={Colors.Gray7}
+          style={styles.textProcessItem}
+        >
+          {title}
+        </Text>
+      </View>
+      {line && <View style={[styles.line, active && styles.lineActive]} />}
+    </>
+  );
+};
 
 const ConnectingGateway = memo(({ route }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const { new_chip } = route.params;
+  const [finalizeStatus, setFinalizeStatus] = useState(0);
 
   useEffect(() => {
     const checkChipFinalized = setInterval(async () => {
-      const { success } = await axiosGet(
+      const { success, data } = await axiosGet(
         API.CHIP.CHECK_FINALIZED(),
         {
           params: {
@@ -23,40 +54,84 @@ const ConnectingGateway = memo(({ route }) => {
         true
       );
       if (success) {
-        navigate(Routes.ConnectedGateway, route.params);
+        const { control, config, bluetooth } = data;
+        if (control) {
+          setFinalizeStatus(1);
+        }
+        if (config) {
+          setFinalizeStatus(2);
+        }
+        if (bluetooth) {
+          setFinalizeStatus(3);
+        }
+        if (control && config && bluetooth) {
+          navigate(Routes.ConnectedGateway, route.params);
+        }
       }
     }, 3000);
     return () => clearInterval(checkChipFinalized);
   }, [navigate, new_chip.id, route.params]);
 
+  const percent = useMemo(() => {
+    if (finalizeStatus === 0) {
+      return '0%';
+    }
+    if (finalizeStatus === 1) {
+      return '30%';
+    }
+    if (finalizeStatus === 2) {
+      return '60%';
+    }
+    return '100%';
+  }, [finalizeStatus]);
+
   return (
     <View style={styles.wrap}>
       <Text semibold size={20} color={Colors.Black} style={styles.txtHeader}>
         {t('connecting_your_gateway')}
       </Text>
-      <Text size={14} color={Colors.Gray8} style={styles.txtNote}>
+      <Text size={14} color={Colors.Gray} style={styles.txtNote}>
         {t('dont_turn_off_the_device_or_close_this_app')}
       </Text>
+      <View style={styles.scan}>
+        <View style={styles.layout}>
+          <View style={styles.layout1}>
+            <View style={styles.outsideCircle}>
+              <View style={styles.circle}>
+                <IconOutline name="search" size={28} color={Colors.White} />
+              </View>
+            </View>
+            <Text
+              style={styles.textPercent}
+              color={Colors.Gray7}
+              semibold
+              center
+            >
+              {percent}
+            </Text>
+          </View>
+        </View>
+        <View style={styles.layoutProcess}>
+          <View style={styles.layoutProcess1}>
+            <ProcessItem
+              title="Finalize control"
+              line
+              active={[1, 2, 3].includes(finalizeStatus)}
+            />
+            <ProcessItem
+              title="Finalize config"
+              line
+              active={[2, 3].includes(finalizeStatus)}
+            />
+            <ProcessItem
+              title="Finalize bluetooth"
+              active={[3].includes(finalizeStatus)}
+            />
+          </View>
+        </View>
+      </View>
     </View>
   );
 });
 
 export default ConnectingGateway;
-
-const styles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-  },
-  txtHeader: {
-    marginTop: 16,
-    marginLeft: 16,
-    marginBottom: 8,
-    lineHeight: 28,
-  },
-  txtNote: {
-    marginHorizontal: 16,
-    marginBottom: 8,
-    lineHeight: 22,
-  },
-});

package/src/screens/AddNewGateway/ConnectingGatewayStyles.js

@@ -0,0 +1,92 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+import { colorOpacity } from '../../utils/Converter/color';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+  },
+  txtHeader: {
+    marginTop: 16,
+    marginLeft: 16,
+    marginBottom: 8,
+    lineHeight: 28,
+  },
+  txtNote: {
+    marginHorizontal: 16,
+    marginBottom: 8,
+    lineHeight: 22,
+  },
+  scan: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 50,
+  },
+  layout: {
+    height: 75,
+    marginBottom: 50,
+  },
+  layout1: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  layoutProcess: {
+    height: 100,
+  },
+  layoutProcess1: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  outsideCircle: {
+    width: 75,
+    height: 75,
+    borderRadius: 75,
+    backgroundColor: colorOpacity(Colors.Blue10, 0.3),
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 50,
+    maxHeight: 50,
+    borderRadius: 50,
+    backgroundColor: Colors.Blue10,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  processItem: {},
+  processCircle: {
+    borderWidth: 1,
+    borderColor: Colors.Gray5,
+    borderRadius: 15,
+    padding: 5,
+  },
+  processCircleActive: {
+    borderColor: Colors.Blue10,
+    backgroundColor: Colors.Blue10,
+    color: Colors.White,
+  },
+  line: {
+    width: 85,
+    height: 1,
+    backgroundColor: Colors.Gray5,
+  },
+  lineActive: {
+    backgroundColor: Colors.Blue10,
+  },
+  textProcessItem: {
+    position: 'absolute',
+    width: 50,
+    bottom: -45,
+    left: '-40%',
+  },
+  textPercent: {
+    position: 'absolute',
+    bottom: -30,
+  },
+});

package/src/screens/AddNewGateway/SetupGatewayWifi.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { ScrollView, SafeAreaView, PermissionsAndroid } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 import wifi from 'react-native-android-wifi';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import { AlertAction, Section, ViewButtonBottom } from '../../commons';
@@ -23,6 +23,7 @@ import {
 import styles from './SetupGatewayWifiStyles';
 
 const SetupGatewayWifi = memo(({ route }) => {
+  const t = useTranslations();
   const { unit_id } = route.params;
   const isFocused = useIsFocused();
   const { navigate, goBack } = useNavigation();
@@ -50,7 +51,7 @@ const SetupGatewayWifi = memo(({ route }) => {
       } catch (err) {}
     };
     wifiPermission();
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     if (isFocused) {