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

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,
+  },
+});

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

@@ -0,0 +1,49 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerRight: {
+    flexDirection: 'row',
+  },
+  contentContainerStyle: {
+    paddingBottom: 60,
+  },
+  wrapItem: {
+    height: 100,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray3,
+  },
+  itemAvatar: {
+    height: 48,
+    width: 48,
+    borderRadius: 24,
+    borderWidth: 1,
+    borderColor: Colors.Gray3,
+  },
+  itemName: {
+    marginLeft: 16,
+    flex: 1,
+  },
+  addMemberModal: {
+    paddingBottom: 50,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 16,
+    marginHorizontal: 16,
+    borderBottomColor: Colors.Gray3,
+    borderBottomWidth: 1,
+  },
+  textOption: {
+    marginLeft: 18,
+  },
+});

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

@@ -0,0 +1,73 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  headerRight: {
+    flexDirection: 'row',
+  },
+  wrapAvatar: {
+    alignItems: 'center',
+    marginTop: 24,
+    marginBottom: 52,
+  },
+  avatar: {
+    height: 88,
+    width: 88,
+    borderRadius: 44,
+    borderWidth: 1,
+    borderColor: Colors.Gray3,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray3,
+    height: 64,
+    marginHorizontal: 16,
+  },
+  textSetPhoto: {
+    flex: 1,
+    marginLeft: 16,
+    lineHeight: 24,
+  },
+  photoID: {
+    width: 42,
+    height: 42,
+    borderRadius: 6,
+    borderWidth: 1,
+    borderColor: Colors.Gray3,
+  },
+  spaceBetween: {
+    justifyContent: 'space-between',
+  },
+  buttonRemove: {
+    position: 'absolute',
+    alignItems: 'center',
+    padding: 32,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+  textInput: {
+    margin: 16,
+    marginTop: 0,
+    borderWidth: 0,
+    paddingLeft: 0,
+    paddingTop: 0,
+    borderBottomWidth: 2,
+    borderBottomColor: Colors.Primary,
+    fontSize: 16,
+    color: Colors.Gray9,
+  },
+  bottomButton: {
+    paddingBottom: 24,
+  },
+  textError: {
+    marginHorizontal: 16,
+    marginTop: 4,
+  },
+});

package/src/screens/HanetCamera/utils/Monitor.js

@@ -0,0 +1,52 @@
+import { API } from '../../../configs';
+import Pusher from 'pusher-js/react-native';
+import { SCConfig } from '../../../configs/SCConfig';
+import { axiosPost } from '../../../utils/Apis/axios';
+
+Pusher.logToConsole = true;
+let pusher = null;
+
+const getPusher = () => {
+  if (!pusher) {
+    pusher = new Pusher(SCConfig.pusherAppKey, {
+      cluster: SCConfig.pusherAppCluste,
+      authorizer: function (channel, option) {
+        return {
+          // eslint-disable-next-line promise/prefer-await-to-callbacks
+          authorize: async function (socketId, callback) {
+            const { success, data } = await axiosPost(
+              API.CAMERA.HANET.PUSHER_AUTH(),
+              {
+                channel_name: channel.name,
+                socket_id: socketId,
+              }
+            );
+            if (success) {
+              // eslint-disable-next-line promise/prefer-await-to-callbacks
+              callback(null, data);
+            }
+          },
+        };
+      },
+    });
+  }
+  return pusher;
+};
+
+const destroyPusher = () => {
+  pusher.disconnect();
+  pusher = null;
+};
+
+// eslint-disable-next-line promise/prefer-await-to-callbacks
+export const watchHanetCheckinData = (hanetCamera, callback) => {
+  const channel = getPusher().subscribe(
+    `private-hanet-camera-${hanetCamera.device_id}`
+  );
+  channel.bind('new-checkin-data', callback);
+};
+
+export const unwatchHanetCheckinData = (hanetCamera) => {
+  getPusher().unsubscribe(`private-hanet-camera-${hanetCamera.device_id}`);
+  destroyPusher();
+};

package/src/screens/SmartIr/__test__/ButtonsBottom.test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { ButtonsBottom } from '../components/GroupButtonByType/ButtonsBottom';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <ButtonsBottom />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+describe('Test ButtonsBottom', () => {
+  let tree;
+
+  test('render ButtonsBottom', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const touchableOpacity = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacity).toHaveLength(2);
+  });
+});

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -4,6 +4,7 @@ import GroupButtonByType from '../components/GroupButtonByType/GroupButtonByType
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+import { ButtonsBottom } from '../components/GroupButtonByType/ButtonsBottom';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -12,7 +13,6 @@ const wrapComponent = (route) => (
 );
 
 const mockNavigate = jest.fn();
-const mockSetState = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -25,18 +25,10 @@ jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
     memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
   };
 });
 describe('Test GroupButtonByType', () => {
   let tree;
-  beforeEach(() => {
-    mockNavigate.mockClear();
-  });
-  afterEach(() => {
-    mockSetState.mockClear();
-  });
-
   test('render GroupButtonByType', () => {
     const route = {
       params: {
@@ -51,4 +43,38 @@ describe('Test GroupButtonByType', () => {
     const wrapHeaderScrollable = instance.findAllByType(WrapHeaderScrollable);
     expect(wrapHeaderScrollable).toHaveLength(1);
   });
+  test('onPressLeft ButtonsBottom', () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '', icon: '' },
+        brand: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonsBottom = instance.findAllByType(ButtonsBottom);
+    expect(buttonsBottom).toHaveLength(2);
+    act(() => {
+      buttonsBottom[0].props.onPressLeft();
+    });
+  });
+  test('onPressRight ButtonsBottom', () => {
+    const route = {
+      params: {
+        device_type: { id: 1, name: '', icon: '' },
+        brand: { id: 1, name: '' },
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const buttonsBottom = instance.findAllByType(ButtonsBottom);
+    expect(buttonsBottom).toHaveLength(2);
+    act(() => {
+      buttonsBottom[0].props.onPressRight();
+    });
+  });
 });

package/src/screens/SmartIr/__test__/SelectBrand.test.js

@@ -13,7 +13,6 @@ const wrapComponent = (route) => (
 );
 
 const mockNavigate = jest.fn();
-const mockSetState = jest.fn();
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -26,18 +25,10 @@ jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
     memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
   };
 });
 describe('Test SelectBrand', () => {
   let tree;
-  beforeEach(() => {
-    mockNavigate.mockClear();
-  });
-  afterEach(() => {
-    mockSetState.mockClear();
-  });
-
   test('render SelectBrand', () => {
     const route = {
       params: {

package/src/screens/SmartIr/__test__/SelectDeviceType.test.js

@@ -12,7 +12,7 @@ const wrapComponent = () => (
 );
 
 const mockNavigate = jest.fn();
-const mockSetState = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -25,17 +25,10 @@ jest.mock('react', () => {
   return {
     ...jest.requireActual('react'),
     memo: (x) => x,
-    useState: jest.fn((init) => [init, mockSetState]),
   };
 });
 describe('Test SelectDeviceType', () => {
   let tree;
-  beforeEach(() => {
-    mockNavigate.mockClear();
-  });
-  afterEach(() => {
-    mockSetState.mockClear();
-  });
 
   test('render SelectDeviceType', () => {
     act(() => {

package/src/screens/SmartIr/components/GroupButtonByType/ButtonsBottom.js

@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../../../../commons/Text';
+
+import { Colors } from '../../../../configs';
+
+import styles from './ButtonsBottomStyles';
+
+const ButtonsBottom = memo(
+  ({
+    onPressLeft,
+    onPressRight,
+    textLeft,
+    colorTextLeft = Colors.White,
+    colorTextRight = Colors.Gray8,
+    leftButtonStyle,
+    rightButtonStyle,
+    buttonStyle = {},
+    textRight,
+    type = 'H4',
+  }) => {
+    return (
+      <View style={styles.ButtonsBottom}>
+        <TouchableOpacity
+          style={[styles.LeftButton, buttonStyle, leftButtonStyle]}
+          onPress={onPressLeft}
+        >
+          <Text type={type} color={colorTextLeft}>
+            {textLeft}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.RightButton, buttonStyle, rightButtonStyle]}
+          onPress={onPressRight}
+        >
+          <Text type={type} color={colorTextRight}>
+            {textRight}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+);
+
+export { ButtonsBottom };

package/src/screens/SmartIr/components/GroupButtonByType/ButtonsBottomStyles.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+
+const flexCenter = {
+  justifyContent: 'center',
+  alignItems: 'center',
+};
+const styleButton = {
+  paddingVertical: 8,
+  paddingHorizontal: 32,
+  borderRadius: 30,
+  marginHorizontal: 8,
+};
+export default StyleSheet.create({
+  ButtonsBottom: {
+    marginTop: 16,
+    flexDirection: 'row',
+  },
+  LeftButton: {
+    backgroundColor: Colors.Primary,
+    ...styleButton,
+    ...flexCenter,
+  },
+  RightButton: {
+    backgroundColor: Colors.Gray1,
+    borderColor: Colors.Gray5,
+    borderWidth: 1,
+    ...styleButton,
+    ...flexCenter,
+  },
+});