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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.10",
+  "version": "0.3.11",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/SubUnit/Favorites/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useSensorsStatus } from '../../../hooks/Common';
 
@@ -8,7 +9,7 @@ import ItemDevice from '../../Device/ItemDevice';
 import ItemOneTap from '../OneTap/ItemOneTap';
 import ItemAddNew from '../../Device/ItemAddNew';
 import styles from './styles';
-import { notImplemented } from '../../../utils/Utils';
+import Routes from '../../../utils/Route';
 
 const SubUnitFavorites = ({
   isOwner,
@@ -18,11 +19,14 @@ const SubUnitFavorites = ({
   wrapItemStyle,
 }) => {
   const t = useTranslations();
+  const { navigate } = useNavigation();
 
   const { getStatus, serverDown } = useSensorsStatus(unit, favoriteDevices);
 
   const handleOnAddNew = () => {
-    notImplemented(t);
+    navigate(Routes.SelectDevices, {
+      unitId: unit.id,
+    });
   };
 
   return (

package/src/configs/API.js

@@ -29,6 +29,9 @@ const API = {
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,
+    DEVICES: (id) => `/property_manager/units/${id}/devices/`,
+    ADD_DEVICES_TO_FAVORITES: (id) =>
+      `/property_manager/units/${id}/add_devices_to_favourites/`,
   },
   SUB_UNIT: {
     REMOVE_SUB_UNIT: (unitId, id) =>
@@ -173,6 +176,7 @@ const API = {
       `/notifications/eoh/?page=${page}&type=${type}`,
     SET_READ: (id) => `/notifications/eoh/${id}/set_read/`,
   },
+  VALUE_EVALUATIONS: () => '/property_manager/config_value_evaluations/',
   EXTERNAL: {
     GOOGLE_MAP: {
       AUTO_COMPLETE:

package/src/context/actionType.ts

@@ -12,14 +12,15 @@ export const Action = {
   CAMERA_STATUS_CHANGE: 'CAMERA_STATUS_CHANGE',
   CLOSE_ALL_CAMERA: 'CLOSE_ALL_CAMERA',
   SET_FAVORITE_DEVICES: 'SET_FAVORITE_DEVICES',
-  ADD_DEVICE_TO_FAVORITES: 'ADD_DEVICE_TO_FAVORITES',
-  REMOVE_DEVICE_FROM_FAVORITES: 'REMOVE_DEVICE_FROM_FAVORITES',
+  ADD_DEVICES_TO_FAVORITES: 'ADD_DEVICE_TO_FAVORITES',
+  REMOVE_DEVICES_FROM_FAVORITES: 'REMOVE_DEVICE_FROM_FAVORITES',
   SET_STARRED_SCRIPTS: 'SET_STARRED_SCRIPTS',
   STAR_SCRIPT: 'STAR_SCRIPT',
   UNSTAR_SCRIPT: 'UNSTAR_SCRIPT',
   CONNECTING_GOOGLE_HOME: 'CONNECTING_GOOGLE_HOME',
   SET_GOOGLE_HOME_CONNECTIONS: 'SET_GOOGLE_HOME_CONNECTIONS',
   CHANGE_GOOGLE_HOME_CONN_STATE: 'CHANGE_GOOGLE_HOME_CONN_STATE',
+  UPDATE_VALUE_EVALUATIONS: 'UPDATE_VALUE_EVALUATIONS',
 };
 
 export type AuthData = {

package/src/context/mockStore.ts

@@ -31,11 +31,23 @@ export const mockDataStore: ContextData = {
   automate: {
     starredScriptIds: [],
   },
+  app: {
+    isFirstOpenCamera: true,
+    isLavidaSource: false,
+    isConnectWifiGateway: false,
+    isBluetoothEnabled: true,
+    isNetworkConnected: true,
+    camera_opened: [],
+  },
   iot: {
-    isFirstTimeConnect: true,
-    isConnecting: false,
-    googlehome: {},
+    googlehome: {
+      isFirstTimeConnect: true,
+      isConnecting: false,
+      connections: {},
+    },
   },
+  valueEvaluations: {},
+  fetchedValueEvaluationUnits: [],
 };
 
 export const mockSCStore = (data: ContextData): ContextData => {
@@ -83,5 +95,7 @@ export const mockSCStore = (data: ContextData): ContextData => {
         connections: {},
       },
     },
+    valueEvaluations: {},
+    fetchedValueEvaluationUnits: [],
   };
 };

package/src/context/reducer.ts

@@ -12,7 +12,7 @@ import {
   AppType,
   IoTType,
 } from './actionType';
-import { uniq } from 'lodash';
+import { uniq, reduce } from 'lodash';
 
 export type ContextData = {
   auth: AuthData;
@@ -24,6 +24,8 @@ export type ContextData = {
   automate: AutomateType;
   app: AppType;
   iot: IoTType;
+  valueEvaluations: {};
+  fetchedValueEvaluationUnits: Array<number>;
 };
 
 export type Action = {
@@ -65,6 +67,8 @@ export const initialState = {
       connections: {},
     },
   },
+  valueEvaluations: {},
+  fetchedValueEvaluationUnits: [],
 };
 
 export const reducer = (currentState: ContextData, action: Action) => {
@@ -201,7 +205,7 @@ export const reducer = (currentState: ContextData, action: Action) => {
           favoriteDeviceIds: payload,
         },
       };
-    case Action.ADD_DEVICE_TO_FAVORITES:
+    case Action.ADD_DEVICES_TO_FAVORITES:
       return {
         ...currentState,
         unit: {
@@ -211,13 +215,13 @@ export const reducer = (currentState: ContextData, action: Action) => {
           ),
         },
       };
-    case Action.REMOVE_DEVICE_FROM_FAVORITES:
+    case Action.REMOVE_DEVICES_FROM_FAVORITES:
       return {
         ...currentState,
         unit: {
           ...currentState.unit,
           favoriteDeviceIds: currentState.unit.favoriteDeviceIds.filter(
-            (deviceId) => deviceId !== payload
+            (deviceId) => !payload.includes(deviceId)
           ),
         },
       };
@@ -294,6 +298,26 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.UPDATE_VALUE_EVALUATIONS:
+      // eslint-disable-next-line no-case-declarations
+      const { data, unitId } = payload;
+      return {
+        ...currentState,
+        fetchedValueEvaluationUnits:
+          currentState.fetchedValueEvaluationUnits.indexOf(unitId) !== -1
+            ? currentState.fetchedValueEvaluationUnits
+            : [...currentState.fetchedValueEvaluationUnits, unitId],
+        valueEvaluations: reduce(
+          data,
+          (dict, item) => {
+            // eslint-disable-next-line no-param-reassign
+            dict[item.config] = item;
+            return dict;
+          },
+          currentState.valueEvaluations
+        ),
+      };
+
     default:
       return currentState;
   }

package/src/hooks/IoT/__test__/useValueEvaluation.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import MockAdapter from 'axios-mock-adapter';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { useValueEvaluations } from '../index';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockedSetAction = jest.fn();
+
+const wrapper = ({ children }) => <SCProvider>{children}</SCProvider>;
+
+const mockUseContext = jest.fn().mockImplementation(() => ({
+  stateData: mockSCStore({}),
+  setAction: mockedSetAction,
+}));
+
+React.useContext = mockUseContext;
+
+describe('Test useValueEvaluation', () => {
+  beforeEach(() => {
+    mock.resetHistory();
+  });
+
+  it('test unitId null', async () => {
+    renderHook(() => useValueEvaluations(null), {
+      wrapper,
+    });
+    expect(mock.history.get.length).toBe(0);
+  });
+
+  it('test unitId not null request success', async () => {
+    mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(200, {
+      results: [],
+      next: 'link',
+    });
+    mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(200, {
+      results: [],
+    });
+    renderHook(() => useValueEvaluations(1), {
+      wrapper,
+    });
+    expect(mock.history.get.length).toBe(1);
+  });
+
+  it('test request failed', async () => {
+    mock.onGet(API.VALUE_EVALUATIONS()).replyOnce(400, {
+      results: [],
+    });
+    renderHook(() => useValueEvaluations(1), {
+      wrapper,
+    });
+    expect(mock.history.get.length).toBe(1);
+  });
+});

package/src/hooks/IoT/index.js

@@ -1,4 +1,5 @@
 import useGGHomeConnection from './useGGHomeConnection';
 import useRemoteControl from './useRemoteControl';
+import useValueEvaluations from './useValueEvaluation';
 
-export { useGGHomeConnection, useRemoteControl };
+export { useGGHomeConnection, useRemoteControl, useValueEvaluations };

package/src/hooks/IoT/useValueEvaluation.js

@@ -0,0 +1,45 @@
+import { useCallback, useContext, useEffect } from 'react';
+import { API } from '../../configs';
+import { SCContext, useSCContextSelector } from '../../context';
+import { Action } from '../../context/actionType';
+import { axiosGet } from '../../utils/Apis/axios';
+
+const useValueEvaluations = (unitId) => {
+  const { setAction } = useContext(SCContext);
+
+  const fetchConfigValueEvaluations = useCallback(
+    async (page = 1) => {
+      if (!unitId) {
+        return;
+      }
+      const params = new URLSearchParams();
+      params.append('config__end_device__station__unit', unitId);
+      params.append('page', page);
+      const { success, data } = await axiosGet(API.VALUE_EVALUATIONS(), {
+        params,
+      });
+      if (success) {
+        setAction(Action.UPDATE_VALUE_EVALUATIONS, {
+          unitId,
+          data: data.results,
+        });
+        if (data.next) {
+          await fetchConfigValueEvaluations(page + 1);
+        }
+      }
+    },
+    [unitId, setAction]
+  );
+
+  const fetchedValueEvaluationUnits = useSCContextSelector((state) => {
+    return state.fetchedValueEvaluationUnits || [];
+  });
+
+  useEffect(() => {
+    if (!(fetchedValueEvaluationUnits.indexOf(unitId) !== -1)) {
+      fetchConfigValueEvaluations();
+    }
+  }, [unitId, fetchConfigValueEvaluations, fetchedValueEvaluationUnits]);
+};
+
+export default useValueEvaluations;

package/src/navigations/UnitStack.js

@@ -51,6 +51,7 @@ import EmergencySetting from '../screens/EmergencySetting';
 import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
+import SelectDevices from '../screens/Unit/SelectDevices';
 import { HanetCameraStack } from './HanetCameraStack';
 import { axiosGet } from '../utils/Apis/axios';
 import { API } from '../configs';
@@ -400,6 +401,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.SelectDevices}
+        component={SelectDevices}
+        options={{
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
   );
 });

package/src/screens/AddNewAction/SelectAction.js

@@ -134,6 +134,7 @@ const SelectAction = memo(({ route }) => {
           value: itemTemp?.value,
           config_id: itemTemp?.id,
           config_name: itemTemp?.name,
+          sensor_type: itemTemp?.sensor_type,
         },
         scriptName,
       });
@@ -300,9 +301,9 @@ const SelectAction = memo(({ route }) => {
       if (isNumberValue) {
         return `${item?.name} ${
           item?.title ? item.title : t('is_below') + ' (<)'
-        }{' '}${item?.value} ${item?.unit}`;
+        } ${item?.value} ${item?.unit}`;
       }
-      return t(stateConditionData?.stateValue[item?.value === 1 ? 1 : 0]);
+      return t(stateConditionData?.stateValue[item?.value]);
     },
     [t]
   );

package/src/screens/AddNewAction/SetupSensor.js

@@ -56,7 +56,7 @@ const SetUpSensor = () => {
     modalNumberConditionData[0]
   );
   const [itemActiveStateModal, setItemActiveStateModal] = useState(
-    modalStateConditionData?.stateValue[0]
+    modalStateConditionData?.stateValue[1]
   );
   const [value, setValue] = useState(parseFloat(item?.value || 0));
   const [minimum] = useState(isHasLimit ? parseInt(item?.range_min, 10) : 0);
@@ -226,7 +226,8 @@ const SetUpSensor = () => {
         <View style={styles.modalContent}>
           {(isNumberValue
             ? modalNumberConditionData
-            : modalStateConditionData?.stateValue
+            : /* Disable picking not_active/not_dectect option -> temporaly remove not_acitve option */
+              modalStateConditionData?.stateValue.slice(1)
           ).map((i, index) => (
             <>
               <TouchableOpacity

package/src/screens/Device/detail.js

@@ -44,12 +44,13 @@ import {
   useBoolean,
   useGGHomeDeviceConnected,
 } from '../../hooks/Common';
-import { useGGHomeConnection } from '../../hooks/IoT';
+import { useGGHomeConnection, useValueEvaluations } from '../../hooks/IoT';
 import { SensorDisplayItem } from './components/SensorDisplayItem';
 import { useSCContextSelector } from '../../context';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
 import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusViewHeader';
 import { useDisconnectedDevice } from './hooks/useDisconnectedDevice';
+import { useEvaluateValue } from './hooks/useEvaluateValue';
 import { Card } from '../../commons/CardShadow';
 import PreventAccess from '../../commons/PreventAccess';
 import { notImplemented } from '../../utils/Utils';
@@ -117,6 +118,8 @@ const DeviceDetail = ({ route }) => {
     });
   }, [display]);
 
+  useValueEvaluations(unitId || unitData?.id);
+
   useDisconnectedDevice(sensorName, isDeviceHasBle, serverDown);
 
   const isShowSetupEmergencyContact = useMemo(
@@ -438,21 +441,32 @@ const DeviceDetail = ({ route }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sensor, unit, isNetworkConnected, fetchDataDeviceDetail]);
 
+  const evaluateValue = useEvaluateValue();
+
   const getData = useCallback(
     (item) => {
       if (!item.configuration) {
         return;
       }
       const data = item.configuration.configs.map((config) => {
-        const value = displayValues.find((k) => k.id === config.id);
-        if (!value) {
+        const configValue = configValues[config.id];
+        const displayValue = displayValues.find((k) => k.id === config.id);
+        if (!configValue && !displayValue) {
           return;
         }
+        const value = configValue
+          ? {
+              id: config.id,
+              value: configValue,
+              evaluate: evaluateValue(config.id, configValue),
+            }
+          : displayValue;
+
         return { ...config, ...value };
       });
       return data.filter((value) => value);
     },
-    [displayValues]
+    [configValues, displayValues, evaluateValue]
   );
 
   useEffect(() => {
@@ -509,29 +523,6 @@ const DeviceDetail = ({ route }) => {
     }
   }, [sensor, display]);
 
-  useEffect(() => {
-    setDisplayValues((currentDisplayValues) => {
-      for (const [configId, value] of Object.entries(configValues)) {
-        const intId = parseInt(configId, 10);
-        const index = currentDisplayValues.findIndex(
-          (element) => element.id === intId
-        );
-
-        const item = currentDisplayValues[index];
-        if (index !== -1) {
-          currentDisplayValues[index].value = value;
-          currentDisplayValues[index].evaluate = item.evaluate;
-        } else {
-          currentDisplayValues.push({
-            id: intId,
-            value: value,
-          });
-        }
-      }
-      return currentDisplayValues;
-    });
-  }, [configValues, setDisplayValues]);
-
   const isShowEmergencyResolve =
     display.items.filter(
       (item) =>

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,
@@ -190,6 +193,8 @@ const UnitDetail = ({ route }) => {
     };
   }, [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/__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/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);
     }

package/src/utils/I18n/translations/en.json

@@ -995,5 +995,7 @@
   "detected": "Detected",
   "not_detected": "Not detected",
   "activated": "Activated",
+  "text_unit_add_to_favorites_no_devices": "You don't have any devices or all your devices was added to your favorites",
+  "not_found": "Not found",
   "not_activated": "Not activated"
 }

package/src/utils/I18n/translations/vi.json

@@ -996,5 +996,7 @@
   "detected": "Phát hiện",
   "not_detected": "Không phát hiện",
   "activated": "Được kích hoạt",
+  "text_unit_add_to_favorites_no_devices": "Bạn không có thiết bị nào hoặc tất cả thiết bị của bạn đã được thêm vào yêu thích",
+  "not_found": "Không tìm thấy",
   "not_activated": "Không kích hoạt"
 }

package/src/utils/Route/index.js

@@ -146,6 +146,7 @@ const Routes = {
   ItemPasscode: 'ItemPasscode',
   UnitMemberInformation: 'UnitMemberInformation',
   EnterPassword: 'EnterPassword',
+  SelectDevices: 'SelectDevices',
 };
 
 export default Routes;

package/src/utils/Validation.js

@@ -7,3 +7,6 @@ export const isValidPhoneNumber = (phoneNumber) => {
 export const isValidEmailAddress = (emailAddress) => {
   return /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/.test(emailAddress);
 };
+
+export const isHTML = (string) =>
+  /<[a-z]+\d?(\s+[\w-]+=("[^"]*"|'[^']*'))*\s*\/?>|&#?\w+;/i.test(string);