@eohjsc/react-native-smart-city 0.2.56 → 0.2.60

package/src/screens/Device/hooks/useDisconnectedDevice.js

@@ -4,10 +4,11 @@ import { Alert, Linking, Platform } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import {
   enableBluetoothForAndroid,
-  isBluetoothEnabled,
+  useIsBluetoothEnabled,
 } from '../../../iot/RemoteControl/Bluetooth';
+import { ToastBottomHelper } from '../../../utils/Utils';
 
-export const useDisconnectedDevice = (isConnected, sensorName) => {
+export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
   const t = useTranslations();
   const openBluetoothIOS = () => {
     Linking.openURL('App-Prefs:Bluetooth');
@@ -32,32 +33,37 @@ export const useDisconnectedDevice = (isConnected, sensorName) => {
             onPress: () => enableBluetoothForAndroid(),
           },
         ];
-  const checkNetWorkConnect = useCallback(async () => {
-    const netState = await NetInfo.fetch();
-    if (!isConnected || !netState.isConnected) {
-      const isBtEnabled = await isBluetoothEnabled();
-      if (isBtEnabled) {
-        Alert.alert(
-          '',
-          t(
-            'your_internet_is_disconnected_change_to_control_via_bluetooth_connection',
-            { name: sensorName }
-          )
-        );
-      } else {
-        Alert.alert(
-          '',
-          t(
-            'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
-          ),
-          actions
-        );
+
+  const netState = NetInfo.useNetInfo();
+  const isBluetoothEnabled = useIsBluetoothEnabled();
+
+  const checkNetWorkConnect = useCallback(
+    async (isHavingInternet, isBtEnabled) => {
+      if (isHavingInternet === false && isDeviceHasBle) {
+        // TODO avoid case first render isHavingInternet == null
+        if (isBtEnabled === true) {
+          ToastBottomHelper.info(
+            t('your_internet_is_disconnected', { name: sensorName }),
+            t('change_to_control_via_bluetooth_connection', {
+              name: sensorName,
+            })
+          );
+        } else if (isBtEnabled === false) {
+          Alert.alert(
+            '',
+            t(
+              'your_connection_to_the_server_was_disconnected_please_open_the_bluetooth_to_continue'
+            ),
+            actions
+          );
+        }
       }
-    }
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isConnected]);
+    [isDeviceHasBle]
+  );
 
   useEffect(() => {
-    checkNetWorkConnect();
-  }, [checkNetWorkConnect]);
+    checkNetWorkConnect(netState.isConnected, isBluetoothEnabled);
+  }, [netState.isConnected, isBluetoothEnabled, checkNetWorkConnect]);
 };

package/src/screens/Device/styles.js

@@ -32,7 +32,7 @@ export default StyleSheet.create({
   },
   bottomButtonEmergencyContact: {
     marginHorizontal: 16,
-    marginBottom: 32,
+    marginBottom: 40,
   },
   locationName: {
     flex: 1,
@@ -77,10 +77,10 @@ export default StyleSheet.create({
   buttonStar: {
     justifyContent: 'center',
     alignItems: 'center',
+    marginRight: 14,
   },
   button: {
-    width: 35,
-    height: 40,
+    marginRight: 10,
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/screens/EmergencySetting/__test__/DropDownItem.test.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import DropDownItem from '../components/DropDownItem';
+import Text from '../../../commons/Text';
+import { TESTID } from '../../../configs/Constants';
+
+const mockonOpen = jest.fn();
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DropDownItem {...props} />
+  </SCProvider>
+);
+
+describe('Test DropDownItem', () => {
+  let tree;
+
+  test('test render DropDownItem', () => {
+    const props = {
+      label: 'mode',
+      data: [{ label: 'Stop (0)', value: 'stop' }],
+      isOpen: true,
+    };
+
+    act(() => {
+      tree = create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const dropDownPicker = instance.findAll(
+      (el) =>
+        el.props.testID === TESTID.DROP_DOWN_PICKER_ITEM && el.type === Text
+    );
+    expect(dropDownPicker).toHaveLength(1);
+  });
+
+  test('test onPress DropDown', () => {
+    const props = {
+      label: 'mode',
+      data: [{ label: 'Stop (0)', value: 'stop' }],
+      onOpen: mockonOpen,
+      index: 0,
+    };
+
+    act(() => {
+      tree = create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const touchableOpacity = instance.findByType(TouchableOpacity);
+    act(() => {
+      touchableOpacity.props.onPress();
+    });
+
+    expect(mockonOpen).toHaveBeenCalledWith(props.index);
+  });
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import EmergencySetting from '..';
+import DropDownItem from '../components/DropDownItem';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <EmergencySetting />
+  </SCProvider>
+);
+
+describe('test EmergencySetting', () => {
+  let tree;
+
+  test('test render EmergencySetting', () => {
+    act(() => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const dropDownItem = instance.findAllByType(DropDownItem);
+
+    expect(dropDownItem.length).toEqual(3);
+  });
+});

package/src/screens/EmergencySetting/components/DropDownItem.js

@@ -0,0 +1,54 @@
+import React, { useCallback, useState } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { IconFill } from '@ant-design/icons-react-native';
+
+import Text from '../../../commons/Text';
+import styles from '../styles/DropDownItem';
+import { Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+
+const DropDownItem = ({ label, data, onSelectItem, isOpen, onOpen, index }) => {
+  const [selecteValue, setSelectValue] = useState(data[0] || {});
+
+  const handleSelectItem = useCallback(
+    (item) => () => {
+      setSelectValue(item);
+      onSelectItem && onSelectItem();
+    },
+    [onSelectItem]
+  );
+
+  const handleOnOpen = useCallback(() => {
+    onOpen && onOpen(index);
+  }, [index, onOpen]);
+
+  return (
+    // eslint-disable-next-line react-native/no-inline-styles
+    <View style={[styles.wrap, { zIndex: isOpen ? 1 : 0 }]}>
+      {label && <Text>{label}</Text>}
+      <View style={styles.dropDownContainer}>
+        <TouchableOpacity style={styles.dropDownStyle} onPress={handleOnOpen}>
+          <Text>{selecteValue?.label}</Text>
+          <IconFill name="caret-down" size={18} color={Colors.Gray8} />
+        </TouchableOpacity>
+
+        {isOpen && (
+          <View style={[styles.dropDownItem]}>
+            {data.map((item, index) => (
+              <Text
+                style={styles.dropDownText}
+                onPress={handleSelectItem(item)}
+                key={index}
+                testID={TESTID.DROP_DOWN_PICKER_ITEM}
+              >
+                {item?.label}
+              </Text>
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default DropDownItem;

package/src/screens/EmergencySetting/index.js

@@ -0,0 +1,90 @@
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, ScrollView } from 'react-native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+import { HeaderCustom } from '../../commons/Header';
+import DropDownItem from './components/DropDownItem';
+import _TextInput from '../../commons/Form/TextInput';
+
+import styles from './styles';
+
+const EmergencySetting = () => {
+  const t = useTranslations();
+  const [openedDropdown, setOpenedDropdown] = useState(null);
+  const [duration, setDuration] = useState('');
+
+  const onChangeDuration = useCallback((text) => {
+    setDuration(text);
+  }, []);
+
+  const listData = useMemo(() => {
+    return [
+      {
+        label: t('mode'),
+        data: [
+          { label: 'Stop (0)', value: 'stop' },
+          { label: 'Stop (1)', value: 'stop' },
+          { label: 'Stop (2)', value: 'stop' },
+        ],
+      },
+      {
+        label: t('level'),
+        data: [
+          { label: 'Low', value: 'low' },
+          { label: 'High', value: 'High' },
+        ],
+      },
+      {
+        label: t('strobe'),
+        data: [
+          { label: 'True', value: 'true' },
+          { label: 'False', value: 'true' },
+        ],
+      },
+    ];
+  }, [t]);
+
+  const handleOnOpen = useCallback((index) => {
+    setOpenedDropdown((oldIndex) => {
+      if (index === oldIndex) {
+        return null;
+      }
+      return index;
+    });
+  }, []);
+
+  const handleOnSelectItem = useCallback(() => {
+    setOpenedDropdown(null);
+  }, []);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom title={t('setting')} isShowSeparator />
+
+      <ScrollView contentContainerStyle={styles.contentContainerStyle}>
+        {listData.map((item, index) => (
+          <DropDownItem
+            {...item}
+            key={index}
+            index={index}
+            onOpen={handleOnOpen}
+            isOpen={openedDropdown === index}
+            onSelectItem={handleOnSelectItem}
+          />
+        ))}
+
+        <_TextInput
+          wrapStyle={styles.wrapInput}
+          textInputStyle={styles.textInputStyle}
+          keyboardType="numeric"
+          onChange={onChangeDuration}
+          value={duration}
+          placeholder="0"
+        />
+      </ScrollView>
+    </View>
+  );
+};
+
+export default EmergencySetting;

package/src/screens/EmergencySetting/styles/DropDownItem.js

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+  },
+  dropDownContainer: {
+    marginTop: 8,
+  },
+  dropDownStyle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderColor: Colors.Gray5,
+    borderRadius: 2,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  dropDownItem: {
+    borderColor: Colors.Gray5,
+    borderRadius: 2,
+    borderTopWidth: 0,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    backgroundColor: Colors.White,
+    position: 'absolute',
+    width: '100%',
+    top: 44,
+    left: 0,
+  },
+  dropDownText: {
+    marginTop: 8,
+  },
+});

package/src/screens/EmergencySetting/styles.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  contentContainerStyle: {
+    flexGrow: 1,
+  },
+  wrapInput: {
+    paddingHorizontal: 16,
+  },
+  textInputStyle: {
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+});

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import axios from 'axios';
+import { create } from 'react-test-renderer';
+import { act } from '@testing-library/react-hooks';
+
+import { TESTID } from '../../../configs/Constants';
+import { API } from '../../../configs';
+import MoveToAnotherSubUnit from '../';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import BottomButtonView from '../../../commons/BottomButtonView';
+
+jest.mock('axios');
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MoveToAnotherSubUnit route={route} />
+  </SCProvider>
+);
+
+describe('Test Render ListSubUnit', () => {
+  let tree;
+  let route = {
+    params: {
+      unit: {
+        id: 200,
+        stations: [
+          {
+            id: 1,
+            name: 'Favourite',
+          },
+          {
+            id: 2,
+            name: 'Sceriano',
+          },
+          {
+            id: 3,
+            name: 'Room A',
+            sensors: [
+              {
+                action: null,
+                action2: null,
+                chip_id: 40,
+                description: null,
+                icon: '',
+                icon_kit: '',
+                id: 73,
+                is_managed_by_backend: true,
+                is_other_device: false,
+                name: 'Multi-Air Quality',
+                quick_action: null,
+              },
+            ],
+          },
+          {
+            id: 4,
+            name: 'Room 2',
+            sensors: [],
+          },
+        ],
+      },
+      station: {
+        id: 3,
+        name: 'Room 1',
+      },
+      sensor: {
+        action: null,
+        action2: null,
+        chip_id: 40,
+        description: null,
+        icon: '',
+        icon_kit: '',
+        id: 73,
+        is_managed_by_backend: true,
+        is_other_device: false,
+        name: 'Multi-Air Quality',
+        quick_action: null,
+      },
+    },
+  };
+
+  it('render ListSubUnit', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const rowSubUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ROW_SUB_UNIT
+    );
+    expect(rowSubUnit).toHaveLength(2);
+  });
+
+  it('test move sensor', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const bottomButtonView = instance.findByType(BottomButtonView);
+    const rowSubUnit = instance.findAll(
+      (el) => el.props.testID === TESTID.ROW_SUB_UNIT
+    );
+    act(() => {
+      rowSubUnit[1].props.onSelect({
+        id: 4,
+        name: 'Room 2',
+        sensors: [],
+      });
+    });
+    act(() => {
+      bottomButtonView.props.onPressMain();
+    });
+
+    expect(axios.patch).toHaveBeenCalledWith(
+      API.SENSOR.CHANGE_SUB_UNIT(200, 3, 73),
+      {
+        station_id: 4,
+      }
+    );
+  });
+});

package/src/screens/MoveToAnotherSubUnit/index.js

@@ -0,0 +1,88 @@
+import React, { useState, useCallback, memo, useMemo } from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { HeaderCustom } from '../../commons/Header';
+import styles from './styles/MoveToAnotherSubUnitStyles';
+import { Colors } from '../../configs';
+import Text from '../../commons/Text';
+import RadioCircle from '../../commons/RadioCircle';
+import BottomButtonView from '../../commons/BottomButtonView';
+import Routes from '../../utils/Route';
+import { axiosPatch } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+import { TESTID } from '../../configs/Constants';
+
+const RowSubUnit = ({ subUnit, isSelected, onSelect }) => {
+  const handleOnPress = useCallback(() => {
+    onSelect(subUnit);
+  }, [onSelect, subUnit]);
+  return (
+    <TouchableOpacity style={styles.rowSubUnit} onPress={handleOnPress}>
+      <RadioCircle active={isSelected} />
+      <View style={styles.wrapText}>
+        <Text type="H4" color={Colors.Gray9}>
+          {subUnit.name}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const MoveToAnotherSubUnit = memo(({ route }) => {
+  const t = useTranslations();
+  const { params = {} } = route;
+  const { unit, sensor, station } = params;
+  const { navigate } = useNavigation();
+  const [selectedSubUnit, setSelectedSubUnit] = useState(station);
+
+  const listStationUnit = useMemo(() => {
+    return unit.stations.slice(2);
+  }, [unit.stations]);
+
+  const handleOnSelect = useCallback((item) => {
+    setSelectedSubUnit(item);
+  }, []);
+
+  const onSubmit = useCallback(async () => {
+    const { success } = await axiosPatch(
+      API.SENSOR.CHANGE_SUB_UNIT(unit.id, station.id, sensor.id),
+      {
+        station_id: selectedSubUnit.id,
+      }
+    );
+    if (success) {
+      navigate(Routes.UnitDetail);
+    }
+  }, [navigate, selectedSubUnit.id, sensor.id, station.id, unit.id]);
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom title={t('move_to_another_sub_unit')} isShowSeparator />
+      <ScrollView>
+        <View style={styles.container}>
+          <View>
+            {listStationUnit.map((item, index) => (
+              <RowSubUnit
+                subUnit={item}
+                isSelected={selectedSubUnit === item}
+                onSelect={handleOnSelect}
+                testID={TESTID.ROW_SUB_UNIT}
+                key={index}
+              />
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('text_submit')}
+        onPressMain={onSubmit}
+        typeMain={'primary'}
+      />
+    </View>
+  );
+});
+
+export default MoveToAnotherSubUnit;

package/src/screens/MoveToAnotherSubUnit/styles/MoveToAnotherSubUnitStyles.js

@@ -0,0 +1,50 @@
+import { Colors } from '../../../configs';
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: 16,
+  },
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  rowSubUnit: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapText: {
+    flex: 1,
+    marginRight: 24,
+    marginLeft: 16,
+    paddingVertical: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: Colors.Gray4,
+  },
+  content: {
+    margin: 16,
+  },
+  textLeft: {
+    borderColor: Colors.Gray9,
+    fontWeight: 'bold',
+    fontSize: 16,
+  },
+  textRight: {
+    borderColor: Colors.Gray7,
+    fontSize: 14,
+  },
+  separator: {
+    height: 1,
+    width: '100%',
+    borderBottomWidth: 1,
+    borderColor: Colors.Gray4,
+    marginBottom: 16,
+  },
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+});

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

@@ -64,7 +64,7 @@ describe('test Notification', () => {
 
     expect(notificationItem).toHaveLength(2);
     expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_ALL_NOTIFICATIONS(1, ''),
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
       {}
     );
   });
@@ -108,7 +108,7 @@ describe('test Notification', () => {
       scrollView.props.onMomentumScrollEnd();
     });
     expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_ALL_NOTIFICATIONS(1, ''),
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
       {}
     );
   });
@@ -152,7 +152,7 @@ describe('test Notification', () => {
       refreshControl.props.onRefresh();
     });
     expect(axios.get).toHaveBeenCalledWith(
-      API.NOTIFICATION.LIST_ALL_NOTIFICATIONS(1, ''),
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''),
       {}
     );
   });