@eohjsc/react-native-smart-city 0.7.8 → 0.7.9

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

@@ -2,7 +2,6 @@ import React from 'react';
 import { create, act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
 
-import { AccessibilityLabel } from '../../../configs/Constants';
 import { ViewButtonBottom, Button } from '../../../commons';
 import _TextInput from '../../../commons/Form/TextInput';
 import AccountList from '../../../commons/Auth/AccountList';
@@ -11,8 +10,9 @@ import { getTranslate } from '../../../utils/I18n';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import api from '../../../utils/Apis/axios';
-import { Text } from 'react-native';
 import SharingInviteMembers from '../SelectUser';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -40,62 +40,7 @@ describe('test SharingInviteMembers container', () => {
     };
   });
 
-  const findByTestId = (instance, id) => {
-    return instance.find((el) => el.props.accessibilityLabel === id);
-  };
-
-  it('create', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const textTitle = findByTestId(
-      instance,
-      AccessibilityLabel.SELECT_USER_ADD_USER_TITLE
-    );
-    const textSubTitle = findByTestId(
-      instance,
-      AccessibilityLabel.SELECT_USER_ADD_USER_SUB_TITLE
-    );
-    expect(textTitle.props.children).toEqual(
-      getTranslate('en', 'add_user_title')
-    );
-    expect(textSubTitle.props.children).toEqual(
-      getTranslate('en', 'add_user_sub_title')
-    );
-  });
-
-  it('viewButtonBottom and onLeftClick', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    expect(viewButtonBottom.props.leftTitle).toEqual(
-      getTranslate('en', 'back')
-    );
-    expect(viewButtonBottom.props.rightTitle).toEqual(
-      getTranslate('en', 'done')
-    );
-    await act(async () => {
-      viewButtonBottom.props.onLeftClick();
-    });
-    expect(global.mockedGoBack).toHaveBeenCalled();
-  });
-
-  it('viewButtonBottom onRightClick', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const viewButtonBottom = instance.findByType(ViewButtonBottom);
-    await act(async () => {
-      viewButtonBottom.props.onRightClick();
-    });
-    expect(global.mockedNavigate).toHaveBeenCalled();
-  });
-
-  it('_TextInput onChange phone, invalidate and not call api sharedPermission', async () => {
+  it('input phone invalid', async () => {
     mock.onPost(API.SHARE.SHARE()).reply(200);
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -118,83 +63,92 @@ describe('test SharingInviteMembers container', () => {
     expect(textInput.props.errorText).toEqual(
       getTranslate('en', 'invalid_phone_number_or_email')
     );
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    expect(viewButtonBottom.props.rightDisabled).toBeTruthy();
   });
 
-  it('_TextInput onChange phone, validated and call api sharedPermission', async () => {
+  it('input phone valid and call api share permission', async () => {
+    const phone = '0909123456';
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onGet(API.SHARE.SEARCH_USER_BY_PHONE(phone)).reply(200, {
+      id: 3,
+      name: 'user add',
+      phone_number: phone,
+    });
+
+    mock.onPost(API.SHARE.SHARE_V2()).reply(200);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.findByType(_TextInput);
-    const button = instance.findByType(Button);
+    const buttonCheckUser = instance.findByType(Button);
     let accountList = instance.findAllByType(AccountList);
     expect(accountList).toHaveLength(0);
     await act(async () => {
-      await textInput.props.onChange('0909123456');
-    });
-    mock.onPost(API.SHARE.SHARE()).reply(200, {
-      user: {
-        id: 3,
-        name: 'user add',
-        phone_number: '0909123456',
-      },
+      await textInput.props.onChange(phone);
     });
     await act(async () => {
-      await button.props.onPress();
+      await buttonCheckUser.props.onPress();
+      await buttonCheckUser.props.onPress(); // case user double click
     });
-    expect(textInput.props.errorText).toEqual('');
+
     accountList = instance.findAllByType(AccountList);
     expect(accountList).toHaveLength(1);
     expect(accountList[0].props.accounts).toHaveLength(1);
 
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
     await act(async () => {
-      await textInput.props.onChange('test123@gmail.com');
-    });
-    mock.onPost(API.SHARE.SHARE()).reply(400);
-    await act(async () => {
-      await button.props.onPress();
+      viewButtonBottom.props.onRightClick();
     });
-    expect(accountList[0].props.accounts).toHaveLength(1);
+    expect(spyToast).toBeCalledWith('Invited user');
+  });
 
-    await act(async () => {
-      await textInput.props.onChange('0909123456'); // In case you have invited and then intentionally invite again
+  it('input 2 email valid and remove 1 email then call api share permission', async () => {
+    const email_1 = 'test1@gmail.com';
+    const email_2 = 'test2@gmail.com';
+    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
+    mock.onGet(API.SHARE.SEARCH_USER_BY_EMAIL(email_1)).reply(200, {
+      id: 1,
+      email: email_1,
     });
-    mock.onPost(API.SHARE.SHARE()).reply(400);
-    await act(async () => {
-      await button.props.onPress();
+    mock.onGet(API.SHARE.SEARCH_USER_BY_EMAIL(email_2)).reply(200, {
+      id: 2,
+      email: email_2,
     });
-    expect(accountList[0].props.accounts).toHaveLength(1);
-  });
-
-  it('_TextInput onChange email, validated and call api sharedPermission', async () => {
+    mock.onPost(API.SHARE.SHARE_V2()).reply(200);
     await act(async () => {
       tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const textInput = instance.findByType(_TextInput);
-    const button = instance.findByType(Button);
-    let accountList = instance.findAllByType(AccountList);
-    expect(accountList).toHaveLength(0);
+    const buttonCheckUser = instance.findByType(Button);
+    expect(instance.findAllByType(AccountList)).toHaveLength(0);
     await act(async () => {
-      await textInput.props.onChange('test@eoh.io');
+      await textInput.props.onChange(email_1);
+      await buttonCheckUser.props.onPress();
     });
-    mock.onPost(API.SHARE.SHARE()).reply(200, {
-      user: {
-        id: 3,
-        name: 'user add',
-        phone_number: '',
-        email: 'test@eoh.io',
-      },
+
+    expect(instance.findByType(AccountList).props.accounts).toHaveLength(1);
+
+    await act(async () => {
+      await textInput.props.onChange(email_2);
+      await buttonCheckUser.props.onPress();
     });
+
+    expect(instance.findByType(AccountList).props.accounts).toHaveLength(2);
+
+    const iconRemoves = instance.findAllByType(IconOutline);
     await act(async () => {
-      await button.props.onPress();
+      await iconRemoves[0].props.onPress();
     });
 
-    const textPhone = instance.findAll(
-      (el) =>
-        el.props.accessibilityLabel ===
-          AccessibilityLabel.TEXT_PHONE_NUMBER_ITEM && el.type === Text
-    );
-    expect(textPhone).toHaveLength(0);
+    expect(instance.findByType(AccountList).props.accounts).toHaveLength(1);
+
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    await act(async () => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(spyToast).toBeCalledWith('Invited user');
   });
 });

package/src/screens/SubUnit/ManageSubUnit.js

@@ -1,42 +1,93 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  Image,
-  ScrollView,
-  RefreshControl,
-} from 'react-native';
+import React, { useEffect } from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
 import { useIsFocused, useNavigation } from '@react-navigation/native';
 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 { RowItem } from '../../commons/RowItem';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
 import useManageSubUnit from './hooks/useManageSubUnit';
 import { AccessibilityLabel } from '../../configs/Constants';
+import { RowItem } from '../../commons/RowItem';
+
+const RightComponent = ({ onAddSubUnit, onRearrangeSubUnit }) => (
+  <View style={styles.rightComponent}>
+    <TouchableOpacity
+      accessibilityLabel={AccessibilityLabel.ADD_SUB_UNIT}
+      onPress={onAddSubUnit}
+      style={styles.headerButton}
+    >
+      <IconOutline name={'plus'} size={27} color={Colors.Black} />
+    </TouchableOpacity>
+    <TouchableOpacity
+      accessibilityLabel={AccessibilityLabel.REARRANGE_SUB_UNIT}
+      onPress={onRearrangeSubUnit}
+      style={[styles.headerButton, styles.moreButton]}
+    >
+      <MaterialIcons name={'reorder'} size={27} color={Colors.Black} />
+    </TouchableOpacity>
+  </View>
+);
+
+const StationList = ({ stations, onEditSubUnit }) => {
+  const t = useTranslations();
+  return (
+    <>
+      {stations.map((item, index) => (
+        <RowItem
+          type={'noneBG'}
+          key={index.toString()}
+          index={index}
+          leftIcon={
+            <Image
+              source={{ uri: item.background }}
+              style={styles.image}
+              resizeMode="cover"
+            />
+          }
+          text={item.name}
+          subtext={`${item.devices.length}  ${t('devices').toLowerCase()}`}
+          onPress={() => onEditSubUnit(item)}
+          rightComponent={
+            <IconOutline name="right" size={20} color={Colors.Gray6} />
+          }
+        />
+      ))}
+    </>
+  );
+};
+
+const NoSubUnit = ({ noSubUnitText, addSubUnitText }) => (
+  <View style={styles.noSubUnit}>
+    <NoSubUnitImage />
+    <Text semibold type="H4" center>
+      {noSubUnitText}
+    </Text>
+    <Text type="Body" center>
+      {addSubUnitText}
+    </Text>
+  </View>
+);
 
 const ManageSubUnit = ({ route }) => {
   const t = useTranslations();
   const { unit } = route.params;
   const navigation = useNavigation();
   const isFocused = useIsFocused();
-  const { stations, isRefresh, isLoading, onRefresh } = useManageSubUnit(unit);
+  const { stations, refreshing, onRefresh } = useManageSubUnit(unit.id);
 
-  const addSubUnit = useCallback(() => {
+  const handleAddSubUnit = () => {
     navigation.navigate(Routes.AddSubUnitStack, {
       screen: Routes.AddSubUnit,
       params: { unit },
     });
-  }, [navigation, unit]);
+  };
 
-  const goToEditSubUnit = (station) => {
+  const handleEditSubUnit = (station) => {
     navigation.navigate(Routes.UnitStack, {
       screen: Routes.EditSubUnit,
       params: {
@@ -46,29 +97,15 @@ const ManageSubUnit = ({ route }) => {
     });
   };
 
-  const rightComponent = useMemo(
-    () => (
-      <View style={styles.rightComponent}>
-        <TouchableOpacity
-          accessibilityLabel={AccessibilityLabel.ADD_SUB_UNIT}
-          onPress={addSubUnit}
-          style={styles.headerButton}
-        >
-          <IconOutline name={'plus'} size={27} color={Colors.Black} />
-        </TouchableOpacity>
-        <TouchableOpacity
-          // onPress={handleShowMenuAction}
-          // ref={refMenuAction}
-          style={[styles.headerButton, styles.moreButton]}
-        >
-          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
-        </TouchableOpacity>
-      </View>
-    ),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
+  const handleRearrageSubUnit = () => {
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.RearrangeSubUnit,
+      params: {
+        stations,
+        unit,
+      },
+    });
+  };
   useEffect(() => {
     isFocused && onRefresh();
   }, [onRefresh, isFocused]);
@@ -80,60 +117,27 @@ const ManageSubUnit = ({ route }) => {
     >
       <WrapHeaderScrollable
         title={t('manage_sub_unit')}
-        headerAniStyle={styles.headerAniStyle}
-        headerAniCenterStyle={true}
-        rightComponent={rightComponent}
+        rightComponent={
+          <RightComponent
+            onAddSubUnit={handleAddSubUnit}
+            onRearrangeSubUnit={handleRearrageSubUnit}
+          />
+        }
+        onRefresh={onRefresh}
+        loading={refreshing}
       >
         <View style={styles.container}>
-          <ScrollView
-            refreshControl={
-              <RefreshControl refreshing={false} onRefresh={onRefresh} />
-            }
-            scrollIndicatorInsets={{ right: 1 }}
-          >
-            <View>
-              {!!stations.length &&
-                stations.map((item, index) => {
-                  return (
-                    <RowItem
-                      type={'noneBG'}
-                      key={index.toString()}
-                      index={index}
-                      leftIcon={
-                        <Image
-                          source={{ uri: item.background }}
-                          style={styles.image}
-                          resizeMode="cover"
-                        />
-                      }
-                      text={item.name}
-                      subtext={`${
-                        item.devices ? item.devices.length : '0'
-                      }  devices`}
-                      onPress={() => goToEditSubUnit(item, unit)}
-                      rightComponent={
-                        <IconOutline
-                          name="right"
-                          size={20}
-                          color={Colors.Gray6}
-                        />
-                      }
-                    />
-                  );
-                })}
-              {!stations.length && !isRefresh && !isLoading && (
-                <View style={styles.NoSubUnit}>
-                  <NoSubUnitImage />
-                  <Text semibold type="H4" center>
-                    {t('no_sub_unit_yet')}
-                  </Text>
-                  <Text type="Body" center>
-                    {t('tap_+_to_add_new_sub_unit')}
-                  </Text>
-                </View>
-              )}
-            </View>
-          </ScrollView>
+          {!!stations.length ? (
+            <StationList
+              stations={stations}
+              onEditSubUnit={handleEditSubUnit}
+            />
+          ) : (
+            <NoSubUnit
+              noSubUnitText={t('no_sub_unit_yet')}
+              addSubUnitText={t('tap_+_to_add_new_sub_unit')}
+            />
+          )}
         </View>
       </WrapHeaderScrollable>
     </View>

package/src/screens/SubUnit/ManageSubUnitStyles.js

@@ -3,16 +3,12 @@ import { Colors } from '../../configs';
 import { Constants } from '../../configs';
 
 export default StyleSheet.create({
-  headerAniStyle: {
-    paddingBottom: 16,
-    borderBottomWidth: 0,
-  },
   rightComponent: {
     flexDirection: 'row',
     alignItems: 'flex-end',
   },
   headerButton: {
-    marginRight: 20,
+    marginRight: 16,
   },
   moreButton: {
     marginLeft: -5,
@@ -23,11 +19,12 @@ export default StyleSheet.create({
   },
   container: {
     paddingTop: 0,
+    flex: 1,
   },
   paddingLeft16: {
     paddingLeft: 16,
   },
-  NoSubUnit: {
+  noSubUnit: {
     alignSelf: 'center',
     marginTop: Constants.height * 0.2,
     fontSize: 16,
@@ -36,5 +33,6 @@ export default StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 40 / 2,
+    backgroundColor: Colors.White,
   },
 });

package/src/screens/SubUnit/RearrageSubUnit.js

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { isEqual } from 'lodash';
+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 { ToastBottomHelper } from '../../utils/Utils';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const RearrangeSubUnit = ({ route }) => {
+  const { stations, unit } = route.params;
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const [reorderItems, setReorderItems] = useState(stations);
+  const handleOnSave = async () => {
+    const idOrderSubUnits = reorderItems.map((i) => i.id);
+    const { success } = await axiosPost(API.SUB_UNIT.ORDER_SUB_UNITS(unit.id), {
+      id_order_sub_units: idOrderSubUnits,
+    });
+    if (success) {
+      ToastBottomHelper.success(t('updated_sub_unit_order'));
+      goBack();
+    }
+  };
+
+  const renderItem = ({ item, getIndex, drag, isActive }) => {
+    const index = getIndex() + 1;
+    return (
+      <View style={styles.itemWrapper}>
+        <TouchableOpacity
+          style={[
+            styles.border,
+            styles.indexWrapper,
+            /* istanbul ignore next */
+            isActive && styles.isDragging,
+          ]}
+          onPressIn={drag}
+        >
+          <Text style={styles.indexText}>{`${index}`.padStart(2, '0')}</Text>
+          <Rearrange />
+        </TouchableOpacity>
+        <View
+          style={[
+            styles.border,
+            styles.subUnitWrapper,
+            /* istanbul ignore next */
+            isActive && styles.isDragging,
+          ]}
+        >
+          <Text style={styles.indexText}>{item.name}</Text>
+          <Text style={styles.deviceText}>
+            {`${item.devices.length} ${t('devices').toLowerCase()}`}
+          </Text>
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('rearrange_sub_unit')} isShowSeparator />
+      <Text style={styles.hintText}>{t('rearrange_sub_unit_hint')}</Text>
+      <View style={styles.flatList}>
+        <FlatListDnD
+          data={reorderItems}
+          extraData={reorderItems}
+          setData={setReorderItems}
+          renderItem={renderItem}
+        />
+      </View>
+      <ViewButtonBottom
+        leftTitle={t('cancel')}
+        onLeftClick={() => goBack()}
+        rightTitle={t('save')}
+        rightDisabled={isEqual(stations, reorderItems)}
+        onRightClick={handleOnSave}
+        isPreventDoubleTouch
+        wrapStyle={styles.bottomButtonWrapper}
+      />
+    </View>
+  );
+};
+
+export default RearrangeSubUnit;

package/src/screens/SubUnit/RearrrageSubUnitStyle.js

@@ -0,0 +1,65 @@
+import { Colors } from '../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  border: {
+    borderRadius: 5,
+    borderColor: Colors.Gray6,
+    borderWidth: 1,
+    padding: 20,
+    backgroundColor: Colors.White,
+    shadowColor: Colors.Black,
+    shadowOffset: {
+      width: 0,
+      height: 10,
+    },
+    shadowOpacity: 0.23,
+    shadowRadius: 11.27,
+    elevation: 4,
+  },
+  flatList: {
+    flex: 0.95,
+    marginBottom: 10,
+  },
+  isDragging: {
+    borderBottomWidth: 1,
+    borderColor: Colors.Red,
+  },
+  itemWrapper: {
+    flexDirection: 'row',
+    marginBottom: 20,
+    marginHorizontal: 16,
+    backgroundColor: Colors.White,
+  },
+  indexWrapper: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  subUnitWrapper: {
+    flex: 1,
+    marginLeft: 10,
+    justifyContent: 'center',
+  },
+  hintText: {
+    marginHorizontal: 16,
+    marginTop: 10,
+  },
+  indexText: {
+    fontSize: 16,
+    lineHeight: 24,
+    fontWeight: 'bold',
+  },
+  deviceText: {
+    fontSize: 14,
+    lineHeight: 20,
+    color: Colors.Gray7,
+  },
+  bottomButtonWrapper: {
+    backgroundColor: Colors.White,
+  },
+});