@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

package/src/screens/Device/detail.js

@@ -59,8 +59,11 @@ const DeviceDetail = ({ route }) => {
     internet: {},
   });
   // eslint-disable-next-line no-unused-vars
-  const [loading, setLoading] = useState(true);
-  const [isConnected, setConnected] = useState(true);
+  const [loading, setLoading] = useState({
+    isConnected: true,
+    displayTemplate: true,
+  });
+  const [isConnected, setConnected] = useState(false);
   const [lastUpdated, setLastUpdated] = useState(null);
   const [lastEvent, setLastEvent] = useState({ id: 0, reportedAt: 0 });
   const [maxValue, setMaxValue] = useState(60);
@@ -162,7 +165,7 @@ const DeviceDetail = ({ route }) => {
         }
       }
     }
-    setLoading(false);
+    setLoading((preState) => ({ ...preState, displayTemplate: false }));
 
     const controlResult = await axiosGet(
       API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id),
@@ -211,9 +214,10 @@ const DeviceDetail = ({ route }) => {
         data: {
           id: sensor.id,
           type: 'action',
+          share: unit,
           filterEnabled: {
-            date: false,
-            user: false,
+            date: true,
+            user: Boolean(unit.id),
           },
         },
         text: t('activity_log'),
@@ -234,6 +238,11 @@ const DeviceDetail = ({ route }) => {
         data: { unit, sensor },
         text: t('manage_access'),
       });
+      menuItems.push({
+        text: t('move_to_another_sub_unit'),
+        route: Routes.MoveToAnotherSubUnit,
+        data: { unit, sensor, station },
+      });
     }
     if (isShowSetupEmergencyContact) {
       menuItems.push({
@@ -270,15 +279,15 @@ const DeviceDetail = ({ route }) => {
     return [...menuItems];
   }, [
     display.items,
+    isOwner,
+    isShowSetupEmergencyContact,
     t,
     isFavourite,
-    emergencyDeviceId,
-    isShowSetupEmergencyContact,
     sensor,
-    setSensorName,
     sensorName,
-    isOwner,
     unit,
+    station,
+    emergencyDeviceId,
     addToFavorites,
     removeFromFavorites,
   ]);
@@ -354,11 +363,14 @@ const DeviceDetail = ({ route }) => {
         transformDatetime(data, ['last_updated']);
         setLastUpdated(data.last_updated);
       }
+      setLoading((preState) => ({ ...preState, isConnected: false }));
     };
     if (sensor.is_managed_by_backend && !sensor.is_other_device) {
       const updateInterval = setInterval(() => fetchValues(), 5000);
       fetchValues();
       return () => clearInterval(updateInterval);
+    } else {
+      setLoading((preState) => ({ ...preState, isConnected: false }));
     }
   }, [sensor, display]);
 
@@ -444,7 +456,7 @@ const DeviceDetail = ({ route }) => {
       `@CACHE_REQUEST_${API.SENSOR.REMOTE_CONTROL_OPTIONS(sensor.id)}`
     );
     controlOptionData && setControlOptions(JSON.parse(controlOptionData));
-    setLoading(false);
+    setLoading((preState) => ({ ...preState, displayTemplate: false }));
   };
 
   const onItemMenuClicked = (item) => {
@@ -469,6 +481,10 @@ const DeviceDetail = ({ route }) => {
     showPopoverWithRef(refMenuAction);
   }, [showPopoverWithRef, refMenuAction]);
 
+  const onPressSetting = useCallback(() => {
+    navigation.navigate(Routes.EmergencySetting);
+  }, [navigation]);
+
   const HeaderRight = useMemo(
     () => (
       <View style={styles.headerRight}>
@@ -483,6 +499,13 @@ const DeviceDetail = ({ route }) => {
             <IconOutline name="star" size={25} />
           )}
         </TouchableOpacity>
+
+        {isShowSetupEmergencyContact && (
+          <TouchableOpacity style={styles.button} onPress={onPressSetting}>
+            <Icon name="setting" size={25} color={Colors.Black} />
+          </TouchableOpacity>
+        )}
+
         <TouchableOpacity
           style={styles.button}
           onPress={handleShowMenuAction}
@@ -493,7 +516,14 @@ const DeviceDetail = ({ route }) => {
         </TouchableOpacity>
       </View>
     ),
-    [isFavourite, addToFavorites, removeFromFavorites, handleShowMenuAction]
+    [
+      isFavourite,
+      removeFromFavorites,
+      addToFavorites,
+      isShowSetupEmergencyContact,
+      onPressSetting,
+      handleShowMenuAction,
+    ]
   );
 
   return (
@@ -505,15 +535,18 @@ const DeviceDetail = ({ route }) => {
         onRefresh={onRefresh}
       >
         <View style={styles.wrapTemplate}>
-          {!loading && renderSensorConnected()}
+          {loading.displayTemplate === false &&
+            loading.isConnected === false &&
+            netInfo.isConnected !== null &&
+            renderSensorConnected()}
         </View>
         {isShowSetupEmergencyContact && canManageSubUnit && (
           <BottomButtonView
             style={styles.bottomButtonEmergencyContact}
-            mainIcon={<Icon name="phone" size={24} color={Colors.Gray9} />}
-            mainTitle={t('emergency_contacts')}
+            mainIcon={<Icon name="plus" size={16} color={Colors.Primary} />}
+            mainTitle={t('setup_my_emergency_contact')}
             onPressMain={onSetupContacts}
-            typeMain="CardShadow"
+            typeMain="primaryBorder"
             semiboldMain={false}
           />
         )}

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

@@ -39,7 +39,8 @@ export const useDisconnectedDevice = (sensorName, isDeviceHasBle) => {
 
   const checkNetWorkConnect = useCallback(
     async (isHavingInternet, isBtEnabled) => {
-      if (!isHavingInternet && isDeviceHasBle) {
+      if (isHavingInternet === false && isDeviceHasBle) {
+        // TODO avoid case first render isHavingInternet == null
         if (isBtEnabled === true) {
           ToastBottomHelper.info(
             t('your_internet_is_disconnected', { name: sensorName }),

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,92 @@
+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';
+import Text from '../../commons/Text';
+
+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}
+          />
+        ))}
+
+        <Text style={styles.duration}>{t('duration')}</Text>
+        <_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,25 @@
+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,
+    marginTop: 0,
+  },
+  textInputStyle: {
+    paddingTop: 7,
+    paddingBottom: 7,
+  },
+  duration: {
+    marginTop: 14,
+    marginBottom: 10,
+    marginLeft: 16,
+  },
+});

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;