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

package/src/commons/SelectUnit/index.js

@@ -1,12 +1,14 @@
 import { useNavigation } from '@react-navigation/native';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-import React, { memo, useCallback, useEffect, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
 
 import { API } from '../../configs';
 import { RadioCircle, Section, ViewButtonBottom } from '../../commons';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import { axiosGet } from '../../utils/Apis/axios';
+import { convertToSlug } from '../../utils/Functions/Search';
 import Text from '../../commons/Text';
+import { Search } from '../../commons/DevMode';
 import AccessibilityLabel from '../../configs/AccessibilityLabel';
 import styles from './styles';
 import { HeaderCustom } from '../Header';
@@ -48,11 +50,20 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
   const t = useTranslations();
   const { goBack } = useNavigation();
   const [selectedIndex, setSelectedIndex] = useState(-1);
+  const [search, setSearch] = useState('');
   const [units, setUnits] = useState([]);
 
+  const filterUnits = useMemo(() => {
+    setSelectedIndex(-1);
+    return units.filter((unit) => {
+      const text = convertToSlug(search);
+      return convertToSlug(unit.name).includes(text);
+    });
+  }, [units, search]);
+
   const onRightClick = useCallback(() => {
-    onPressNext(units[selectedIndex]);
-  }, [onPressNext, selectedIndex, units]);
+    onPressNext(filterUnits[selectedIndex]);
+  }, [onPressNext, selectedIndex, filterUnits]);
 
   useEffect(() => {
     (async () => {
@@ -66,6 +77,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
       }
     })();
   }, []);
+
   return (
     <View
       style={styles.container}
@@ -73,6 +85,7 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
     >
       <HeaderCustom title={title} isShowSeparator />
       <Text style={styles.subtitle}>{subTitle}</Text>
+      <Search onSearch={setSearch} />
       <View style={styles.contentContainer}>
         <ScrollView
           style={styles.scrollContainer}
@@ -80,13 +93,14 @@ const SelectUnit = ({ title, subTitle, onPressNext }) => {
           scrollIndicatorInsets={{ right: 1 }}
         >
           <Section type={'border'}>
-            {units.map((item, index) => (
+            {filterUnits.map((item, index) => (
               <UnitItem
                 key={item?.id?.toString()}
                 item={item}
                 index={index}
                 setSelectedIndex={setSelectedIndex}
                 selectedIndex={selectedIndex}
+                accessibilityLabel={AccessibilityLabel.ITEM_UNIT}
               />
             ))}
           </Section>

package/src/commons/SelectUnit/styles.js

@@ -28,7 +28,6 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     marginTop: 16,
     marginLeft: 16,
-    marginBottom: 16,
   },
   row: {
     flex: 1,

package/src/commons/Widgets/IFrame/IFrameStyles.js

@@ -34,5 +34,6 @@ export const styles = StyleSheet.create({
     width: '100%',
     display: 'flex',
     height: 200,
+    marginBottom: 16,
   },
 });

package/src/commons/Widgets/IFrameWithConfig/IFrameWithConfigStyles.js

@@ -5,5 +5,6 @@ export const styles = {
   wrapper: {
     width: '100%',
     display: 'flex',
+    marginBottom: 16,
   },
 };

package/src/configs/API.js

@@ -41,6 +41,10 @@ const API = {
     STAR_AUTOMATE_SCRIPTS: (id) =>
       `/property_manager/units/${id}/star_automate_scripts/`,
   },
+  UNIT_V2: {
+    MY_UNITS: (page, pageSize) =>
+      `/property_manager/units_v2/my_with_devices/?page=${page}&page_size=${pageSize}`,
+  },
   SUB_UNIT: {
     END_DEVICES_STATUS: (stationId) =>
       `/property_manager/iot_dashboard/stations_v2/${stationId}/end_devices_status/`,

package/src/configs/Constants.js

@@ -98,6 +98,9 @@ const marginItem = 12;
 const marginHorizontal = 16;
 const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
 const heightItem = (widthItem / 166) * 106;
+
+export const PAGE_SIZE = 10;
+
 export const DEVICE_SIZE = {
   width: widthItem,
   height: heightItem,

package/src/context/reducer.ts

@@ -15,7 +15,6 @@ import {
   BluetoothType,
 } from './actionType';
 import _ from 'lodash';
-import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
 import { AppState } from 'react-native';
 
 export type ContextData = {
@@ -582,10 +581,6 @@ export const reducer = (currentState: ContextData, action: Action) => {
       };
 
     case Action.LOGOUT:
-      removeMultiple([
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS,
-        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT,
-      ]);
       return {
         ...currentState,
       };

package/src/navigations/UnitStack.js

@@ -60,6 +60,7 @@ import TDSGuide from '../screens/TDSGuide';
 import ChooseLocation from '../screens/Unit/ChooseLocation';
 import UnitDetail from '../screens/Unit/Detail';
 import ManageUnit from '../screens/Unit/ManageUnit';
+import GoToDetailUnit from '../screens/Unit/GoToDetailUnit';
 import SelectAddress from '../screens/Unit/SelectAddress';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import ListSmartAccount from '../screens/Unit/SmartAccount';
@@ -223,6 +224,13 @@ export const UnitStack = memo((props) => {
           headerShown: false,
         }}
       />
+      <Stack.Screen
+        name={Route.GoToDetailUnit}
+        component={GoToDetailUnit}
+        options={{
+          headerShown: false,
+        }}
+      />
       <Stack.Screen
         name={Route.ListSmartAccount}
         component={ListSmartAccount}

package/src/screens/Device/__test__/sensorDisplayItem.test.js

@@ -18,6 +18,7 @@ import MockAdapter from 'axios-mock-adapter';
 import api from '../../../utils/Apis/axios';
 import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
 import LabelValue from '../../../commons/Device/LabelValue';
+import Text from '../../../commons/Text';
 
 jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{}, null],
@@ -51,6 +52,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Chart',
       is_configuration_ready: true,
     };
 
@@ -65,6 +67,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const visualChart = instance.findAllByType(VisualChart);
     expect(visualChart).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Chart');
   });
 
   it('render ActionGroup', async () => {
@@ -82,6 +86,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'LED',
       is_configuration_ready: true,
     };
 
@@ -96,6 +101,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const actionGroup = instance.findAllByType(ActionGroup);
     expect(actionGroup).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('LED');
   });
 
   it('render camera', async () => {
@@ -113,6 +120,7 @@ describe('Test SensorDisplayItem', () => {
           },
         ],
       },
+      label: 'Camera',
       is_configuration_ready: true,
     };
 
@@ -127,6 +135,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const mediaPlayerDetail = instance.findAllByType(MediaPlayerDetail);
     expect(mediaPlayerDetail).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Camera');
   });
 
   it('render flat_list', async () => {
@@ -213,6 +223,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'gauge',
       },
+      label: 'Gauge',
       is_configuration_ready: true,
     };
 
@@ -227,6 +238,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Anemometer);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Gauge');
   });
 
   it('test render progress_bar', async () => {
@@ -237,6 +250,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'progress_bar',
       },
+      label: 'Brightness',
       is_configuration_ready: true,
     };
 
@@ -251,6 +265,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(ProgressBar);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Brightness');
   });
 
   it('test render Compass', async () => {
@@ -261,6 +277,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         template: 'compass',
       },
+      label: 'Compass',
       is_configuration_ready: true,
     };
 
@@ -275,6 +292,8 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const flatListItems = instance.findAllByType(Compass);
     expect(flatListItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Compass');
   });
 
   it('test render alert_status', async () => {
@@ -314,6 +333,8 @@ describe('Test SensorDisplayItem', () => {
 
     const currentRainSensor = instance.findByType(CurrentRainSensor);
     expect(currentRainSensor.props).toEqual(expectProps);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Circle');
   };
 
   it('render circle_mini', async () => {
@@ -332,6 +353,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -371,6 +393,7 @@ describe('Test SensorDisplayItem', () => {
           color: 'blue',
         },
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -400,6 +423,7 @@ describe('Test SensorDisplayItem', () => {
       configuration: {
         config: null,
       },
+      label: 'Circle',
       is_configuration_ready: true,
     };
 
@@ -417,6 +441,7 @@ describe('Test SensorDisplayItem', () => {
       order: 0,
       template: 'LabelValue',
       configuration: {},
+      label: 'Label',
       is_configuration_ready: true,
     };
 
@@ -431,5 +456,7 @@ describe('Test SensorDisplayItem', () => {
     const instance = tree.root;
     const displayItems = instance.findAllByType(LabelValue);
     expect(displayItems).toHaveLength(1);
+    const labels = instance.findAllByType(Text);
+    expect(labels[0].props.children).toEqual('Label');
   });
 });

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;
 
@@ -137,6 +137,7 @@ export const SensorDisplayItem = ({
         <View
           style={[styles.mediaContainer, isWidgetOrder && styles.cameraOrder]}
         >
+          <Text style={styles.widgetLabelCamera}>{label}</Text>
           <MediaPlayerDetail
             uri={uri}
             thumbnail={{
@@ -169,92 +170,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 +300,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,20 @@ export default StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
+  widgetLabel: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+    marginBottom: 4,
+  },
+  widgetLabelCamera: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginBottom: 4,
+  },
+  widgetLabelHistory: {
+    fontSize: 16,
+    color: Colors.Black,
+    marginHorizontal: 20,
+  },
 });