@eohjsc/react-native-smart-city 0.2.87 → 0.2.88

package/src/screens/HanetCamera/MemberInfo.js

@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import { View, TouchableOpacity, Image, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { IconFill } from '@ant-design/icons-react-native';
+import { HeaderCustom } from '../../commons/Header';
+import { AlertAction, FullLoading } from '../../commons';
+import BottomButtonView from '../../commons/BottomButtonView';
+import TextInput from '../../commons/Form/TextInput';
+import Text from '../../commons/Text';
+import { useStateAlertAction } from './hooks';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
+import styles from './styles/memberInfoStyles';
+import { Colors, API } from '../../configs';
+import { axiosDelete, axiosPatch, axiosPost } from '../../utils/Apis/axios';
+import Routes from '../../utils/Route';
+
+const HanetMemberInfo = ({ route }) => {
+  const t = useTranslations();
+  const { navigate, goBack } = useNavigation();
+  const { hanetPlace, hanetMember, isAddNewMember } = route.params;
+  const [memberAvatar, setMemberAvatar] = useState(hanetMember.avatar_uri);
+  const [memberName, setMemberName] = useState(hanetMember.name);
+  const [inputName, setInputName] = useState(hanetMember.name);
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setMemberAvatar(hanetMember.avatar_uri);
+    setMemberName(hanetMember.name);
+  }, [hanetMember]);
+
+  const { stateAlertAction, hideAlertAction, showRename, showDelete } =
+    useStateAlertAction();
+
+  const onShowRename = () => {
+    setInputName(memberName);
+    showRename(isAddNewMember);
+  };
+
+  const onShowDelete = () => {
+    showDelete();
+  };
+
+  const setFaceID = () => {
+    navigate(Routes.HanetCaptureFaceID, {
+      title: t('set_photo_id'),
+      hanetPlace,
+      hanetMember: {
+        ...hanetMember,
+        avatar_uri: memberAvatar,
+        name: memberName,
+      },
+      memberAvatar,
+      setMemberAvatar,
+      isAddNewMember,
+    });
+  };
+
+  const finishRegister = async () => {
+    setLoading(true);
+    const formData = new FormData();
+    const name = memberAvatar.split('/').pop();
+    const ext = memberAvatar.split('.').pop();
+    formData.append('face_id', {
+      name: name,
+      type: `image/${ext}`,
+      uri: memberAvatar,
+    });
+    formData.append('name', memberName);
+    const { success, data } = await axiosPost(
+      API.CAMERA.HANET.REGISTER(hanetPlace.place_id),
+      formData,
+      {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      }
+    );
+    if (success) {
+      navigate(Routes.HanetManageAccess, {
+        hanetPlace: hanetPlace,
+      });
+    } else {
+      setError(data.detail);
+    }
+    setLoading(false);
+  };
+
+  const renameMember = async () => {
+    hideAlertAction();
+    if (isAddNewMember) {
+      setMemberName(inputName);
+      return;
+    }
+
+    setLoading(true);
+    const { success } = await axiosPatch(
+      API.CAMERA.HANET.RENAME_MEMBER(hanetPlace.place_id, hanetMember.alias_id),
+      {
+        name: inputName,
+      }
+    );
+    success && setMemberName(inputName);
+    setLoading(false);
+  };
+
+  const removeMember = async () => {
+    hideAlertAction();
+    setLoading(true);
+    const { success } = await axiosDelete(
+      API.CAMERA.HANET.REMOVE_MEMBER(hanetPlace.place_id, hanetMember.alias_id)
+    );
+    success && goBack();
+    setLoading(false);
+  };
+
+  const handleRenameOrDelete = () => {
+    if (stateAlertAction.isDelete) {
+      removeMember();
+    } else {
+      renameMember();
+    }
+  };
+
+  const [transY] = useKeyboardAnimated(-16);
+  const animatedStyle = Platform.select({
+    ios: {
+      marginBottom: transY,
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <HeaderCustom title={t('member_info')} isShowSeparator />
+      <View style={styles.wrapAvatar}>
+        <Image source={{ uri: memberAvatar }} style={styles.avatar} />
+      </View>
+      <TouchableOpacity
+        onPress={setFaceID}
+        style={[styles.row, !!error && { borderBottomColor: Colors.Red6 }]}
+      >
+        <IconFill name="camera" size={27} color={Colors.Primary} />
+        <Text
+          type="Body"
+          bold
+          color={Colors.Primary}
+          style={styles.textSetPhoto}
+        >
+          {t('set_photo_id')}
+        </Text>
+        <Image source={{ uri: memberAvatar }} style={styles.photoID} />
+      </TouchableOpacity>
+      {!!error && (
+        <Text type="Label" style={styles.textError} color={Colors.Red6}>
+          {error}
+        </Text>
+      )}
+      <TouchableOpacity
+        onPress={onShowRename}
+        style={[styles.row, styles.spaceBetween]}
+      >
+        <Text type="H4" bold color={Colors.Gray9}>
+          {t('text_name')}
+        </Text>
+        <Text type="Body" color={Colors.Gray8}>
+          {memberName}
+        </Text>
+      </TouchableOpacity>
+      {!isAddNewMember && (
+        <TouchableOpacity onPress={onShowDelete} style={styles.buttonRemove}>
+          <Text type="H4" color={Colors.Red6} underline bold>
+            {t('remove_member')}
+          </Text>
+        </TouchableOpacity>
+      )}
+      {isAddNewMember && (
+        <BottomButtonView
+          mainTitle={t('finish')}
+          onPressMain={finishRegister}
+          style={styles.bottomButton}
+        />
+      )}
+      {loading && <FullLoading />}
+      <AlertAction
+        visible={stateAlertAction.visible}
+        hideModal={hideAlertAction}
+        title={stateAlertAction.title}
+        message={stateAlertAction.message}
+        leftButtonTitle={stateAlertAction.leftButton}
+        leftButtonClick={hideAlertAction}
+        rightButtonTitle={stateAlertAction.rightButton}
+        rightButtonClick={handleRenameOrDelete}
+        rightButtonStyle={{ color: stateAlertAction.rightColor }}
+        animatedStyle={animatedStyle}
+      >
+        {!stateAlertAction.isDelete && (
+          <TextInput
+            onChange={(text) => setInputName(text)}
+            defaultValue={inputName}
+            textInputStyle={styles.textInput}
+            maxLength={64}
+          />
+        )}
+      </AlertAction>
+    </View>
+  );
+};
+
+export default HanetMemberInfo;

package/src/screens/HanetCamera/__test__/CaptureFaceID.test.js

@@ -0,0 +1,133 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import { create, act } from 'react-test-renderer';
+import axios from 'axios';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import HanetCaptureFaceID from '../CaptureFaceID';
+import { RNCamera } from 'react-native-camera';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HanetCaptureFaceID route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockedNavigate = jest.fn();
+const mockedGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+  };
+});
+
+jest.mock('axios');
+
+const mockSetAvatar = jest.fn();
+describe('Test HanetCaptureFaceID', () => {
+  let tree, route;
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    mockedGoBack.mockClear();
+    mockSetAvatar.mockClear();
+    axios.patch.mockClear();
+    route = {
+      params: {
+        title: 'title',
+        hanetPlace: {
+          place_id: 1,
+        },
+        hanetMember: {
+          id: 1,
+          alias_id: 1,
+          name: 'name',
+          avatar_uri: 'uri',
+        },
+        setMemberAvatar: mockSetAvatar,
+        isAddNewMember: false,
+      },
+    };
+  });
+
+  const captureFaceID = async (instance) => {
+    let touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+    const camera = instance.findByType(RNCamera);
+    expect(camera).toBeDefined();
+
+    // capture
+    touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+
+    // resume capture
+    touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[2].props.onPress();
+    });
+
+    // capture
+    touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+  };
+
+  test('Test update face id', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    // capture face id
+    await captureFaceID(instance);
+
+    axios.patch.mockImplementationOnce(async () => ({
+      status: 200,
+      data: {
+        avatar_uri: 'avatar_uri',
+      },
+    }));
+
+    // continue
+    let touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+    expect(axios.patch).toHaveBeenCalled();
+    expect(mockSetAvatar).toHaveBeenCalled();
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
+
+  test('Test set face id for new member', async () => {
+    route.params.isAddNewMember = true;
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    await captureFaceID(instance);
+
+    // continue
+    let touches = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+});

package/src/screens/HanetCamera/__test__/Detail.test.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { create, act } from 'react-test-renderer';
+import axios from 'axios';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import HanetCameraDetail from '../Detail';
+import CheckinHeader from '../components/CheckinHeader';
+import moment from 'moment';
+import { TESTID } from '../../../configs/Constants';
+import Calendar from '../../../commons/Calendar';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HanetCameraDetail route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+
+describe('Test HanetCameraDetail', () => {
+  Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
+  let tree, route, responseDisplay, responseCheckin;
+
+  beforeEach(() => {
+    axios.get.mockClear();
+    route = {
+      params: {
+        unit: {
+          user_id: 1,
+        },
+        sensor: {
+          id: 1,
+        },
+        title: 'title',
+      },
+    };
+    responseDisplay = {
+      status: 200,
+      data: {
+        items: [
+          {
+            type: 'hanet_camera',
+            configuration: {
+              device_id: 2,
+              place: {
+                place_id: 3,
+              },
+            },
+          },
+        ],
+      },
+    };
+    responseCheckin = {
+      status: 200,
+      data: {
+        count: 2,
+        count_member: 1,
+        count_stranger: 1,
+        results: [
+          {
+            id: 1,
+            person_name: 'name 1',
+            person_type: 'EMPLOYEE',
+            detected_image_uri: 'uri',
+            detected_mask: 'MASK_OFF',
+            created_at: moment(),
+          },
+          {
+            id: 2,
+            person_name: 'name 2',
+            person_type: 'STRANGER',
+            detected_image_uri: 'uri',
+            detected_mask: 'MASK_ON',
+            created_at: moment(),
+          },
+        ],
+      },
+    };
+  });
+
+  test('Test render HanetCameraDetail', async () => {
+    axios.get.mockImplementationOnce(async () => {
+      return responseDisplay;
+    });
+    axios.get.mockImplementationOnce(async () => {
+      return responseCheckin;
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    expect(axios.get).toHaveBeenCalledTimes(2);
+    const flatLists = instance.findAllByType(FlatList);
+    expect(flatLists).toHaveLength(1);
+
+    const textCountMember = instance.find(
+      (el) => el.props.testID === TESTID.TEXT_COUNT_MEMBER
+    );
+    const textCountStranger = instance.find(
+      (el) => el.props.testID === TESTID.TEXT_COUNT_STRANGER
+    );
+    expect(textCountMember.props.children).toBe(1);
+    expect(textCountStranger.props.children).toBe(1);
+  });
+
+  test('Test change date', async () => {
+    axios.get.mockImplementationOnce(async () => {
+      return responseDisplay;
+    });
+    axios.get.mockImplementationOnce(async () => {
+      return responseCheckin;
+    });
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    expect(axios.get).toHaveBeenCalledTimes(2);
+    axios.get.mockClear();
+
+    const checkinHeader = instance.findByType(CheckinHeader);
+
+    // press arrow left
+    axios.get.mockImplementationOnce(async () => {
+      return responseCheckin;
+    });
+    await act(async () => {
+      await checkinHeader.props.onPickPreviousDate();
+    });
+    expect(checkinHeader.props.date.format('DD/MM/YYYY')).toBe(
+      moment().add(-1, 'days').format('DD/MM/YYYY')
+    );
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    axios.get.mockClear();
+
+    // press arrow right
+    axios.get.mockImplementationOnce(async () => {
+      return responseCheckin;
+    });
+    await act(async () => {
+      await checkinHeader.props.onPickNextDate();
+    });
+    expect(checkinHeader.props.date.format('DD/MM/YYYY')).toBe(
+      moment().format('DD/MM/YYYY')
+    );
+    expect(axios.get).toHaveBeenCalledTimes(1);
+    axios.get.mockClear();
+
+    // press arrow right
+    await act(async () => {
+      await checkinHeader.props.onPickNextDate();
+    });
+    expect(checkinHeader.props.date.format('DD/MM/YYYY')).toBe(
+      moment().format('DD/MM/YYYY')
+    ); // no change
+    expect(axios.get).toHaveBeenCalledTimes(0);
+    axios.get.mockClear();
+
+    // open calendar
+    await act(async () => {
+      await checkinHeader.props.setShowCalendar();
+    });
+    const calendar = instance.findByType(Calendar);
+    expect(calendar.props.isVisible).toBe(true);
+
+    // choose date on calendar
+    axios.get.mockImplementationOnce(async () => {
+      return responseCheckin;
+    });
+    await act(async () => {
+      await calendar.props.onConfirm(moment().add(-1, 'days'));
+    });
+    expect(checkinHeader.props.date.format('DD/MM/YYYY')).toBe(
+      moment().add(-1, 'days').format('DD/MM/YYYY')
+    );
+    expect(axios.get).toHaveBeenCalledTimes(1);
+  });
+});

package/src/screens/HanetCamera/__test__/ManageAccess.test.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { create, act } from 'react-test-renderer';
+import axios from 'axios';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import HanetManageAccess from '../ManageAccess';
+import BottomSheet from '../../../commons/BottomSheet';
+import { TESTID } from '../../../configs/Constants';
+import Routes from '../../../utils/Route';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HanetManageAccess route={route} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+jest.mock('axios');
+
+describe('Test HanetManageAccess', () => {
+  let tree, route, response;
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    axios.get.mockClear();
+    route = {
+      params: {
+        hanetPlace: {
+          place_id: 1,
+        },
+      },
+    };
+  });
+
+  test('Test render', async () => {
+    response = {
+      status: 200,
+      data: {
+        count: 2,
+        results: [
+          {
+            id: 1,
+            name: 'name 1',
+            avatar_uri: 'uri 1',
+          },
+          {
+            id: 2,
+            name: 'name 2',
+            avatar_uri: 'uri 2',
+          },
+        ],
+      },
+    };
+    axios.get.mockImplementationOnce(async () => response);
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const flatlists = instance.findAllByType(FlatList);
+    expect(flatlists).toHaveLength(1);
+
+    const touches = instance.findAll(
+      (el) => el.props.testID === TESTID.ROW_HANET_MANAGE_ACCESS
+    );
+    act(() => {
+      touches[0].props.onPress();
+    });
+    expect(mockedNavigate).toBeCalled();
+  });
+
+  const chooseAddMemberOption = async (instance, index) => {
+    const buttonAddNew = instance.find(
+      (el) => el.props.testID === TESTID.HANET_MANAGE_ACCESS_ADD_BUTTON
+    );
+    await act(async () => {
+      await buttonAddNew.props.onPress();
+    });
+    const option = instance.find(
+      (el) => el.props.testID === `${TESTID.HANET_ADD_MEMBER_OPTION}_${index}`
+    );
+    await act(async () => {
+      await option.props.onPress();
+    });
+  };
+
+  test('Test add new member capture face id', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomSheet = instance.findByType(BottomSheet);
+
+    await chooseAddMemberOption(instance, 0);
+
+    expect(bottomSheet.props.isVisible).toBe(false);
+    expect(mockedNavigate).toBeCalledWith(Routes.HanetCaptureFaceID, {
+      title: 'Add new member',
+      hanetPlace: {
+        place_id: 1,
+      },
+      hanetMember: {
+        alias_id: null,
+        name: null,
+      },
+      isAddNewMember: true,
+    });
+  });
+
+  test('Test add new member choose file', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomSheet = instance.findByType(BottomSheet);
+
+    await chooseAddMemberOption(instance, 1);
+
+    expect(bottomSheet.props.isVisible).toBe(false);
+    expect(mockedNavigate).toBeCalledWith(Routes.HanetMemberInfo, {
+      hanetPlace: {
+        place_id: 1,
+      },
+      hanetMember: {
+        alias_id: null,
+        name: null,
+        avatar_uri:
+          'file:///data/user/0/com.eohjsc.eohmobile/cache/Camera/80fbbd4b-926d-425f-a081-e21b13f2f7d0.jpg',
+      },
+      isAddNewMember: true,
+    });
+  });
+});