@eohjsc/react-native-smart-city 0.2.21 → 0.2.27

package/src/screens/SubUnit/ManageSubUnit.js

@@ -1,391 +1,134 @@
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
-import { View, StyleSheet, TouchableOpacity, Image } from 'react-native';
-import Modal from 'react-native-modal';
-import { connect } from 'react-redux';
-import { useIsFocused, useNavigation } from '@react-navigation/native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { t } from 'i18n-js';
-
-import { Colors, API, Device } from '../../configs';
-import { ToastBottomHelper } from '../../utils/Utils';
+import React, { useMemo, useCallback, useEffect, memo } from 'react';
 import {
-  axiosPatch,
-  axiosDelete,
-  createFormData,
-} from '../../utils/Apis/axios';
-import Routes from '../../utils/Route';
-import useBoolean from '../../hooks/Common/useBoolean';
+  View,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  RefreshControl,
+} from 'react-native';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { Colors } from '../../configs';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
-import { ImagePicker, Section } from '../../commons';
-import AlertAction from '../../commons/AlertAction';
-import _TextInput from '../../commons/Form/TextInput';
-import ViewButtonBottom from '../../commons/ViewButtonBottom';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import Text from '../../commons/Text';
-import { TESTID } from '../../configs/Constants';
+
+import styles from './ManageSubUnitStyles';
 import { IconOutline } from '@ant-design/icons-react-native';
-import { useEmeragencyContacts } from './hooks/useEmergencyContacts';
+import { Icon } from '@ant-design/react-native';
+import Routes from '../../utils/Route';
+import { RowItem } from '../../commons/RowItem';
+import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
+import useManageSubUnit from './hooks/useManageSubUnit';
 
-const ManageSubUnit = (props) => {
-  const { station } = props.route.params;
-  //TODO remove redux
-  // const unit = useSelector((state) => state.unit.unitDetail);
-  const unit = useMemo(() => {}, []);
+const ManageSubUnit = memo((props) => {
+  const t = useTranslations();
+  const { unit } = props.route.params;
   const navigation = useNavigation();
   const isFocused = useIsFocused();
-  const [resourcePath, setResourcePath] = useState({ uri: station.background });
-  const [
-    showModalRemoveSubUnit,
-    setShowModalRemoveSubUnit,
-    setHideModalRemoveSubUnit,
-  ] = useBoolean();
-  const [imageUrl, setImageUrl] = useState('');
-  const [showImagePicker, setShowImagePicker] = useState(false);
-
-  const [showEdit, setshowEdit, setHideEdit] = useBoolean();
-  const [inputName, setInputName] = useState(station.name);
-  const [newName, setNewName] = useState(station.name);
-
-  const group = station.emergency_group;
-
-  const { listContacts, getListContacts } = useEmeragencyContacts();
+  const { station, isRefresh, isLoading, onRefresh } = useManageSubUnit(unit);
 
-  useEffect(() => {
-    if (isFocused) {
-      group && getListContacts(group.id);
-    }
-  }, [getListContacts, group, isFocused]);
-
-  const onBack = useCallback(() => {
-    const { routes } = navigation.dangerouslyGetState();
-    const calledByRoute = routes[routes.length - 3].name;
-
-    switch (calledByRoute) {
-      case Routes.UnitDetail:
-        navigation.pop(2);
-        break;
-      default:
-        navigation.pop(3);
-    }
-  }, [navigation]);
-
-  const updateSubUnit = useCallback(
-    async (params, headers) => {
-      const { success, data } = await axiosPatch(
-        API.SUB_UNIT.MANAGE_SUB_UNIT(unit.id, station.id),
-        params,
-        headers
-      );
+  const addSubUnit = useCallback(() => {
+    navigation.navigate(Routes.AddSubUnitStack, {
+      screen: Routes.AddSubUnit,
+      params: { unit },
+    });
+  }, [navigation, unit]);
+
+  const goToEditSubUnit = (station, unit) => {
+    navigation.navigate(Routes.UnitStack, {
+      screen: Routes.EditSubUnit,
+      params: {
+        station,
+        unit,
+      },
+    });
+  };
 
-      if (success) {
-        // dispatch(manageSubUnit(station.id, data));
-        setNewName(data.name);
-        ToastBottomHelper.success(t('text_rename_sub_unit_success'));
-      }
-    },
-    [unit, station]
-  );
-  const updateBackground = useCallback(
-    async (headers) => {
-      const formData = createFormData(imageUrl, ['background']);
-      const { success } = await axiosPatch(
-        API.SUB_UNIT.MANAGE_SUB_UNIT(unit.id, station.id),
-        formData,
-        headers
-      );
-      if (success) {
-        //dispatch(manageSubUnit(station.id, data));
-        ToastBottomHelper.success(t('text_change_background_sub_unit_success'));
-      }
-    },
-    [unit, station, imageUrl]
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        <TouchableOpacity onPress={addSubUnit} style={styles.headerButton}>
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+        <TouchableOpacity
+          // onPress={handleShowMenuAction}
+          // ref={refMenuAction}
+          style={[styles.headerButton, styles.moreButton]}
+        >
+          <Icon name={'more'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
   );
 
-  const onPressRemove = useCallback(() => {
-    setShowModalRemoveSubUnit();
-  }, [setShowModalRemoveSubUnit]);
-
-  const hideRemoveSubUnitModal = useCallback(() => {
-    setHideModalRemoveSubUnit();
-  }, [setHideModalRemoveSubUnit]);
-
-  const onRemoveSubUnit = useCallback(async () => {
-    setHideModalRemoveSubUnit();
-    const { success } = await axiosDelete(
-      API.SUB_UNIT.REMOVE_SUB_UNIT(unit.id, station.id)
-    );
-    if (success) {
-      //dispatch(removeSubUnit(station.id));
-      ToastBottomHelper.success(t('text_remove_sub_unit_success'));
-      onBack();
-    } else {
-      ToastBottomHelper.error(t('text_remove_sub_unit_fail'));
-    }
-  }, [unit, station, onBack, setHideModalRemoveSubUnit]);
-
-  const goRename = useCallback(() => {
-    updateSubUnit({ name: inputName }, {});
-    setHideEdit(true);
-  }, [setHideEdit, updateSubUnit, inputName]);
-
-  const onChangeName = useCallback((value) => {
-    setInputName(value);
-  }, []);
-
-  const selectFile = useCallback(() => {
-    setShowImagePicker(true);
-  }, [setShowImagePicker]);
-
   useEffect(() => {
-    if (imageUrl) {
-      setResourcePath(imageUrl);
-      updateBackground({ headers: { 'Content-Type': 'multipart/form-data' } });
-    }
-  }, [imageUrl, updateBackground]);
-
-  const options = {
-    mediaType: 'photo',
-    maxWidth: 1024,
-    quality: 0.8,
-    includeBase64: Device.isIOS,
-    saveToPhotos: true,
-  };
-
-  const contactsName = listContacts.map((item) => item.name);
-  const onPressEmergencyContact = useCallback(() => {
-    navigation.navigate(Routes.EmergencyContactsStack, {
-      screen: Routes.EmergencyContactsList,
-      params: { unitId: unit.id, group },
-    });
-  }, [group, navigation, unit.id]);
+    isFocused && onRefresh();
+  }, [onRefresh, isFocused]);
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.wraper}>
-        <Text semibold color={Colors.Black} style={styles.title}>
-          {t('manage_sub_unit')}
-        </Text>
-        <View style={styles.wraper}>
-          <View style={styles.subUnitData}>
-            <TouchableOpacity onPress={setshowEdit}>
-              <Text
-                testID={TESTID.MANAGE_SUB_UNIT_NAME}
-                style={[styles.textWraper, styles.subUnitName]}
-              >
-                {newName}
-              </Text>
-            </TouchableOpacity>
-            <TouchableOpacity
-              testID={TESTID.MANAGE_SUB_UNIT_SELECT_FILE_BUTTON}
-              onPress={selectFile}
-              style={[styles.backgroundContainer]}
-            >
-              <Text style={[styles.subUnitName, styles.textBackground]}>
-                {t('background')}
-              </Text>
-              <Image
-                style={styles.image}
-                source={{
-                  uri: resourcePath.uri,
-                }}
-                resizeMode="cover"
-              />
-            </TouchableOpacity>
-          </View>
-          {group && (
-            <Section type={'border'}>
-              <TouchableOpacity
-                style={styles.buttonContacts}
-                onPress={onPressEmergencyContact}
-              >
-                <Text type={'H4'} color={Colors.Gray9}>
-                  {t('emergency_contacts')}
-                </Text>
-                <IconOutline name={'right'} size={20} color={Colors.Gray8} />
-              </TouchableOpacity>
-              <Text
-                type={'Body'}
-                color={contactsName.length > 0 ? Colors.Primary : Colors.Gray6}
-              >
-                {contactsName.length > 0
-                  ? contactsName.join(', ')
-                  : t('no_contact')}
-              </Text>
-            </Section>
-          )}
-          <ImagePicker
-            showImagePicker={showImagePicker}
-            setShowImagePicker={setShowImagePicker}
-            setImageUrl={setImageUrl}
-            optionsCapture={options}
-          />
-          <TouchableOpacity
-            testID={TESTID.MANAGE_SUB_UNIT_REMOVE_BUTTON}
-            onPress={onPressRemove}
-            style={styles.removeButton}
-          >
-            <Text style={styles.removeText}>{t('remove_sub_unit')}</Text>
-          </TouchableOpacity>
-        </View>
-      </View>
-      <Modal
-        testID={TESTID.MANAGE_SUB_UNIT_MODAL}
-        isVisible={showEdit}
-        onBackButtonPress={setHideEdit}
-        onBackdropPress={setHideEdit}
-        style={styles.modalContainer}
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        title={t('manage_sub_unit')}
+        headerAniStyle={styles.headerAniStyle}
+        headerAniCenterStyle={true}
+        rightComponent={rightComponent}
       >
-        <View style={styles.popoverStyle}>
-          <View style={styles.modalWrapper}>
-            <View style={styles.modalHeader}>
-              <Text semibold style={styles.modalHeaderText}>
-                {t('rename_sub_unit')}
-              </Text>
+        <View style={styles.container}>
+          <ScrollView
+            refreshControl={
+              <RefreshControl refreshing={false} onRefresh={onRefresh} />
+            }
+          >
+            <View>
+              {!!station.length &&
+                station.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.sensors ? item.sensors.length : '0'
+                      }  devices`}
+                      onPress={() => goToEditSubUnit(item, unit)}
+                      rightComponent={
+                        <IconOutline
+                          name="right"
+                          size={20}
+                          color={Colors.Gray6}
+                        />
+                      }
+                    />
+                  );
+                })}
+              {!station.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>
-            <_TextInput
-              defaultValue={station.name}
-              onChange={onChangeName}
-              textInputStyle={styles.textInputStyle}
-              wrapStyle={styles.textInputWrapStyle}
-              selectionColor={Colors.Primary}
-            />
-
-            <ViewButtonBottom
-              leftTitle={t('cancel')}
-              onLeftClick={setHideEdit}
-              rightTitle={t('rename')}
-              onRightClick={goRename}
-            />
-          </View>
+          </ScrollView>
         </View>
-      </Modal>
-      <AlertAction
-        visible={showModalRemoveSubUnit}
-        hideModal={hideRemoveSubUnitModal}
-        title={t('sub_unit_remove_name', { name: station.name })}
-        message={t('sub_unit_message_warning_remove')}
-        leftButtonTitle={t('cancel')}
-        rightButtonTitle={t('remove')}
-        leftButtonClick={hideRemoveSubUnitModal}
-        rightButtonClick={onRemoveSubUnit}
-      />
-    </SafeAreaView>
+      </WrapHeaderScrollable>
+    </View>
   );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.Gray2,
-  },
-  wraper: {
-    flex: 1,
-  },
-  title: {
-    paddingLeft: 22,
-    fontSize: 24,
-    lineHeight: 32,
-    marginBottom: 16,
-  },
-  subUnitData: {
-    backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    borderRadius: 20,
-    padding: 16,
-    paddingTop: 8,
-    paddingBottom: 24,
-    marginBottom: 24,
-  },
-  textWraper: {
-    paddingTop: 16,
-    paddingBottom: 16,
-    borderBottomWidth: 0.5,
-  },
-  subUnitName: {
-    fontStyle: 'normal',
-    fontWeight: 'normal',
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-  },
-  removeButton: {
-    position: 'absolute',
-    bottom: 0,
-    borderWidth: 0,
-    alignSelf: 'center',
-    paddingBottom: 24,
-  },
-  removeText: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray6,
-  },
-  backgroundContainer: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    borderBottomWidth: 0.5,
-  },
-  image: {
-    width: 40,
-    height: 40,
-    borderRadius: 40 / 2,
-  },
-  textBackground: {
-    flex: 1,
-    paddingTop: 16,
-    paddingBottom: 16,
-  },
-  //Modal
-  modalContainer: {
-    flex: 1,
-    margin: 0,
-  },
-  popoverStyle: {
-    width: '100%',
-    backgroundColor: Colors.White,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
-    borderRadius: 10,
-  },
-  modalWrapper: {
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: Colors.White,
-    borderRadius: 10,
-  },
-  modalHeader: {
-    padding: 16,
-    backgroundColor: Colors.White,
-    borderBottomWidth: 1,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-    borderColor: Colors.Gray4,
-  },
-  modalHeaderText: {
-    fontSize: 16,
-    lineHeight: 24,
-    color: Colors.Gray9,
-  },
-  textInputStyle: {
-    borderWidth: 0,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Primary,
-    fontSize: 16,
-    marginLeft: 16,
-    marginRight: 16,
-    paddingHorizontal: 0,
-  },
-  textInputWrapStyle: {
-    marginTop: 0,
-  },
-  buttonContacts: {
-    marginTop: 8,
-    flexDirection: 'row',
-    paddingBottom: 20,
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
 });
 
-export default connect()(ManageSubUnit);
+export default ManageSubUnit;

package/src/screens/SubUnit/ManageSubUnitStyles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+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,
+  },
+  moreButton: {
+    marginLeft: -5,
+  },
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  container: {
+    paddingTop: 0,
+  },
+  paddingLeft16: {
+    paddingLeft: 16,
+  },
+  NoSubUnit: {
+    alignSelf: 'center',
+    marginTop: Constants.height * 0.2,
+    fontSize: 16,
+  },
+  image: {
+    width: 40,
+    height: 40,
+    borderRadius: 40 / 2,
+  },
+});

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -5,11 +5,18 @@ import { ImagePicker, ViewButtonBottom } from '../../../commons';
 import { act, create } from 'react-test-renderer';
 import Toast from 'react-native-toast-message';
 import Routes from '../../../utils/Route';
-import { t } from 'i18n-js';
-import { createSubUnit } from '../../../redux/Actions/unit';
 import { TESTID } from '../../../configs/Constants';
 import _TextInput from '../../../commons/Form/TextInput';
 import AddSubUnit from '../AddSubUnit';
+import { getTranslate } from '../../../utils/I18n';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddSubUnit route={route} />
+  </SCProvider>
+);
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
@@ -59,7 +66,7 @@ describe('Test AddSubUnit', () => {
 
   test('onChoosePhoto show image picker', async () => {
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const buttonChoosePhoto = instance.find(
@@ -77,7 +84,7 @@ describe('Test AddSubUnit', () => {
 
   test('ImagePicker setImageUrl show wallpaper', async () => {
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const imagePicker = instance.findByType(ImagePicker);
@@ -110,7 +117,7 @@ describe('Test AddSubUnit', () => {
 
   test('onChangeRoomName and setImageUrl for validateData', async () => {
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     await makeValidateData(instance);
@@ -118,7 +125,7 @@ describe('Test AddSubUnit', () => {
 
   test('ViewButtonBottom onLeftClick', async () => {
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = instance.findByType(ViewButtonBottom);
@@ -141,7 +148,7 @@ describe('Test AddSubUnit', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = await makeValidateData(instance);
@@ -149,7 +156,6 @@ describe('Test AddSubUnit', () => {
       await viewButtonBottom.props.onRightClick();
     });
     expect(axios.post).toHaveBeenCalled();
-    expect(mockedDispatch).toHaveBeenCalledWith(createSubUnit(response.data));
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
       screen: Routes.SubUnitDetail,
       params: {
@@ -160,7 +166,7 @@ describe('Test AddSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'success',
       position: 'bottom',
-      text1: t('text_create_sub_unit_success'),
+      text1: getTranslate('en', 'text_create_sub_unit_success'),
       visibilityTime: 1000,
     });
   });
@@ -175,7 +181,7 @@ describe('Test AddSubUnit', () => {
     });
 
     await act(async () => {
-      tree = await create(<AddSubUnit route={route} />);
+      tree = await create(wrapComponent(route));
     });
     const instance = tree.root;
     const viewButtonBottom = await makeValidateData(instance);
@@ -186,7 +192,7 @@ describe('Test AddSubUnit', () => {
     expect(Toast.show).toHaveBeenCalledWith({
       type: 'error',
       position: 'bottom',
-      text1: t('text_create_sub_unit_fail'),
+      text1: getTranslate('en', 'text_create_sub_unit_fail'),
       visibilityTime: 1000,
     });
   });