@eohjsc/react-native-smart-city 0.2.86 → 0.2.89

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;

package/src/screens/HanetCamera/styles/captureFaceIDStyles.js

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  textDes: {
+    marginTop: 30,
+    fontSize: 18,
+  },
+  wrapCamera: {
+    flex: 1,
+  },
+  camera: {
+    height: '90%',
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  maskOutter: {
+    position: 'absolute',
+    alignSelf: 'center',
+    top: '12%',
+  },
+  wrapBottom: {
+    paddingBottom: 24,
+    paddingTop: 30,
+    justifyContent: 'space-between',
+    backgroundColor: Colors.White,
+  },
+  bottomButton: {
+    padding: 12,
+    backgroundColor: Colors.Primary,
+    borderRadius: 50,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginHorizontal: 16,
+  },
+  bottomButton2: {
+    backgroundColor: Colors.White,
+    marginTop: 8,
+  },
+});

package/src/screens/HanetCamera/styles/checkinHeaderStyles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  arrowRight: {
+    transform: [{ rotate: '180deg' }],
+  },
+  wrapDate: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 24,
+  },
+  marginRight10: {
+    marginRight: 10,
+  },
+});

package/src/screens/HanetCamera/styles/detailStyles.js

@@ -0,0 +1,107 @@
+import { StyleSheet, Platform } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  contentContainerStyle: {
+    paddingBottom: 60,
+  },
+  headerRight: {
+    flexDirection: 'row',
+  },
+  button: {
+    marginRight: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  menuAction: {
+    borderRadius: 10,
+    borderBottomRightRadius: 10,
+    borderBottomLeftRadius: 10,
+    marginTop: Platform.select({
+      ios: 0,
+      android: -25,
+    }),
+  },
+  wrapTop: {
+    padding: 16,
+    backgroundColor: Colors.White,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  row2: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  marginTop16: {
+    marginTop: 16,
+  },
+  marginRight10: {
+    marginRight: 10,
+  },
+  wrapDate: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 24,
+  },
+  arrowRight: {
+    transform: [{ rotate: '180deg' }],
+  },
+  wrapItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    height: 70,
+  },
+  wrapItemInfo: {
+    flex: 1,
+  },
+  avatar: {
+    height: 36,
+    width: 36,
+    borderRadius: 18,
+    marginVertical: 24,
+  },
+  verticalLine: {
+    height: '100%',
+    width: 1,
+    backgroundColor: Colors.Gray4,
+    marginHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  centerCircle: {
+    height: 12,
+    width: 12,
+    borderRadius: 5,
+  },
+  timeCheckIn: {
+    marginVertical: 24,
+    width: '20%',
+  },
+  itemDescription: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  dot: {
+    height: 4,
+    width: 4,
+    backgroundColor: Colors.Gray7,
+    borderRadius: 2,
+    marginHorizontal: 4,
+  },
+});