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

package/src/commons/Unit/__test__/SharedUnit.test.js

@@ -0,0 +1,330 @@
+import axios from 'axios';
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import moment from 'moment';
+import { useNavigation } from '@react-navigation/native';
+
+import SharedUnit from '../SharedUnit';
+import { TESTID } from '../../../configs/Constants';
+import { API } from '../../../configs';
+import Routes from '../../../utils/Route';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+jest.mock('axios');
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+const wrapComponent = (item, navigation, isOptions, mockedRenewItem) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SharedUnit
+      item={item}
+      navigation={navigation}
+      isOptions={isOptions}
+      renewItem={mockedRenewItem}
+    />
+  </SCProvider>
+);
+
+describe('Test SharedUnit', () => {
+  let tree, item, unit;
+
+  beforeEach(() => {
+    axios.post.mockClear();
+
+    unit = {
+      background: '',
+      icon: '',
+      id: 3,
+      name: 'name',
+      owner_name: 'owner_name',
+      short_summaries: [],
+    };
+
+    item = {
+      created_at: moment('2021-01-26T03:00:00.677514Z'),
+      id: 69,
+      is_pin: false,
+      is_star: false,
+      unit: unit,
+      user: 1,
+    };
+  });
+
+  test('test create SharedUnit unit is not pin, not star', async () => {
+    const navigation = useNavigation();
+
+    await act(async () => {
+      tree = await create(wrapComponent(item, navigation));
+    });
+    const instance = tree.root;
+    const touchSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.TOUCH_SHARED_UNIT + '-69'
+    );
+    act(() => {
+      touchSharedUnit.props.onPress();
+    });
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: 3,
+        unitData: unit,
+      },
+    });
+
+    const iconRemovePinSharedUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+    );
+    expect(iconRemovePinSharedUnit).toHaveLength(0);
+
+    const iconAddPinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+    );
+    act(() => {
+      iconAddPinSharedUnit.props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.PIN_UNIT(3));
+
+    const iconAddStarSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+    );
+    act(() => {
+      iconAddStarSharedUnit.props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.STAR_UNIT(3));
+  });
+
+  test('test create SharedUnit unit without unit owner', async () => {
+    const navigation = useNavigation();
+    delete unit.owner_name;
+
+    await act(async () => {
+      tree = await create(wrapComponent(item, navigation));
+    });
+    const instance = tree.root;
+    const ownerName = instance.findAll(
+      (el) => el.props.testID === TESTID.SHARED_UNIT_OWN_BY
+    );
+
+    expect(ownerName).toHaveLength(0);
+  });
+
+  test('test create SharedUnit unit isOption false', async () => {
+    const navigation = useNavigation();
+
+    await act(async () => {
+      tree = await create(wrapComponent(item, navigation, false));
+    });
+    const instance = tree.root;
+
+    const iconAddPinSharedUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+    );
+    const iconStarUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+    );
+
+    expect(iconAddPinSharedUnit).toHaveLength(0);
+    expect(iconStarUnit).toHaveLength(0);
+  });
+
+  test('test create SharedUnit unit is pin, is star', async () => {
+    const navigation = useNavigation();
+    item.is_pin = true;
+    item.is_star = true;
+
+    await act(async () => {
+      tree = await create(wrapComponent(item, navigation));
+    });
+    const instance = tree.root;
+    const iconRemovePinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+    );
+    act(() => {
+      iconRemovePinSharedUnit.props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(3));
+
+    const iconRemoveStarSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+    );
+    act(() => {
+      iconRemoveStarSharedUnit.props.onPress();
+    });
+    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNSTAR_UNIT(3));
+  });
+
+  test('test pin SharedUnit success', async () => {
+    const navigation = useNavigation();
+    const mockedRenewItem = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent(item, navigation, true, mockedRenewItem)
+      );
+    });
+    const instance = tree.root;
+
+    const response = {
+      success: true,
+      status: 200,
+    };
+
+    jest.spyOn(axios, 'post').mockImplementation(() => {
+      return response;
+    });
+
+    const iconAddPinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconStarUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+    );
+
+    await act(async () => {
+      await iconAddPinSharedUnit.props.onPress();
+      await iconStarUnit.props.onPress();
+    });
+
+    expect(mockedRenewItem).toHaveBeenCalledTimes(2);
+  });
+
+  test('test pin SharedUnit unsuccess', async () => {
+    const navigation = useNavigation();
+    const mockedRenewItem = jest.fn();
+    await act(async () => {
+      tree = await create(
+        wrapComponent(item, navigation, true, mockedRenewItem)
+      );
+    });
+    const instance = tree.root;
+
+    const response = {
+      success: false,
+      status: 500,
+    };
+
+    jest.spyOn(axios, 'post').mockImplementation(() => {
+      return response;
+    });
+
+    const iconAddPinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconStarUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+    );
+
+    await act(async () => {
+      await iconAddPinSharedUnit.props.onPress();
+      await iconStarUnit.props.onPress();
+    });
+
+    const iconRemovePinSharedUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconRemoveStartUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+    );
+
+    expect(mockedRenewItem).toHaveBeenCalledTimes(0);
+    expect(iconRemovePinSharedUnit).toHaveLength(0);
+    expect(iconRemoveStartUnit).toHaveLength(0);
+  });
+
+  test('test unpin SharedUnit success', async () => {
+    const navigation = useNavigation();
+    item.is_pin = true;
+    item.is_star = true;
+    const mockedRenewItem = jest.fn();
+
+    await act(async () => {
+      tree = await create(
+        wrapComponent(item, navigation, true, mockedRenewItem)
+      );
+    });
+    const instance = tree.root;
+
+    const response = {
+      success: true,
+      status: 200,
+    };
+
+    jest.spyOn(axios, 'post').mockImplementation(() => {
+      return response;
+    });
+
+    const iconRemovePinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconRemoveStartUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+    );
+
+    await act(async () => {
+      await iconRemovePinSharedUnit.props.onPress();
+      await iconRemoveStartUnit.props.onPress();
+    });
+
+    expect(mockedRenewItem).toHaveBeenCalledTimes(2);
+  });
+
+  test('test unpin SharedUnit unsuccess', async () => {
+    const navigation = useNavigation();
+    item.is_pin = true;
+    item.is_star = true;
+    const mockedRenewItem = jest.fn();
+
+    await act(async () => {
+      tree = await create(
+        wrapComponent(item, navigation, true, mockedRenewItem)
+      );
+    });
+    const instance = tree.root;
+
+    const response = {
+      success: false,
+      status: 500,
+    };
+
+    jest.spyOn(axios, 'post').mockImplementation(() => {
+      return response;
+    });
+
+    const iconRemovePinSharedUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconRemoveStartUnit = instance.find(
+      (el) => el.props.testID === TESTID.ICON_REMOVE_STAR_SHARED_UNIT + '-69'
+    );
+
+    await act(async () => {
+      await iconRemovePinSharedUnit.props.onPress();
+      await iconRemoveStartUnit.props.onPress();
+    });
+
+    const iconAddPinSharedUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_ADD_PIN_SHARED_UNIT + '-69'
+    );
+
+    const iconStarUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ICON_ADD_STAR_SHARED_UNIT + '-69'
+    );
+
+    expect(mockedRenewItem).toHaveBeenCalledTimes(0);
+    expect(iconAddPinSharedUnit).toHaveLength(0);
+    expect(iconStarUnit).toHaveLength(0);
+  });
+});

package/src/commons/WheelDateTimePicker/index.js

@@ -10,6 +10,7 @@ import ViewButtonBottom from '../ViewButtonBottom';
 
 import { getDateData } from '../../utils/Converter/time';
 import styles from './styles';
+import { TESTID } from '../../configs/Constants';
 
 const formatNumber = (number) => {
   return {
@@ -26,6 +27,7 @@ const WheelDateTimePicker = ({
   isVisible,
   defaultValue,
   onPicked,
+  onCancel,
   onHide,
 }) => {
   const t = useTranslations();
@@ -35,7 +37,7 @@ const WheelDateTimePicker = ({
 
   const { dateData, indexInitialDate, indexInitialHour, indexInitialMinute } =
     useMemo(() => {
-      const date = defaultValue ? moment(defaultValue) : moment();
+      const date = defaultValue ? moment(defaultValue) : moment().second(0);
       const maximumDate = moment(date).add(15, 'days');
       const minimumDate = moment(date).add(-15, 'days');
       const [dateData, indexDate] =
@@ -77,17 +79,17 @@ const WheelDateTimePicker = ({
     [setMinuteSelected]
   );
 
-  const onCancel = useCallback(() => {
-    onHide && onHide();
-  }, [onHide]);
+  const onPickerCancel = useCallback(() => {
+    onCancel && onCancel();
+  }, [onCancel]);
 
   const onDone = useCallback(() => {
     const newDateTime = moment(dateSelected);
     newDateTime.hour(hourSelected);
     newDateTime.minute(minuteSelected);
     onPicked && onPicked(newDateTime.valueOf());
-    onHide && onHide();
-  }, [dateSelected, hourSelected, minuteSelected, onHide, onPicked]);
+    onCancel && onCancel();
+  }, [dateSelected, hourSelected, minuteSelected, onCancel, onPicked]);
 
   const title = useMemo(() => {
     if (mode === 'time') {
@@ -97,7 +99,12 @@ const WheelDateTimePicker = ({
   }, [t, mode]);
 
   return (
-    <BottomSheet isVisible={isVisible} onHide={onCancel} title={title}>
+    <BottomSheet
+      isVisible={isVisible}
+      onBackdropPress={onPickerCancel}
+      onHide={onHide}
+      title={title}
+    >
       {mode === 'time' ? (
         <View style={styles.container}>
           <Picker
@@ -149,9 +156,10 @@ const WheelDateTimePicker = ({
       )}
       <ViewButtonBottom
         leftTitle={t('cancel')}
-        onLeftClick={onCancel}
+        onLeftClick={onPickerCancel}
         rightTitle={t('done')}
         onRightClick={onDone}
+        testIDPrefix={TESTID.WHEEL_DATE_TIME_PICKER}
       />
     </BottomSheet>
   );

package/src/commons/index.js

@@ -14,6 +14,7 @@ import MenuActionAddnew from './MenuActionAddnew';
 import MenuActionList from './MenuActionList';
 import RadioCircle from './RadioCircle';
 import { CircleButton } from './CircleButton';
+import HorizontalPicker from './HorizontalPicker';
 
 export {
   ButtonPopup,
@@ -32,4 +33,5 @@ export {
   MenuActionList,
   RadioCircle,
   CircleButton,
+  HorizontalPicker,
 };

package/src/configs/API.js

@@ -85,7 +85,7 @@ const API = {
   AUTOMATE: {
     ACTION_ONE_TAP: (id) =>
       SCConfig.apiRoot + `/property_manager/automate/${id}/action_one_tap/`,
-    ONE_TAP_DETAIL: (id) =>
+    SCRIPT: (id) =>
       SCConfig.apiRoot + `/property_manager/automate/${id}/script/`,
     ORDER_SCRIPT_ACTION: (id) =>
       SCConfig.apiRoot +
@@ -96,6 +96,10 @@ const API = {
     ADD_SCRIPT_ACTION: (id) =>
       SCConfig.apiRoot + `/property_manager/automate/${id}/add_script_action/`,
     CREATE_AUTOMATE: () => SCConfig.apiRoot + '/property_manager/automate/',
+    GET_AUTOMATES: () => SCConfig.apiRoot + '/accounts/automates/',
+    GET_ALL_UNITS: () => SCConfig.apiRoot + '/property_manager/units/all_unit/',
+    GET_SENSOR_CONFIG: (id) =>
+      SCConfig.apiRoot + `/property_manager/sensors/${id}/display_configs/`,
   },
   GOOGLE_HOME: {
     CHECK_SEND_EMAIL: () =>

package/src/configs/Constants.js

@@ -1,7 +1,7 @@
 import { Platform, Dimensions, StatusBar } from 'react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
 import OneTap from '../../assets/images/OneTap.svg';
-import WeatherChange from '../../assets/images/WeatherChange.svg';
+import ValueChange from '../../assets/images/ValueChange.svg';
 import Schedule from '../../assets/images/Schedule.svg';
 
 const X_WIDTH = 375;
@@ -93,6 +93,11 @@ export const AUTOMATE_TYPE = {
   SCHEDULE: 'schedule',
 };
 
+export const AUTOMATE_SELECT = {
+  SELECT_DEVICES: 'select_devices',
+  SELECT_SENSOR: 'select_sensor',
+};
+
 export const AUTOMATES = {
   one_tap: {
     value: AUTOMATE_TYPE.ONE_TAP,
@@ -102,9 +107,9 @@ export const AUTOMATES = {
   },
   value_change: {
     value: AUTOMATE_TYPE.VALUE_CHANGE,
-    title: 'When weather change',
+    title: 'Value change',
     explanation: 'Short Explanation',
-    icon: WeatherChange,
+    icon: ValueChange,
   },
   schedule: {
     value: AUTOMATE_TYPE.SCHEDULE,
@@ -521,4 +526,14 @@ export const TESTID = {
   // Add New Device LG
   ADD_NEW_DEVICE_LG_ADD: 'ADD_NEW_DEVICE_LG_ADD',
   ADD_NEW_DEVICE_LG_THEN_SELECT: 'ADD_NEW_DEVICE_LG_THEN_SELECT',
+
+  // WheelDateTimePicker
+  WHEEL_DATE_TIME_PICKER: 'WHEEL_DATE_TIME_PICKER',
+
+  // GuestInfo
+  SAVE_ACCESS_SCHEDULE: 'SAVE_ACCESS_SCHEDULE',
+  ACCESS_SCHEDULE_RADIO_BUTTON: 'ACCESS_SCHEDULE_RADIO_BUTTON',
+  ACCESS_SCHEDULE_SHEET: 'ACCESS_SCHEDULE_SHEET',
+  RECURRING_TEXT_BUTTON: 'RECURRING_TEXT_BUTTON',
+  TEMPORARY_TEXT_BUTTON: 'TEMPORARY_TEXT_BUTTON',
 };

package/src/configs/Theme.js

@@ -85,4 +85,24 @@ export default StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
+  menuIcon: {
+    paddingLeft: 16,
+    height: '100%',
+    justifyContent: 'center',
+  },
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  shadowView: {
+    shadowColor: Colors.Gray7,
+    backgroundColor: Colors.White,
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 3,
+    elevation: 3,
+  },
 });

package/src/context/SCContext.tsx

@@ -29,10 +29,10 @@ type Reducer<StateData, Action> = (
   action: Action
 ) => StateData;
 
-export const SCProvider = ({ children }) => {
+export const SCProvider = ({ children, initState = initialState }) => {
   const [stateData, dispatch] = useReducer<Reducer<ContextData, Action>>(
     reducer,
-    initialState
+    initState
   );
 
   const setAuth = (authData: AuthData) => {

package/src/context/mockStore.ts

@@ -16,7 +16,7 @@ export const mockDataStore: ContextData = {
       },
     },
   },
-  language: 'vi',
+  language: 'en',
   listDevice: {
     sentEmail: false,
   },
@@ -24,6 +24,7 @@ export const mockDataStore: ContextData = {
     backgroundColor: '',
     barStyle: '',
   },
+  listAction: [],
 };
 
 export const mockSCStore = (data: ContextData): ContextData => {
@@ -45,5 +46,6 @@ export const mockSCStore = (data: ContextData): ContextData => {
         mockDataStore?.statusBar?.backgroundColor,
       barStyle: data?.statusBar?.barStyle || mockDataStore?.statusBar?.barStyle,
     },
+    listAction: [...mockDataStore.listAction, ...(data?.listAction || [])],
   };
 };

package/src/hooks/Common/__test__/useStatusbar.test.js

@@ -0,0 +1,28 @@
+import { useStatusBarPreview, useHiddenStatusBar } from '../useStatusBar';
+
+describe('test useStatusBarPreview', () => {
+  let Platform;
+  beforeEach(() => {
+    Platform = require('react-native').Platform;
+  });
+
+  it('test useStatusBarPreview on android', () => {
+    Platform.OS = 'ios';
+    useStatusBarPreview();
+  });
+
+  it('test useStatusBarPreview on iOS', () => {
+    Platform.OS = 'android';
+    useStatusBarPreview();
+  });
+
+  it('test useHiddenStatusBar on android', () => {
+    Platform.OS = 'ios';
+    useHiddenStatusBar(false);
+  });
+
+  it('test useHiddenStatusBar on iOS', () => {
+    Platform.OS = 'android';
+    useHiddenStatusBar(true);
+  });
+});

package/src/navigations/AutomateStack.js

@@ -0,0 +1,45 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useNavigation } from '@react-navigation/core';
+import { Icon } from '@ant-design/react-native';
+
+import Routes from '../utils/Route';
+import { screenOptions } from './utils';
+import { useTranslations } from '../hooks/Common/useTranslations';
+import { Colors, Theme } from '../configs';
+import Automate from '../screens/Automate';
+
+const Stack = createStackNavigator();
+
+const AutomateStack = memo(() => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+
+  const toggleDrawer = useCallback(() => {
+    navigation.toggleDrawer();
+  }, [navigation]);
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        ...screenOptions,
+        headerShown: true,
+        title: t('automate_scripts'),
+        headerLeft: () => (
+          <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
+            <Icon name={'menu'} color={Colors.Black} />
+          </TouchableOpacity>
+        ),
+        headerTitleAlign: 'left',
+        headerStyle: {
+          backgroundColor: Colors.Gray2,
+        },
+      }}
+    >
+      <Stack.Screen name={Routes.Automate} component={Automate} />
+    </Stack.Navigator>
+  );
+});
+
+export default AutomateStack;