@eohjsc/react-native-smart-city 0.2.95 → 0.2.96

package/src/screens/Sharing/Components/ItemChangeRole.js

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Text from '../../../commons/Text';
+import { Colors } from '../../../configs';
+
+import styles from './Styles/ItemChangeRoleStyles';
+import { RadioCircle } from '../../../commons';
+
+const ItemChangeRole = ({
+  isChecked,
+  onPress,
+  wrapStyle,
+  wrapCheckBoxStyle,
+  icon,
+  title = '',
+  message = '',
+  disabled = false,
+}) => {
+  return (
+    <TouchableOpacity
+      style={[styles.wrapBtn, disabled && styles.wrapBtnDisable, wrapStyle]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <View style={[styles.wrapView]}>
+        <View style={styles.icon}>{icon}</View>
+        <View style={styles.textContent}>
+          <Text type="H4" semibold>
+            {title}
+          </Text>
+          <Text type="Body" color={Colors.Gray7}>
+            {message}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.radioCircle}>
+        <RadioCircle active={isChecked} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default memo(ItemChangeRole);

package/src/screens/Sharing/Components/SensorItem.js

@@ -6,6 +6,7 @@ import styles from './Styles/SensorItemStyles';
 import FImage from '../../../commons/FImage';
 import { TitleCheckBox } from '.';
 import { CheckBoxCustom } from '.';
+import { TESTID } from '../../../configs/Constants';
 
 const SensorItem = ({
   item = {},
@@ -101,7 +102,12 @@ const SensorItem = ({
       />
       <View style={styles.wrapRight}>
         <View style={styles.viewRight}>
-          <Text numberOfLines={1} style={styles.text} onPress={onPressItem}>
+          <Text
+            numberOfLines={1}
+            style={styles.text}
+            onPress={onPressItem}
+            testID={TESTID.TEXT_SENSOR_ITEM}
+          >
             {name}
           </Text>
           {dataConfig.length > 0 ? (

package/src/screens/Sharing/Components/Styles/ItemChangeRoleStyles.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+const btnStyles = {
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  paddingHorizontal: 16,
+  alignItems: 'flex-start',
+  marginBottom: 16,
+};
+export default StyleSheet.create({
+  wrapBtn: {
+    ...btnStyles,
+  },
+  wrapView: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  icon: {
+    paddingRight: 16,
+    paddingLeft: 8,
+  },
+  textContent: {
+    flex: 1,
+    paddingTop: 4,
+    paddingRight: 32,
+  },
+  radioCircle: {
+    paddingTop: 6,
+    paddingRight: 8,
+  },
+  wrapBtnDisable: {
+    ...btnStyles,
+    backgroundColor: Colors.Gray11,
+  },
+});

package/src/screens/Sharing/Components/__test__/ItemChangeRole.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import ItemChangeRole from '../ItemChangeRole';
+import { TouchableOpacity } from 'react-native';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockOnPress = jest.fn();
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <ItemChangeRole onPress={mockOnPress} />
+  </SCProvider>
+);
+
+describe('test ItemChangeRole', () => {
+  test('test ItemChangeRole', () => {
+    let tree;
+    act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(1);
+    act(() => {
+      touchableOpacity[0].props.onPress();
+    });
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+});

package/src/screens/Sharing/Components/__test__/SensorItem.test.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import SensorItem from '../SensorItem';
+import { Text } from 'react-native';
+import { TESTID } from '../../../../configs/Constants';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockOnTickedSensor = jest.fn();
+const mockOnTickedChild = jest.fn();
+const wrapComponent = (item) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SensorItem
+      item={item}
+      onTickedChild={mockOnTickedChild}
+      onTickedSensor={mockOnTickedSensor}
+      activeItemId={item.id}
+    />
+  </SCProvider>
+);
+
+describe('test SensorItem', () => {
+  test('test SensorItem', () => {
+    const item = {
+      id: 1,
+      name: 'abc',
+      actions: [],
+      read_configs: [],
+      icon_kit: '',
+      isChecked: true,
+    };
+    let tree;
+    act(() => {
+      tree = create(wrapComponent(item));
+    });
+    const instance = tree.root;
+    const onPressText = instance.find(
+      (el) => el.type === Text && el.props.testID === TESTID.TEXT_SENSOR_ITEM
+    );
+    expect(onPressText).toBeDefined();
+    act(() => {
+      onPressText.props.onPress();
+    });
+  });
+});

package/src/screens/Sharing/InfoMemberUnit.js

@@ -0,0 +1,274 @@
+import React, { useState, useCallback, useEffect, memo, useMemo } from 'react';
+import { View, ActivityIndicator, Image, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { CircleView } from '../../commons/CircleView';
+import Text from '../../commons/Text';
+import { shortEmailName } from '../../utils/Utils';
+import { Colors, Images, API } from '../../configs';
+import { HeaderCustom } from '../../commons/Header';
+import RowMemberInfo from '../GuestInfo/components/RowGuestInfo';
+import { useIsOwnerOfUnit } from '../../hooks/Common';
+import { axiosGet } from '../../utils/Apis/axios';
+import { AlertAction } from '../../commons';
+import { useStateAlertAction, useDataMember } from './hooks';
+import ItemChangeRole from './Components/ItemChangeRole';
+import MemberSvg from '../../Images/Common/member.svg';
+import OwnerSvg from '../../Images/Common/owner.svg';
+import styles from './Styles/inforMemberUnitStyles';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+import Routes from '../../utils/Route';
+import { TESTID } from '../../configs/Constants';
+
+const InfoMemberUnit = memo(({ route }) => {
+  const t = useTranslations();
+  const { member, unit } = route.params || {
+    member: {},
+    unit: {},
+  };
+  const { navigate } = useNavigation();
+  const [isLoading, setIsLoading] = useState(true);
+  const [memberInfo, setMemberInfo] = useState({});
+  const [itemSelected, setItemSelected] = useState({});
+  const isFocused = useIsFocused();
+  const {
+    stateAlertAction,
+    hideAlertAction,
+    onPressRemoveUser,
+    onPressChangeRole,
+  } = useStateAlertAction();
+
+  const { removeMember } = useDataMember(unit?.id);
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
+
+  const canRemoveMember = useMemo(
+    () => isOwner && memberInfo?.id !== unit?.user_id,
+    [isOwner, memberInfo?.id, unit?.user_id]
+  );
+
+  const isIdentityOwner = useMemo(
+    () => memberInfo?.identity === 'owner',
+    [memberInfo]
+  );
+
+  const handleRemoveOrChangeRole = useCallback(() => {
+    if (stateAlertAction?.member) {
+      if (stateAlertAction?.is_change) {
+        hideAlertAction();
+        if (itemSelected?.role?.is_owner) {
+          navigate(Routes.EnterPassword, {
+            dataParams: { unit_id: unit?.id, member },
+            type: 'infoMemberUnit',
+          });
+        }
+      } else {
+        removeMember(
+          stateAlertAction?.member?.share_id,
+          stateAlertAction?.member?.name
+        );
+        hideAlertAction();
+      }
+    }
+  }, [
+    hideAlertAction,
+    itemSelected?.role?.is_owner,
+    member,
+    navigate,
+    removeMember,
+    stateAlertAction?.is_change,
+    stateAlertAction?.member,
+    unit?.id,
+  ]);
+
+  const fetchMemberInfo = useCallback(async () => {
+    setIsLoading(true);
+    const { success, data } = await axiosGet(
+      API.SHARE.UNIT_MEMBER_INFO(unit?.id, member?.id)
+    );
+    if (success) {
+      setIsLoading(false);
+      setMemberInfo(data);
+    }
+  }, [member?.id, unit?.id]);
+
+  const firstWordsInName = useMemo(() => {
+    const wordTemp =
+      memberInfo?.name || shortEmailName(memberInfo?.email) || '';
+    return wordTemp?.charAt();
+  }, [memberInfo?.email, memberInfo?.name]);
+
+  const itemsRoleModal = useMemo(
+    () => [
+      {
+        id: 1,
+        icon: <OwnerSvg />,
+        title: t('owner'),
+        message: t('owner_share_content'),
+        role: { is_owner: true },
+      },
+      {
+        id: 2,
+        icon: <MemberSvg />,
+        title: t('member'),
+        message: t('member_share_content'),
+        role: { is_owner: false },
+      },
+    ],
+    [t]
+  );
+
+  const ChangeRoleContent = useCallback(() => {
+    const onPressRole = (item) => () => {
+      setItemSelected(item);
+    };
+    if (stateAlertAction?.is_change) {
+      return itemsRoleModal?.map((item, index) => {
+        return (
+          <ItemChangeRole
+            key={index}
+            isChecked={itemSelected?.id === item?.id}
+            icon={item?.icon}
+            onPress={onPressRole(item)}
+            title={item?.title}
+            message={item?.message}
+          />
+        );
+      });
+    }
+    return (
+      <Text style={styles.paddingLeft16}>{stateAlertAction?.message}</Text>
+    );
+  }, [
+    itemSelected?.id,
+    itemsRoleModal,
+    stateAlertAction?.is_change,
+    stateAlertAction?.message,
+  ]);
+  const handleShareDevice = useCallback(() => {
+    if (isOwner && memberInfo?.identity === 'member') {
+      return navigate(Routes.AddMemberStack, {
+        screen: Routes.SharingSelectPermission,
+        params: {
+          unit: { id: unit?.id },
+          type: 'share_device',
+          member: memberInfo,
+        },
+      });
+    }
+    return <></>;
+  }, [isOwner, navigate, unit?.id, memberInfo]);
+
+  useEffect(() => {
+    if (isIdentityOwner) {
+      setItemSelected(itemsRoleModal[0]);
+    } else {
+      setItemSelected(itemsRoleModal[1]);
+    }
+  }, [itemsRoleModal, isIdentityOwner]);
+
+  useEffect(() => {
+    !!isFocused && fetchMemberInfo();
+  }, [fetchMemberInfo, isFocused]);
+
+  return (
+    <>
+      <View style={styles.container}>
+        <HeaderCustom title={t('member_info')} isShowSeparator />
+        {isLoading ? (
+          <ActivityIndicator
+            size="large"
+            color={Colors.Primary}
+            style={styles.loading}
+          />
+        ) : (
+          <>
+            {!!memberInfo && (
+              <View style={styles.userWrap}>
+                {memberInfo?.avatar ? (
+                  <Image
+                    source={{ uri: memberInfo?.avatar }}
+                    style={styles.avatar}
+                  />
+                ) : (
+                  <CircleView size={88} backgroundColor={Colors.Cyan2} center>
+                    <Text type="H2" color={Colors.White}>
+                      {firstWordsInName}
+                    </Text>
+                  </CircleView>
+                )}
+                <Text type="H3" bold style={styles.textName}>
+                  {memberInfo?.name || shortEmailName(memberInfo?.email) || ''}
+                </Text>
+              </View>
+            )}
+            {memberInfo?.id && (
+              <RowMemberInfo
+                textLeft={t('eoh_account_id')}
+                textRight={memberInfo?.phone_number || memberInfo.id}
+              />
+            )}
+            <RowMemberInfo
+              textLeft={t('identity')}
+              textRight={t(memberInfo?.identity)}
+            />
+            {!isIdentityOwner && (
+              <RowMemberInfo
+                textLeft={t('share_devices')}
+                textRight={memberInfo?.shared_devices}
+                onPress={handleShareDevice}
+              />
+            )}
+            {canRemoveMember && (
+              <>
+                <TouchableOpacity
+                  onPress={onPressChangeRole}
+                  style={styles.role}
+                >
+                  <View style={styles.leftRole}>
+                    <Text type="Body" color={Colors.Gray7}>
+                      {t('role')}
+                    </Text>
+                    <Text type="H4" semibold>
+                      {t(memberInfo?.identity)}
+                    </Text>
+                  </View>
+                  <Image source={Images.arrowBack} style={styles.arrowRight} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={styles.removeButton}
+                  onPress={() => onPressRemoveUser(member)}
+                  testID={TESTID.REMOVE_MEMBER}
+                >
+                  <Text
+                    type={'H4'}
+                    semibold
+                    color={Colors.Red}
+                    style={styles.removeBorderBottom}
+                  >
+                    {t('remove_member')}
+                  </Text>
+                </TouchableOpacity>
+              </>
+            )}
+          </>
+        )}
+      </View>
+
+      <AlertAction
+        visible={stateAlertAction.visible}
+        hideModal={hideAlertAction}
+        title={stateAlertAction.title}
+        leftButtonTitle={stateAlertAction.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlertAction.rightButton}
+        rightButtonClick={handleRemoveOrChangeRole}
+        rightButtonStyle={
+          !stateAlertAction?.is_change && styles.removeButtonStyle
+        }
+      >
+        <ChangeRoleContent />
+      </AlertAction>
+    </>
+  );
+});
+
+export default InfoMemberUnit;

package/src/screens/Sharing/MemberList.js

@@ -1,15 +1,15 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
 import Routes from '../../utils/Route';
-import AlertAction from '../../commons/AlertAction';
 import SharingMembers from '../../commons/Sharing/MemberList';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
+import AlertAction from '../../commons/AlertAction';
 
 import { useDataMember, useStateAlertAction } from './hooks';
 import { TESTID } from '../../configs/Constants';
@@ -18,41 +18,17 @@ import { useSCContextSelector } from '../../context';
 const MemberList = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
+  const isFocused = useIsFocused();
   const account = useSCContextSelector((state) => state.auth.account);
   const { unitId, unit } = route.params;
-  const {
-    dataMembers,
-    loading,
-    leaveUnit,
-    removeMember,
-    isRefresh,
-    onRefresh,
-  } = useDataMember(unitId);
-  const { isOwner } = useIsOwnerOfUnit(unit.user_id);
-  const {
-    stateAlertAction,
-    hideAlertAction,
-    onPressRemoveUser,
-    stateLeaveUnit,
-  } = useStateAlertAction();
+  const { dataMembers, isRefresh, onRefresh, leaveUnit } = useDataMember(
+    unitId,
+    unit?.user_id
+  );
+  const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
 
-  const handleLeaveOrRemove = useCallback(() => {
-    if (stateAlertAction.member) {
-      removeMember(
-        stateAlertAction.member.share_id,
-        stateAlertAction.member.name
-      );
-    } else {
-      leaveUnit(unit.name);
-    }
-    hideAlertAction();
-  }, [
-    hideAlertAction,
-    leaveUnit,
-    removeMember,
-    stateAlertAction.member,
-    unit.name,
-  ]);
+  const { stateAlertSharingMenu, hideStateAlertSharingMenu, stateLeaveUnit } =
+    useStateAlertAction();
 
   const onPressRightHeader = useCallback(() => {
     if (isOwner) {
@@ -63,7 +39,20 @@ const MemberList = ({ route }) => {
     } else {
       stateLeaveUnit(); //change state stateAlertAction
     }
-  }, [isOwner, stateLeaveUnit, navigate, unitId]);
+  }, [isOwner, navigate, stateLeaveUnit, unitId]);
+
+  const handleLeave = useCallback(() => {
+    if (!isOwner) {
+      leaveUnit(unit.name);
+    }
+    hideStateAlertSharingMenu();
+  }, [hideStateAlertSharingMenu, isOwner, leaveUnit, unit.name]);
+
+  useEffect(() => {
+    if (isFocused) {
+      onRefresh();
+    }
+  }, [isFocused, onRefresh]);
 
   const rightHeader = (
     <TouchableOpacity
@@ -81,29 +70,31 @@ const MemberList = ({ route }) => {
   return (
     <View style={styles.container}>
       <WrapHeaderScrollable
-        title={t('members')}
+        title={t('unit_member')}
         rightComponent={rightHeader}
         loading={isRefresh}
         onRefresh={onRefresh}
+        headerAniStyle={styles.headerAniStyle}
+        styleScrollView={{ backgroundColor: Colors.White }}
       >
-        {!loading && (
-          <SharingMembers
-            dataMember={dataMembers}
-            ownerId={unit.user_id}
-            currentUserId={account.user.id}
-            onPressRemove={onPressRemoveUser}
-          />
-        )}
+        <SharingMembers
+          testID={TESTID.SHARING_MEMBER}
+          dataMember={dataMembers}
+          unit={unit}
+          ownerId={unit.user_id}
+          currentUserId={account.user.id}
+        />
       </WrapHeaderScrollable>
       <AlertAction
-        visible={stateAlertAction.visible}
-        hideModal={hideAlertAction}
-        title={stateAlertAction.title}
-        message={stateAlertAction.message}
-        leftButtonTitle={stateAlertAction.leftButton}
-        leftButtonClick={hideAlertAction}
-        rightButtonTitle={stateAlertAction.rightButton}
-        rightButtonClick={handleLeaveOrRemove}
+        visible={stateAlertSharingMenu.visible}
+        hideModal={hideStateAlertSharingMenu}
+        title={stateAlertSharingMenu.title}
+        message={stateAlertSharingMenu.message}
+        leftButtonTitle={stateAlertSharingMenu.leftButton}
+        leftButtonClick={hideStateAlertSharingMenu}
+        rightButtonTitle={stateAlertSharingMenu.rightButton}
+        rightButtonClick={handleLeave}
+        rightButtonStyle={styles.rightButtonStyle}
       />
     </View>
   );
@@ -122,4 +113,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flex: 1,
   },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+  },
+  rightButtonStyle: {
+    color: Colors.Red,
+  },
 });