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

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

@@ -0,0 +1,178 @@
+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 HanetMemberInfo from '../MemberInfo';
+import { AlertAction } from '../../../commons';
+import TextInput from '../../../commons/Form/TextInput';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <HanetMemberInfo 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,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+jest.mock('axios');
+
+describe('Test HanetMemberInfo', () => {
+  let tree, route;
+
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    mockedGoBack.mockClear();
+    axios.post.mockClear();
+    axios.patch.mockClear();
+    axios.delete.mockClear();
+    route = {
+      params: {
+        hanetPlace: {
+          place_id: 1,
+        },
+        hanetMember: {
+          id: 1,
+          alias_id: 1,
+          name: 'name',
+          avatar_uri: 'uri',
+        },
+        isAddNewMember: false,
+      },
+    };
+  });
+
+  test('Test rename member', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(5);
+    const alertAction = instance.findByType(AlertAction);
+
+    // open alert action
+    await act(async () => {
+      await touches[2].props.onPress();
+    });
+    expect(alertAction.props.visible).toBe(true);
+
+    const textInput = instance.findByType(TextInput);
+
+    axios.patch.mockImplementationOnce(async () => ({ status: 200 }));
+
+    // change name and press rename
+    await act(async () => {
+      await textInput.props.onChange('new name');
+      await alertAction.props.rightButtonClick();
+    });
+    expect(axios.patch).toHaveBeenCalled();
+  });
+
+  test('Test remove member', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(5);
+    const alertAction = instance.findByType(AlertAction);
+
+    // open alert action
+    await act(async () => {
+      await touches[3].props.onPress();
+    });
+    expect(alertAction.props.visible).toBe(true);
+
+    axios.delete.mockImplementationOnce(async () => ({ status: 200 }));
+
+    // press remove
+    await act(async () => {
+      await alertAction.props.rightButtonClick();
+    });
+
+    expect(axios.delete).toHaveBeenCalled();
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
+
+  test('Test navigate CaptureFaceID', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(5);
+
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+    expect(mockedNavigate).toBeCalled();
+  });
+
+  test('Test register new member', async () => {
+    route.params.hanetMember = {
+      alias_id: null,
+      name: null,
+      avatar_uri: 'avatar_uri',
+    };
+    route.params.isAddNewMember = true;
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const touches = instance.findAllByType(TouchableOpacity);
+    expect(touches).toHaveLength(5);
+
+    // press set face id
+    await act(async () => {
+      await touches[1].props.onPress();
+    });
+    expect(mockedNavigate).toBeCalled();
+
+    // open alert action
+    const alertAction = instance.findByType(AlertAction);
+    await act(async () => {
+      await touches[2].props.onPress();
+    });
+    expect(alertAction.props.visible).toBe(true);
+
+    // change name and press rename
+    const textInput = instance.findByType(TextInput);
+    await act(async () => {
+      await textInput.props.onChange('new name');
+      await alertAction.props.rightButtonClick();
+    });
+    expect(axios.post).not.toBeCalled();
+
+    // finish
+    const bottomButton = instance.findByType(BottomButtonView);
+    axios.post.mockImplementationOnce(async () => ({ status: 200 }));
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(axios.post).toBeCalled();
+    expect(mockedNavigate).toBeCalled();
+  });
+});

package/src/screens/HanetCamera/components/CheckinHeader.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { View, TouchableOpacity, Image } from 'react-native';
+import Text from '../../../commons/Text';
+import { Images, Colors } from '../../../configs';
+import styles from '../styles/checkinHeaderStyles';
+import CalendarSvg from '../../../../assets/images/Common/Calendar.svg';
+
+const CheckinHeader = ({
+  date,
+  onPickPreviousDate,
+  onPickNextDate,
+  setShowCalendar,
+}) => {
+  return (
+    <View style={styles.wrap}>
+      <Text type="H3" color={Colors.Gray9} bold>
+        {'Check in'}
+      </Text>
+      <View style={styles.row}>
+        <TouchableOpacity onPress={onPickPreviousDate}>
+          <Image source={Images.arrowLeft} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={setShowCalendar} style={styles.wrapDate}>
+          <Text color={Colors.Gray9} style={styles.marginRight10}>
+            {date.format('DD/MM/YYYY')}
+          </Text>
+          <CalendarSvg color={Colors.Primary} />
+        </TouchableOpacity>
+        <TouchableOpacity onPress={onPickNextDate}>
+          <Image source={Images.arrowLeft} style={styles.arrowRight} />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+export default CheckinHeader;

package/src/screens/HanetCamera/hooks/__test__/useHanetCheckinData.test.js

@@ -0,0 +1,151 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useHanetCheckinData } from '../index';
+import axios from 'axios';
+import moment from 'moment';
+
+jest.mock('axios');
+
+describe('Test useHanetCheckinData', () => {
+  let props, data;
+
+  beforeEach(() => {
+    Date.now = jest.fn(() => new Date('2021-09-09T10:00:00.000Z'));
+    axios.get.mockClear();
+    props = {
+      device_id: 1,
+      place: {
+        place_id: 2,
+      },
+    };
+    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 onRefresh', async () => {
+    const { result } = renderHook(() => useHanetCheckinData(props));
+    axios.get.mockImplementationOnce(() => ({
+      status: 200,
+      data: data,
+    }));
+    await act(async () => {
+      await result.current.onRefresh();
+    });
+    expect(axios.get).toHaveBeenCalled();
+  });
+
+  test('Test onLoadMore', async () => {
+    const { result } = renderHook(() => useHanetCheckinData(props));
+    axios.get.mockImplementationOnce(() => ({
+      status: 200,
+      data: data,
+    }));
+    await act(async () => {
+      await result.current.onLoadMore();
+    });
+    expect(axios.get).toHaveBeenCalled();
+
+    axios.get.mockClear();
+
+    await act(async () => {
+      await result.current.onLoadMore();
+    });
+    expect(axios.get).toHaveBeenCalledTimes(0);
+  });
+
+  test('Test onMomentumScrollBegin', async () => {
+    const { result } = renderHook(() => useHanetCheckinData(props));
+    await act(async () => {
+      await result.current.onMomentumScrollBegin();
+    });
+  });
+
+  test('Test onReceiveNewCheckinData', async () => {
+    const { result } = renderHook(() => useHanetCheckinData(props));
+    expect(result.current.checkinData).toHaveLength(0);
+    const newData = {
+      id: 1,
+      person_name: 'name 1',
+      person_type: 'EMPLOYEE',
+      detected_image_uri: 'uri',
+      detected_mask: 'MASK_OFF',
+      created_at: moment(),
+    };
+    await act(async () => {
+      await result.current.onReceiveNewCheckinData(newData);
+    });
+    expect(result.current.checkinData).toHaveLength(1);
+    expect(result.current.countMember).toBe(1);
+    expect(result.current.countStranger).not.toBe(1);
+
+    const newData2 = {
+      id: 2,
+      person_name: 'name 2',
+      person_type: 'STRANGER',
+      detected_image_uri: 'uri',
+      detected_mask: 'MASK_ON',
+      created_at: moment(),
+    };
+    await act(async () => {
+      await result.current.onReceiveNewCheckinData(newData2);
+    });
+    expect(result.current.checkinData).toHaveLength(2);
+    expect(result.current.countMember).toBe(1);
+    expect(result.current.countStranger).toBe(1);
+
+    const newData3 = {
+      id: 3,
+      person_name: 'name 2',
+      person_type: 'STRANGER',
+      detected_image_uri: 'uri',
+      detected_mask: 'MASK_ON',
+      created_at: moment().add(-1, 'days'),
+    };
+    await act(async () => {
+      await result.current.onReceiveNewCheckinData(newData3);
+    });
+    // no change
+    expect(result.current.checkinData).toHaveLength(2);
+    expect(result.current.countMember).toBe(1);
+    expect(result.current.countStranger).toBe(1);
+
+    await act(async () => {
+      await result.current.onChangeDate(moment().add(-1, 'days'));
+    });
+    const newData4 = {
+      id: 4,
+      person_name: 'name 2',
+      person_type: 'STRANGER',
+      detected_image_uri: 'uri',
+      detected_mask: 'MASK_ON',
+      created_at: moment(),
+    };
+    await act(async () => {
+      await result.current.onReceiveNewCheckinData(newData4);
+    });
+    // no change
+    expect(result.current.checkinData).toHaveLength(2);
+    expect(result.current.countMember).toBe(1);
+    expect(result.current.countStranger).toBe(1);
+  });
+});

package/src/screens/HanetCamera/hooks/__test__/useHanetPlaceMembers.test.js

@@ -0,0 +1,71 @@
+import { act, renderHook } from '@testing-library/react-hooks';
+import { useHanetPlaceMembers } from '../index';
+import axios from 'axios';
+
+jest.mock('axios');
+
+describe('Test useHanetPlaceMembers', () => {
+  let props, data;
+
+  beforeEach(() => {
+    axios.get.mockClear();
+    props = {
+      place: {
+        place_id: 2,
+      },
+    };
+    data = {
+      count: 2,
+      results: [
+        {
+          id: 1,
+          name: 'name 1',
+          avatar_uri: 'uri 1',
+        },
+        {
+          id: 2,
+          name: 'name 2',
+          avatar_uri: 'uri 2',
+        },
+      ],
+    };
+  });
+
+  test('Test onRefresh', async () => {
+    const { result } = renderHook(() => useHanetPlaceMembers(props));
+    axios.get.mockImplementationOnce(() => ({
+      status: 200,
+      data: data,
+    }));
+    await act(async () => {
+      await result.current.onRefresh();
+    });
+    expect(axios.get).toHaveBeenCalled();
+  });
+
+  test('Test onLoadMore', async () => {
+    const { result } = renderHook(() => useHanetPlaceMembers(props));
+    axios.get.mockImplementationOnce(() => ({
+      status: 200,
+      data: data,
+    }));
+    await act(async () => {
+      await result.current.onLoadMore();
+    });
+    expect(axios.get).toHaveBeenCalled();
+
+    axios.get.mockClear();
+
+    await act(async () => {
+      await result.current.onLoadMore();
+    });
+    expect(axios.get).toHaveBeenCalledTimes(0);
+  });
+
+  test('Test onMomentumScrollBegin', async () => {
+    const { result } = renderHook(() => useHanetPlaceMembers(props));
+    await act(async () => {
+      await result.current.onMomentumScrollBegin();
+    });
+  });
+});

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

@@ -0,0 +1,5 @@
+import useHanetCheckinData from './useHanetCheckinData';
+import useHanetPlaceMembers from './useHanetPlaceMembers';
+import useStateAlertAction from './useStateAlertAction';
+
+export { useHanetCheckinData, useHanetPlaceMembers, useStateAlertAction };

package/src/screens/HanetCamera/hooks/useHanetCheckinData.js

@@ -0,0 +1,116 @@
+import { useState, useEffect } from 'react';
+import moment from 'moment';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+import _ from 'lodash';
+
+let onEndReachedCalledDuringMomentum = false;
+
+const useHanetCheckinData = (hanetCamera) => {
+  const [checkinData, setCheckinData] = useState([]);
+  const [countMember, setCountMember] = useState(null);
+  const [countStranger, setCountStranger] = useState(null);
+  const [page, setPage] = useState(1);
+  const [date, setDate] = useState(moment());
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [canLoadMore, setCanLoadMore] = useState(true);
+
+  const fetchData = async (page, date) => {
+    if (!hanetCamera) {
+      return;
+    }
+    setPage(page);
+    setDate(date);
+    if (page === 1) {
+      setRefreshing(true);
+    } else {
+      if (!canLoadMore) {
+        return;
+      }
+      setLoadingMore(true);
+    }
+
+    const params = new URLSearchParams();
+    params.append('page', page);
+    params.append('date', date.format('YYYY-MM-DD'));
+    const { success, data } = await axiosGet(
+      API.CAMERA.HANET.CHECKIN(hanetCamera.device_id),
+      {
+        params,
+      }
+    );
+    if (success && data) {
+      setCountMember(data.count_member);
+      setCountStranger(data.count_stranger);
+      if (page === 1) {
+        setCheckinData(data.results || []);
+      } else {
+        setCanLoadMore(page < Math.ceil(data.count / 20));
+        setCheckinData((prevData) =>
+          _.uniqBy(prevData.concat(data.results || []))
+        );
+      }
+    }
+
+    if (page === 1) {
+      setRefreshing(false);
+    } else {
+      setLoadingMore(false);
+    }
+  };
+
+  const onLoadMore = () => {
+    if (!onEndReachedCalledDuringMomentum) {
+      onEndReachedCalledDuringMomentum = true;
+      fetchData(page + 1, date);
+    }
+  };
+
+  const onRefresh = () => {
+    setCanLoadMore(true);
+    fetchData(1, date);
+  };
+
+  const onMomentumScrollBegin = () =>
+    (onEndReachedCalledDuringMomentum = false);
+
+  const onChangeDate = (date) => {
+    fetchData(page, date);
+  };
+
+  const onReceiveNewCheckinData = (data) => {
+    if (!moment(data.created_at).isSame(date, 'date')) {
+      return;
+    }
+    setCheckinData((listData) => {
+      return _.uniqBy([data, ...listData], 'id');
+    });
+    if (['EMPLOYEE', 'CUSTOMER'].includes(data.person_type)) {
+      setCountMember((prevData) => prevData + 1);
+    } else {
+      setCountStranger((prevData) => prevData + 1);
+    }
+  };
+
+  useEffect(() => {
+    onRefresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hanetCamera]);
+
+  return {
+    checkinData,
+    countMember,
+    countStranger,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    date,
+    onChangeDate,
+    onMomentumScrollBegin,
+    onReceiveNewCheckinData,
+  };
+};
+
+export default useHanetCheckinData;

package/src/screens/HanetCamera/hooks/useHanetPlaceMembers.js

@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { useIsFocused } from '@react-navigation/native';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+let onEndReachedCalledDuringMomentum = false;
+
+const useHanetPlaceMembers = (place) => {
+  const isFocused = useIsFocused();
+  const [data, setData] = useState([]);
+  const [page, setPage] = useState(1);
+  const [refreshing, setRefreshing] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [canLoadMore, setCanLoadMore] = useState(true);
+
+  const fetchData = async (page) => {
+    if (!place) {
+      return;
+    }
+    setPage(page);
+    if (page === 1) {
+      setRefreshing(true);
+    } else {
+      if (!canLoadMore) {
+        return;
+      }
+      setLoadingMore(true);
+    }
+
+    const params = new URLSearchParams();
+    params.append('page', page);
+    const { success, data } = await axiosGet(
+      API.CAMERA.HANET.PLACE_MEMBERS(place.place_id),
+      {
+        params,
+      }
+    );
+    if (success && data) {
+      if (page === 1) {
+        setData(data.results || []);
+      } else {
+        setCanLoadMore(page < Math.ceil(data.count / 20));
+        setData((prevData) => prevData.concat(data.results || []));
+      }
+    }
+
+    if (page === 1) {
+      setRefreshing(false);
+    } else {
+      setLoadingMore(false);
+    }
+  };
+
+  const onLoadMore = () => {
+    if (!onEndReachedCalledDuringMomentum) {
+      onEndReachedCalledDuringMomentum = true;
+      fetchData(page + 1);
+    }
+  };
+
+  const onRefresh = () => {
+    setCanLoadMore(true);
+    fetchData(1);
+  };
+
+  const onMomentumScrollBegin = () =>
+    (onEndReachedCalledDuringMomentum = false);
+
+  useEffect(() => {
+    if (isFocused) {
+      onRefresh();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFocused, place]);
+
+  return {
+    data,
+    refreshing,
+    loadingMore,
+    onRefresh,
+    onLoadMore,
+    onMomentumScrollBegin,
+  };
+};
+
+export default useHanetPlaceMembers;

package/src/screens/HanetCamera/hooks/useStateAlertAction.js

@@ -0,0 +1,62 @@
+import { useState, useCallback } from 'react';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Colors } from '../../../configs';
+
+const useStateAlertAction = () => {
+  const t = useTranslations();
+  const [stateAlertAction, setStateAlertAction] = useState({
+    visible: false,
+    title: '',
+    message: '',
+    leftButton: t('cancel'),
+    rightButton: '',
+    rightColor: Colors.Primary,
+    isDelete: true,
+  });
+
+  const hideAlertAction = useCallback(() => {
+    setStateAlertAction({ ...stateAlertAction, visible: false });
+  }, [stateAlertAction]);
+
+  const showRename = useCallback(
+    (isAddNewMember) => {
+      setStateAlertAction((state) => {
+        return {
+          ...state,
+          visible: true,
+          title: isAddNewMember ? t('member_name') : t('rename_member'),
+          message: '',
+          leftButton: t('cancel'),
+          rightButton: isAddNewMember ? t('done') : t('rename'),
+          rightColor: Colors.Primary,
+          isDelete: false,
+        };
+      });
+    },
+    [t]
+  );
+
+  const showDelete = useCallback(() => {
+    setStateAlertAction((action) => {
+      return {
+        ...action,
+        visible: true,
+        title: t('remove_member'),
+        message: t('text_des_remove_hanet_member'),
+        leftButton: t('cancel'),
+        rightButton: t('remove'),
+        rightColor: Colors.Gray6,
+        isDelete: true,
+      };
+    });
+  }, [t]);
+
+  return {
+    stateAlertAction,
+    hideAlertAction,
+    showRename,
+    showDelete,
+  };
+};
+
+export default useStateAlertAction;