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

package/src/commons/Sharing/__test__/MemberList.test.js

@@ -3,6 +3,19 @@ import renderer, { act } from 'react-test-renderer';
 import MemberList from '../MemberList';
 import RowMember from '../RowMember';
 import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataMember, ownerId, currentUserId, mockFunc) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MemberList
+      dataMember={dataMember}
+      ownerId={ownerId}
+      currentUserId={currentUserId}
+      onPressRemove={mockFunc}
+    />
+  </SCProvider>
+);
 
 describe('MemberList', () => {
   let tree;
@@ -10,14 +23,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={1}
-          currentUserId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 1, 2, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -26,13 +32,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember !== ownerId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, null, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -41,14 +41,7 @@ describe('MemberList', () => {
   test('MemberList snapshot id dataMember === currentUserId', () => {
     const dataMember = [{ id: 1, name: 'CEO' }];
     act(() => {
-      tree = renderer.create(
-        <MemberList
-          dataMember={dataMember}
-          ownerId={2}
-          currentUserId={1}
-          onPressRemove={mockFunc}
-        />
-      );
+      tree = renderer.create(wrapComponent(dataMember, 2, 1, mockFunc));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(Text);
@@ -56,9 +49,8 @@ describe('MemberList', () => {
   });
   test('MemberList dataMember null', () => {
     const dataMember = [];
-    const component = <MemberList dataMember={dataMember} />;
     act(() => {
-      tree = renderer.create(component);
+      tree = renderer.create(wrapComponent(dataMember));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(RowMember);

package/src/commons/Sharing/__test__/StationDevicePermission.test.js

@@ -3,10 +3,18 @@ import renderer, { act } from 'react-test-renderer';
 import StationDevicePermissions from '../StationDevicePermissions';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (dataStation) => (
+  <SCProvider initState={mockSCStore({})}>
+    <StationDevicePermissions dataStation={dataStation} />
+  </SCProvider>
+);
 
 describe('StationDevicePermission', () => {
   let tree;
-  test('StationDevicePermission', () => {
+  test('StationDevicePermission', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -19,9 +27,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
@@ -35,7 +42,7 @@ describe('StationDevicePermission', () => {
     iconOutline = instance.findAllByType(IconOutline);
     expect(iconOutline[0].props.name).toEqual('up');
   });
-  test('StationDevicePermission  icon: barrier', () => {
+  test('StationDevicePermission  icon: barrier', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -48,15 +55,14 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
     const instance = tree.root;
     const textInputs = instance.findAllByType(TouchableOpacity);
     expect(textInputs.length).toBe(5);
   });
-  test('StationDevicePermission  icon: sensor', () => {
+  test('StationDevicePermission  icon: sensor', async () => {
     const dataStation = {
       name: 'test',
       sensors: [
@@ -68,9 +74,8 @@ describe('StationDevicePermission', () => {
         },
       ],
     };
-    const component = <StationDevicePermissions dataStation={dataStation} />;
-    act(() => {
-      tree = renderer.create(component);
+    await act(() => {
+      tree = renderer.create(wrapComponent(dataStation));
     });
 
     const instance = tree.root;

package/src/commons/Sharing/__test__/WrapHeaderScrollable.test.js

@@ -6,15 +6,6 @@ import WrapHeaderScrollable from '../WrapHeaderScrollable';
 describe('WrapHeaderScrollable', () => {
   let tree;
 
-  test('WrapHeaderScrollable snapshot', () => {
-    const loadMore = jest.fn();
-    const component = <WrapHeaderScrollable onLoadMore={loadMore} />;
-    act(() => {
-      tree = renderer.create(component);
-    });
-    expect(tree.toJSON()).toMatchSnapshot();
-  });
-
   test('WrapHeaderScrollable scroll to end', () => {
     const loadMore = jest.fn();
     act(() => {

package/src/commons/SubUnit/OneTap/ItemOneTap.js

@@ -0,0 +1,101 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
+import moment from 'moment';
+import Text from '../../Text';
+import { API, Colors } from '../../../configs';
+import OneTap from '../../../../assets/images/OneTap.svg';
+import CheckCircle from '../../../../assets/images/CheckCircle.svg';
+import FImage from '../../FImage';
+import { timeDifference } from '../../../utils/Converter/time';
+import styles from './ItemOneTapStyles.js';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../utils/Route';
+import { useGetIdUser } from '../../../hooks/Common';
+import { AUTOMATE_TYPE, TESTID } from '../../../configs/Constants';
+
+const ItemOneTap = memo(
+  ({ isOwner, automate, unit, wrapSyles, onPressItem }) => {
+    const { navigate } = useNavigation();
+    const { id, type, user, script, activate_at } = automate;
+    const t = useTranslations();
+    const idUser = useGetIdUser();
+
+    const goToDetail = useCallback(() => {
+      navigate(Routes.ScriptDetail, {
+        id,
+        name: script?.name,
+        type: type,
+        havePermission: isOwner || user === idUser,
+        unit,
+      });
+    }, [isOwner, user, idUser, navigate, id, script, type, unit]);
+
+    const handleScriptAction = useCallback(async () => {
+      const { success } = await axiosPost(API.AUTOMATE.ACTION_ONE_TAP(id));
+      if (success) {
+        ToastBottomHelper.success(t('Activated successfully.'));
+      } else {
+        ToastBottomHelper.error(t('Activation failed.'));
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    const displayIcon = () => {
+      const iconKit = script?.icon_kit;
+      return iconKit ? (
+        <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
+      ) : (
+        <OneTap />
+      );
+    };
+    const activateAt = activate_at
+      ? timeDifference(new Date(), moment(activate_at), true)
+      : null;
+    return (
+      <TouchableWithoutFeedback onPress={onPressItem || goToDetail}>
+        <View style={[styles.container, wrapSyles]}>
+          <View style={styles.boxIcon}>
+            {displayIcon()}
+            {type === AUTOMATE_TYPE.ONE_TAP && (
+              <TouchableOpacity
+                testID={TESTID.AUTOMATE_SCRIPT_ACTION}
+                onPress={handleScriptAction}
+              >
+                <CheckCircle />
+              </TouchableOpacity>
+            )}
+          </View>
+          <TouchableOpacity testID={TESTID.GO_DETAIL} onPress={goToDetail}>
+            <Text
+              numberOfLines={1}
+              semibold
+              size={14}
+              color={Colors.Gray9}
+              type="Body"
+            >
+              {script?.name}
+            </Text>
+            <View style={styles.descriptionContainer}>
+              <Text
+                numberOfLines={1}
+                semibold
+                size={12}
+                color={Colors.Gray8}
+                type="Label"
+              >
+                {activateAt && t('activated_time', { time: activateAt })}
+              </Text>
+              <IconOutline name="right" size={12} />
+            </View>
+          </TouchableOpacity>
+        </View>
+      </TouchableWithoutFeedback>
+    );
+  }
+);
+
+export default ItemOneTap;

package/src/commons/SubUnit/OneTap/ItemOneTapStyles.js

@@ -0,0 +1,41 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 106;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowColor: Colors.Shadow,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+    elevation: 4,
+    width: widthItem,
+    height: heightItem,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  boxIcon: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  descriptionContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+});

package/src/commons/SubUnit/OneTap/OneTapStyles.js

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Device } from '../../../configs';
+
+export default StyleSheet.create({
+  boxImage: {
+    flexDirection: 'row',
+    marginTop: 8,
+    marginBottom: 8,
+    overflow: 'hidden',
+    width: Device.screenWidth - 32,
+    alignSelf: 'center',
+  },
+  image: {
+    width: '100%',
+    height: 160,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 16,
+    justifyContent: 'space-between',
+  },
+  noShadow: {
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  viewAll: {
+    color: Colors.Orange,
+  },
+  UnitsHeading: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 3,
+  },
+});

package/src/commons/SubUnit/OneTap/__test__/SubUnitAutomate.test.js

@@ -0,0 +1,195 @@
+import axios from 'axios';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Toast from 'react-native-toast-message';
+import { act, create } from 'react-test-renderer';
+import SubUnitAutomate from '..';
+import { TESTID } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Routes from '../../../../utils/Route';
+
+const wrapComponent = (data) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SubUnitAutomate {...data} />
+  </SCProvider>
+);
+
+jest.mock('react-redux', () => {
+  return {
+    ...jest.requireActual('react-redux'),
+    useSelector: () => 'vi',
+  };
+});
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('axios');
+
+let tree;
+let data = {
+  isOwner: true,
+  type: 'one_tap',
+  automates: [
+    {
+      id: 1,
+      user: 6,
+      type: 'one_tap',
+      activate_at: '2021-09-17T05:30:00Z',
+      script: {
+        name: 'Joshua Ray',
+        icon: '',
+        icon_kit: '',
+      },
+    },
+  ],
+};
+
+describe('test Item', () => {
+  beforeEach(() => {
+    axios.post.mockClear();
+    mockedNavigate.mockClear();
+  });
+  test('render SubUnitAutomate isOwner', async () => {
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const instance = tree.root;
+    const item = instance.findAll(
+      (el) => el.props.testID === TESTID.PLUS && el.type === TouchableOpacity
+    );
+
+    expect(item).toHaveLength(1);
+    await act(async () => {
+      await item[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.AddNewOneTap, {
+      type: 'one_tap',
+    });
+    mockedNavigate.mockClear();
+
+    const goDetail = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+    );
+    expect(goDetail).toHaveLength(1);
+    await act(async () => {
+      await goDetail[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      havePermission: true,
+      id: 1,
+      name: 'Joshua Ray',
+      type: 'one_tap',
+    });
+
+    const handleScriptAction = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(handleScriptAction).toHaveLength(1);
+    await act(async () => {
+      await handleScriptAction[0].props.onPress();
+    });
+    expect(Toast.show).toBeCalledWith({
+      type: 'success',
+      position: 'bottom',
+      text1: 'Activated successfully.',
+      visibilityTime: 1000,
+    });
+  });
+
+  test('render SubUnitAutomate not is owner handleScriptAction fail', async () => {
+    data.isOwner = false;
+    const response = {
+      status: 400,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const handleScriptAction = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.AUTOMATE_SCRIPT_ACTION &&
+        el.type === TouchableOpacity
+    );
+    expect(handleScriptAction).toHaveLength(1);
+    await act(async () => {
+      await handleScriptAction[0].props.onPress();
+    });
+    expect(Toast.show).toBeCalledWith({
+      type: 'error',
+      position: 'bottom',
+      text1: 'Activation failed.',
+      visibilityTime: 1000,
+    });
+  });
+
+  test('render SubUnitAutomate script value_change', async () => {
+    data.isOwner = false;
+    data.type = 'value_change';
+    data.automates = [
+      {
+        id: 1,
+        user: 6,
+        type: 'value_change',
+        activate_at: null,
+        script: {
+          name: 'Rain',
+          icon: '',
+          icon_kit: 'https://www.figma.com/',
+        },
+      },
+    ];
+    const response = {
+      status: 200,
+    };
+
+    axios.post.mockImplementation(async () => {
+      return response;
+    });
+
+    await act(async () => {
+      tree = await create(wrapComponent(data));
+    });
+
+    const goDetail = tree.root.findAll(
+      (el) =>
+        el.props.testID === TESTID.GO_DETAIL && el.type === TouchableOpacity
+    );
+    expect(goDetail).toHaveLength(1);
+    await act(async () => {
+      await goDetail[0].props.onPress();
+    });
+    expect(mockedNavigate).toHaveBeenCalledWith(Routes.ScriptDetail, {
+      havePermission: false,
+      id: 1,
+      name: 'Rain',
+      type: 'value_change',
+      unit: undefined,
+    });
+  });
+});

package/src/commons/SubUnit/OneTap/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View } from 'react-native';
+import styles from './OneTapStyles.js';
+import { Section } from '../..';
+
+import ItemAddNew from '../../Device/ItemAddNew';
+import ItemOneTap from './ItemOneTap';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { useNavigation } from '@react-navigation/native';
+import Routes from '../../../utils/Route/index.js';
+import { AUTOMATE_TYPE } from '../../../configs/Constants';
+
+const SubUnitAutomate = ({ isOwner, type, automates, unit, isScript }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const handleOnAddNew = () => {
+    switch (type) {
+      case AUTOMATE_TYPE.ONE_TAP:
+        navigate(Routes.AddNewOneTap, { type: type, unit });
+        break;
+      case AUTOMATE_TYPE.VALUE_CHANGE:
+        navigate(Routes.AddNewAutoSmart, { type, unit, isScript });
+        break;
+    }
+  };
+  return (
+    <Section style={styles.noShadow}>
+      <View style={styles.boxDevices}>
+        {!!automates.length &&
+          automates.map((item) => (
+            <ItemOneTap isOwner={isOwner} automate={item} unit={unit} />
+          ))}
+        <ItemAddNew title={t('add_new')} onAddNew={handleOnAddNew} />
+      </View>
+    </Section>
+  );
+};
+
+export default SubUnitAutomate;

package/src/commons/SubUnit/ShortDetail.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { t } from 'i18n-js';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Images, Device } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { SubUnitName, TESTID } from '../../configs/Constants';
 import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
@@ -19,6 +19,7 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 );
 
 const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
+  const t = useTranslations();
   const { navigate } = useNavigation();
   const renderCamera = () => {
     if (station?.camera) {
@@ -74,9 +75,13 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
     }
   };
 
-  const itemAddNewTitle = station.isFavorites
-    ? t('add_to_favorites')
-    : t('add_new_device');
+  const itemAddNewTitle = t(
+    station?.isFavorites
+      ? 'add_to_favorites'
+      : station?.name === SubUnitName.scenario
+      ? 'add_script'
+      : 'add_new_device'
+  );
 
   return (
     <Section style={styles.noShadow}>
@@ -89,7 +94,6 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
       )}
 
       <View style={styles.boxDevices}>
-        <ItemAddNew title={itemAddNewTitle} onAddNew={handleOnAddNew} />
         {!!station.sensors &&
           station.sensors.map((sensor, index) => (
             <ItemDevice
@@ -107,6 +111,7 @@ const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
               isGGHomeConnected={isGGHomeConnected}
             />
           ))}
+        <ItemAddNew title={itemAddNewTitle} onAddNew={handleOnAddNew} />
       </View>
     </Section>
   );