@eohjsc/react-native-smart-city 0.7.25 → 0.7.27

package/src/screens/Device/components/DonutChart.js

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
-import Text from '../../../commons/Text';
 import Highcharts from '../../../commons/Highcharts';
 import { useConfigGlobalState } from '../../../iot/states';
 
@@ -63,7 +62,7 @@ const chartOptions = {
 };
 
 const DonutCharts = ({ item, isWidgetOrder }) => {
-  const { configuration, label } = item;
+  const { configuration } = item;
   const { configs = [] } = configuration;
   const [configValues] = useConfigGlobalState('configValues');
   const [highchartsWebviewRef, setHighchartsWebviewRef] = useState(null);
@@ -92,13 +91,7 @@ const DonutCharts = ({ item, isWidgetOrder }) => {
   }, [configs, getConfigValue, highchartsWebviewRef]);
 
   return (
-    <View>
-      <View style={styles.titleHistory}>
-        <Text type="H3" semibold color={Colors.Gray9}>
-          {label}
-        </Text>
-      </View>
-
+    <View style={styles.wrapDonut}>
       <Highcharts
         setRef={setHighchartsWebviewRef}
         options={chartOptions}
@@ -113,15 +106,13 @@ const DonutCharts = ({ item, isWidgetOrder }) => {
 };
 
 const styles = StyleSheet.create({
+  wrapDonut: {
+    marginBottom: 16,
+  },
   chartStyle: {
     backgroundColor: Colors.White,
     flex: 1,
   },
-  titleHistory: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-  },
   webviewStyle: {
     flex: 1,
     minHeight: 200,

package/src/screens/Device/components/SensorDisplayItem.js

@@ -15,7 +15,7 @@ import Compass from '../../../commons/Device/WindDirection/Compass';
 import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
 import MediaPlayerDetail from '../../../commons/MediaPlayerDetail';
 import IFrame from '../../../commons/Widgets/IFrame/IFrame';
-import IFrameWithConfig from '../../../commons/Widgets/IFrameWithConfig/IFrameWithConfig';
+import Text from '../../../commons/Text';
 import { Device } from '../../../configs';
 import { AccessibilityLabel, WIDGET_TYPE } from '../../../configs/Constants';
 import { useSCContextSelector } from '../../../context';
@@ -44,7 +44,7 @@ export const SensorDisplayItem = ({
   isWidgetOrder,
 }) => {
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
-  const { configuration = {}, id: idTemplate } = item;
+  const { configuration = {}, id: idTemplate, label } = item;
   const { type, template, uri, id, name, title, value_evaluation } =
     configuration;
 
@@ -134,19 +134,22 @@ export const SensorDisplayItem = ({
   switch (item.template) {
     case 'camera':
       return (
-        <View
-          style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
-        >
-          <MediaPlayerDetail
-            uri={uri}
-            thumbnail={{
-              uri: background,
-            }}
-            key={`camera-device-${id}`}
-            cameraName={name}
-            width={standardizeWidth}
-            height={standardizeHeight}
-          />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <View
+            style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
+          >
+            <MediaPlayerDetail
+              uri={uri}
+              thumbnail={{
+                uri: background,
+              }}
+              key={`camera-device-${id}`}
+              cameraName={name}
+              width={standardizeWidth}
+              height={standardizeHeight}
+            />
+          </View>
         </View>
       );
     // change response format, todo Bang refactor after fix
@@ -169,92 +172,117 @@ export const SensorDisplayItem = ({
     case 'switch_button_action_template':
     case 'TextBoxTemplate':
     case 'TerminalBoxTemplate':
+    case WIDGET_TYPE.iframeWithConfig:
       return (
-        <ActionGroup
-          accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <ActionGroup
+            accessibilityLabel={AccessibilityLabel.DEVICE_DETAIL_ACTION_GROUP}
+            doAction={doAction}
+            sensor={sensor}
+            id={idTemplate}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case WIDGET_TYPE.iframe:
       return (
-        <IFrame
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
-      );
-    case WIDGET_TYPE.iframeWithConfig:
-      return (
-        <IFrameWithConfig
-          doAction={doAction}
-          sensor={sensor}
-          id={idTemplate}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <IFrame
+            doAction={doAction}
+            sensor={sensor}
+            id={idTemplate}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'history':
       return (
-        <VisualChart
-          item={item}
-          sensor={sensor}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabelHistory}>{label}</Text>
+          <VisualChart
+            item={item}
+            sensor={sensor}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'circle_mini':
       return (
-        <CurrentRainSensor
-          size={120}
-          textType="H4"
-          iconSize={25}
-          data={getDataCircleMini(item)}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <CurrentRainSensor
+            size={120}
+            textType="H4"
+            iconSize={25}
+            data={getDataCircleMini(item)}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     // use the same method to get data for circle_mini
     case 'LabelValue':
       return (
-        <LabelValue
-          data={getDataCircleMini(item)}
-          item={item}
-          isWidgetOrder={isWidgetOrder}
-        />
+        <View>
+          <Text style={styles.widgetLabel}>{label}</Text>
+          <LabelValue
+            data={getDataCircleMini(item)}
+            item={item}
+            isWidgetOrder={isWidgetOrder}
+          />
+        </View>
       );
     case 'value':
       switch (type || template) {
         case 'circle':
           return (
-            <CurrentRainSensor
-              data={getData(item)}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <CurrentRainSensor
+                data={getData(item)}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'simple_list':
           return (
-            <PMSensorIndicator
-              data={getData(item)}
-              style={styles.simpleList}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <PMSensorIndicator
+                data={getData(item)}
+                style={styles.simpleList}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'gauge':
-          return <Anemometer data={getData(item)} item={item} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <Anemometer data={getData(item)} item={item} />
+            </View>
+          );
         case 'progress_bar':
           return (
-            <ProgressBar
-              data={getData(item)}
-              item={item}
-              isWidgetOrder={isWidgetOrder}
-            />
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <ProgressBar
+                data={getData(item)}
+                item={item}
+                isWidgetOrder={isWidgetOrder}
+              />
+            </View>
           );
         case 'compass':
-          return <Compass data={getData(item)} isWidgetOrder={isWidgetOrder} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <Compass data={getData(item)} isWidgetOrder={isWidgetOrder} />
+            </View>
+          );
         case 'alert_status':
           return (
             <DeviceAlertStatus
@@ -274,7 +302,12 @@ export const SensorDisplayItem = ({
             />
           );
         case 'donut_chart_race':
-          return <DonutCharts item={item} isWidgetOrder={isWidgetOrder} />;
+          return (
+            <View>
+              <Text style={styles.widgetLabel}>{label}</Text>
+              <DonutCharts item={item} isWidgetOrder={isWidgetOrder} />
+            </View>
+          );
         default:
           return <ListQualityIndicator data={getData(item)} />;
       }

package/src/screens/Device/components/VisualChart.js

@@ -13,7 +13,6 @@ import { useFetchConfigHistory } from '../../../commons/UnitSummary/ConfigHistor
 import { StyleSheet, View } from 'react-native';
 import { Colors } from '../../../configs';
 import ChartAggregationOption from '../../../commons/ChartAggregationOption';
-import Text from '../../../commons/Text';
 import { CHART_GROUP_TYPE, CHART_TIME } from '../../../configs/Constants';
 import { getDateRangeOfWeek } from '../../../utils/Utils';
 import Highcharts from '../../../commons/Highcharts';
@@ -113,16 +112,10 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.White,
     flex: 1,
   },
-  titleHistory: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: 16,
-  },
   aggregationView: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 16,
-    paddingTop: 8,
     alignSelf: 'flex-end',
   },
   webviewStyle: {
@@ -312,11 +305,6 @@ const VisualChart = ({ item, isDemo = false, isWidgetOrder }) => {
 
   return (
     <View style={styles.container}>
-      <View style={styles.titleHistory}>
-        <Text type="H3" semibold color={Colors.Gray9}>
-          {item.label}
-        </Text>
-      </View>
       <View style={styles.aggregationView}>
         {canChooseGroup && (
           <ChartAggregationOption

package/src/screens/Device/styles.js

@@ -99,4 +99,15 @@ export default StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
+  widgetLabel: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+    marginBottom: 4,
+  },
+  widgetLabelHistory: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+  },
 });

package/src/screens/SubUnit/AddSubUnit.js

@@ -13,11 +13,14 @@ import _TextInput from '../../commons/Form/TextInput';
 import Text from '../../commons/Text';
 import { API, Colors } from '../../configs';
 import { AccessibilityLabel } from '../../configs/Constants';
-import { useSCContextSelector } from '../../context';
 import useKeyboardShow from '../../hooks/Common/useKeyboardShow';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { replace } from '../../navigations/utils';
-import { axiosPost, createFormData } from '../../utils/Apis/axios';
+import {
+  axiosPost,
+  createFormData,
+  fetchWithCache,
+} from '../../utils/Apis/axios';
 import { useBackendPermission } from '../../utils/Permission/backend';
 import Routes from '../../utils/Route';
 import { ToastBottomHelper } from '../../utils/Utils';
@@ -29,7 +32,6 @@ const AddSubUnit = ({ route }) => {
   const { dismissKeyboard } = useKeyboardShow();
   const { navigate, goBack, dispatch } = useNavigation();
   const permissions = useBackendPermission();
-  const myUnits = useSCContextSelector((state) => state.myUnits);
 
   const {
     unit,
@@ -42,11 +44,15 @@ const AddSubUnit = ({ route }) => {
   const [wallpaper, setWallpaper] = useState('');
   const [imageUrl, setImageUrl] = useState('');
   const [showImagePicker, setShowImagePicker] = useState(false);
+  const [unitDetail, setUnitDetail] = useState({});
   let awaitCreate = useRef(false);
 
-  const unitChoose = useMemo(() => {
-    return myUnits?.find((item) => item?.id === unit?.id);
-  }, [myUnits, unit?.id]);
+  const fetchUnitDetail = useCallback(async () => {
+    await fetchWithCache(API.UNIT.UNIT_DETAIL(unit?.id), {}, (response) => {
+      const { success, data } = response;
+      success && setUnitDetail(data);
+    });
+  }, [unit?.id]);
 
   const cleanData = () => {
     setRoomName('');
@@ -133,7 +139,7 @@ const AddSubUnit = ({ route }) => {
         } else {
           awaitCreate.current = false;
           if (
-            unitChoose?.stations?.length >= permissions?.max_stations_per_unit
+            unitDetail?.stations?.length >= permissions?.max_stations_per_unit
           ) {
             ToastBottomHelper.error(
               t('reach_max_stations_per_unit', {
@@ -159,7 +165,7 @@ const AddSubUnit = ({ route }) => {
     goBack,
     navigate,
     route.params,
-    unitChoose?.stations?.length,
+    unitDetail?.stations?.length,
     permissions?.max_stations_per_unit,
   ]);
 
@@ -174,6 +180,10 @@ const AddSubUnit = ({ route }) => {
     }
   }, [imageUrl]);
 
+  useEffect(() => {
+    fetchUnitDetail();
+  }, [fetchUnitDetail]);
+
   const onChangeRoomName = useCallback(
     (value) => {
       setRoomName(value);

package/src/screens/SubUnit/__test__/AddSubUnit.test.js

@@ -295,6 +295,11 @@ describe('Test AddSubUnit', () => {
       isInsideUnit: false,
     };
     const spyToastError = jest.spyOn(ToastBottomHelper, 'error');
+    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {
+      id: 1,
+      name: 'unit 1',
+      stations: [{ id: 1, name: 'station' }],
+    });
     mock.onPost(API.SUB_UNIT.CREATE_SUB_UNIT(1)).reply(400, {});
     await act(async () => {
       tree = await create(
@@ -308,9 +313,6 @@ describe('Test AddSubUnit', () => {
               },
             },
           },
-          myUnits: [
-            { id: 1, name: 'unit 1', stations: [{ id: 1, name: 'station' }] },
-          ],
         })
       );
     });

package/src/screens/Unit/GoToDetailUnit.js

@@ -0,0 +1,30 @@
+import { useNavigation } from '@react-navigation/native';
+import React, { useCallback } from 'react';
+
+import Routes from '../../utils/Route';
+import SelectUnit from '../../commons/SelectUnit';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+
+const GoToDetailUnit = () => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+
+  const goToDetail = useCallback(
+    (item) => {
+      navigation.navigate(Routes.UnitDetail, {
+        unitId: item.id,
+      });
+    },
+    [navigation]
+  );
+
+  return (
+    <SelectUnit
+      title={t('text_select_a_unit')}
+      subTitle={t('text_select_go_to_unit_detail')}
+      onPressNext={goToDetail}
+    />
+  );
+};
+
+export default GoToDetailUnit;

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

@@ -0,0 +1,103 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import MockAdapter from 'axios-mock-adapter';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import GoToDetailUnit from '../GoToDetailUnit';
+import { Search } from '../../../commons/DevMode';
+import { AccessibilityLabel } from '../../../configs/Constants';
+import Routes from '../../../utils/Route';
+import api from '../../../utils/Apis/axios';
+import { API } from '../../../configs';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <GoToDetailUnit />
+  </SCProvider>
+);
+
+const mock = new MockAdapter(api.axiosInstance);
+
+describe('Test GoToDetailUnit', () => {
+  let tree;
+  const data = [
+    {
+      id: 1,
+      name: 'Name 1',
+    },
+    {
+      id: 2,
+      name: 'Name 2',
+    },
+  ];
+
+  const mockedNavigate = useNavigation().navigate;
+  beforeEach(() => {
+    mockedNavigate.mockReset();
+    mock.resetHistory();
+  });
+
+  it('test render and navigate', async () => {
+    mock.onGet(API.SHARE.UNITS()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const unitItems = instance.findAllByProps({
+      accessibilityLabel: AccessibilityLabel.ITEM_UNIT,
+    });
+    expect(unitItems).toHaveLength(2);
+    const selectUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.SELECT_UNIT_SELECT}-1`,
+    });
+    await act(async () => {
+      await selectUnit.props.onPress();
+    });
+    const rightClick = instance.findByProps({
+      accessibilityLabelPrefix: AccessibilityLabel.PREFIX.SELECT_UNIT,
+    });
+    await act(async () => {
+      await rightClick.props.onRightClick();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 1,
+    });
+  });
+
+  it('test filter unit by name', async () => {
+    mock.onGet(API.SHARE.UNITS()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+
+    const instance = tree.root;
+    const search = instance.findByType(Search);
+    await act(() => {
+      search.props.onSearch('Name 2');
+    });
+    const unitItems = instance.findAllByProps({
+      accessibilityLabel: AccessibilityLabel.ITEM_UNIT,
+    });
+    expect(unitItems).toHaveLength(1);
+    const selectUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.SELECT_UNIT_SELECT}-2`,
+    });
+    await act(async () => {
+      await selectUnit.props.onPress();
+    });
+    const rightClick = instance.findByProps({
+      accessibilityLabelPrefix: AccessibilityLabel.PREFIX.SELECT_UNIT,
+    });
+    await act(async () => {
+      await rightClick.props.onRightClick();
+    });
+
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitDetail, {
+      unitId: 2,
+    });
+  });
+});

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

@@ -382,6 +382,7 @@ export default {
   select_a_sub_unit_want_add_device:
     'Select a sub-unit that you want to add this device in',
   text_select_a_unit_have_device: 'Select a unit that has this device',
+  text_select_go_to_unit_detail: 'Select a unit to view details',
   text_select_permissions: 'Select permissions',
   text_select_permissions_desc: 'Select permissions will be grant',
   text_read_config: 'Read configs',

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

@@ -435,6 +435,7 @@ export default {
   text_select_a_gateway: 'Chọn một gateway',
   text_select_a_unit_desc: 'Chọn 1 địa điểm bạn muốn thêm thành viên',
   text_select_a_unit_have_device: 'Chọn một địa điểm có thiết bị này',
+  text_select_go_to_unit_detail: 'Chọn địa điểm để xem chi tiết',
   select_a_sub_unit_want_add_device:
     'Chọn một đơn vị con mà bạn muốn thêm thiết bị này vào',
   text_select_permissions: 'Chọn hành động',

package/src/utils/Route/index.js

@@ -49,6 +49,7 @@ const Routes = {
   Dashboard: 'Dashboard',
   Shared: 'Shared',
   UnitDetail: 'UnitDetail',
+  GoToDetailUnit: 'GoToDetailUnit',
   DrawerMain: 'DrawerMain',
   ConnectDevices: 'ConnectDevices',
   SharedStack: 'SharedStack',

package/src/utils/Storage.js

@@ -4,8 +4,6 @@ export const STORAGE_KEY = {
   FIREBASE_APP_CONFIG: 'app_config',
   FIREBASE_EXCHANGE_RATES: 'exchange_rates',
   FIREBASE_REVIEW_COMMENT_VIDEO: 'review_comment_video',
-  IS_FIRST_TIME_LOAD_MY_UNITS: 'IS_FIRST_TIME_LOAD_MY_UNITS',
-  IS_FIRST_TIME_LOAD_MY_SHARE_UNIT: 'IS_FIRST_TIME_LOAD_MY_SHARE_UNIT',
 };
 
 export const storeData = async (key, value) => {

package/src/utils/Utils.js

@@ -231,7 +231,8 @@ export const PIN_MAPPING = {
   },
 };
 
-export const keyExtractor = (item, index) => (item?.id || index).toString();
+export const keyExtractor = (item, index) =>
+  item?.id ? `id-${item.id}` : `index-${index}`;
 
 export default {
   validateEmail,

package/src/utils/Functions/preloadImages.js

@@ -1,38 +0,0 @@
-import FastImage from 'react-native-fast-image';
-import { API } from '../../configs';
-import { axiosGet } from '../Apis/axios';
-import { getData, STORAGE_KEY, storeData } from '../Storage';
-
-export const preloadImagesFromUnits = async (units, storeKey) => {
-  const isFirstTime = await getData(storeKey);
-  if (units?.length && !isFirstTime) {
-    await storeData(storeKey, 'true');
-    const results = await Promise.all(
-      units.map(async (item) => {
-        const unitId =
-          storeKey === STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS
-            ? item?.id
-            : item?.unit?.id;
-        if (unitId) {
-          const { success, data } = await axiosGet(
-            API.UNIT.UNIT_DETAIL(unitId),
-            {},
-            true
-          );
-          return success && data;
-        }
-      })
-    );
-
-    const icons = results
-      .map((item) => item?.stations?.map((i) => i?.background) || [])
-      .flat()
-      .filter(Boolean);
-    FastImage.preload(
-      icons.map((uri) => ({
-        uri,
-        priority: FastImage.priority.high,
-      }))
-    );
-  }
-};