@eohjsc/react-native-smart-city 0.3.36 → 0.3.38

package/src/screens/SmartAccount/SuccessfullyConnected/index.js

@@ -1,16 +1,19 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, SafeAreaView, ScrollView } from 'react-native';
-import { CommonActions, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { IconOutline } from '@ant-design/icons-react-native';
+import { ActivityIndicator } from '@ant-design/react-native';
 
-import DeviceItem from './DeviceItem';
-import Routes from '../../../utils/Route';
+import _TextInput from '../../../commons/Form/TextInput';
 import Text from '../../../commons/Text';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { ViewButtonBottom } from '../../../commons';
-import { Colors } from '../../../configs';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { API, Colors } from '../../../configs';
+import { axiosGet, axiosPost } from '../../../utils/Apis/axios';
+import Routes from '../../../utils/Route';
+import FImage from '../../../commons/FImage';
 import styles from './styles';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 
 const SuccessfullyConnected = memo(({ route }) => {
   const {
@@ -22,19 +25,27 @@ const SuccessfullyConnected = memo(({ route }) => {
     smart_account_id_from_backend,
     username,
     brand,
+    chipId,
   } = route.params;
   const t = useTranslations();
-  const { navigate, dispatch } = useNavigation();
+  const { navigate } = useNavigation();
+  const [info, setInfo] = useState({});
+  const [loadingFilterInfo, setLoadingFilterInfo] = useState(false);
+  const [loading, setLoading] = useState(true);
 
-  const handleContinue = useCallback(() => {
+  const handleContinue = useCallback(async () => {
+    await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
     navigate(Routes.ListDeviceSmartAccount, {
       smart_account_id: smart_account_id || smart_account_id_from_backend,
       username,
       brand,
       unit_id,
+      chipId,
     });
   }, [
     brand,
+    chipId,
+    info,
     navigate,
     smart_account_id,
     smart_account_id_from_backend,
@@ -42,7 +53,8 @@ const SuccessfullyConnected = memo(({ route }) => {
     username,
   ]);
 
-  const handleFinish = useCallback(() => {
+  const handleFinish = useCallback(async () => {
+    await axiosPost(API.CHIP.RENAME_DEVICES(info.id), info);
     navigate(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
@@ -51,15 +63,52 @@ const SuccessfullyConnected = memo(({ route }) => {
         isSuccessfullyConnected: true,
       },
     });
-    dispatch((state) => {
-      const routes = [];
-      return CommonActions.reset({
-        ...state,
-        ...routes.push({ name: Routes.Dashboard, key: Routes.Dashboard }),
-        index: routes.length - 1,
-      });
+  }, [info, navigate, stationId, unit_id]);
+
+  const handleFilterNewInfo = useCallback(async () => {
+    let newInfo = [];
+    if (loadingFilterInfo && Object.keys(info || {}).length !== 0) {
+      for (let i = 0; i < listSelectDevice?.length; i++) {
+        await info?.sensors?.filter((item) => {
+          if (item?.end_devices[0]?.id === listSelectDevice[i]?.id) {
+            newInfo.push(item);
+          }
+        });
+      }
+      setLoading(false);
+    }
+    setInfo({ ...info, sensors: [...newInfo] });
+  }, [info, listSelectDevice, loadingFilterInfo]);
+
+  const updateItemName = (type, sensor_index, end_device_index) => (value) => {
+    setInfo((currentInfo) => {
+      if (type === 'end_device') {
+        currentInfo.sensors[sensor_index].end_devices[end_device_index] = {
+          ...currentInfo.sensors[sensor_index].end_devices[end_device_index],
+          name: value,
+        };
+        currentInfo.sensors[sensor_index] = {
+          ...currentInfo.sensors[sensor_index],
+        };
+        return { ...currentInfo };
+      }
     });
-  }, [dispatch, navigate, stationId, unit_id]);
+  };
+
+  useEffect(() => {
+    (async () => {
+      const { success, data } = await axiosGet(API.CHIP.RENAME_DEVICES(chipId));
+      if (success) {
+        setInfo(data);
+        setLoadingFilterInfo(true);
+      }
+    })();
+  }, [chipId]);
+
+  useEffect(() => {
+    handleFilterNewInfo();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loadingFilterInfo]);
 
   return (
     <>
@@ -71,15 +120,42 @@ const SuccessfullyConnected = memo(({ route }) => {
               {t('successfully_connected')}
             </Text>
             <Text size={14} style={styles.textHome}>
-              Home - {nameSubUnit}
+              {`Home - ${nameSubUnit}`}
             </Text>
-            {listSelectDevice.map((item) => (
-              <DeviceItem
-                icon={item?.icon_kit}
-                name={item?.name}
-                itemId={item.id}
-              />
-            ))}
+            {!loading && info?.sensors?.length !== 0 ? (
+              <View>
+                {info?.sensors?.map((sensor, sensor_index) => (
+                  <View style={styles.wrapItem}>
+                    {sensor?.end_devices?.length &&
+                      sensor?.end_devices?.map(
+                        (end_device, end_device_index) => (
+                          <View style={styles.device} key={`${end_device?.id}`}>
+                            <FImage
+                              source={{
+                                uri: listSelectDevice[sensor_index]?.icon_kit,
+                              }}
+                              style={styles.iconSensor}
+                            />
+                            <_TextInput
+                              value={end_device.name}
+                              textInputStyle={styles.textItem}
+                              onChange={updateItemName(
+                                'end_device',
+                                sensor_index,
+                                end_device_index
+                              )}
+                            />
+                          </View>
+                        )
+                      )}
+                  </View>
+                ))}
+              </View>
+            ) : (
+              <View style={styles.bottomLoading}>
+                <ActivityIndicator size="small" color={Colors.Black} />
+              </View>
+            )}
           </View>
         </ScrollView>
       </SafeAreaView>
@@ -90,7 +166,7 @@ const SuccessfullyConnected = memo(({ route }) => {
           rightTitle={t('finish')}
           onRightClick={handleFinish}
           accessibilityLabelPrefix={
-            AccessibilityLabel.PREFIX.BUTTON_FINISH_SMART_ACCOUNT
+            AccessibilityLabel.PREFIX.BUTTON_BOTTOM_SMART_ACCOUNT
           }
         />
       </View>

package/src/screens/SmartAccount/SuccessfullyConnected/styles.js

@@ -1,6 +1,11 @@
 import { StyleSheet } from 'react-native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
-import { Colors } from '../../../configs';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 5;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 60;
 
 export default StyleSheet.create({
   wrap: {
@@ -39,4 +44,56 @@ export default StyleSheet.create({
     borderTopColor: Colors.Gray4,
     backgroundColor: Colors.White,
   },
+  device: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 250,
+  },
+  wrapItem: {
+    paddingHorizontal: 15,
+    borderRadius: 10,
+    height: heightItem,
+    width: 250,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
+    flexDirection: 'row',
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 6,
+    paddingLeft: 30,
+    paddingRight: 30,
+  },
+  textItem: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Primary,
+    textAlign: 'center',
+    marginTop: -10,
+    fontSize: 16,
+    maxWidth: 170,
+  },
+  bottomLoading: {
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconSensor: {
+    width: 32,
+    height: 32,
+    resizeMode: 'contain',
+    marginRight: 10,
+  },
 });

package/src/screens/SmartAccount/__test__/Connecting.test.js

@@ -32,23 +32,24 @@ describe('Test Connecting', () => {
   afterEach(() => {
     mockedNavigate.mockClear();
   });
-  test('render Connecting', () => {
+  it('render Connecting', async () => {
     const route = {
       params: {
         unit_id: 1,
         username: 'abc',
         password: '123456',
         brand: '',
+        chipId: 1,
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts).toHaveLength(6);
   });
-  test('render connecting sync smartAccount fail', async () => {
+  it('render connecting sync smartAccount fail', async () => {
     const route = {
       params: {
         unit_id: 1,
@@ -56,6 +57,7 @@ describe('Test Connecting', () => {
         password: '123456',
         brand: '',
         listDeviceIds: false,
+        chipId: 1,
       },
     };
     mock.onPost(API.SMART_ACCOUNT.SYNC).reply(400, {});
@@ -67,7 +69,7 @@ describe('Test Connecting', () => {
     });
   });
 
-  test('render add device to station fail', async () => {
+  it('render add device to station fail', async () => {
     const route = {
       params: {
         unit_id: 1,
@@ -75,6 +77,7 @@ describe('Test Connecting', () => {
         password: '123456',
         brand: '',
         listDeviceIds: true,
+        chipId: 1,
       },
     };
     mock.onPost(API.SMART_ACCOUNT.ADD_DEVICE_TO_STATION).reply(400, {});

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

@@ -31,19 +31,19 @@ describe('Test SmartAccount', () => {
   afterEach(() => {
     mockedNavigate.mockClear();
   });
-  test('render SmartAccount', () => {
+  it('render SmartAccount', async () => {
     const route = {
       params: {
         unit_id: 1,
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const scrollView = instance.findAllByType(ScrollView);
     const touchDienQuang = instance.findAllByType(TouchableOpacity);
-    act(async () => {
+    await act(async () => {
       touchDienQuang[1].props.onPress();
     });
     expect(scrollView[0]).toBeDefined();
@@ -51,13 +51,13 @@ describe('Test SmartAccount', () => {
     expect(touchDienQuang).toBeDefined();
   });
 
-  test('render login SmartAccount', () => {
+  it('render login SmartAccount', async () => {
     const route = {
       params: {
         unit_id: 1,
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
@@ -66,13 +66,13 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       touchableOpacity.props.onPress();
     });
     expect(touchableOpacity).toBeDefined();
   });
 
-  test('render handle onpress save but not select supplier item ', async () => {
+  it('render handle onpress save but not select supplier item ', async () => {
     const route = {
       params: {
         unitId: 1,
@@ -105,7 +105,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchableOpacity.props.onPress();
     });
     expect(Toast.show).toBeCalledWith({
@@ -117,7 +117,7 @@ describe('Test SmartAccount', () => {
     });
   });
 
-  test('render handle sync item DienQuang from screen unitDetail', async () => {
+  it('render handle sync item DienQuang from screen unitDetail', async () => {
     const route = {
       params: {
         unitId: 1,
@@ -150,7 +150,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.TOUCH_SUPPLIER_ITEM && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchSupplierItem[0].props.onPress();
     });
     const touchableOpacity = instance.find(
@@ -158,7 +158,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchableOpacity.props.onPress();
     });
     expect(mockedNavigate).toBeCalledWith(Routes.SmartAccountConnecting, {
@@ -169,7 +169,7 @@ describe('Test SmartAccount', () => {
     });
   });
 
-  test('render handle sync item DienQuang from screen dashboard', async () => {
+  it('render handle sync item DienQuang from screen dashboard', async () => {
     const route = {
       params: {},
     };
@@ -200,7 +200,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.TOUCH_SUPPLIER_ITEM && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchSupplierItem[0].props.onPress();
     });
     const touchableOpacity = instance.find(
@@ -208,7 +208,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.LOGIN_SMART_ACCOUNT && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchableOpacity.props.onPress();
     });
     expect(mockedNavigate).toBeCalledWith(Routes.AddDeviceStack, {
@@ -222,13 +222,13 @@ describe('Test SmartAccount', () => {
     });
   });
 
-  test('render handle sync Lg', () => {
+  it('render handle sync Lg', async () => {
     const route = {
       params: {
         unit_id: 1,
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
@@ -237,7 +237,7 @@ describe('Test SmartAccount', () => {
         el.props.accessibilityLabel ===
           AccessibilityLabel.TOUCH_SUPPLIER_ITEM && el.type === TouchableOpacity
     );
-    act(async () => {
+    await act(async () => {
       await touchSupplierItem[1].props.onPress();
     });
     expect(touchSupplierItem).toBeDefined();

package/src/screens/SmartIr/__test__/ButtonsBottom.test.js

@@ -20,8 +20,8 @@ jest.mock('react', () => {
 describe('Test ButtonsBottom', () => {
   let tree;
 
-  test('render ButtonsBottom', () => {
-    act(() => {
+  it('render ButtonsBottom', async () => {
+    await act(async () => {
       tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -31,14 +31,14 @@ jest.mock('react', () => {
 });
 describe('Test GroupButtonByType', () => {
   let tree;
-  test('render GroupButtonByType', () => {
+  it('render GroupButtonByType', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '', icon: '' },
         brand: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
@@ -51,57 +51,57 @@ describe('Test GroupButtonByType', () => {
         AccessibilityLabel.GROUP_BUTTON_TYPE.BUTTON_BOTTOM
     );
 
-    act(() => {
+    await act(async () => {
       ButtonBottom.props.onPressLeft();
     });
-    act(() => {
+    await act(async () => {
       ButtonBottom.props.onPressRight();
     });
     expect(ButtonBottom).toBeDefined();
   });
-  test('onPressLeft ButtonsBottom', () => {
+  it('onPressLeft ButtonsBottom', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '', icon: '' },
         brand: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const buttonsBottom = instance.findAllByType(ButtonsBottom);
     expect(buttonsBottom).toHaveLength(2);
-    act(() => {
+    await act(async () => {
       buttonsBottom[0].props.onPressLeft();
     });
   });
-  test('onPressRight ButtonsBottom', () => {
+  it('onPressRight ButtonsBottom', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '', icon: '' },
         brand: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
     const buttonsBottom = instance.findAllByType(ButtonsBottom);
     expect(buttonsBottom).toHaveLength(2);
-    act(() => {
+    await act(async () => {
       buttonsBottom[0].props.onPressRight();
     });
   });
 
-  test('onChange TextInputPassword', async () => {
+  it('onChange TextInputPassword', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '', icon: '' },
         brand: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
 

package/src/screens/SmartIr/__test__/SelectBrand.test.js

@@ -29,13 +29,13 @@ jest.mock('react', () => {
 });
 describe('Test SelectBrand', () => {
   let tree;
-  test('render SelectBrand', () => {
+  it('render SelectBrand', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
@@ -43,13 +43,13 @@ describe('Test SelectBrand', () => {
     expect(scrollView).toHaveLength(1);
   });
 
-  test('Row SmartIr onPress', () => {
+  it('Row SmartIr onPress', async () => {
     const route = {
       params: {
         device_type: { id: 1, name: '' },
       },
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(route));
     });
     const instance = tree.root;
@@ -57,7 +57,7 @@ describe('Test SelectBrand', () => {
     expect(scrollView).toHaveLength(1);
     const rowItem = instance.findAllByType(RowItem);
     expect(rowItem).toHaveLength(3);
-    act(() => {
+    await act(async () => {
       rowItem[0].props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalled();

package/src/screens/SmartIr/__test__/SelectDeviceType.test.js

@@ -30,8 +30,8 @@ jest.mock('react', () => {
 describe('Test SelectIrDeviceType', () => {
   let tree;
 
-  test('render SelectIrDeviceType', () => {
-    act(() => {
+  it('render SelectIrDeviceType', async () => {
+    await act(async () => {
       tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
@@ -39,8 +39,8 @@ describe('Test SelectIrDeviceType', () => {
     expect(scrollView).toHaveLength(1);
   });
 
-  test('itemDevice SelectIrDeviceType onPress', () => {
-    act(() => {
+  it('itemDevice SelectIrDeviceType onPress', async () => {
+    await act(async () => {
       tree = renderer.create(wrapComponent());
     });
     const instance = tree.root;
@@ -49,7 +49,7 @@ describe('Test SelectIrDeviceType', () => {
     const touchableOpacity = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacity).toHaveLength(7);
     const itemDevice = touchableOpacity[1];
-    act(() => {
+    await act(async () => {
       itemDevice.props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalled();

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

@@ -25,7 +25,7 @@ describe('Test SmartIr', () => {
   beforeEach(() => {
     mockNavigate.mockClear();
   });
-  test('render SmartIr', () => {
+  it('render SmartIr', async () => {
     const item = {
       configuration: { devices: [] },
       id: 11,
@@ -33,7 +33,7 @@ describe('Test SmartIr', () => {
       template: 'smart_ir',
       type: 'smart_ir',
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
@@ -46,7 +46,7 @@ describe('Test SmartIr', () => {
     expect(itemAddNewList).toHaveLength(1);
   });
 
-  test('render SmartIr on AddNew', () => {
+  it('render SmartIr on AddNew', async () => {
     const item = {
       configuration: { devices: [] },
       id: 11,
@@ -54,7 +54,7 @@ describe('Test SmartIr', () => {
       template: 'smart_ir',
       type: 'smart_ir',
     };
-    act(() => {
+    await act(async () => {
       tree = renderer.create(wrapComponent(item));
     });
     const instance = tree.root;
@@ -62,7 +62,7 @@ describe('Test SmartIr', () => {
       (el) =>
         el.props.accessibilityLabel === AccessibilityLabel.SUB_UNIT_ADD_DEVICE
     );
-    act(() => {
+    await act(async () => {
       itemAddNew.props.onPress();
     });
     expect(mockNavigate).toHaveBeenCalled();