@eohjsc/react-native-smart-city 0.6.0-rc4 → 0.6.0-rc6

package/src/commons/Unit/HeaderUnit/index.js

@@ -1,107 +1,106 @@
 import React, { memo, useCallback, useRef } from 'react';
-import { View, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
+import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
 import { Colors, Device } from '../../../configs';
-import Text from '../../Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import {
+  useBoolean,
+  useIsOwnerOfUnit,
+  usePopover,
+} from '../../../hooks/Common';
+import AddMenu from '../../../screens/Unit/AddMenu';
+import MoreMenu from '../../../screens/Unit/MoreMenu';
+import Text from '../../Text';
+
+const HeaderUnit = memo(({ unit, unitData }) => {
+  const { goBack, navigate } = useNavigation();
+  const { routeName } = useRoute().params || {};
+  const buttonMoreRef = useRef(null);
+  const t = useTranslations();
 
-const HeaderUnit = memo(
-  ({
-    transparent,
-    onBack,
-    title,
-    onAdd,
-    onMore,
-    hideRight,
-    hideRightPlus,
-    styleBoxTitle,
-    bottomBorder,
-    idButtonMore = AccessibilityLabel.HEADER_UNIT_BUTTON_MORE,
-  }) => {
-    const { goBack } = useNavigation();
-    const buttonMoreRef = useRef(null);
+  const [showAdd, setShowAdd, setHideAdd] = useBoolean();
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
 
-    const onPressBack = useCallback(() => {
-      if (onBack) {
-        onBack();
-      } else {
-        goBack();
-      }
-    }, [goBack, onBack]);
+  const { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
 
-    const onPressAdd = useCallback(() => {
-      onAdd && onAdd();
-    }, [onAdd]);
+  const onPressMore = useCallback(() => {
+    showPopoverWithRef(buttonMoreRef);
+  }, [showPopoverWithRef]);
 
-    const onPressMore = useCallback(() => {
-      onMore && onMore(buttonMoreRef);
-    }, [onMore]);
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_BACK}
+        onPress={() => {
+          if (routeName) {
+            navigate(routeName);
+          } else {
+            goBack();
+          }
+        }}
+      >
+        <View style={styles.btnLeft}>
+          <AntDesign name={'left'} size={27} color={Colors.White} />
+        </View>
+      </TouchableOpacity>
+      <View style={styles.boxTitle}>
+        <Text semibold style={styles.txtHeader} numberOfLines={1}>
+          {t('Welcome {name}', {
+            name: unit?.name ? unit.name : '',
+          })}
+        </Text>
+      </View>
 
-    return (
-      <View style={[styles.container, bottomBorder && styles.bottomBorder]}>
+      <View style={styles.boxRight}>
+        {!!isOwner && (
+          <TouchableOpacity
+            accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_ADD}
+            onPress={setShowAdd}
+          >
+            <View style={styles.btnAdd}>
+              <AntDesign name={'plus'} size={27} color={Colors.White} />
+            </View>
+          </TouchableOpacity>
+        )}
         <TouchableOpacity
-          accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_BACK}
-          onPress={onPressBack}
+          onPress={onPressMore}
+          ref={buttonMoreRef}
+          accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_MORE}
         >
-          <View style={styles.btnLeft}>
-            <AntDesign
-              name={'left'}
-              size={27}
-              color={transparent ? Colors.White : Colors.Black}
-            />
+          <View style={styles.btnMore}>
+            <MaterialIcons name={'more-vert'} size={27} color={Colors.White} />
           </View>
         </TouchableOpacity>
-        <View style={[styles.boxTitle, styleBoxTitle]}>
-          {title && (
-            <Text semibold style={styles.txtHeader} numberOfLines={1}>
-              {title}
-            </Text>
-          )}
-        </View>
-
-        {!hideRight && (
-          <View style={styles.boxRight}>
-            {!hideRightPlus && (
-              <TouchableOpacity
-                accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_ADD}
-                onPress={onPressAdd}
-              >
-                <View style={styles.btnAdd}>
-                  <AntDesign
-                    name={'plus'}
-                    size={27}
-                    color={transparent ? Colors.White : Colors.Black}
-                  />
-                </View>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              onPress={onPressMore}
-              ref={buttonMoreRef}
-              accessibilityLabel={idButtonMore}
-            >
-              <View style={styles.btnMore}>
-                <MaterialIcons
-                  name={'more-vert'}
-                  size={27}
-                  color={transparent ? Colors.White : Colors.Black}
-                />
-              </View>
-            </TouchableOpacity>
-          </View>
-        )}
       </View>
-    );
-  }
-);
+      <AddMenu
+        unit={unit}
+        afterItemClick={hidePopover}
+        showAdd={showAdd}
+        setHideAdd={setHideAdd}
+      />
+      <MoreMenu
+        unit={unit}
+        hidePopover={hidePopover}
+        isOwner={isOwner}
+        childRef={childRef}
+        showingPopover={showingPopover}
+        idLabelPopover={AccessibilityLabel.UNIT_DETAIL_POPUP_MORE}
+        idLabelItem={AccessibilityLabel.UNIT_DETAIL_POPUP_MORE_ITEM}
+      />
+    </View>
+  );
+});
 
 export default HeaderUnit;
 const stickyHeaderHeight =
   Device.TopbarHeight + (Device.isIOS ? 0 : StatusBar.currentHeight);
+
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',

package/src/commons/Unit/__test__/HeaderUnit.test.js

@@ -1,25 +1,19 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { act, create } from 'react-test-renderer';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import HeaderUnit from '../HeaderUnit/index';
 import { useNavigation } from '@react-navigation/native';
+import MoreMenu from '../../../screens/Unit/MoreMenu';
+import AddMenu from '../../../screens/Unit/AddMenu';
 
 describe('Test HeaderUnit', () => {
   let tree;
+  const unit = { id: 1 };
   const { goBack } = useNavigation();
-  const mockedFunc = jest.fn();
-  const mockedOnBack = jest.fn();
+
   it('HeaderUnit onPress', async () => {
-    let title = 'title';
     await act(async () => {
-      tree = await create(
-        <HeaderUnit
-          title={title}
-          onBack={mockedOnBack}
-          onAdd={mockedFunc}
-          onMore={mockedFunc}
-        />
-      );
+      tree = await create(<HeaderUnit unit={unit} />);
     });
     const instance = tree.root;
     const item = instance.find(
@@ -27,22 +21,16 @@ describe('Test HeaderUnit', () => {
         el.props.accessibilityLabel ===
         AccessibilityLabel.HEADER_UNIT_BUTTON_BACK
     );
+
     await act(async () => {
       item.props.onPress();
     });
-    expect(mockedOnBack).toHaveBeenCalled();
+    expect(global.mockedGoBack).toHaveBeenCalled();
   });
 
   it('HeaderUnit onPress goBack', async () => {
     await act(async () => {
-      tree = await create(
-        <HeaderUnit
-          title="title"
-          onBack={false}
-          onAdd={mockedFunc}
-          onMore={mockedFunc}
-        />
-      );
+      tree = await create(<HeaderUnit unit={unit} />);
     });
     const instance = tree.root;
     const item = instance.find(
@@ -57,33 +45,34 @@ describe('Test HeaderUnit', () => {
   });
 
   it('HeaderUnit onPressAdd onPressMore', async () => {
+    useContext.mockReturnValue({
+      stateData: { auth: { account: { user: { id: 1 } } } },
+      setAction: jest.fn(),
+    });
     await act(async () => {
-      tree = await create(
-        <HeaderUnit
-          title="title"
-          onBack={false}
-          hideRight={false}
-          hideRightPlus={false}
-          onAdd={mockedFunc}
-          onMore={mockedFunc}
-        />
-      );
+      tree = await create(<HeaderUnit unit={{ ...unit, user_id: 1 }} />);
     });
     const instance = tree.root;
-    const buttonAdd = instance.find(
+    const buttonMore = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-        AccessibilityLabel.HEADER_UNIT_BUTTON_ADD
+        AccessibilityLabel.HEADER_UNIT_BUTTON_MORE
     );
-    const buttonMore = instance.find(
+    expect(instance.findByType(MoreMenu).props.showingPopover).toBeFalsy();
+    await act(async () => {
+      buttonMore.props.onPress();
+    });
+    expect(instance.findByType(MoreMenu).props.showingPopover).toBeTruthy();
+
+    const buttonAdd = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-        AccessibilityLabel.HEADER_UNIT_BUTTON_MORE
+        AccessibilityLabel.HEADER_UNIT_BUTTON_ADD
     );
+    expect(instance.findByType(AddMenu).props.showAdd).toBeFalsy();
     await act(async () => {
       buttonAdd.props.onPress();
-      buttonMore.props.onPress();
     });
-    expect(mockedFunc).toHaveBeenCalled();
+    expect(instance.findByType(AddMenu).props.showAdd).toBeTruthy();
   });
 });

package/src/commons/WrapParallaxScrollView/index.js

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { StatusBar, View, StyleSheet } from 'react-native';
+import { StatusBar, View, StyleSheet, RefreshControl } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 
 import { Colors, Device, Images, SCConfig } from '../../configs';
@@ -7,65 +7,42 @@ import Text from '../Text';
 import HeaderUnit from '../Unit/HeaderUnit';
 import { AccessibilityLabel } from '../../configs/Constants';
 import FImage from '../FImage';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import ParallaxScrollView from '../../libs/react-native-parallax-scroll-view';
 
 const stickyHeaderHeight =
   Device.TopbarHeight + (Device.isIOS ? 0 : StatusBar.currentHeight);
 
-const WrapParallaxScrollView = ({
-  children,
-  refreshControl,
-  title,
-  uriImg,
-  onBack,
-  onAdd,
-  onMore,
-  hideRight,
-  hideRightPlus,
-  contentBackground,
-  accessibilityLabel,
-  idButtonMore = AccessibilityLabel.HEADER_UNIT_BUTTON_MORE,
-}) => {
+const WrapParallaxScrollView = ({ children, unit, unitData, onRefresh }) => {
+  const t = useTranslations();
   const renderForeground = useCallback(
     () => (
       <View style={styles.wrap}>
-        <HeaderUnit
-          transparent
-          onBack={onBack}
-          onAdd={onAdd}
-          onMore={onMore}
-          hideRight={hideRight}
-          hideRightPlus={hideRightPlus}
-          idButtonMore={idButtonMore}
-        />
+        <HeaderUnit unit={unit} unitData={unitData} />
         <Text
           numberOfLines={1}
           semibold
           style={styles.nameUnit}
           accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_TEXT}
         >
-          {title}
+          {t('Welcome {name}', {
+            name: unit?.name ? unit.name : '',
+          })}
         </Text>
-        {contentBackground}
       </View>
     ),
-    [
-      onBack,
-      onAdd,
-      onMore,
-      hideRight,
-      hideRightPlus,
-      idButtonMore,
-      title,
-      contentBackground,
-    ]
+    [unit, unitData, t]
   );
   const renderBackground = useCallback(
     () => (
       <View style={styles.image}>
         <FImage
           style={styles.image}
-          source={uriImg ? { uri: uriImg } : SCConfig.appUnitDefaultBackground}
+          source={
+            unit?.background
+              ? { uri: unit.background }
+              : SCConfig.appUnitDefaultBackground
+          }
           defaultSource={Images.BgUnit}
           resizeMode="cover"
         />
@@ -75,23 +52,15 @@ const WrapParallaxScrollView = ({
         />
       </View>
     ),
-    [uriImg]
+    [unit]
   );
   const renderStickyHeader = useCallback(
     () => (
       <View style={styles.stickyHeader}>
-        <HeaderUnit
-          title={title}
-          onBack={onBack}
-          onAdd={onAdd}
-          onMore={onMore}
-          hideRight={hideRight}
-          hideRightPlus={hideRightPlus}
-          idButtonMore={idButtonMore}
-        />
+        <HeaderUnit unit={unit} unitData={unitData} />
       </View>
     ),
-    [title, onBack, onAdd, onMore, hideRight, hideRightPlus, idButtonMore]
+    [unit, unitData]
   );
   return (
     <ParallaxScrollView
@@ -101,9 +70,11 @@ const WrapParallaxScrollView = ({
       stickyHeaderHeight={stickyHeaderHeight}
       renderStickyHeader={renderStickyHeader}
       backgroundColor={Colors.White}
-      refreshControl={refreshControl}
+      refreshControl={
+        <RefreshControl refreshing={false} onRefresh={onRefresh} />
+      }
       showsVerticalScrollIndicator={false}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_PARALLAX_SCROLLVIEW}
     >
       {children}
     </ParallaxScrollView>

package/src/hooks/Common/useIsOwnerOfUnit.js

@@ -5,7 +5,7 @@ export const useIsOwnerOfUnit = (unitOwnerId) => {
   const idUser = useSCContextSelector(
     (state) => state?.auth?.account?.user?.id
   );
-  let isOwner = idUser === unitOwnerId;
+  let isOwner = unitOwnerId && idUser === unitOwnerId;
 
   return {
     isOwner,

package/src/hooks/IoT/__test__/useWatchConfigs.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
@@ -9,17 +9,6 @@ const mockedSetAction = jest.fn();
 
 const wrapper = ({ children }) => <SCProvider>{children}</SCProvider>;
 
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useCallback: (func) => func(),
-    useContext: () => ({
-      stateData: mockSCStore({}),
-      setAction: mockedSetAction,
-    }),
-  };
-});
-
 jest.mock('../../../iot/Monitor');
 
 describe('Test useWatchConfigs', () => {
@@ -27,14 +16,17 @@ describe('Test useWatchConfigs', () => {
     jest.useFakeTimers();
     watchMultiConfigs.mockClear();
     unwatchMultiConfigs.mockClear();
+    useContext.mockReturnValue({
+      stateData: mockSCStore({}),
+      setAction: mockedSetAction,
+    });
   });
 
   it('test unitId null', async () => {
     renderHook(() => useWatchConfigs([1]), {
       wrapper,
     });
-    jest.runAllTimers();
+    jest.runOnlyPendingTimers();
     expect(watchMultiConfigs).toBeCalledWith([1]);
-    expect(unwatchMultiConfigs).toBeCalledWith([1]);
   });
 });

package/src/navigations/SharedStack.js

@@ -15,7 +15,7 @@ const SharedStack = memo(() => {
   const t = useTranslations();
   const { toggleDrawer, goBack } = useNavigation();
   const { params } = useRoute();
-  const { isMainSource } = params;
+  const { isMainSource } = params || {};
   return (
     <Stack.Navigator>
       <Stack.Screen

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

@@ -99,9 +99,9 @@ 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);

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,14 +18,6 @@ const wrapComponent = (route, navigation) => (
   </SCProvider>
 );
 
-const mockSetState = jest.fn();
-jest.mock('react', () => {
-  return {
-    ...jest.requireActual('react'),
-    useState: jest.fn((init) => [init, mockSetState]),
-  };
-});
-
 describe('Test ConfirmUnitDeletion', () => {
   let tree;
   let route;
@@ -41,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));
     });
@@ -53,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/detail.js

@@ -755,7 +755,7 @@ const DeviceDetail = ({ route }) => {
             >
               {display.items.map((item, index) => {
                 return (
-                  <>
+                  <View key={item?.id?.toString()}>
                     {!item.is_configuration_ready && (
                       <Text center>{t('bellow_widget_is_not_configured')}</Text>
                     )}
@@ -779,7 +779,7 @@ const DeviceDetail = ({ route }) => {
                       setShowWindDirection={setShowWindDirection}
                       background={station?.background}
                     />
-                  </>
+                  </View>
                 );
               })}
             </SensorConnectStatusViewHeader>

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

@@ -129,9 +129,9 @@ describe('Test Render ListSubUnit', () => {
     });
 
     expect(global.mockedNavigate).toBeCalled();
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
-      await TouchableOpacities[2].props.onPress();
+      await touchableOpacities[2].props.onPress();
     });
 
     mockedNavigate.mockClear();

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

@@ -51,14 +51,14 @@ describe('Test Select unit screen', () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
     const bottomButtonView = instance.findByType(BottomButtonView);
 
     expect(bottomButtonView.props.typeMain).toEqual('disabled');
-    expect(TouchableOpacities).toHaveLength(4);
+    expect(touchableOpacities).toHaveLength(4);
     await act(async () => {
-      await TouchableOpacities[1].props.onPress();
-      await TouchableOpacities[2].props.onPress(response.data[0]);
+      await touchableOpacities[1].props.onPress();
+      await touchableOpacities[2].props.onPress(response.data[0]);
     });
     expect(bottomButtonView.props.typeMain).toEqual('primary');
   });
@@ -80,11 +80,11 @@ describe('Test Select unit screen', () => {
     });
 
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities).toHaveLength(3);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities).toHaveLength(3);
     await act(async () => {
-      await TouchableOpacities[1].props.onPress();
-      await TouchableOpacities[2].props.onPress();
+      await touchableOpacities[1].props.onPress();
+      await touchableOpacities[2].props.onPress();
     });
   });
 

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

@@ -10,6 +10,7 @@ import TextInput from '../../../commons/Form/TextInput';
 import { ModalCustom } from '../../../commons/Modal';
 import { TouchableOpacity } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -137,7 +138,7 @@ describe('Test GroupButtonByType', () => {
     await act(async () => {
       await touch.props.onPress();
     });
-    expect(icon.props.name).toEqual('reload');
+    expect(icon.props.name).toEqual('reload1');
 
     const touch2 = instance.find(
       (el) =>
@@ -145,14 +146,14 @@ describe('Test GroupButtonByType', () => {
           AccessibilityLabel.HEADER_BUTTON_TYPE_MORE &&
         el.type === TouchableOpacity
     );
-    const AntDesign2 = instance.find(
+    const moreIcon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.ICON_OUTLINE_TYPE_MORE && el.type === AntDesign
+          AccessibilityLabel.ICON_OUTLINE_TYPE_MORE && el.type === MaterialIcons
     );
     await act(async () => {
       await touch2.props.onPress();
     });
-    expect(AntDesign2.props.name).toEqual('more');
+    expect(moreIcon.props.name).toEqual('more-vert');
   });
 });

package/src/screens/Template/__test__/EditTemplate.test.js

@@ -57,10 +57,10 @@ describe('Test EditTemplate', () => {
     const DraggableFlatLists = instance.findAllByType(DraggableFlatList);
     expect(DraggableFlatLists).toHaveLength(1);
 
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
 
     await act(async () => {
-      await TouchableOpacities[0].props.onPress();
+      await touchableOpacities[0].props.onPress();
     });
     await act(async () => {
       const firstItem = instance.findByProps({ accessibilityLabel: 'item-0' });

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

@@ -57,8 +57,8 @@ describe('Test Detail', () => {
     });
 
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    await TouchableOpacities[0].props.onPress();
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await touchableOpacities[0].props.onPress();
     expect(global.mockedGoBack).toBeCalled();
   });
 
@@ -82,9 +82,9 @@ describe('Test Detail', () => {
     });
 
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
     await act(async () => {
-      await TouchableOpacities[1].props.onPress();
+      await touchableOpacities[1].props.onPress();
     });
     const menuActionMore = instance.findByType(MenuActionMore);
     const mockDoAction = jest.fn();