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

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

@@ -12,6 +12,7 @@ export default StyleSheet.create({
   wrapContent: {
     flex: 1,
     paddingHorizontal: 20,
+    marginBottom: 100,
   },
   wrapItem: {
     flexDirection: 'row',
@@ -50,12 +51,14 @@ export default StyleSheet.create({
   noBorder: {
     borderWidth: 0,
   },
+  icon: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 10,
+  },
   iconItem: {
     width: 35,
     height: 35,
-    marginTop: 6,
-    marginRight: 15,
-    alignItems: 'center',
   },
   contentItem: {
     flex: 1,

package/src/screens/Automate/EditActionsList/UpdateNotifyScript.js

@@ -20,7 +20,7 @@ const UpdateNotifyScript = ({
   updateIndex,
   setNeedRefresh,
 }) => {
-  const { title, message } = notify_script;
+  const { title, message, unit_id, unit_name } = notify_script;
   const [newValue, setNewValue] = useState({
     newTitle: title,
     newMessage: message,
@@ -31,7 +31,7 @@ const UpdateNotifyScript = ({
       API.AUTOMATE.UPDATE_SCRIPT_NOTIFY(automateId),
       {
         id: scriptItemId,
-        unit: unitId,
+        unit: unit_id,
         title: newValue.newTitle,
         message: newValue.newMessage,
       }
@@ -40,6 +40,7 @@ const UpdateNotifyScript = ({
       actionsList[updateIndex].notify_script = {
         title: newValue.newTitle,
         message: newValue.newMessage,
+        unit_name: unit_name,
       };
       setActionList(actionsList);
       onClosePopup();
@@ -56,7 +57,8 @@ const UpdateNotifyScript = ({
     setActionList,
     setNeedRefresh,
     t,
-    unitId,
+    unit_id,
+    unit_name,
     updateIndex,
   ]);
 

package/src/screens/Automate/EditActionsList/UpdateReceiverEmailScript.js

@@ -123,6 +123,7 @@ const UpdateReceiverEmailScript = ({ route }) => {
             lineWidth={4}
             value={listUser.includes(id)}
             onValueChange={onValueChange(id)}
+            style={styles.checkbox}
           />
           <View style={styles.paddingLeft16}>
             {avatar ? (

package/src/screens/Automate/EditActionsList/index.js

@@ -124,7 +124,7 @@ const EditActionsList = () => {
         onLongPress={onPressUpdate}
         accessibilityLabel={AccessibilityLabel.BUTTON_UPDATE}
       >
-        {icon}
+        <View style={styles.icon}>{icon}</View>
         <View style={styles.contentItem}>{content}</View>
         <TouchableOpacity
           accessibilityLabel={AccessibilityLabel.BUTTON_REMOVE_EDIT_ACTION_LIST}
@@ -183,7 +183,7 @@ const EditActionsList = () => {
       }
 
       if (notify_script) {
-        const { title, message } = notify_script;
+        const { title, message, unit_name } = notify_script;
 
         return (
           <CommonItem
@@ -201,6 +201,9 @@ const EditActionsList = () => {
                 <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
                   {message}
                 </Text>
+                <Text numberOfLines={1} type="H4" color={Colors.Gray9}>
+                  {unit_name}
+                </Text>
               </>
             }
             onPress={() => onPressRemove(item)}

package/src/screens/Automate/ScriptDetail/Styles/indexStyles.js

@@ -89,6 +89,8 @@ export default StyleSheet.create({
     paddingHorizontal: 16,
     marginLeft: 4,
     flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
   leftItem: {
     width: 41,
@@ -179,5 +181,7 @@ export default StyleSheet.create({
     height: 35,
     marginTop: 6,
     marginRight: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
   },
 });

package/src/screens/Automate/ScriptDetail/index.js

@@ -447,7 +447,7 @@ const Item = ({ item, index, enableScript, t }) => {
       </View>
     );
   } else if (notify_script) {
-    const { title, message } = notify_script;
+    const { title, message, unit_name } = notify_script;
     return (
       <View style={styles.wrapItem}>
         <View style={styles.leftItem}>
@@ -469,6 +469,9 @@ const Item = ({ item, index, enableScript, t }) => {
               </Text>
             </View>
           </View>
+          <Text numberOfLines={1} type="H4" color={color}>
+            {unit_name}
+          </Text>
         </View>
       </View>
     );
@@ -481,7 +484,7 @@ const Item = ({ item, index, enableScript, t }) => {
             {paddedIndex}
           </Text>
         </View>
-        <View style={styles.rightItem}>
+        <View style={styles.rightItemAction}>
           <View style={styles.iconEndDevice}>
             <Delay />
           </View>

package/src/screens/Sharing/UnitMemberList.js

@@ -1,33 +1,41 @@
-import React, { useCallback, useEffect } from 'react';
-import { IconOutline } from '@ant-design/icons-react-native';
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
+import React, {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useDataMember, useStateAlertAction } from './hooks';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 
+import { AccessibilityLabel } from '../../configs/Constants';
+import AlertAction from '../../commons/AlertAction';
 import { Colors } from '../../configs';
-import Routes from '../../utils/Route';
+import { HeaderCustom } from '../../commons';
+import { IconOutline } from '@ant-design/icons-react-native';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MemberList from '../../commons/Sharing/MemberList';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import Routes from '../../utils/Route';
+import { Search } from '../../commons/DevMode';
+import { ToastBottomHelper } from '../../utils/Utils';
+import { convertToSlug } from '../../utils/Functions/Search';
+import { useBackendPermission } from '../../utils/Permission/backend';
 import { useIsOwnerOfUnit } from '../../hooks/Common';
-import AlertAction from '../../commons/AlertAction';
-
-import { useDataMember, useStateAlertAction } from './hooks';
-import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
-import { useBackendPermission } from '../../utils/Permission/backend';
-import { ToastBottomHelper } from '../../utils/Utils';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const UnitMemberList = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
   const isFocused = useIsFocused();
   const account = useSCContextSelector((state) => state.auth.account);
-  const { unitId, unit } = route?.params || {};
+  const { unitId, unit } = route?.params;
   const { dataMembers, isRefresh, onRefresh, leaveUnit, loading } =
     useDataMember(unitId, unit?.user_id);
   const { isOwner } = useIsOwnerOfUnit(unit?.user_id);
   const permissions = useBackendPermission();
+  const [searchText, setSearchText] = useState('');
 
   const { stateAlertSharingMenu, hideStateAlertSharingMenu, stateLeaveUnit } =
     useStateAlertAction();
@@ -71,45 +79,59 @@ const UnitMemberList = ({ route }) => {
   }, [hideStateAlertSharingMenu, isOwner, leaveUnit, unit.name]);
 
   useEffect(() => {
-    if (isFocused) {
-      onRefresh();
-    }
+    isFocused && onRefresh();
   }, [isFocused, onRefresh]);
 
-  const rightHeader = (
-    <TouchableOpacity
-      accessibilityLabel={AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH}
-      onPress={onPressRightHeader}
-      style={styles.rightHeader}
-    >
-      {isOwner ? (
-        <IconOutline name={'plus'} size={27} color={Colors.Black} />
-      ) : (
-        <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
-      )}
-    </TouchableOpacity>
+  const matchedMembers = useMemo(() => {
+    return dataMembers.filter((member) => {
+      const text = convertToSlug(searchText);
+      const isPhoneMatch = convertToSlug(member.phone_number ?? '').includes(
+        text
+      );
+      const isNameMatch = convertToSlug(member.name ?? '').includes(text);
+      return isPhoneMatch || isNameMatch;
+    });
+  }, [dataMembers, searchText]);
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity
+        accessibilityLabel={AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH}
+        onPress={onPressRightHeader}
+      >
+        {isOwner ? (
+          <IconOutline name={'plus'} size={27} color={Colors.Black} />
+        ) : (
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
+        )}
+      </TouchableOpacity>
+    ),
+    [isOwner, onPressRightHeader]
   );
 
   return (
     <View style={styles.container}>
-      <WrapHeaderScrollable
+      <HeaderCustom
         title={t('unit_member')}
-        rightComponent={rightHeader}
-        loading={isRefresh}
-        onRefresh={onRefresh}
-        headerAniStyle={styles.headerAniStyle}
-        styleScrollView={{ backgroundColor: Colors.White }}
-      >
+        isShowSeparator
+        rightComponent={rightComponent}
+        titleStyles={styles.headerTitle}
+      />
+      <View style={styles.content}>
         {!loading && (
-          <MemberList
-            accessibilityLabel={AccessibilityLabel.SHARING_MEMBER}
-            dataMember={dataMembers}
-            unit={unit}
-            ownerId={unit.user_id}
-            currentUserId={account.user.id}
-          />
+          <Fragment>
+            <Search onSearch={setSearchText} />
+            <MemberList
+              accessibilityLabel={AccessibilityLabel.SHARING_MEMBER}
+              dataMember={matchedMembers}
+              unit={unit}
+              ownerId={unit.user_id}
+              currentUserId={account.user.id}
+              isRefresh={isRefresh}
+              onRefresh={onRefresh}
+            />
+          </Fragment>
         )}
-      </WrapHeaderScrollable>
+      </View>
       <AlertAction
         visible={stateAlertSharingMenu.visible}
         hideModal={hideStateAlertSharingMenu}
@@ -130,18 +152,19 @@ export default UnitMemberList;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: Colors.Gray2,
+    backgroundColor: Colors.White,
   },
-  rightHeader: {
-    alignItems: 'center',
-    width: 44,
-    justifyContent: 'center',
+  content: {
     flex: 1,
-  },
-  headerAniStyle: {
-    borderBottomWidth: 0,
+    marginHorizontal: 16,
   },
   rightButtonStyle: {
     color: Colors.Red,
   },
+  headerTitle: {
+    alignSelf: 'flex-start',
+    marginLeft: 0,
+    fontSize: 20,
+    lineHeight: 28,
+  },
 });

package/src/screens/Sharing/__test__/UnitMemberList.test.js

@@ -1,25 +1,23 @@
-import React from 'react';
-import { create, act } from 'react-test-renderer';
+import { act, create } from 'react-test-renderer';
 
-import UnitMemberList from '../UnitMemberList';
+import { API } from '../../../configs';
+import { AccessibilityLabel } from '../../../configs/Constants';
 import { AlertAction } from '../../../commons';
+import MemberList from '../../../commons/Sharing/MemberList';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../utils/Route';
 import { SCProvider } from '../../../context';
-import { mockSCStore } from '../../../context/mockStore';
+import { Search } from '../../../commons/DevMode';
+import { ToastBottomHelper } from '../../../utils/Utils';
 import { TouchableOpacity } from 'react-native';
-import Routes from '../../../utils/Route';
-import MockAdapter from 'axios-mock-adapter';
+import UnitMemberList from '../UnitMemberList';
 import api from '../../../utils/Apis/axios';
-import { useNavigation } from '@react-navigation/native';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import { getTranslate } from '../../../utils/I18n';
+import { mockSCStore } from '../../../context/mockStore';
+import { useNavigation } from '@react-navigation/native';
 
-new MockAdapter(api.axiosInstance);
-
-jest.mock('../../../hooks/Common', () => {
-  return {
-    useIsOwnerOfUnit: () => ({ isOwner: true }),
-  };
-});
+const mockAxios = new MockAdapter(api.axiosInstance);
 
 const wrapComponent = (route, state = {}) => (
   <SCProvider initState={mockSCStore(state)}>
@@ -29,21 +27,17 @@ const wrapComponent = (route, state = {}) => (
 
 describe('test MemberList', () => {
   let route;
-  let localState = {
-    auth: {
-      account: {
-        user: {
-          id: 2,
-        },
-      },
-    },
-  };
-
-  const mockedNavigate = useNavigation().navigate;
+  let localState;
 
+  const mockNavigate = useNavigation().navigate;
+  const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+  const spyToastSuccess = jest.spyOn(ToastBottomHelper, 'success');
   beforeEach(() => {
-    mockedNavigate.mockClear();
-
+    mockNavigate.mockClear();
+    mockAxios.reset();
+    spyToastError.mockClear();
+    spyToastSuccess.mockClear();
+    jest.clearAllMocks();
     route = {
       params: {
         unitId: 1,
@@ -54,6 +48,16 @@ describe('test MemberList', () => {
         },
       },
     };
+
+    localState = {
+      auth: {
+        account: {
+          user: {
+            id: 2,
+          },
+        },
+      },
+    };
   });
 
   it('AlertAction rightButtonClick', async () => {
@@ -70,7 +74,7 @@ describe('test MemberList', () => {
     await act(async () => {
       await memberListButtons[1].props.onPress();
     });
-    expect(global.mockedNavigate).toBeCalledWith(Routes.AddMemberStack, {
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.AddMemberStack, {
       screen: Routes.SelectShareDevice,
       params: { unit: { id: 1 } },
     });
@@ -84,6 +88,7 @@ describe('test MemberList', () => {
           auth: {
             account: {
               user: {
+                id: 2,
                 permissions: {
                   max_members_per_unit: 0,
                 },
@@ -94,16 +99,108 @@ describe('test MemberList', () => {
       );
     });
     const instance = tree.root;
-    const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
     const memberListButtons = instance.findAllByType(TouchableOpacity);
     await act(async () => {
       await memberListButtons[1].props.onPress();
     });
-    expect(global.mockedNavigate).not.toBeCalled();
-    expect(spyToastError).toBeCalledWith(
+    expect(mockNavigate).not.toHaveBeenCalled();
+    expect(spyToastError).toHaveBeenCalledWith(
       getTranslate('en', 'reach_max_members_per_unit', { length: 0 }),
       '',
       7000
     );
   });
+
+  it('test member leaves unit', async () => {
+    mockAxios.onDelete(API.SHARE.UNITS_MEMBER_DETAIL(1, 'me')).reply(200);
+
+    localState = {
+      auth: {
+        account: {
+          user: {
+            id: 5,
+          },
+        },
+      },
+    };
+
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponent(route, localState));
+    });
+    const instance = tree.root;
+
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      alertAction.props.rightButtonClick();
+    });
+
+    const rightHeaderButton = instance.find(
+      (el) =>
+        el.type === TouchableOpacity &&
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH
+    );
+    await act(async () => {
+      await rightHeaderButton.props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.Dashboard);
+    expect(spyToastSuccess).toHaveBeenCalledTimes(1);
+  });
+
+  it('test search member by name and phone', async () => {
+    const dataMember = [
+      {
+        id: 1,
+        name: 'user 1',
+        avatar: 'https://image1.jpg',
+        phone_number: '0933123456',
+      },
+      {
+        id: 2,
+        name: 'user 2',
+        avatar: 'https://image1.jpg',
+        phone_number: '0933777111',
+      },
+      {
+        id: 3,
+        name: null,
+        avatar: 'https://image1.jpg',
+        phone_number: null,
+      },
+    ];
+
+    mockAxios.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, dataMember);
+
+    let tree;
+    await act(async () => {
+      tree = await create(wrapComponent(route, localState));
+    });
+    const instance = tree.root;
+
+    const search = instance.findByType(Search);
+    const memberList = instance.findByType(MemberList);
+    await act(async () => {
+      search.props.onSearch('user 1');
+    });
+
+    expect(memberList.props.dataMember).toEqual([dataMember[0]]);
+
+    await act(async () => {
+      search.props.onSearch('3777');
+    });
+
+    expect(memberList.props.dataMember).toEqual([dataMember[1]]);
+
+    await act(async () => {
+      search.props.onSearch('');
+    });
+
+    //move owner to top
+    expect(memberList.props.dataMember).toEqual([
+      dataMember[1],
+      dataMember[0],
+      dataMember[2],
+    ]);
+  });
 });

package/src/screens/Sharing/hooks/__test__/index.test.js

@@ -1,12 +1,13 @@
-import React from 'react';
 import { act, renderHook } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
-import { useDataMember } from '..';
+
 import API from '../../../../configs/API';
-import api from '../../../../utils/Apis/axios';
+import MockAdapter from 'axios-mock-adapter';
+import React from 'react';
+import Routes from '../../../../utils/Route';
 import { SCProvider } from '../../../../context';
+import api from '../../../../utils/Apis/axios';
 import { mockSCStore } from '../../../../context/mockStore';
-import Routes from '../../../../utils/Route';
+import { useDataMember } from '..';
 
 const mock = new MockAdapter(api.axiosInstance);
 

package/src/screens/Sharing/hooks/index.js

@@ -1,12 +1,13 @@
+import { axiosDelete, axiosGet } from '../../../utils/Apis/axios';
 import { useCallback, useState } from 'react';
-import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useNavigation } from '@react-navigation/native';
+
 import { API } from '../../../configs';
 import Routes from '../../../utils/Route';
-import { axiosDelete, axiosGet } from '../../../utils/Apis/axios';
 import { ToastBottomHelper } from '../../../utils/Utils';
-import { useSCContextSelector } from '../../../context';
 import { useIsOwnerOfUnit } from '../../../hooks/Common';
+import { useNavigation } from '@react-navigation/native';
+import { useSCContextSelector } from '../../../context';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
 
 const useDataMember = (unitId, userUnitId = undefined) => {
   const t = useTranslations();

package/src/screens/SubUnit/ManageSubUnit.js

@@ -1,18 +1,19 @@
+import { Image, TouchableOpacity, View } from 'react-native';
 import React, { useEffect } from 'react';
-import { View, TouchableOpacity, Image } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
+
+import { AccessibilityLabel } from '../../configs/Constants';
 import { Colors } from '../../configs';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import Text from '../../commons/Text';
-import styles from './ManageSubUnitStyles';
 import { IconOutline } from '@ant-design/icons-react-native';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
-import Routes from '../../utils/Route';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
-import useManageSubUnit from './hooks/useManageSubUnit';
-import { AccessibilityLabel } from '../../configs/Constants';
+import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
+import Text from '../../commons/Text';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
+import styles from './ManageSubUnitStyles';
+import useManageSubUnit from './hooks/useManageSubUnit';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 const RightComponent = ({ onAddSubUnit, onRearrangeSubUnit }) => (
   <View style={styles.rightComponent}>
@@ -50,7 +51,9 @@ const StationList = ({ stations, onEditSubUnit }) => {
             />
           }
           text={item.name}
-          subtext={`${item.devices?.length}  ${t('devices').toLowerCase()}`}
+          subtext={`${item.devices?.length || 0}  ${t(
+            'devices'
+          ).toLowerCase()}`}
           onPress={() => onEditSubUnit(item)}
           rightComponent={
             <IconOutline name="right" size={20} color={Colors.Gray6} />

package/src/screens/SubUnit/RearrageSubUnit.js

@@ -1,15 +1,16 @@
 import React, { useState } from 'react';
-import { View, TouchableOpacity } from 'react-native';
-import { isEqual } from 'lodash';
+import { TouchableOpacity, View } from 'react-native';
+
 import { API } from '../../configs';
-import { axiosPost } from '../../utils/Apis/axios';
-import styles from './RearrrageSubUnitStyle';
-import Text from '../../commons/Text';
 import FlatListDnD from '../../commons/FlatListDnD';
-import ViewButtonBottom from '../../commons/ViewButtonBottom';
 import { HeaderCustom } from '../../commons/Header';
 import Rearrange from '../../../assets/images/Rearrange.svg';
+import Text from '../../commons/Text';
 import { ToastBottomHelper } from '../../utils/Utils';
+import ViewButtonBottom from '../../commons/ViewButtonBottom';
+import { axiosPost } from '../../utils/Apis/axios';
+import { isEqual } from 'lodash';
+import styles from './RearrrageSubUnitStyle';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -55,7 +56,7 @@ const RearrangeSubUnit = ({ route }) => {
         >
           <Text style={styles.indexText}>{item.name}</Text>
           <Text style={styles.deviceText}>
-            {`${item.devices.length} ${t('devices').toLowerCase()}`}
+            {`${item.devices?.length || 0} ${t('devices').toLowerCase()}`}
           </Text>
         </View>
       </View>