@eohjsc/react-native-smart-city 0.7.11 → 0.7.13

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.11",
+  "version": "0.7.13",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -42,7 +42,8 @@
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",
     "build": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src",
-    "watch": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src --watch"
+    "watch": "syncdir ./src ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src --watch",
+    "copy-files": "cp -rfv ./assets/* ../EohMobile/node_modules/@eohjsc/react-native-smart-city/assets && cp -rfv ./src/* ../EohMobile/node_modules/@eohjsc/react-native-smart-city/src"
   },
   "repository": {
     "type": "git",
@@ -87,7 +88,7 @@
     "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.11.0",
-    "@sentry/react-native": "^5.24.1",
+    "@sentry/react-native": "^6.2.0",
     "@testing-library/react-hooks": "^6.0.0",
     "@types/jest": "^29.2.1",
     "@types/react": "^17.0.0",

package/src/commons/Header/Styles/HeaderCustomStyles.js

@@ -41,7 +41,7 @@ export default StyleSheet.create({
     height: 20,
   },
   title: {
-    textAlign: 'center',
+    alignSelf: 'center',
     fontSize: 16,
     lineHeight: 24,
     fontWeight: 'bold',
@@ -55,5 +55,6 @@ export default StyleSheet.create({
   },
   wrapTitle: {
     marginHorizontal: 12,
+    flex: 1,
   },
 });

package/src/commons/Sharing/MemberList.js

@@ -1,49 +1,57 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import { Colors, Constants } from '../../configs';
+import { Constants } from '../../configs';
 import Text from '../../commons/Text';
 import RowMember from './RowMember';
+import { RefreshControl, FlatList } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
 
 const MemberList = ({
   dataMember,
   ownerId,
   unit,
   currentUserId, //user is using app
+  isRefresh,
+  onRefresh,
 }) => {
   const t = useTranslations();
   return (
-    <View style={styles.box}>
-      {!!dataMember.length &&
-        dataMember.map((item, index) => (
-          <RowMember
-            member={item}
-            unit={unit}
-            index={index}
-            ownerId={ownerId}
-            currentUserId={currentUserId}
-            key={index.toString()}
-          />
-        ))}
-      {!dataMember.length && (
+    <FlatList
+      contentContainerStyle={styles.contentContainer}
+      keyExtractor={(item) => `${item.id}`}
+      data={dataMember}
+      extraData={dataMember}
+      numColumns={1}
+      refreshControl={
+        <RefreshControl refreshing={isRefresh} onRefresh={onRefresh} />
+      }
+      renderItem={({ item, index }) => (
+        <RowMember
+          member={item}
+          unit={unit}
+          index={index}
+          ownerId={ownerId}
+          currentUserId={currentUserId}
+        />
+      )}
+      ListEmptyComponent={() => (
         <View style={styles.viewEmpty}>
-          <Text style={styles.textCenter}>{t('no_member')}</Text>
+          <Text type="H4">{t('no_member')}</Text>
         </View>
       )}
-    </View>
+    />
   );
 };
 export default memo(MemberList);
 
 const styles = StyleSheet.create({
-  box: {
-    backgroundColor: Colors.White,
-    paddingTop: 20,
+  contentContainer: {
+    paddingBottom: getBottomSpace() + 50,
   },
   viewEmpty: {
     justifyContent: 'center',
     alignItems: 'center',
     height: Constants.height - 200,
-    backgroundColor: Colors.White,
   },
 });

package/src/commons/Sharing/RowMember.js

@@ -18,160 +18,108 @@ const arrColor = [
   Colors.Green3,
   Colors.Cyan2,
 ];
-const RowMember = memo(
-  ({
-    member,
-    index,
-    ownerId,
-    unit,
-    currentUserId,
-    type,
-    leftIcon = true,
-    rightComponent = true,
-  }) => {
-    const t = useTranslations();
-    const { navigate } = useNavigation();
-    const { id, name, phone_number, email, share_id, avatar } = member;
-    const [role, roleColor] = useMemo(
-      () =>
-        id === ownerId
-          ? [t('owner'), Colors.Primary]
-          : id === currentUserId
-          ? [t('me'), Colors.Primary]
-          : [t('member'), Colors.Gray6],
-      [currentUserId, id, ownerId, t]
-    );
-    const firstWordsInName = useMemo(() => {
-      const wordTemp = name || shortEmailName(email) || '';
-      return wordTemp?.charAt();
-    }, [email, name]);
+const RowMember = memo(({ member, index, ownerId, unit, currentUserId }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { id, name, phone_number, email, avatar } = member;
+  const [role, roleColor] = useMemo(
+    () =>
+      id === ownerId
+        ? [t('owner'), Colors.Primary]
+        : id === currentUserId
+        ? [t('me'), Colors.Primary]
+        : [t('member'), Colors.Gray6],
+    [currentUserId, id, ownerId, t]
+  );
+  const firstWordsInName = useMemo(() => {
+    const wordTemp = name || shortEmailName(email) || '';
+    return wordTemp?.charAt();
+  }, [email, name]);
 
-    if (id === ownerId && share_id) {
-      return null;
-    }
-    const circleColorTypes = {
-      primary: 'primary',
-      disable: 'disable',
-      noneBG: 'none',
-    };
-    const circleColor = type
-      ? circleColorTypes[type]
-      : arrColor[index % arrColor.length];
-
-    const onPressInfo = () => {
-      navigate(Routes.UnitMemberInformation, {
-        member,
-        ownerId,
-        unit,
-      });
-    };
-    return (
-      <View style={styles.rowContainer}>
-        <TouchableOpacity
-          onPress={onPressInfo}
-          disabled={type === 'disable'}
-          accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
-        >
-          <View style={styles.Border}>
-            {!!leftIcon && (
-              <View style={styles.paddingLeft16}>
-                {avatar ? (
-                  <Image source={{ uri: avatar }} style={styles.avatar} />
-                ) : (
-                  <CircleView size={40} backgroundColor={circleColor} center>
-                    <Text color={Colors.White}>{firstWordsInName}</Text>
-                  </CircleView>
-                )}
-              </View>
-            )}
-            <View style={styles.columnFlex}>
-              <Text style={styles.titleName}>
-                {name || shortEmailName(email) || ''}
+  const onPressInfo = () => {
+    navigate(Routes.UnitMemberInformation, {
+      member,
+      ownerId,
+      unit,
+    });
+  };
+  return (
+    <TouchableOpacity
+      onPress={onPressInfo}
+      accessibilityLabel={`${AccessibilityLabel.SELECT_MEMBER_UNIT}-${member?.id}`}
+    >
+      <View style={styles.border}>
+        <View style={styles.paddingLeft16}>
+          {avatar ? (
+            <Image source={{ uri: avatar }} style={styles.avatar} />
+          ) : (
+            <CircleView
+              size={40}
+              backgroundColor={arrColor[index % arrColor.length]}
+              center
+            >
+              <Text
+                color={Colors.White}
+                accessibilityLabel={
+                  AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_AVATAR
+                }
+              >
+                {firstWordsInName}
               </Text>
-              {/* Can't write test for this case, use !! to avoid app crash when phone_number is '' */}
-              {!!phone_number && (
-                <Text
-                  style={styles.status}
-                  accessibilityLabel={
-                    AccessibilityLabel.TEXT_PHONE_NUMBER_UNIT_MEMBER
-                  }
-                >
-                  {phone_number}
-                </Text>
-              )}
-            </View>
-            {!!rightComponent && (
-              <View style={styles.endFlex}>
-                {!!role && (
-                  <Text style={[styles.textRole, { color: roleColor }]}>
-                    {role}
-                  </Text>
-                )}
-              </View>
-            )}
-          </View>
-        </TouchableOpacity>
+            </CircleView>
+          )}
+        </View>
+        <View style={styles.columnFlex}>
+          <Text
+            style={styles.titleName}
+            accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_NAME}
+          >
+            {name || shortEmailName(email) || ''}
+          </Text>
+          {/* Can't write test for this case, use !! to avoid app crash when phone_number is '' */}
+          {!!phone_number && (
+            <Text
+              style={styles.status}
+              accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_PHONE}
+            >
+              {'******' + phone_number.slice(-4)}
+            </Text>
+          )}
+        </View>
+        <View style={styles.endFlex}>
+          {!!role && (
+            <Text
+              style={[styles.textRole, { color: roleColor }]}
+              accessibilityLabel={AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_ROLE}
+            >
+              {role}
+            </Text>
+          )}
+        </View>
       </View>
-    );
-  }
-);
+    </TouchableOpacity>
+  );
+});
 
 export default RowMember;
 
 const styles = StyleSheet.create({
-  rowContainer: {
-    flex: 1,
-  },
-  iconContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-  },
-  infoContainer: {
-    flex: 1,
-    paddingTop: 17,
-    borderBottomWidth: 1,
-    borderColor: Colors.Gray4,
-  },
-  textName: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-    marginBottom: 0,
-  },
   textRole: {
     fontSize: 12,
     lineHeight: 20,
   },
-  buttonRemove: {
-    position: 'absolute',
-    right: 0,
-    top: 10,
-    bottom: 10,
-    paddingHorizontal: 10,
-    justifyContent: 'center',
-  },
-  textCenter: {
-    alignSelf: 'center',
-  },
   columnFlex: {
     paddingLeft: 16,
     justifyContent: 'center',
     flexDirection: 'column',
   },
-  rowFlex: {
-    flexDirection: 'row',
-  },
   endFlex: {
     flex: 1,
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
     paddingRight: 16,
   },
-  Border: {
+  border: {
     display: 'flex',
     width: '100%',
     borderWidth: 0,
@@ -196,9 +144,6 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: Colors.Gray7,
   },
-  container: {
-    paddingTop: 0,
-  },
   paddingLeft16: {
     paddingLeft: 16,
   },

package/src/commons/Sharing/__test__/MemberList.test.js

@@ -1,31 +1,30 @@
-import React from 'react';
 import renderer, { act } from 'react-test-renderer';
+
 import MemberList from '../MemberList';
+import React from 'react';
 import RowMember from '../RowMember';
-import Text from '../../Text';
 import { SCProvider } from '../../../context';
+import Text from '../../Text';
 import { mockSCStore } from '../../../context/mockStore';
 import t from '../../../hooks/Common/useTranslations';
 
-const wrapComponent = (dataMember, ownerId, currentUserId, mockFunc) => (
+const wrapComponent = (dataMember, ownerId, currentUserId) => (
   <SCProvider initState={mockSCStore({})}>
     <MemberList
       dataMember={dataMember}
       ownerId={ownerId}
       currentUserId={currentUserId}
-      onPressRemove={mockFunc}
     />
   </SCProvider>
 );
 
 describe('MemberList', () => {
   let tree;
-  const mockFunc = jest.fn();
 
   it('MemberList snapshot id dataMember === ownerId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 2, mockFunc));
+      tree = await renderer.create(wrapComponent(dataMember, 1, 2));
     });
     const instance = tree.root;
     const rowMember = instance.findByType(RowMember);
@@ -38,9 +37,7 @@ describe('MemberList', () => {
   it('MemberList snapshot id dataMember !== ownerId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(
-        wrapComponent(dataMember, 2, null, mockFunc)
-      );
+      tree = await renderer.create(wrapComponent(dataMember, 2, null));
     });
     const instance = tree.root;
     const rowMember = instance.findByType(RowMember);
@@ -53,7 +50,7 @@ describe('MemberList', () => {
   it('MemberList snapshot id dataMember === currentUserId', async () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 2, 1, mockFunc));
+      tree = await renderer.create(wrapComponent(dataMember, 2, 1));
     });
     const instance = tree.root;
     const rowMembers = instance.findAllByType(RowMember);

package/src/commons/Sharing/__test__/RowMember.test.js

@@ -1,40 +1,137 @@
-import React from 'react';
+import { Image, TouchableOpacity } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
+
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import React from 'react';
+import Routes from '../../../utils/Route';
 import RowMember from '../RowMember';
-import Text from '../../Text';
 import { SCProvider } from '../../../context';
+import Text from '../../Text';
 import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
-const wrapComponent = (member, ownerId, currentUserId, mockFunc) => (
+const wrapComponent = ({ member, ownerId, currentUserId, index = 0 }) => (
   <SCProvider initState={mockSCStore({})}>
     <RowMember
       member={member}
       ownerId={ownerId}
       currentUserId={currentUserId}
-      onPressRemove={mockFunc}
+      index={index}
     />
   </SCProvider>
 );
 
 describe('RowMember', () => {
   let tree;
-  const mockFunc = jest.fn();
+  const mockedNavigate = useNavigation().navigate;
+  const assertTextItems = ({ instance, avatar, name, phone, role }) => {
+    const avatarText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_AVATAR && el.type === Text
+    );
+    const nameText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_NAME && el.type === Text
+    );
+    const phoneText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_PHONE && el.type === Text
+    );
+    const roleText = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.UNIT_MEMBER.ROW_TEXT_ROLE && el.type === Text
+    );
+
+    avatar !== null
+      ? expect(avatarText[0].props.children).toEqual(avatar)
+      : expect(avatarText.length).toEqual(0);
+    name !== null
+      ? expect(nameText[0].props.children).toEqual(name)
+      : expect(nameText.length).toEqual(0);
+    phone !== null
+      ? expect(phoneText[0].props.children).toEqual(phone)
+      : expect(phoneText.length).toEqual(0);
+    role !== null
+      ? expect(roleText[0].props.children).toEqual(role)
+      : expect(roleText.length).toEqual(0);
+  };
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+  });
+
   it('RowMember owner have name', async () => {
-    const dataMember = { id: 1, name: 'CEO' };
+    const dataMember = {
+      id: 1,
+      name: 'CEO',
+      avatar: 'https://image.jpg',
+      phone_number: '0123456789',
+    };
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 1 })
+      );
     });
     const instance = tree.root;
-    const textInputs = instance.findAllByType(Text);
-    expect(textInputs[1].props.children).toEqual('CEO');
+    const image = instance.findByType(Image);
+    assertTextItems({
+      instance,
+      avatar: null,
+      name: 'CEO',
+      phone: '******6789',
+      role: 'Owner',
+    });
+    expect(image.props.source.uri).toEqual('https://image.jpg');
+
+    const touchable = instance.findByType(TouchableOpacity);
+    await act(async () => {
+      touchable.props.onPress();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(
+      Routes.UnitMemberInformation,
+      {
+        member: dataMember,
+        ownerId: 1,
+        unit: undefined,
+      }
+    );
+  });
+  it('render RowMember with null name', async () => {
+    const dataMember = { id: 2, name: '', email: 'abc@gmail.com' };
+    await act(async () => {
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 2 })
+      );
+    });
+    const instance = tree.root;
+
+    assertTextItems({
+      instance,
+      avatar: 'a',
+      name: 'abc',
+      phone: null,
+      role: 'Me',
+    });
   });
-  it('RowMember owner dont have name show start of email ', async () => {
-    const dataMember = { id: 1, name: '', email: 'abc@gmail.com' };
+  it('render RowMember with null name and email', async () => {
+    const dataMember = { id: 3, name: null, email: null };
     await act(async () => {
-      tree = await renderer.create(wrapComponent(dataMember, 1, 1, mockFunc));
+      tree = await renderer.create(
+        wrapComponent({ member: dataMember, ownerId: 1, currentUserId: 1 })
+      );
     });
     const instance = tree.root;
-    const textInputs = instance.findAllByType(Text);
-    expect(textInputs[1].props.children).toEqual('abc');
+    assertTextItems({
+      instance,
+      avatar: '',
+      name: '',
+      phone: null,
+      role: 'Member',
+    });
   });
 });

package/src/configs/AccessibilityLabel.js

@@ -50,8 +50,12 @@ export default {
   SHARING_MEMBER: 'SHARING_MEMBER',
   REMOVE_MEMBER: 'REMOVE_MEMBER',
   CHECK_BOX_CUSTOM: 'CHECK_BOX_CUSTOM',
-  TEXT_PHONE_NUMBER_ITEM: 'TEXT_PHONE_NUMBER_ITEM',
-  TEXT_PHONE_NUMBER_UNIT_MEMBER: 'TEXT_PHONE_NUMBER_UNIT_MEMBER',
+  UNIT_MEMBER: {
+    ROW_TEXT_AVATAR: 'ROW_TEXT_AVATAR',
+    ROW_TEXT_NAME: 'ROW_TEXT_NAME',
+    ROW_TEXT_PHONE: 'ROW_TEXT_PHONE',
+    ROW_TEXT_ROLE: 'ROW_TEXT_ROLE',
+  },
 
   // SmartTiviTemplate
   SMART_TIVI_TEMPLATE: {

package/src/hooks/Common/useIsOwnerOfUnit.js

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

package/src/screens/Automate/AddNewAction/SetupScriptReceiverEmail.js

@@ -104,12 +104,13 @@ const SetupScriptReceiverEmail = ({ route }) => {
 
     return (
       <View style={styles.rowContainer}>
-        <View style={styles.Border}>
+        <View style={styles.border}>
           <CheckBox
             disabled={!email}
             lineWidth={4}
             value={listUser.includes(id)}
             onValueChange={onValueChange(id)}
+            style={styles.checkbox}
           />
           <View style={styles.paddingLeft16}>
             {avatar ? (

package/src/screens/Automate/AddNewAction/Styles/SetupScriptReceiverEmailStyles.js

@@ -41,10 +41,12 @@ export default StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'flex-end',
   },
-  Border: {
+  border: {
     flexDirection: 'row',
     paddingBottom: 16,
     paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   titleName: {
     fontSize: 16,
@@ -76,4 +78,8 @@ export default StyleSheet.create({
     borderRadius: 40,
     backgroundColor: Colors.Primary,
   },
+  checkbox: {
+    width: 24,
+    height: 24,
+  },
 });

package/src/screens/Automate/EditActionsList/Styles/UpdateReceiverEmailScriptStyles.js

@@ -36,6 +36,8 @@ export default StyleSheet.create({
     flexDirection: 'row',
     paddingBottom: 16,
     paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   paddingLeft16: {
     paddingLeft: 16,
@@ -75,4 +77,8 @@ export default StyleSheet.create({
     fontSize: 12,
     lineHeight: 20,
   },
+  checkbox: {
+    width: 24,
+    height: 24,
+  },
 });