@eohjsc/react-native-smart-city 0.3.10 → 0.3.13

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

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import { useSCContextSelector } from '../../../context';
+
+const evaluateRange = (value, configuration) => {
+  /*
+  configuration: {
+    ranges: [
+      { start: 0.5, end: 1.5, evaluate: 'On' },
+      { start: -0.5, end: 0.49, evaluate: {text: 'Off'} },
+    ]
+  }
+ */
+  if (!value) {
+    // eslint-disable-next-line no-param-reassign
+    value = 0;
+  }
+
+  for (let i = 0; i < configuration?.ranges?.length; i++) {
+    const range = configuration.ranges[i];
+    if (range.start <= value && value <= range.end) {
+      return range.evaluate;
+    }
+    if (!range.end && range.start <= value) {
+      return range.evaluate;
+    }
+  }
+  return { text: value };
+};
+
+const evaluateBoolean = (value, configuration) => {
+  /*
+  configuration: {
+      'on': {
+          'value': 1,
+          'evaluate': {
+              'text': 'On',
+          },
+      },
+      'off': {
+          'value': 0,
+
+          'evaluate': {
+              'text': 'Off',
+          },
+      },
+  }
+ */
+  if (!value) {
+    // eslint-disable-next-line no-param-reassign
+    value = 0;
+  }
+  if (value === configuration.on?.value) {
+    return configuration.on.evaluate;
+  }
+  if (value === configuration.off?.value) {
+    return configuration.off.evaluate;
+  }
+  return { text: value };
+};
+
+const valueEvaluationFuncs = {
+  range: evaluateRange,
+  boolean: evaluateBoolean,
+};
+
+export const useEvaluateValue = () => {
+  const valueEvaluations = useSCContextSelector((state) => {
+    return state.valueEvaluations;
+  });
+
+  const evaluateValue = useCallback(
+    (configId, value) => {
+      if (value === null || value === undefined) {
+        return { text: '--', color: null };
+      }
+
+      const valueEvaluation = valueEvaluations[configId];
+      if (!valueEvaluation) {
+        return null;
+      }
+
+      const evaluateFunc = valueEvaluationFuncs[valueEvaluation.template];
+      if (!evaluateFunc) {
+        return null;
+      }
+
+      try {
+        return evaluateFunc(value, valueEvaluation.configuration);
+      } catch (e) {
+        return null;
+      }
+    },
+    [valueEvaluations]
+  );
+
+  return evaluateValue;
+};

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

@@ -16,14 +16,14 @@ export const useFavoriteDevice = (device) => {
     const { success } = await axiosPost(
       API.DEVICE.ADD_TO_FAVOURITES(device?.id)
     );
-    success && setAction(Action.ADD_DEVICE_TO_FAVORITES, device.id);
+    success && setAction(Action.ADD_DEVICES_TO_FAVORITES, [device.id]);
   }, [device, setAction]);
 
   const removeFromFavorites = useCallback(async () => {
     const { success } = await axiosPost(
       API.DEVICE.REMOVE_FROM_FAVOURITES(device?.id)
     );
-    success && setAction(Action.REMOVE_DEVICE_FROM_FAVORITES, device.id);
+    success && setAction(Action.REMOVE_DEVICES_FROM_FAVORITES, [device.id]);
   }, [device, setAction]);
 
   return {

package/src/screens/ScriptDetail/index.js

@@ -34,7 +34,11 @@ import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
 import ItemAutomate from '../../commons/Automate/ItemAutomate';
 import withPreventDoubleClick from '../../commons/WithPreventDoubleClick';
-import { AUTOMATE_SELECT, AUTOMATE_TYPE } from '../../configs/Constants';
+import {
+  AUTOMATE_SELECT,
+  AUTOMATE_TYPE,
+  STATE_VALUE_SENSOR_TYPES,
+} from '../../configs/Constants';
 import { popAction } from '../../navigations/utils';
 import { TESTID } from '../../configs/Constants';
 import useKeyboardAnimated from '../../hooks/Explore/useKeyboardAnimated';
@@ -359,17 +363,23 @@ const ScriptDetail = ({ route }) => {
       date_repeat,
       time_repeat,
       weekday_repeat,
+      sensor_type,
     } = automate;
     if (type === AUTOMATE_TYPE.VALUE_CHANGE) {
+      const stateConditionData = STATE_VALUE_SENSOR_TYPES.find(
+        (i) => i.type === sensor_type
+      );
+      const isNumberValue = !stateConditionData;
+
       let text;
       if (condition === '>') {
         text = 'higher_than';
       } else if (condition === '<') {
         text = 'lower_than';
       } else if (condition === '=') {
-        text = 'equal';
+        text = isNumberValue ? 'equal' : stateConditionData?.stateValue[value];
       }
-      return `${config_name} ${t(text)} ${value}`;
+      return `${config_name} ${t(text)} ${isNumberValue ? value : ''}`;
     } else if (type === AUTOMATE_TYPE.SCHEDULE) {
       const time =
         time_repeat?.length >= 8

package/src/screens/Unit/Detail.js

@@ -4,8 +4,9 @@ import React, {
   useState,
   useRef,
   useContext,
+  useMemo,
 } from 'react';
-import { AppState, RefreshControl, View } from 'react-native';
+import { AppState, RefreshControl, View, Platform } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -24,6 +25,7 @@ import {
 } from '../../hooks/Common';
 import { useFavorites } from './hook/useFavorites';
 import { useUnitConnectRemoteDevices } from './hook/useUnitConnectRemoteDevices';
+import { useValueEvaluations } from '../../hooks/IoT';
 import { fetchWithCache, axiosGet } from '../../utils/Apis/axios';
 import ShortDetailSubUnit from '../../commons/SubUnit/ShortDetail';
 import NavBar from '../../commons/NavBar';
@@ -52,6 +54,7 @@ import MediaPlayerDetail from '../../commons/MediaPlayerDetail';
 const UnitDetail = ({ route }) => {
   const t = useTranslations();
   const { setAction } = useContext(SCContext);
+  const isIOS = useMemo(() => Platform.OS === 'ios', []);
 
   const {
     unitId,
@@ -186,10 +189,12 @@ const UnitDetail = ({ route }) => {
     });
 
     return () => {
-      subscription.remove();
+      subscription?.remove();
     };
   }, [fetchDetails]);
 
+  useValueEvaluations(unitId);
+
   useUnitConnectRemoteDevices(unit);
 
   useEffect(() => {
@@ -292,13 +297,13 @@ const UnitDetail = ({ route }) => {
   }, [user, onRefresh]);
 
   useEffect(() => {
-    if (isFirstOpenCamera) {
+    if (isFirstOpenCamera && isIOS) {
       const to = setTimeout(() => {
         setAction(Action.IS_FIRST_OPEN_CAMERA, false);
         clearTimeout(to);
       }, 3000);
     }
-  }, [isFirstOpenCamera, setAction]);
+  }, [isFirstOpenCamera, isIOS, setAction]);
 
   return (
     <WrapParallaxScrollView
@@ -315,7 +320,7 @@ const UnitDetail = ({ route }) => {
       onBack={(isSuccessfullyConnected && Dashboard) || (routeName && onBack)}
     >
       {/* NOTE: This is a trick to fix camera not full screen on first open app */}
-      {isFirstOpenCamera && (
+      {isFirstOpenCamera && isIOS && (
         <MediaPlayerDetail
           uri={Constants.URL_STREAM_CAMERA_DEMO}
           isPaused={false}

package/src/screens/Unit/SelectAddress.js

@@ -70,9 +70,7 @@ const SelectAddress = memo(({ route }) => {
         API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE,
         config
       );
-      if (success) {
-        setSearchData(data.predictions);
-      }
+      success && setSearchData(data.predictions);
       // eslint-disable-next-line no-empty
     } catch (error) {}
   }, []);

package/src/screens/Unit/SelectDevices.js

@@ -0,0 +1,158 @@
+import React, {
+  memo,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+  useContext,
+} from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { Icon } from '@ant-design/react-native';
+import { HeaderCustom } from '../../commons/Header';
+import Text from '../../commons/Text';
+import NavBar from '../../commons/NavBar';
+import BottomButtonView from '../../commons/BottomButtonView';
+import { FullLoading } from '../../commons';
+import Device from '../AddNewAction/Device';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
+import { axiosGet, axiosPost } from '../../utils/Apis/axios';
+import { API, Colors } from '../../configs';
+import styles from './SelectDevicesStyles';
+
+const SelectDevices = memo(({ route }) => {
+  const t = useTranslations();
+  const { goBack } = useNavigation();
+  const { unitId } = route.params;
+  const { setAction } = useContext(SCContext);
+  const [listStation, setListStation] = useState([]);
+  const [listMenuItem, setListMenuItem] = useState([]);
+  const [indexStation, setIndexStation] = useState(0);
+  const [stations, setStations] = useState([]);
+  const [selectedIds, setSelectedIds] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    const { success, data } = await axiosGet(API.UNIT.DEVICES(unitId));
+    if (success) {
+      const newData = data.filter((item) => item.devices.length > 0);
+      const listMenu = newData.map((item, index) => ({
+        text: item.name,
+        station: item,
+        index: index,
+      }));
+      setStations(newData);
+      setListMenuItem(listMenu);
+      setListStation(listMenu);
+    }
+    setLoading(false);
+  }, [unitId]);
+
+  const addDevicesToFavorites = useCallback(async () => {
+    if (selectedIds.length === 0) {
+      return;
+    }
+    setLoading(true);
+    const { success } = await axiosPost(
+      API.UNIT.ADD_DEVICES_TO_FAVORITES(unitId),
+      {
+        devices: selectedIds,
+      }
+    );
+    if (success) {
+      setAction(Action.ADD_DEVICES_TO_FAVORITES, selectedIds);
+      goBack();
+    }
+    setLoading(false);
+  }, [unitId, selectedIds, setAction, goBack]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const onSnapToItem = useCallback(
+    (item, index) => {
+      setIndexStation(index);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [unitId, indexStation]
+  );
+
+  const onSelectDevice = useCallback(
+    (device) => {
+      setSelectedIds((ids) => {
+        const index = ids.indexOf(device.id);
+        if (index !== -1) {
+          return ids.filter((id) => id !== device.id);
+        }
+        return [...ids, device.id];
+      });
+    },
+    [setSelectedIds]
+  );
+
+  const rightComponent = useMemo(
+    () => (
+      <TouchableOpacity style={styles.buttonClose} onPress={goBack}>
+        <Icon name={'close'} size={24} color={Colors.Black} />
+      </TouchableOpacity>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return (
+    <View style={styles.wrap}>
+      <HeaderCustom rightComponent={rightComponent} />
+      <ScrollView
+        style={styles.wrap}
+        contentContainerStyle={styles.contentContainerStyle}
+        scrollIndicatorInsets={{ right: 1 }}
+      >
+        <Text bold type="H2" style={styles.title}>
+          {t('select_device')}
+        </Text>
+
+        {listStation.length ? (
+          <NavBar
+            listStation={listStation}
+            listMenuItem={listMenuItem}
+            onSnapToItem={onSnapToItem}
+            indexStation={indexStation}
+            style={styles.navbar}
+          />
+        ) : (
+          <View style={styles.noneData}>
+            <Text center>{t('text_unit_add_to_favorites_no_devices')}</Text>
+          </View>
+        )}
+
+        <View style={styles.boxDevices}>
+          {stations[indexStation]?.devices &&
+            stations[indexStation].devices.map((device) => (
+              <Device
+                svgMain={device.icon || 'sensor'}
+                title={device.name}
+                sensor={device}
+                isSelectDevice={selectedIds.includes(device.id)}
+                onPress={onSelectDevice}
+              />
+            ))}
+        </View>
+      </ScrollView>
+
+      <BottomButtonView
+        style={styles.bottomButtonView}
+        mainTitle={t('done')}
+        onPressMain={addDevicesToFavorites}
+        typeMain={selectedIds.length === 0 ? 'disabled' : 'primary'}
+      />
+      {loading && <FullLoading />}
+    </View>
+  );
+});
+
+export default SelectDevices;

package/src/screens/Unit/SelectDevicesStyles.js

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors, Constants } from '../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  contentContainerStyle: {
+    paddingBottom: getBottomSpace() + 100,
+  },
+  navbar: {
+    paddingTop: 16,
+  },
+  title: {
+    marginHorizontal: 16,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 22,
+    justifyContent: 'space-between',
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+
+  bottomButtonView: {
+    paddingTop: 24,
+    paddingBottom: 32,
+
+    backgroundColor: Colors.White,
+    borderColor: Colors.ShadownTransparent,
+    borderTopWidth: 1,
+  },
+  noneData: {
+    paddingHorizontal: 16,
+    marginTop: Constants.height * 0.3,
+  },
+});

package/src/screens/Unit/Summaries.js

@@ -69,7 +69,7 @@ const Summaries = memo(({ unit }) => {
     });
 
     return () => {
-      subscription.remove();
+      subscription?.remove();
     };
   }, [fetchUnitSummary]);
 

package/src/screens/Unit/__test__/SelectAddress.test.js

@@ -103,6 +103,22 @@ describe('Test SelectAddress', () => {
         updateLocation: mockUpdateLocation,
       },
     };
+    mockUpdateLocation.mockClear();
+    mockGoBack.mockClear();
+    mock.resetHistory();
+  });
+
+  test('test not do anything then click done', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const bottomButton = instance.findByType(BottomButtonView);
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mockUpdateLocation).not.toBeCalled();
+    expect(mockGoBack).not.toBeCalled();
   });
 
   test('test search location', async () => {
@@ -151,7 +167,6 @@ describe('Test SelectAddress', () => {
     mock
       .onGet(API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID)
       .reply(200, response.data);
-
     await act(async () => {
       await rowLocations[0].props.onPress({ place_id: 1, description: '1' });
     });
@@ -163,6 +178,52 @@ describe('Test SelectAddress', () => {
     expect(mockGoBack).toBeCalled();
   });
 
+  test('test get lat lng of location failed', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const searchBars = instance.findAllByType(SearchBarLocation);
+    expect(searchBars).toHaveLength(1);
+
+    let response = {
+      status: 200,
+      data: {
+        predictions: [
+          { place_id: 1, description: '1' },
+          { place_id: 2, description: '2' },
+          { place_id: 3, description: '3' },
+        ],
+      },
+    };
+    mock.onGet(API.EXTERNAL.GOOGLE_MAP.AUTO_COMPLETE).reply(200, response.data);
+    await act(async () => {
+      await searchBars[0].props.onTextInput('');
+    });
+    let rowLocations = instance.findAllByType(RowLocation);
+    expect(rowLocations).toHaveLength(0);
+
+    await act(async () => {
+      await searchBars[0].props.onTextInput('input');
+    });
+    rowLocations = instance.findAllByType(RowLocation);
+    expect(rowLocations).toHaveLength(3);
+    response = {
+      status: 404,
+      data: {},
+    };
+    mock
+      .onGet(API.EXTERNAL.GOOGLE_MAP.GET_LAT_LNG_BY_PLACE_ID)
+      .reply(404, response.data);
+    await act(async () => {
+      await rowLocations[0].props.onPress({ place_id: 1, description: '1' });
+    });
+    const bottomButton = instance.findByType(BottomButtonView);
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+  });
+
   test('test get current location success', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));
@@ -196,6 +257,34 @@ describe('Test SelectAddress', () => {
     });
   });
 
+  test('test get current location success get location name failed', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const button = instance.find(
+      (el) => el.props.testID === TESTID.BUTTON_YOUR_LOCATION
+    );
+
+    const response = {
+      status: 400,
+      data: {
+        results: [],
+      },
+    };
+    mock
+      .onGet(API.EXTERNAL.GOOGLE_MAP.GET_LOCATION_FROM_LAT_LNG)
+      .reply(400, response.data);
+    await act(async () => {
+      await button.props.onPress();
+    });
+    const bottomButton = instance.findByType(BottomButtonView);
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mockGoBack).toBeCalled();
+  });
+
   test('test get current location failed permission denied', async () => {
     await act(async () => {
       tree = await create(wrapComponent(route));

package/src/screens/Unit/__test__/SelectDevices.test.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import SelectDevices from '../SelectDevices';
+import Device from '../../AddNewAction/Device';
+import BottomButtonView from '../../../commons/BottomButtonView';
+import { API } from '../../../configs';
+import api from '../../../utils/Apis/axios';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SelectDevices route={route} />
+  </SCProvider>
+);
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockGoBack = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockGoBack,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+describe('Test SelectDevices', () => {
+  let tree, route;
+
+  beforeAll(() => {
+    mockGoBack.mockClear();
+    mock.resetHistory();
+    route = {
+      params: {
+        unitId: 1,
+      },
+    };
+  });
+
+  test('test select then add devices to favorites', async () => {
+    let data = [
+      {
+        id: 1,
+        name: 'station 1',
+        devices: [
+          {
+            id: 1,
+            name: 'device 1',
+            icon: 'sensor',
+            icon_kit: null,
+          },
+          {
+            id: 2,
+            name: 'device 2',
+            icon: null,
+            icon_kit: 'icon',
+          },
+        ],
+      },
+      {
+        id: 2,
+        name: 'station 2',
+        devices: [],
+      },
+    ];
+    mock.onGet(API.UNIT.DEVICES(1)).replyOnce(200, data);
+    mock.onPost(API.UNIT.ADD_DEVICES_TO_FAVORITES(1)).replyOnce(200);
+
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const bottomButton = instance.findByType(BottomButtonView);
+
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(0);
+
+    const devices = instance.findAllByType(Device);
+    expect(devices).toHaveLength(2);
+
+    await act(async () => {
+      await devices[0].props.onPress({ id: 1 });
+    });
+    await act(async () => {
+      await devices[1].props.onPress({ id: 2 });
+    });
+    await act(async () => {
+      await devices[0].props.onPress({ id: 1 });
+    });
+    await act(async () => {
+      await bottomButton.props.onPressMain();
+    });
+    expect(mock.history.post).toHaveLength(1);
+    expect(mockGoBack).toBeCalled();
+  });
+});

package/src/screens/UnitSummary/components/RunningDevices/index.js

@@ -19,7 +19,9 @@ const RunningDevices = memo(({ unit, summaryDetail }) => {
           await connectGoogleHome(unit.remote_control_options.googlehome))();
       }
     }
-  }, [connectGoogleHome, unit]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [unit]);
+
   return (
     <View style={styles.container}>
       {!!devices &&

package/src/utils/Apis/axios.js

@@ -5,6 +5,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { PROBLEM_CODE } from '../../configs/Constants';
 import { getTranslate } from '../I18n';
 import { SCConfig } from '../../configs';
+import { isHTML } from '../Validation';
 
 const api = create({
   headers: {
@@ -46,6 +47,11 @@ const parseErrorResponse = async (error) => {
         case PROBLEM_CODE.SERVER_ERROR:
           message = getTranslate(SCConfig.language, 'server_error');
           break;
+        case PROBLEM_CODE.CLIENT_ERROR:
+          if (error.status === 404 && isHTML(error.data)) {
+            message = getTranslate(SCConfig.language, 'not_found');
+          }
+          break;
       }
       ToastBottomHelper.error(message);
     }