@eohjsc/react-native-smart-city 0.2.23 → 0.2.26

package/src/navigations/UnitStack.js

@@ -23,6 +23,7 @@ import WaterQualityGuide from '../screens/WaterQualityGuide';
 import DeviceInfo from '../screens/DeviceInfo';
 import AddNewOneTap from '../screens/AddNewOneTap';
 import AddNewScriptAction from '../screens/AddNewScriptAction';
+import AddNewAutoSmart from '../screens/AddNewAutoSmart';
 import PlaybackCamera from '../screens/PlayBackCamera';
 import AllCamera from '../screens/AllCamera';
 import ManageAccessScreen from '../screens/ManageAccess';
@@ -30,6 +31,7 @@ import GuestInfo from '../screens/GuestInfo';
 import ScriptDetail from '../screens/ScriptDetail';
 import EditActionsList from '../screens/EditActionsList';
 import SelectDevice from '../screens/AddNewAction/SelectDevice';
+import SelectAction from '../screens/AddNewAction/SelectAction';
 
 import _ from 'lodash';
 
@@ -194,6 +196,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.AddNewAutoSmart}
+        component={AddNewAutoSmart}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.ScriptDetail}
         component={ScriptDetail}
@@ -220,6 +229,11 @@ export const UnitStack = memo((props) => {
         component={SelectDevice}
         options={{ headerShown: false }}
       />
+      <Stack.Screen
+        name={Route.SelectAction}
+        component={SelectAction}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/AQIGuide/__test__/AQIGuide.test.js

@@ -5,6 +5,14 @@ import { act, create } from 'react-test-renderer';
 import AQIGuide from '..';
 import Text from '../../../commons/Text';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <AQIGuide />
+  </SCProvider>
+);
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -29,7 +37,7 @@ describe('test AQIGuide', () => {
   test('render', async () => {
     let tree;
     act(() => {
-      tree = create(<AQIGuide />);
+      tree = create(wrapComponent());
     });
 
     const instance = tree.root;

package/src/screens/AQIGuide/index.js

@@ -21,9 +21,9 @@ import SvgVeryTired from '../../../assets/images/Feeling/very-tired.svg';
 import { useSCContextSelector } from '../../context';
 
 const AQIGuide = memo(() => {
+  const t = useTranslations();
   useTitleHeader(t('AQI Guide'));
   const language = useSCContextSelector((state) => state.language);
-  const t = useTranslations();
   const data = useMemo(
     () => ({
       titles: [

package/src/screens/ActivityLog/__test__/index.test.js

@@ -4,6 +4,8 @@ import { create } from 'react-test-renderer';
 import { act } from '@testing-library/react-hooks';
 import ActivityLog from '../';
 import { Constants } from '../../../configs';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 const mockUseSelector = jest.fn();
 const mockSetState = jest.fn();
@@ -34,41 +36,28 @@ jest.mock('@react-navigation/core', () => {
 
 jest.mock('axios');
 
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <ActivityLog />
+  </SCProvider>
+);
+
 describe('Test Activity log', () => {
   let tree;
   Date.now = jest.fn(() => new Date('2021-07-02T15:48:24.917932Z'));
-  const data = [
-    {
-      date: '02/07/2021',
-      data: [
-        {
-          id: 2,
-          action: 'Gara Up',
-          name: 'Kevin Love',
-          created_at: '2021-07-01T15:48:24.917932Z',
-        },
-        {
-          id: 1,
-          action: 'Gara Down',
-          name: 'Stephen Holloway',
-          created_at: '2021-07-01T15:48:24.791769Z',
-        },
-      ],
-    },
-  ];
 
   afterEach(() => {
     mockSetState.mockClear();
   });
 
-  it('render empty list', () => {
+  it('render empty list', async () => {
     useState.mockImplementationOnce((init) => [init, mockSetState]);
     useState.mockImplementationOnce((init) => [init, mockSetState]);
     useState.mockImplementationOnce((init) => [init, mockSetState]);
     useState.mockImplementationOnce((init) => [false, mockSetState]);
     useState.mockImplementationOnce((init) => [false, mockSetState]);
-    act(() => {
-      tree = create(<ActivityLog />);
+    await act(() => {
+      tree = create(wrapComponent());
     });
     const instance = tree.root;
     const SectionListElement = instance.findAllByType(SectionList);
@@ -81,28 +70,14 @@ describe('Test Activity log', () => {
     });
   });
 
-  it('render list', () => {
-    useState.mockImplementationOnce((init) => [data, mockSetState]);
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [init, mockSetState]);
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    useState.mockImplementationOnce((init) => [false, mockSetState]);
-    act(() => {
-      tree = create(<ActivityLog />);
-    });
-    const instance = tree.root;
-    const SectionListElement = instance.findAllByType(SectionList);
-    expect(SectionListElement).toHaveLength(1);
-  });
-
-  it('render ActivityIndicator', () => {
+  it('render ActivityIndicator', async () => {
     useState.mockImplementationOnce((init) => [[], mockSetState]);
     useState.mockImplementationOnce((init) => [true, mockSetState]);
     useState.mockImplementationOnce((init) => [init, mockSetState]);
     useState.mockImplementationOnce((init) => [false, mockSetState]);
     useState.mockImplementationOnce((init) => [false, mockSetState]);
-    act(() => {
-      tree = create(<ActivityLog />);
+    await act(() => {
+      tree = create(wrapComponent());
     });
     const instance = tree.root;
     const ActivityIndicatorElement = instance.findAllByType(ActivityIndicator);

package/src/screens/AddCommon/SelectSubUnit.js

@@ -56,8 +56,8 @@ const AddCommonSelectSubUnit = ({ route }) => {
     switch (addType) {
       case 'AddNewGateway':
         navigation.navigate(Routes.ScanChipQR, {
-          station: subUnits[selectedIndex].id,
-          unit_name: unit.name,
+          station: subUnits[selectedIndex]?.id,
+          unit_name: unit?.name,
           ...route.params,
         });
         break;

package/src/screens/AddCommon/__test__/SelectSubUnit.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import AddCommonSelectSubUnit from '../SelectSubUnit';
+import { ViewButtonBottom } from '../../../commons';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+jest.mock('axios');
+
+const mockedGoBack = jest.fn();
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => ({}),
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddCommonSelectSubUnit route={route} />
+  </SCProvider>
+);
+
+describe('Test SelectSubUnit', () => {
+  beforeEach(() => {
+    mockedNavigate.mockClear();
+    mockedGoBack.mockClear();
+  });
+  let tree;
+  test('test ViewButtonBottom leftClick', async () => {
+    const route = { params: { addType: 'AddNewGateway' } };
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    act(() => {
+      viewButtonBottom.props.onLeftClick();
+    });
+    expect(mockedGoBack).toHaveBeenCalled();
+  });
+
+  test('test ViewButtonBottom onRightClick', async () => {
+    const route = { params: { addType: 'AddNewGateway' } };
+    await act(async () => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const viewButtonBottom = instance.findByType(ViewButtonBottom);
+    act(() => {
+      viewButtonBottom.props.onRightClick();
+    });
+    expect(mockedNavigate).toHaveBeenCalled();
+  });
+});

package/src/screens/AddCommon/__test__/SelectUnit.test.js

@@ -6,6 +6,8 @@ import axios from 'axios';
 import AddCommonSelectUnit from '../SelectUnit';
 import Text from '../../../commons/Text';
 import { TESTID } from '../../../configs/Constants';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
 
 jest.mock('axios');
 
@@ -21,6 +23,12 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddCommonSelectUnit route={route} />
+  </SCProvider>
+);
+
 describe('Test SelectUnit container', () => {
   beforeEach(() => {
     mockedNavigate.mockClear();
@@ -29,17 +37,17 @@ describe('Test SelectUnit container', () => {
   let tree;
   const list_type = ['AddSubUnit', 'AddDevice', 'AddMember', 'AddLGDevice', ''];
   const result = [
-    'Thêm khu vực',
-    'Thêm thiết bị',
-    'Chọn một địa điểm',
-    'Chọn một địa điểm',
-    'Thêm khu vực',
+    'Add new sub-unit',
+    'Add new device',
+    'Select a unit',
+    'Select a unit',
+    'Add new sub-unit',
   ];
   list_type.forEach(function (type, i) {
     test(`create SelectUnit ${type} container`, () => {
       const route = { params: { addType: type } };
       act(() => {
-        tree = renderer.create(<AddCommonSelectUnit route={route} />);
+        tree = renderer.create(wrapComponent(route));
       });
       const instance = tree.root;
       const button = instance.findAllByType(TouchableOpacity);
@@ -76,7 +84,7 @@ describe('Test SelectUnit container', () => {
       });
 
       await act(async () => {
-        tree = renderer.create(<AddCommonSelectUnit route={route} />);
+        tree = renderer.create(wrapComponent(route));
       });
 
       const instance = tree.root;
@@ -149,7 +157,7 @@ describe('test single SelectUnit', () => {
     });
 
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -190,7 +198,7 @@ describe('test single SelectUnit', () => {
     });
 
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;
@@ -209,7 +217,7 @@ describe('test single SelectUnit', () => {
   test('click goBack', async () => {
     const route = { params: { addType: 'AddSubUnit' } };
     await act(async () => {
-      tree = renderer.create(<AddCommonSelectUnit route={route} />);
+      tree = renderer.create(wrapComponent(route));
     });
 
     const instance = tree.root;

package/src/screens/AddNewAction/Device/__test__/index.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { TouchableWithoutFeedback } from 'react-native';
+
+import Device from '..';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+
+const wrapComponent = (svgMain, sensor, title, isSelectDevice, onPress) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Device
+      svgMain={svgMain}
+      title={title}
+      sensor={sensor}
+      isSelectDevice={isSelectDevice}
+      onPress={onPress}
+    />
+  </SCProvider>
+);
+
+describe('Test SelectDevice', () => {
+  let tree;
+
+  test('onPressDevice', () => {
+    const sensor = { id: 1, name: 'sensor', icon_kit: 'icon_kit' };
+    const mockFuntion = jest.fn();
+    act(() => {
+      tree = renderer.create(
+        wrapComponent(sensor.icon_kit, sensor, sensor.name, true, mockFuntion)
+      );
+    });
+
+    const instance = tree.root;
+    const touchableWithoutFeedback = instance.findByType(
+      TouchableWithoutFeedback
+    );
+    act(() => {
+      touchableWithoutFeedback.props.onPress();
+    });
+    expect(mockFuntion).toHaveBeenCalledWith(sensor);
+  });
+});

package/src/screens/AddNewAction/SelectAction.js

@@ -0,0 +1,152 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useState,
+  useContext,
+} from 'react';
+import { ScrollView, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import { HeaderCustom } from '../../commons/Header';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Text from '../../commons/Text';
+import ActionTemplate from '../../commons/ActionTemplate';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+import Routes from '../../utils/Route';
+import styles from './Styles/SelectActionStyles';
+import moment from 'moment';
+
+const SelectAction = memo(({ route }) => {
+  const t = useTranslations();
+  const { navigate } = useNavigation();
+  const { unit, device, stationName, automateId, scriptName } = route.params;
+  const { setAction } = useContext(SCContext);
+  const [data, setData] = useState([]);
+  const [actions, setActions] = useState({
+    name: '',
+    action: '',
+  });
+
+  const fetchData = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SENSOR.DISPLAY_ACTIONS(device.id),
+      {},
+      true
+    );
+    if (success) {
+      setData(data);
+    }
+  }, [device.id]);
+
+  const onSave = useCallback(async () => {
+    if (automateId) {
+      const { success } = await axiosPost(
+        API.AUTOMATE.ADD_SCRIPT_ACTION(automateId),
+        {
+          action: actions.action,
+        }
+      );
+      if (success) {
+        navigate(Routes.ScriptDetail, {
+          id: automateId,
+          name: scriptName,
+          havePermission: true,
+          unit,
+          dateNow: moment().valueOf(), // TODO will remove dateNow later
+        });
+      }
+    } else {
+      setAction(Action.LIST_ACTION, {
+        action: actions.action,
+        unit_name: unit.name,
+        action_name: actions.name,
+        sensor_name: device.name,
+        sensor_icon_kit: device.icon_kit,
+        station_name: stationName,
+      });
+      navigate(Routes.AddNewScriptAction, {
+        automateType: 'one-tap',
+        name: scriptName,
+        unit,
+      });
+    }
+  }, [
+    actions.action,
+    actions.name,
+    automateId,
+    device.icon_kit,
+    device.name,
+    navigate,
+    scriptName,
+    setAction,
+    stationName,
+    unit,
+  ]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleOnSelectAction = (action) => {
+    setActions({ ...action });
+  };
+
+  const RenderActionItem = ({ data }) => {
+    const actionTemplate = [];
+
+    data.forEach((item) => {
+      switch (item.template) {
+        case 'on_off_button_action_template':
+        case 'one_button_action_template':
+        case 'three_button_action_template':
+          actionTemplate.push(item);
+          break;
+      }
+    });
+
+    return (
+      <>
+        {actionTemplate.length > 0 && (
+          <ActionTemplate
+            action={actions}
+            data={actionTemplate}
+            onSelectAction={handleOnSelectAction}
+          />
+        )}
+      </>
+    );
+  };
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom isShowClose />
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t('set_up {name}', {
+            name: device.name,
+          })}
+        </Text>
+
+        <RenderActionItem data={data} testID={TESTID.ACTION_ITEM} />
+      </ScrollView>
+
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('save')}
+        onPressMain={onSave}
+        typeMain={actions?.action ? 'primary' : 'disabled'}
+      />
+    </View>
+  );
+});
+
+export default SelectAction;

package/src/screens/AddNewAction/SelectDevice.js

@@ -1,6 +1,8 @@
 import React, { memo, useState, useEffect, useCallback } from 'react';
 import { ScrollView, View } from 'react-native';
-import { t } from 'i18n-js';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import Text from '../../commons/Text';
 import NavBar from '../../commons/NavBar';
 import { fetchWithCache } from '../../utils/Apis/axios';
@@ -8,27 +10,30 @@ import { API } from '../../configs';
 import Device from './Device';
 import BottomButtonView from '../../commons/BottomButtonView';
 import { HeaderCustom } from '../../commons/Header';
+import Routes from '../../utils/Route';
 import styles from './Styles/SelectDeviceStyles';
 
 const SelectDevice = memo(({ route }) => {
-  const { unitId } = route.params;
+  const t = useTranslations();
+  const { unit, automateId, scriptName } = route.params;
 
   const [listStation, setListStation] = useState([]);
   const [listMenuItem, setListMenuItem] = useState([]);
   const [indexStation, setIndexStation] = useState(0);
   const [station, setStation] = useState([]);
-  const [device, setDevice] = useState(-1);
+  const [selectedDevice, setSelectedDevice] = useState();
+  const { navigate } = useNavigation();
 
   const onSnapToItem = useCallback(
     (item, index) => {
       setIndexStation(index);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [unitId, indexStation]
+    [unit.id, indexStation]
   );
 
   const fetchDetails = useCallback(async () => {
-    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unitId), {}, (response) => {
+    await fetchWithCache(API.UNIT.DEVICE_CONTROL(unit.id), {}, (response) => {
       const { success, data } = response;
 
       if (success) {
@@ -42,22 +47,28 @@ const SelectDevice = memo(({ route }) => {
         setListStation(listMenu.concat([{ text: '' }]));
       }
     });
-  }, [unitId]);
+  }, [unit.id]);
 
   useEffect(() => {
     fetchDetails();
   }, [fetchDetails]);
 
   const onPressDevice = (sensor) => {
-    if (device === sensor.id) {
-      setDevice(-1);
+    if (selectedDevice && selectedDevice.id === sensor.id) {
+      setSelectedDevice(false);
     } else {
-      setDevice(sensor.id);
+      setSelectedDevice(sensor);
     }
   };
 
   const onPressContinue = () => {
-    alert(t('feature_under_development'));
+    navigate(Routes.SelectAction, {
+      unit,
+      device: selectedDevice,
+      automateId: automateId,
+      stationName: station[indexStation]?.name,
+      scriptName,
+    });
   };
 
   return (
@@ -87,7 +98,9 @@ const SelectDevice = memo(({ route }) => {
                 svgMain={sensor.icon || 'sensor'}
                 title={sensor.name}
                 sensor={sensor}
-                isSelectDevice={device === sensor.id}
+                isSelectDevice={
+                  selectedDevice && selectedDevice.id === sensor.id
+                }
                 onPress={onPressDevice}
               />
             ))}
@@ -98,6 +111,7 @@ const SelectDevice = memo(({ route }) => {
         style={styles.bottomButtonView}
         mainTitle={t('continue')}
         onPressMain={onPressContinue}
+        typeMain={selectedDevice ? 'primary' : 'disabled'}
       />
     </View>
   );

package/src/screens/AddNewAction/Styles/SelectActionStyles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  title: {
+    marginHorizontal: 16,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});