@eohjsc/react-native-smart-city 0.6.2 → 0.7.3

package/src/screens/Automate/ScriptDetail/index.js

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Image, Platform, TouchableOpacity, View } from 'react-native';
+import { Image, Platform, TouchableOpacity, View, Switch } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
-import { Icon, Switch } from '@ant-design/react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './Styles/indexStyles';
@@ -192,7 +192,7 @@ const ScriptDetail = ({ route }) => {
           accessibilityLabel={AccessibilityLabel.ICON_MORE}
         >
           <View style={[styles.headerButton, styles.moreButton]}>
-            <Icon name={'more'} size={27} color={Colors.Black} />
+            <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
           </View>
         </TouchableOpacity>
       </View>
@@ -479,9 +479,9 @@ const ButtonStar = ({ automate }) => {
       accessibilityLabel={AccessibilityLabel.HEADER_SCRIPT_DETAIL_BUTTON_STAR}
     >
       {isStarred ? (
-        <IconFill name="star" size={25} color={Colors.Yellow6} />
+        <AntDesign name="star" size={25} color={Colors.Yellow6} />
       ) : (
-        <IconOutline name="star" size={25} />
+        <AntDesign name="staro" size={25} />
       )}
     </PreventDoubleTouch>
   );

package/src/screens/Automate/SetSchedule/__test__/index.test.js

@@ -32,10 +32,10 @@ describe('Test SetSchedule', () => {
     },
   };
 
-  const mockNavigate = useNavigation().navigate;
+  const mockedNavigate = useNavigation().navigate;
 
   beforeEach(() => {
-    mockNavigate.mockClear();
+    mockedNavigate.mockClear();
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
   });
 
@@ -70,7 +70,7 @@ describe('Test SetSchedule', () => {
     await act(async () => {
       await header.props.onPress();
     });
-    expect(mockNavigate).toBeCalledWith(undefined);
+    expect(global.mockedNavigate).toBeCalledWith(undefined);
   });
 
   it('test repeat options popup', async () => {
@@ -131,7 +131,7 @@ describe('Test SetSchedule', () => {
     await act(async () => {
       await button.props.onPressMain();
     });
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.ValueChangeName, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ValueChangeName, {
       automate: {
         date_repeat: '2021-01-24',
         repeat: 'once',

package/src/screens/Automate/SetSchedule/components/RowItem.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import Text from '../../../../commons/Text';
 import styles from '../styles/RowItemStyles';
 import { Colors } from '../../../../configs';
@@ -17,8 +17,8 @@ const RowItem = ({ title, value, icon = null, arrow = false, onPress }) => {
         </Text>
       </View>
       <View style={[styles.itemRight, arrow && styles.center]}>
-        {arrow && <IconOutline name="right" color={Colors.Gray7} />}
-        {icon && <IconOutline name={icon} size={17} color={Colors.Black} />}
+        {arrow && <AntDesign name="right" color={Colors.Gray7} />}
+        {icon && <AntDesign name={icon} size={17} color={Colors.Black} />}
       </View>
     </TouchableOpacity>
   );

package/src/screens/Automate/Styles/indexStyles.js

@@ -64,4 +64,10 @@ export default StyleSheet.create({
     height: 126,
     width: (Constants.width - 40) / 2,
   },
+  automatesRow: {
+    flexDirection: 'row',
+    marginTop: 8,
+    overflow: 'hidden',
+    alignSelf: 'center',
+  },
 });

package/src/screens/Automate/__test__/MultiUnits.test.js

@@ -99,16 +99,16 @@ describe('Test MultiUnits', () => {
     expect(WrapHeaderScrollables[0].props.title).toEqual(
       getTranslate('en', 'multi_units_automate')
     );
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
-      TouchableOpacities[2].props.onPress();
+      touchableOpacities[2].props.onPress();
     });
 
     const ItemOneTaps = instance.findAllByType(ItemOneTap);
     await act(async () => {
       ItemOneTaps[0].props.onPressItem();
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.ScriptDetail,
       params: {
         id: response[1].id,
@@ -119,7 +119,7 @@ describe('Test MultiUnits', () => {
     await act(async () => {
       ItemAddNews[0].props.onAddNew();
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.AddUnknownTypeSmart,
       params: {
         automate: { unit: undefined },
@@ -192,7 +192,7 @@ describe('Test MultiUnits', () => {
     await act(async () => {
       ItemAddNews[0].props.onAddNew();
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.ScenarioName,
       params: {
         automate: {
@@ -250,7 +250,7 @@ describe('Test MultiUnits', () => {
     await act(async () => {
       itemAddNews[0].props.onAddNew();
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'reach_max_automations_per_unit', { length: 0 }),
       '',
@@ -288,7 +288,7 @@ describe('Test MultiUnits', () => {
     await act(async () => {
       itemAddNews[0].props.onAddNew();
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'no_permission_smart_script_for_multi_unit'),
       '',

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

@@ -49,32 +49,7 @@ describe('Test Automate', () => {
       data: [
         {
           type: 'MultiUnit',
-          automates: [
-            {
-              id: 1,
-              user: 2,
-              type: 'one_tap',
-              activate_at: '2021-09-17T05:30:00Z',
-              script: {
-                id: 1,
-                name: 'script',
-                icon: undefined,
-                icon_kit: undefined,
-              },
-            },
-            {
-              id: 2,
-              user: 2,
-              type: 'one_tap',
-              activate_at: '2021-09-17T05:30:00Z',
-              script: {
-                id: 1,
-                name: 'script2',
-                icon: undefined,
-                icon_kit: undefined,
-              },
-            },
-          ],
+          automates: [],
         },
       ],
     };
@@ -98,14 +73,14 @@ describe('Test Automate', () => {
 
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
-    expect(FlatLists).toHaveLength(2);
+    expect(FlatLists).toHaveLength(1); // only 1 flat list
 
     const ItemAddNews = instance.findAllByType(ItemAddNew);
     expect(ItemAddNews).toHaveLength(1);
     await act(async () => {
       ItemAddNews[0].props.onAddNew('MultiUnit');
     });
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.AddUnknownTypeSmart,
       params: {
         closeScreen: undefined,
@@ -146,7 +121,7 @@ describe('Test Automate', () => {
     await act(async () => {
       itemAddNew.props.onAddNew(1, []);
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'reach_max_automations_per_unit', { length: 0 }),
       '',
@@ -186,14 +161,14 @@ describe('Test Automate', () => {
 
     const instance = tree.root;
     const FlatLists = instance.findAllByType(FlatList);
-    expect(FlatLists).toHaveLength(3);
+    expect(FlatLists).toHaveLength(1); // only 1 flat list
     const ItemOneTaps = instance.findAllByType(ItemOneTap);
     expect(ItemOneTaps).toHaveLength(1);
     await act(async () => {
       await ItemOneTaps[0].props.onPressItem();
     });
 
-    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.UnitStack, {
       screen: Routes.ScriptDetail,
       params: {
         preAutomate: response.data[0].automates[0],
@@ -246,7 +221,7 @@ describe('Test Automate', () => {
       await iconArrowRight[0].props.onPress();
     });
 
-    expect(mockedNavigate).toBeCalledWith(Routes.MultiUnits, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.MultiUnits, {
       unit: { id: undefined, name: '' },
     });
 
@@ -255,7 +230,7 @@ describe('Test Automate', () => {
       await iconArrowRight[1].props.onPress();
     });
 
-    expect(mockedNavigate).toBeCalledWith(Routes.MultiUnits, {
+    expect(global.mockedNavigate).toBeCalledWith(Routes.MultiUnits, {
       unit: { id: 3, name: 'La Vida' },
     });
   });
@@ -292,7 +267,7 @@ describe('Test Automate', () => {
     await act(async () => {
       itemAddNew.props.onAddNew(1, []);
     });
-    expect(mockedNavigate).not.toBeCalled();
+    expect(global.mockedNavigate).not.toBeCalled();
     expect(spyToastError).toBeCalledWith(
       getTranslate('en', 'no_permission_smart_script_for_multi_unit'),
       '',

package/src/screens/Automate/index.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { FlatList, Image, TouchableOpacity, View } from 'react-native';
-import { IconFill } from '@ant-design/icons-react-native/es';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import {
   useIsFocused,
   useNavigation,
@@ -58,7 +58,14 @@ const Automate = () => {
     setIsLoading(true);
     const { success, data } = await axiosGet(API.AUTOMATE.GET_SMART());
     if (success && data && data.length) {
-      setAutomatesData(data);
+      const multiUnit = data[0];
+      const haveAutomates = data
+        .slice(1)
+        .filter((unit) => unit.automates.length);
+      const notHaveAutomates = data
+        .slice(1)
+        .filter((unit) => !unit.automates.length);
+      setAutomatesData([multiUnit, ...haveAutomates, ...notHaveAutomates]);
     }
     setIsLoading(false);
   }, []);
@@ -137,16 +144,6 @@ const Automate = () => {
       const isOwner = owner_unit_id
         ? owner_unit_id === idUser
         : type === UNIT_TYPES.MULTI;
-      const renderItemAutomate = ({ item: automate }) => {
-        return (
-          <ItemOneTap
-            isOwner={isOwner}
-            automate={automate}
-            wrapSyles={styles.wrapAutomateItem}
-            onPressItem={() => onPressItem(automate, unit_id, type, isOwner)}
-          />
-        );
-      };
 
       return (
         <View style={styles.wrapUniItem}>
@@ -167,16 +164,29 @@ const Automate = () => {
               <Image source={Images.arrowBack} style={styles.arrowRight} />
             </TouchableOpacity>
           </View>
-          <FlatList
-            horizontal
-            keyExtractor={keyExtractor}
-            data={automates}
-            renderItem={renderItemAutomate}
-            showsHorizontalScrollIndicator={false}
-            contentContainerStyle={styles.contentContainerStyle2}
-            ListFooterComponent={renderListFooterComponent(unit_id, automates)}
-            scrollIndicatorInsets={{ right: 1 }}
-          />
+          {!!automates?.length && (
+            <View style={styles.automatesRow}>
+              <ItemOneTap
+                isOwner={isOwner}
+                automate={automates[0]}
+                wrapSyles={styles.wrapAutomateItem}
+                onPressItem={() =>
+                  onPressItem(automates[0], unit_id, type, isOwner)
+                }
+              />
+              {!!automates[1] && (
+                <ItemOneTap
+                  isOwner={isOwner}
+                  automate={automates[1]}
+                  wrapSyles={styles.wrapAutomateItem}
+                  onPressItem={() =>
+                    onPressItem(automates[1], unit_id, type, isOwner)
+                  }
+                />
+              )}
+            </View>
+          )}
+          {!automates?.length && renderListFooterComponent(unit_id, automates)}
         </View>
       );
     },
@@ -184,12 +194,15 @@ const Automate = () => {
     [sortedAutomateData]
   );
 
-  const renderListFooterComponent = (unitId, automates) => (
-    <ItemAddNew
-      title={t('add_new')}
-      onAddNew={() => handleOnAddNew(unitId, automates)}
-      wrapStyle={styles.addNewItem}
-    />
+  const renderListFooterComponent = useCallback(
+    (unitId, automates) => (
+      <ItemAddNew
+        title={t('add_new')}
+        onAddNew={() => handleOnAddNew(unitId, automates)}
+        wrapStyle={styles.addNewItem}
+      />
+    ),
+    [handleOnAddNew, t]
   );
 
   useLayoutEffect(() => {
@@ -197,20 +210,19 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <IconFill name={'plus-circle'} size={28} color={Colors.Orange} />
+          <AntDesign name={'pluscircle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });
   }, [setOptions]);
 
   useEffect(() => {
-    getAutomates();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isFocused]);
+    isFocused && getAutomates();
+  }, [isFocused, getAutomates]);
 
   return (
     <View style={styles.wrap}>
-      {isLoading && !sortedAutomateData?.length && <Loading />}
+      {isLoading && <Loading />}
       <FlatList
         keyExtractor={keyExtractor}
         data={sortedAutomateData}
@@ -220,6 +232,11 @@ const Automate = () => {
         refreshing={false}
         onRefresh={getAutomates}
         scrollIndicatorInsets={{ right: 1 }}
+        getItemLayout={(data, index) => ({
+          length: 180,
+          offset: 180 * index,
+          index,
+        })}
       />
     </View>
   );

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

@@ -13,20 +13,8 @@ import { ToastBottomHelper } from '../../../utils/Utils';
 import BottomButtonView from '../../../commons/BottomButtonView';
 
 const mock = new MockAdapter(api.axiosInstance);
-const mockGoBack = jest.fn();
 const mockSetDisplay = jest.fn();
 
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-
-    useNavigation: () => ({
-      goBack: mockGoBack,
-    }),
-  };
-});
-
 const wrapComponent = ({ ...rest }) => (
   <SCProvider initState={mockSCStore({})}>
     <ChangePosition {...rest} />
@@ -38,7 +26,6 @@ describe('Test ChangePosition', () => {
 
   beforeEach(() => {
     useRoute.mockClear();
-    mockGoBack.mockClear();
   });
 
   it('render ChangePosition', async () => {
@@ -70,7 +57,7 @@ describe('Test ChangePosition', () => {
     await act(async () => {
       bottomButtonView[0].props.onPressMain();
     });
-    expect(mockGoBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
     expect(mockFetchData).toHaveBeenCalled();
     expect(mockSetDisplay).toHaveBeenCalled();
     expect(spyToastSuccess).toBeCalledWith('Updated widget successfully');

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 
 import { SCProvider } from '../../../context';
@@ -18,26 +18,6 @@ const wrapComponent = (route, navigation) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-      goBack: mockGoBack,
-    }),
-  };
-});
-
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
 describe('Test ConfirmUnitDeletion', () => {
   let tree;
   let route;
@@ -53,7 +33,6 @@ describe('Test ConfirmUnitDeletion', () => {
   });
 
   it('test render ConfirmUnitDeletion', async () => {
-    useState.mockImplementationOnce((init) => ['new_name', mockSetState]);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -65,7 +44,6 @@ describe('Test ConfirmUnitDeletion', () => {
     });
   });
   it('Onpress button ConfirmUnitDeletion ', async () => {
-    useState.mockImplementationOnce((init) => ['YES', mockSetState]);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });

package/src/screens/Device/EditDevice/__test__/EditDevice.test.js

@@ -23,17 +23,7 @@ const wrapComponent = (route) => (
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockPop = jest.fn();
 const mockSetSensorDetail = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      pop: mockPop,
-    }),
-  };
-});
 
 describe('Test EditDevice', () => {
   let tree;
@@ -135,7 +125,7 @@ describe('Test EditDevice', () => {
       await alertAction.props.rightButtonClick();
     });
     expect(alertAction.props.visible).toBeFalsy();
-    expect(mockPop).toHaveBeenCalled();
+    expect(global.mockedPop).toHaveBeenCalled();
   });
 
   it('test delete EditDevice failure', async () => {

package/src/screens/Device/EditDevice/index.js

@@ -2,7 +2,7 @@ import React, { memo, useState, useCallback } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { HeaderCustom } from '../../../commons/Header';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { Colors } from '../../../configs';
 import Text from '../../../commons/Text';
 import { useRoute } from '@react-navigation/native';
@@ -92,7 +92,7 @@ const EditDevice = memo(() => {
             <Text type="Body" Reugular color={Colors.Grey7}>
               {sensorName}
             </Text>
-            <IconOutline
+            <AntDesign
               name="right"
               size={18}
               color={Colors.Gray7}

package/src/screens/Device/__test__/detail.test.js

@@ -11,7 +11,7 @@ import { AlertSent } from '../../../commons/EmergencyButton/AlertSent';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../../commons';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import Text from '../../../commons/Text';
-import { IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
@@ -115,7 +115,7 @@ describe('test DeviceDetail', () => {
               command_prefer_over_googlehome: false,
               command_prefer_over_internet: true,
               googlehome_actions: [],
-              icon: 'caret-up',
+              icon: 'caretup',
               id: 9,
               key: '2b949045-8e03-4c07-a855-7794ade2e69c',
             },
@@ -137,13 +137,13 @@ describe('test DeviceDetail', () => {
               command_prefer_over_googlehome: false,
               command_prefer_over_internet: true,
               googlehome_actions: [],
-              icon: 'caret-down',
+              icon: 'caretdown',
               id: 10,
               key: 'a492e08c-8cb1-44ee-8ea0-46aaca4e5141',
             },
-            icon1: 'caret-up',
+            icon1: 'caretup',
             icon2: 'stop',
-            icon3: 'caret-down',
+            icon3: 'caretdown',
             text1: 'UP',
             text2: 'STOP/UNLOCK',
             text3: 'DOWN',
@@ -352,7 +352,7 @@ describe('test DeviceDetail', () => {
     const buttonPopupIcon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === IconFill
+          AccessibilityLabel.BUTTON_POPUP_RESOLVED_ICON && el.type === AntDesign
     );
     expect(buttonPopupTitle.props.children).toEqual([
       'Unit name',
@@ -403,16 +403,16 @@ describe('test DeviceDetail', () => {
               action1: 'a',
               action2: 'b',
               action3: 'b',
-              icon1: 'caret-up',
+              icon1: 'caretup',
               icon2: 'stop',
-              icon3: 'caret-down',
+              icon3: 'caretdown',
               text1: 'A',
               text2: 'B',
               text3: 'C',
               action1_data: {
                 id: 9,
                 key: 'a',
-                icon: 'caret-up',
+                icon: 'caretup',
                 color: '#00979D',
                 googlehome_actions: [],
                 command_prefer_over_internet: false,
@@ -432,7 +432,7 @@ describe('test DeviceDetail', () => {
               action3_data: {
                 id: 10,
                 key: 'b',
-                icon: 'caret-down',
+                icon: 'caretdown',
                 color: '#00979D',
                 googlehome_actions: [],
                 command_prefer_over_internet: false,
@@ -728,7 +728,7 @@ describe('test DeviceDetail', () => {
     await act(async () => {
       await menu.props.onItemClick(gotoActivityLog);
     });
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
       id: route.params.sensorData.id,
       type: 'action',
       share: route.params.unitData,

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -31,18 +31,6 @@ const wrapComponent = ({ ...rest }) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useFocusEffect: (func) => func(),
-  };
-});
-
 describe('Test SensorDisplayItem', () => {
   let tree;
   it('render visualChart', async () => {