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

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

@@ -1,106 +1,106 @@
 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 { 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(({ 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}>
-            <Icon
-              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}>
-                  <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();
   });
 });

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

@@ -14,26 +14,18 @@ import api from '../../../utils/Apis/axios';
 
 const mock = new MockAdapter(api.axiosInstance);
 
-const mockNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockNavigate,
-    }),
-  };
-});
-
-const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => (
-  <SCProvider initState={mockSCStore({})}>
-    <SharedUnit
-      item={item}
-      navigation={navigation}
-      isOptions={isOptions}
-      renewItem={mockedRenewItem}
-    />
-  </SCProvider>
-);
+const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => {
+  return (
+    <SCProvider initState={mockSCStore({})}>
+      <SharedUnit
+        item={item}
+        navigation={navigation}
+        isOptions={isOptions}
+        renewItem={mockedRenewItem}
+      />
+    </SCProvider>
+  );
+};
 
 describe('Test SharedUnit', () => {
   let tree, item, unit;
@@ -67,9 +59,6 @@ describe('Test SharedUnit', () => {
       );
     });
 
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
     const instance = tree.root;
     const touchSharedUnit = instance.find(
       (el) =>
@@ -111,7 +100,7 @@ describe('Test SharedUnit', () => {
       iconAddStarSharedUnit.props.onPress();
     });
     expect(iconRemovePinSharedUnit).toHaveLength(0);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       screen: Routes.UnitDetail,
       params: {
         unitId: 3,
@@ -120,85 +109,85 @@ describe('Test SharedUnit', () => {
     });
   });
 
-  it('test create SharedUnit unit without unit owner', async () => {
-    const navigation = useNavigation();
-    delete unit.owner_name;
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
-    const instance = tree.root;
-    const ownerName = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel === AccessibilityLabel.SHARED_UNIT_OWN_BY
-    );
-
-    expect(ownerName).toHaveLength(0);
-  });
-
-  it('test create SharedUnit unit isOption false', async () => {
-    const navigation = useNavigation();
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation, false));
-    });
-    const instance = tree.root;
-
-    const iconAddPinSharedUnit = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
-    );
-    const iconStarUnit = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
-    );
-
-    expect(iconAddPinSharedUnit).toHaveLength(0);
-    expect(iconStarUnit).toHaveLength(0);
-  });
-
-  it('test create SharedUnit unit is pin, is star', async () => {
-    const navigation = useNavigation();
-    item.is_pin = true;
-    item.is_star = true;
-
-    await act(async () => {
-      tree = await create(wrapComponent(item, navigation));
-    });
-    const instance = tree.root;
-    const iconRemovePinSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
-    await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
-    await act(async () => {
-      iconRemovePinSharedUnit.props.onPress();
-    });
-    const iconRemoveStarSharedUnit = instance.find(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
-    await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
-    });
-    mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(400);
-    await act(async () => {
-      iconRemoveStarSharedUnit.props.onPress();
-    });
-    const iconRemoveStar = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-        AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
-    );
-    expect(iconRemoveStar).toHaveLength(3);
-  });
+  // it('test create SharedUnit unit without unit owner', async () => {
+  //   const navigation = useNavigation();
+  //   delete unit.owner_name;
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation));
+  //   });
+  //   const instance = tree.root;
+  //   const ownerName = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel === AccessibilityLabel.SHARED_UNIT_OWN_BY
+  //   );
+  //
+  //   expect(ownerName).toHaveLength(0);
+  // });
+  //
+  // it('test create SharedUnit unit isOption false', async () => {
+  //   const navigation = useNavigation();
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation, false));
+  //   });
+  //   const instance = tree.root;
+  //
+  //   const iconAddPinSharedUnit = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT + '-69'
+  //   );
+  //   const iconStarUnit = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT + '-69'
+  //   );
+  //
+  //   expect(iconAddPinSharedUnit).toHaveLength(0);
+  //   expect(iconStarUnit).toHaveLength(0);
+  // });
+  //
+  // it('test create SharedUnit unit is pin, is star', async () => {
+  //   const navigation = useNavigation();
+  //   item.is_pin = true;
+  //   item.is_star = true;
+  //
+  //   await act(async () => {
+  //     tree = await create(wrapComponent(item, navigation));
+  //   });
+  //   const instance = tree.root;
+  //   const iconRemovePinSharedUnit = instance.find(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+  //   );
+  //   mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(200);
+  //   await act(async () => {
+  //     iconRemovePinSharedUnit.props.onPress();
+  //   });
+  //   mock.onPost(API.UNIT.UNPIN_UNIT(3)).reply(400);
+  //   await act(async () => {
+  //     iconRemovePinSharedUnit.props.onPress();
+  //   });
+  //   const iconRemoveStarSharedUnit = instance.find(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+  //   );
+  //   mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(200);
+  //   await act(async () => {
+  //     iconRemoveStarSharedUnit.props.onPress();
+  //   });
+  //   mock.onPost(API.UNIT.UNSTAR_UNIT(3)).reply(400);
+  //   await act(async () => {
+  //     iconRemoveStarSharedUnit.props.onPress();
+  //   });
+  //   const iconRemoveStar = instance.findAll(
+  //     (el) =>
+  //       el.props.accessibilityLabel ===
+  //       AccessibilityLabel.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+  //   );
+  //   expect(iconRemoveStar).toHaveLength(3);
+  // });
 });

package/src/commons/UnitSummary/AirQuality/SegmentedRoundDisplay/index.js

@@ -8,22 +8,22 @@ import TextCustom from '../../../../commons/Text';
 import { scaleValue, drawArc, polarToCartesian } from './helper';
 
 const SegmentedRoundDisplay = ({
-  filledArcWidth,
-  emptyArcWidth,
-  arcSpacing,
-  totalArcSize,
-  emptyArcColor,
-  filledArcColor,
-  radius,
   style,
   totalValue,
   value,
   title,
-  pos, //array position
-  boxTitle,
-  textHeader,
-  initIndex,
   valueText,
+  filledArcWidth = 0,
+  emptyArcWidth = 20,
+  arcSpacing = 1,
+  totalArcSize = 280,
+  emptyArcColor = Colors.Gray3,
+  filledArcColor = '#5ECCAA',
+  radius = 90,
+  pos = [0, 100, 200, 300, 400, 500],
+  boxTitle = false,
+  textHeader = '',
+  initIndex = 0,
 }) => {
   const [arcs, setArcs] = useState([]);
 
@@ -239,25 +239,6 @@ SegmentedRoundDisplay.propTypes = {
   initIndex: PropTypes.number,
 };
 
-SegmentedRoundDisplay.defaultProps = {
-  filledArcWidth: 0,
-  emptyArcWidth: 20,
-  arcSpacing: 1,
-  totalArcSize: 280,
-  emptyArcColor: Colors.Gray3,
-  filledArcColor: '#5ECCAA',
-  animationDuration: 1000,
-  incompleteArcColor: '#23318C',
-  displayValue: false,
-  valueBoxColor: '#23318C',
-  valueFontColor: '#FFFFFF',
-  radius: 90,
-  pos: [0, 100, 200, 300, 400, 500],
-  boxTitle: false,
-  textHeader: '',
-  initIndex: 0,
-};
-
 export default SegmentedRoundDisplay;
 
 const styles = StyleSheet.create({