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

package/src/commons/SubUnit/__test__/Favorites.test.js

@@ -13,18 +13,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn(),
-  };
-});
-
 describe('test ShortDetail Subunit', () => {
   let tree;
   let props;
@@ -58,7 +46,7 @@ describe('test ShortDetail Subunit', () => {
         {
           action: {
             color: '#00979D',
-            icon: 'caret-up',
+            icon: 'caretup',
             id: 1,
             key: '',
           },

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -27,17 +27,6 @@ jest.mock('react-native-permissions', () => {
   return mock;
 });
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-    useFocusEffect: jest.fn((handler) => handler()),
-  };
-});
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
 }));
@@ -135,7 +124,7 @@ describe('test ShortDetail Subunit', () => {
       {
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -167,7 +156,7 @@ describe('test ShortDetail Subunit', () => {
       {
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -212,7 +201,7 @@ describe('test ShortDetail Subunit', () => {
           {
             action: {
               color: '#00979D',
-              icon: 'caret-up',
+              icon: 'caretup',
               id: 1,
               key: '',
             },
@@ -263,7 +252,7 @@ describe('test ShortDetail Subunit', () => {
         device_type: 'HANET',
         action: {
           color: '#00979D',
-          icon: 'caret-up',
+          icon: 'caretup',
           id: 1,
           key: '',
         },
@@ -299,7 +288,7 @@ describe('test ShortDetail Subunit', () => {
       buttonAddNew.props.onAddNew();
     });
     await mock.request(keyPermission.CAMERA);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.AddGatewayStack, {
       screen: Routes.SelectDeviceType,
       params: {
         unit: props.unit,

package/src/commons/SummaryItem/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import { Colors } from '../../configs';
@@ -11,38 +11,37 @@ import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
 import { AccessibilityLabel } from '../../configs/Constants';
 
+const iconMap = {
+  air_quality: AirQuality,
+  water_quality: WaterQuality,
+  temperature: Temperature,
+  uv_index: UVIndex,
+  three_phase_power_consumption: PowerMeter,
+  power_consumption: PowerMeter,
+  default: Device,
+};
+
 const SummaryItem = memo(({ item, goToSummary }) => {
-  const Icon = (() => {
-    switch (item.template) {
-      case 'air_quality':
-        return AirQuality; /* istanbul ignore next */
-      case 'water_quality':
-        return WaterQuality; /* istanbul ignore next */
-      case 'temperature':
-        return Temperature; /* istanbul ignore next */
-      case 'uv_index':
-        return UVIndex; /* istanbul ignore next */
-      case 'three_phase_power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      case 'power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      default:
-        return Device; /* istanbul ignore next */
-    }
-  })();
+  const { template, left_text, left_value, id } = item;
+  const Icon = useMemo(() => iconMap[template] || iconMap.default, [template]);
+
+  const handlePress = useCallback(() => {
+    goToSummary(item);
+  }, [goToSummary, item]);
+
   return (
     <TouchableOpacity
-      onPress={() => goToSummary(item)}
+      onPress={handlePress}
       style={styles.wrapSummaryItem}
-      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
+      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />
         <Text type="Body" color={Colors.Gray7} style={styles.summaryText}>
-          {item.left_text}
+          {left_text}
         </Text>
         <Text color={Colors.Gray9} bold>
-          {item.left_value}
+          {left_value}
         </Text>
       </View>
       <View style={styles.dashItem} />

package/src/commons/Tabbar/__test__/index.test.js

@@ -12,17 +12,6 @@ const wrapComponent = (props) => (
   </SCProvider>
 );
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useRoute: jest.fn(),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
 describe('Test HanetCameraDetail', () => {
   Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
   let tree, props;

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

@@ -1,106 +1,114 @@
-import React, { memo, useCallback, useRef } from 'react';
-import { View, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
-import { Icon } from '@ant-design/react-native';
-import { useNavigation } from '@react-navigation/native';
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+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, 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(({ transparent, unit }) => {
+  const { user_id, name = '' } = unit;
+  const { goBack, navigate } = useNavigation();
+  const { routeName } = useRoute().params || {};
+  const buttonMoreRef = useRef(null);
+  const t = useTranslations();
+
+  const [showAdd, setShowAdd, setHideAdd] = useBoolean();
+  const { isOwner } = useIsOwnerOfUnit(user_id);
 
-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 { childRef, showingPopover, showPopoverWithRef, hidePopover } =
+    usePopover();
 
-    const onPressBack = useCallback(() => {
-      if (onBack) {
-        onBack();
-      } else {
-        goBack();
-      }
-    }, [goBack, onBack]);
+  const onPressMore = useCallback(() => {
+    showPopoverWithRef(buttonMoreRef);
+  }, [showPopoverWithRef]);
 
-    const onPressAdd = useCallback(() => {
-      onAdd && onAdd();
-    }, [onAdd]);
+  const handleGoBack = useCallback(() => {
+    if (routeName) {
+      navigate(routeName);
+    } else {
+      goBack();
+    }
+  }, [goBack, navigate, routeName]);
 
-    const onPressMore = useCallback(() => {
-      onMore && onMore(buttonMoreRef);
-    }, [onMore]);
+  const colorHeader = useMemo(() => {
+    return transparent ? Colors.White : Colors.Black;
+  }, [transparent]);
 
-    return (
-      <View style={[styles.container, bottomBorder && styles.bottomBorder]}>
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_BACK}
+        onPress={handleGoBack}
+      >
+        <View style={styles.btnLeft}>
+          <AntDesign name={'left'} size={27} color={colorHeader} />
+        </View>
+      </TouchableOpacity>
+      {!transparent && (
+        <View style={styles.boxTitle}>
+          <Text semibold style={styles.txtHeader} numberOfLines={1}>
+            {t('Welcome {name}', { name: name })}
+          </Text>
+        </View>
+      )}
+
+      <View style={styles.boxRight}>
+        {isOwner && (
+          <TouchableOpacity
+            accessibilityLabel={AccessibilityLabel.HEADER_UNIT_BUTTON_ADD}
+            onPress={setShowAdd}
+          >
+            <View style={styles.btnAdd}>
+              <AntDesign name={'plus'} size={27} color={colorHeader} />
+            </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}>
-            <Icon
-              name={'left'}
-              size={27}
-              color={transparent ? Colors.White : Colors.Black}
-            />
+          <View style={styles.btnMore}>
+            <MaterialIcons name={'more-vert'} size={27} color={colorHeader} />
           </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}>
-                  <Icon
-                    name={'plus'}
-                    size={27}
-                    color={transparent ? Colors.White : Colors.Black}
-                  />
-                </View>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              onPress={onPressMore}
-              ref={buttonMoreRef}
-              accessibilityLabel={idButtonMore}
-            >
-              <View style={styles.btnMore}>
-                <Icon
-                  name={'more'}
-                  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/SharedUnit.js

@@ -1,7 +1,7 @@
 import React, { Fragment, useCallback } from 'react';
 import { View, Image, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 
 import { API, Colors, Images } from '../../configs';
 import Text from '../../commons/Text';
@@ -91,7 +91,7 @@ const SharedUnit = ({
         {isOptions && (
           <Fragment>
             {item.is_pin ? (
-              <IconFill
+              <AntDesign
                 name="pushpin"
                 size={20}
                 color={Colors.Blue10}
@@ -99,15 +99,15 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <IconOutline
-                name="pushpin"
+              <AntDesign
+                name="pushpino"
                 size={20}
                 onPress={addPinSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
               />
             )}
             {item.is_star ? (
-              <IconFill
+              <AntDesign
                 name="star"
                 size={20}
                 color={Colors.Yellow6}
@@ -115,8 +115,8 @@ const SharedUnit = ({
                 accessibilityLabel={`${AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT}-${item.id}`}
               />
             ) : (
-              <IconOutline
-                name="star"
+              <AntDesign
+                name="staro"
                 size={20}
                 onPress={addStarSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}

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

@@ -1,37 +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';
-
-const mockedGoBack = jest.fn();
-
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      goBack: mockedGoBack,
-    }),
-  };
-});
+import { useNavigation } from '@react-navigation/native';
+import MoreMenu from '../../../screens/Unit/MoreMenu';
+import AddMenu from '../../../screens/Unit/AddMenu';
 
 describe('Test HeaderUnit', () => {
-  afterEach(() => {
-    mockedGoBack.mockClear();
-  });
   let tree;
-  const mockedFunc = jest.fn();
-  const mockedOnBack = jest.fn();
+  const unit = { id: 1 };
+  const { goBack } = useNavigation();
+
   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(
@@ -39,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(
@@ -65,37 +41,38 @@ describe('Test HeaderUnit', () => {
     await act(async () => {
       item.props.onPress();
     });
-    expect(mockedGoBack).toHaveBeenCalled();
+    expect(goBack).toHaveBeenCalled();
   });
 
   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();
   });
 });