@eohjsc/react-native-smart-city 0.7.27 → 0.7.31

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

@@ -8,53 +8,43 @@ import { useTranslations } from '../../../hooks/Common/useTranslations';
 import _TextInput from '../../../commons/Form/TextInput';
 import AccessibilityLabel from '../../../configs/AccessibilityLabel';
 import BottomButtonView from '../../../commons/BottomButtonView';
-import { axiosPost } from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
-import moment from 'moment';
 
 const SetupScriptNotify = ({ route }) => {
   const t = useTranslations();
   const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId, multiUnit } = route.params || {};
-  const { id: automateId } = automate;
-  const [notify, setNotify] = useState({ unit: unitId || multiUnit.id });
+  const { automate, unitId, multiUnit } = route.params || {};
+  const initialUnitId = useMemo(
+    () => unitId || multiUnit.id,
+    [unitId, multiUnit?.id]
+  );
+  const [formData, setFormData] = useState({ unit: initialUnitId });
 
   const onChangeTitle = (value) => {
-    setNotify((state) => ({
+    setFormData((state) => ({
       ...state,
       title: value,
     }));
   };
   const onChangeMessage = (value) => {
-    setNotify((state) => ({
+    setFormData((state) => ({
       ...state,
       message: value,
     }));
   };
 
   const onNext = useCallback(async () => {
-    const { success } = await axiosPost(
-      API.AUTOMATE.ADD_SCRIPT_NOTIFY(automateId),
-      notify
-    );
-    if (success) {
-      ToastBottomHelper.success(t('text_done'));
-      navigate({
-        name: Routes.ScriptDetail,
-        merge: true,
-        params: { saveAt: moment().valueOf() },
-      });
-    } else {
-      ToastBottomHelper.error(t('error_please_try_later'));
-    }
-  }, [automateId, navigate, notify, t]);
+    navigate(Routes.SetupScriptReceiverNotify, {
+      automate,
+      unitId: initialUnitId,
+      formData,
+    });
+  }, [navigate, automate, initialUnitId, formData]);
 
   const canSave = useMemo(() => {
-    const { title, message } = notify || {};
+    const { title, message } = formData;
     return !!title && !!message;
-  }, [notify]);
+  }, [formData]);
 
   return (
     <View style={styles.wrap}>
@@ -65,7 +55,7 @@ const SetupScriptNotify = ({ route }) => {
             placeholder={t('title_notification')}
             onChange={onChangeTitle}
             textInputStyle={styles.textTitle}
-            value={notify?.title}
+            value={formData.title}
             accessibilityLabel={AccessibilityLabel.AUTOMATE_TITLE_NOTIFY}
             autoFocus
           />
@@ -73,7 +63,7 @@ const SetupScriptNotify = ({ route }) => {
             placeholder={t('message_notification')}
             onChange={onChangeMessage}
             textInputStyle={styles.textMessage}
-            value={notify?.message}
+            value={formData.message}
             accessibilityLabel={AccessibilityLabel.AUTOMATE_MESSAGE_NOTIFY}
             multiline={true}
             maxLength={255}

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

@@ -1,41 +1,20 @@
-import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
-import { FlatList, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import styles from './Styles/SetupScriptReceiverEmailStyles';
-import { CircleView, HeaderCustom, Text } from '../../../commons';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
-import BottomButtonView from '../../../commons/BottomButtonView';
-import { axiosPost, axiosGet } from '../../../utils/Apis/axios';
-import { API, Colors } from '../../../configs';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
+import ReceiverSelect from './ReceiverSelect';
 import moment from 'moment';
-import CheckBox from '@react-native-community/checkbox';
-import { useSCContextSelector } from '../../../context';
-import { Image } from 'react-native';
 
 const SetupScriptReceiverEmail = ({ route }) => {
   const t = useTranslations();
-  const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId, formData } = route.params || {};
+  const { navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params;
   const { id: automateId } = automate;
-  const [members, setMembers] = useState([]);
   const [listUser, setListUser] = useState([]);
-  const currentUserId = useSCContextSelector(
-    (state) => state.auth.account.user.id
-  );
-
-  const loadMembers = useCallback(async () => {
-    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unitId));
-    if (success) {
-      setMembers(data);
-    }
-  }, [unitId]);
-
-  useEffect(() => {
-    loadMembers();
-  }, [loadMembers]);
 
   const onNext = useCallback(async () => {
     formData.receiver = listUser;
@@ -55,112 +34,26 @@ const SetupScriptReceiverEmail = ({ route }) => {
     }
   }, [automateId, formData, listUser, navigate, t]);
 
-  const canSave = useMemo(() => {
-    const { title, message } = formData;
-    return !!title && !!message && !!listUser.length;
-  }, [formData, listUser.length]);
-
-  const arrColor = useMemo(
-    () => [
-      Colors.GeekBlue3,
-      Colors.Purple3,
-      Colors.Orange3,
-      Colors.Volcano3,
-      Colors.Blue9,
-      Colors.Green3,
-      Colors.Cyan2,
-    ],
-    []
-  );
-
-  const onChecked = useCallback(
-    (id) => (checked) => {
-      setListUser((prevListUser) =>
-        checked
-          ? [...prevListUser, id]
-          : prevListUser.filter((userId) => userId !== id)
-      );
+  const onLoadOption = useCallback(
+    (item) => {
+      return {
+        label: item.email,
+        invalidLabel: t('no_email'),
+        disabled: !item.email,
+      };
     },
-    []
+    [t]
   );
 
-  const RowMember = memo(({ member, index, onValueChange }) => {
-    const { id, name, avatar, share_id, email } = member;
-    const [role, roleColor] = useMemo(() => {
-      if (!share_id) {
-        return [t('owner'), Colors.Primary];
-      }
-      if (id === currentUserId) {
-        return [t('me'), Colors.Primary];
-      }
-      return [t('member'), Colors.Gray6];
-    }, [share_id, id]);
-
-    const firstWordsInName = useMemo(() => {
-      return name.charAt();
-    }, [name]);
-
-    const circleColor = arrColor[index % arrColor.length];
-
-    return (
-      <View style={styles.rowContainer}>
-        <View style={styles.border}>
-          <CheckBox
-            disabled={!email}
-            lineWidth={4}
-            value={listUser.includes(id)}
-            onValueChange={onValueChange(id)}
-            style={styles.checkbox}
-          />
-          <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.paddingLeft16}>
-            <Text style={styles.titleName}>{name}</Text>
-            {email ? (
-              <Text style={styles.status}>{email}</Text>
-            ) : (
-              <Text style={styles.invalid}>{t('no_email')}</Text>
-            )}
-          </View>
-          <View style={styles.endFlex}>
-            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
-          </View>
-        </View>
-      </View>
-    );
-  });
-
   return (
-    <View style={styles.wrap}>
-      <HeaderCustom isShowClose onClose={goBack} title={t('email_to')} />
-      <FlatList
-        data={members}
-        renderItem={({ item, index }) => (
-          <RowMember member={item} index={index} onValueChange={onChecked} />
-        )}
-        keyExtractor={(item) => item.id.toString()}
-        ListEmptyComponent={
-          <View style={styles.viewEmpty}>
-            <Text style={styles.textCenter}>{t('no_member')}</Text>
-          </View>
-        }
-      />
-      <View style={styles.container}>
-        <BottomButtonView
-          style={styles.bottomButtonView}
-          mainTitle={t('done')}
-          onPressMain={onNext}
-          typeMain={canSave ? 'primary' : 'disabled'}
-        />
-      </View>
-    </View>
+    <ReceiverSelect
+      listUser={listUser}
+      unitId={unitId}
+      title={t('notify_to')}
+      setListUser={setListUser}
+      onLoadOption={onLoadOption}
+      onNext={onNext}
+    />
   );
 };
 

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

@@ -0,0 +1,59 @@
+import React, { useCallback, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
+import ReceiverSelect from './ReceiverSelect';
+import moment from 'moment';
+
+const SetupScriptReceiverNotify = ({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params;
+  const { id: automateId } = automate;
+  const [listUser, setListUser] = useState([]);
+
+  const onNext = useCallback(async () => {
+    formData.receiver = listUser;
+    const { success } = await axiosPost(
+      API.AUTOMATE.ADD_SCRIPT_NOTIFY(automateId),
+      formData
+    );
+    if (success) {
+      ToastBottomHelper.success(t('text_done'));
+      navigate({
+        name: Routes.ScriptDetail,
+        merge: true,
+        params: { saveAt: moment().valueOf() },
+      });
+    } else {
+      ToastBottomHelper.error(t('error_please_try_later'));
+    }
+  }, [automateId, formData, listUser, navigate, t]);
+
+  const onLoadOption = useCallback(
+    (item) => {
+      return {
+        label: item.phone_number,
+        invalidLabel: t('no_phone_number'),
+      };
+    },
+    [t]
+  );
+
+  return (
+    <ReceiverSelect
+      listUser={listUser}
+      unitId={unitId}
+      title={t('notify_to')}
+      setListUser={setListUser}
+      onLoadOption={onLoadOption}
+      onNext={onNext}
+    />
+  );
+};
+
+export default SetupScriptReceiverNotify;

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

@@ -1,41 +1,20 @@
-import React, { useCallback, useMemo, useState, useEffect, memo } from 'react';
-import { FlatList, View } from 'react-native';
+import React, { useCallback, useState } from 'react';
 import { useNavigation } from '@react-navigation/native';
-import styles from './Styles/SetupScriptReceiverEmailStyles';
-import { CircleView, HeaderCustom, Text } from '../../../commons';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 
-import BottomButtonView from '../../../commons/BottomButtonView';
-import { axiosPost, axiosGet } from '../../../utils/Apis/axios';
-import { API, Colors } from '../../../configs';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
 import { ToastBottomHelper } from '../../../utils/Utils';
 import Routes from '../../../utils/Route';
+import ReceiverSelect from './ReceiverSelect';
 import moment from 'moment';
-import CheckBox from '@react-native-community/checkbox';
-import { useSCContextSelector } from '../../../context';
-import { Image } from 'react-native';
 
 const SetupScriptReceiverSms = ({ route }) => {
   const t = useTranslations();
-  const { goBack, navigate } = useNavigation();
-  const { automate = {}, unitId, formData } = route.params || {};
+  const { navigate } = useNavigation();
+  const { automate = {}, unitId, formData } = route.params;
   const { id: automateId } = automate;
-  const [members, setMembers] = useState([]);
   const [listUser, setListUser] = useState([]);
-  const currentUserId = useSCContextSelector(
-    (state) => state.auth.account.user.id
-  );
-
-  const loadMembers = useCallback(async () => {
-    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unitId));
-    if (success) {
-      setMembers(data);
-    }
-  }, [unitId]);
-
-  useEffect(() => {
-    loadMembers();
-  }, [loadMembers]);
 
   const onNext = useCallback(async () => {
     formData.receiver = listUser;
@@ -55,112 +34,26 @@ const SetupScriptReceiverSms = ({ route }) => {
     }
   }, [automateId, formData, listUser, navigate, t]);
 
-  const canSave = useMemo(() => {
-    const { message } = formData;
-    return !!message && !!listUser.length;
-  }, [formData, listUser.length]);
-
-  const arrColor = useMemo(
-    () => [
-      Colors.GeekBlue3,
-      Colors.Purple3,
-      Colors.Orange3,
-      Colors.Volcano3,
-      Colors.Blue9,
-      Colors.Green3,
-      Colors.Cyan2,
-    ],
-    []
-  );
-
-  const onChecked = useCallback(
-    (id) => (checked) => {
-      setListUser((prevListUser) =>
-        checked
-          ? [...prevListUser, id]
-          : prevListUser.filter((userId) => userId !== id)
-      );
+  const onLoadOption = useCallback(
+    (item) => {
+      return {
+        label: item.phone_number,
+        invalidLabel: t('no_phone_number'),
+        disabled: !item.phone_number,
+      };
     },
-    []
+    [t]
   );
 
-  const RowMember = memo(({ member, index, onValueChange }) => {
-    const { id, name, avatar, share_id, phone_number } = member;
-    const [role, roleColor] = useMemo(() => {
-      if (!share_id) {
-        return [t('owner'), Colors.Primary];
-      }
-      if (id === currentUserId) {
-        return [t('me'), Colors.Primary];
-      }
-      return [t('member'), Colors.Gray6];
-    }, [share_id, id]);
-
-    const firstWordsInName = useMemo(() => {
-      return name.charAt();
-    }, [name]);
-
-    const circleColor = arrColor[index % arrColor.length];
-
-    return (
-      <View style={styles.rowContainer}>
-        <View style={styles.border}>
-          <CheckBox
-            disabled={!phone_number}
-            lineWidth={4}
-            value={listUser.includes(id)}
-            onValueChange={onValueChange(id)}
-            style={styles.checkbox}
-          />
-          <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.paddingLeft16}>
-            <Text style={styles.titleName}>{name}</Text>
-            {phone_number ? (
-              <Text style={styles.status}>{phone_number}</Text>
-            ) : (
-              <Text style={styles.invalid}>{t('no_phone_number')}</Text>
-            )}
-          </View>
-          <View style={styles.endFlex}>
-            <Text style={[styles.textRole, { color: roleColor }]}>{role}</Text>
-          </View>
-        </View>
-      </View>
-    );
-  });
-
   return (
-    <View style={styles.wrap}>
-      <HeaderCustom isShowClose onClose={goBack} title={t('sms_to')} />
-      <FlatList
-        data={members}
-        renderItem={({ item, index }) => (
-          <RowMember member={item} index={index} onValueChange={onChecked} />
-        )}
-        keyExtractor={(item) => item.id.toString()}
-        ListEmptyComponent={
-          <View style={styles.viewEmpty}>
-            <Text style={styles.textCenter}>{t('no_member')}</Text>
-          </View>
-        }
-      />
-      <View style={styles.container}>
-        <BottomButtonView
-          style={styles.bottomButtonView}
-          mainTitle={t('done')}
-          onPressMain={onNext}
-          typeMain={canSave ? 'primary' : 'disabled'}
-        />
-      </View>
-    </View>
+    <ReceiverSelect
+      listUser={listUser}
+      unitId={unitId}
+      title={t('notify_to')}
+      setListUser={setListUser}
+      onLoadOption={onLoadOption}
+      onNext={onNext}
+    />
   );
 };
 

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

@@ -37,7 +37,7 @@ const SetupScriptSms = ({ route }) => {
   }, [navigate, automate, initialUnitId, formData]);
 
   const canSave = useMemo(() => {
-    const { message } = formData || {};
+    const { message } = formData;
     return !!message;
   }, [formData]);
 

package/src/screens/Automate/AddNewAction/Styles/{SetupScriptReceiverEmailStyles.js → ReceiverSelectStyles.js}

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native';
-import { Colors, Constants } from '../../../../configs';
 import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors, Constants } from '../../../../configs';
 
 export default StyleSheet.create({
   wrap: {
@@ -82,4 +82,21 @@ export default StyleSheet.create({
     width: 24,
     height: 24,
   },
+
+  wrapSelectAll: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  wrapCheckboxSelectAll: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkboxSelectAll: {
+    marginRight: 8,
+  },
+  borderSelectAll: {
+    height: 1,
+    backgroundColor: Colors.Gray4,
+    marginHorizontal: 16,
+  },
 });

package/src/screens/Automate/AddNewAction/__test__/SetupScriptNotify.test.js

@@ -1,20 +1,14 @@
 import { useNavigation, useRoute } from '@react-navigation/native';
-import MockAdapter from 'axios-mock-adapter';
 import React from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
 import renderer, { act } from 'react-test-renderer';
 import BottomButtonView from '../../../../commons/BottomButtonView';
 import _TextInput from '../../../../commons/Form/TextInput';
-import API from '../../../../configs/API';
 import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
-import api from '../../../../utils/Apis/axios';
 import Routes from '../../../../utils/Route';
-import { ToastBottomHelper } from '../../../../utils/Utils';
 import SetupScriptNotify from '../SetupScriptNotify';
 
-const mock = new MockAdapter(api.axiosInstance);
-
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <SetupScriptNotify route={route} />
@@ -43,8 +37,6 @@ describe('Test SetupScriptNotify', () => {
   });
 
   it('SetupScriptNotify onPress create script notify success', async () => {
-    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
-    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(200);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -66,14 +58,19 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      Routes.SetupScriptReceiverNotify,
+      {
+        automate: route.params.automate,
+        unitId: 1,
+        formData: { message: 'Message', title: 'Title', unit: 1 },
+      }
+    );
   });
 
   it('SetupScriptNotify onPress create script notify success with multi unit', async () => {
     route.params.unitId = null;
     route.params.multiUnit = { id: 1 };
-    const spyToast = jest.spyOn(ToastBottomHelper, 'success');
-    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(200);
     await act(async () => {
       tree = await renderer.create(wrapComponent(route));
     });
@@ -95,27 +92,13 @@ describe('Test SetupScriptNotify', () => {
     await act(async () => {
       button.props.onPressMain();
     });
-    expect(spyToast).toHaveBeenCalled();
-  });
-
-  it('SetupScriptNotify onPress create script notify error', async () => {
-    const spyToast = jest.spyOn(ToastBottomHelper, 'error');
-    mock.onPost(API.AUTOMATE.ADD_SCRIPT_NOTIFY(1)).reply(400);
-    await act(async () => {
-      tree = await renderer.create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const inputs = instance.findAllByType(_TextInput);
-    expect(inputs).toHaveLength(2);
-
-    await act(async () => {
-      inputs[0].props.onChange('Title');
-      inputs[1].props.onChange('Message');
-    });
-    const button = instance.findByType(BottomButtonView);
-    await act(async () => {
-      button.props.onPressMain();
-    });
-    expect(spyToast).toHaveBeenCalled();
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      Routes.SetupScriptReceiverNotify,
+      {
+        automate: route.params.automate,
+        unitId: 1,
+        formData: { message: 'Message', title: 'Title', unit: 1 },
+      }
+    );
   });
 });

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

@@ -66,11 +66,12 @@ describe('Test SetupScriptReceiverEmail', () => {
     });
     const instance = tree.root;
     const checkboxs = instance.findAllByType(CheckBox);
-    expect(checkboxs).toHaveLength(2);
-    expect(checkboxs[0].props.disabled).toBeFalsy();
-    expect(checkboxs[1].props.disabled).toBeTruthy();
+    expect(checkboxs).toHaveLength(3);
+    expect(checkboxs[0].props.value).toBeFalsy(); // Select All
+    expect(checkboxs[1].props.disabled).toBeFalsy();
+    expect(checkboxs[2].props.disabled).toBeTruthy();
     await act(async () => {
-      checkboxs[0].props.onValueChange(true);
+      checkboxs[1].props.onValueChange(true);
     });
 
     const button = instance.findByType(BottomButtonView);
@@ -89,11 +90,12 @@ describe('Test SetupScriptReceiverEmail', () => {
     });
     const instance = tree.root;
     const checkboxs = instance.findAllByType(CheckBox);
-    expect(checkboxs).toHaveLength(2);
-    expect(checkboxs[0].props.disabled).toBeFalsy();
-    expect(checkboxs[1].props.disabled).toBeTruthy();
+    expect(checkboxs).toHaveLength(3);
+    expect(checkboxs[0].props.value).toBeFalsy(); // Select All
+    expect(checkboxs[1].props.disabled).toBeFalsy();
+    expect(checkboxs[2].props.disabled).toBeTruthy();
     await act(async () => {
-      checkboxs[0].props.onValueChange(true);
+      checkboxs[1].props.onValueChange(true);
     });
 
     const button = instance.findByType(BottomButtonView);