@eohjsc/react-native-smart-city 0.4.74 → 0.4.76

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.74",
+  "version": "0.4.76",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -138,7 +138,6 @@
     "lottie-react-native": "4.0.3",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.32",
-    "mqtt": "^5.0.5",
     "numeral": "^2.0.6",
     "patch-package": "^6.2.2",
     "pluralize": "^8.0.0",

package/src/commons/Device/ItemDevice.js

@@ -127,7 +127,7 @@ const ItemDevice = memo(
             size={14}
             color={Colors.Gray9}
             style={
-              Platform.OS === 'ios' ? styles.lineHeight22 : styles.marginBottom
+              Platform.OS === 'ios' ? styles.iosStyle : styles.androidStyle
             }
           >
             {title}
@@ -163,11 +163,13 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
   },
-  marginBottom: {
-    marginBottom: 8,
+  iosStyle: {
+    lineHeight: 22,
   },
-  lineHeight22: {
+  androidStyle: {
     lineHeight: 22,
+    includeFontPadding: false,
+    marginBottom: 8,
   },
   lineHeight20: {
     lineHeight: 20,

package/src/commons/Device/LastUpdatedText.js

@@ -4,18 +4,32 @@ import Text from '../Text';
 import { Colors } from '../../configs';
 import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
+import moment from 'moment';
+import AccessibilityLabel from '../../configs/AccessibilityLabel';
 
 const styles = StyleSheet.create({
   txtLastUpdate: {
-    marginLeft: 8,
     lineHeight: 20,
-    marginTop: 8,
+    marginTop: 6,
   },
 });
 
-const LastUpdatedText = memo(({ lastUpdated, showText }) => {
+const LastUpdatedText = memo(({ lastUpdated, showText, format = null }) => {
   const t = useTranslations();
 
+  if (format === 'DDMMYYYY') {
+    const dayMonthYear = moment(lastUpdated).format('HH:mm DD-MM-YYYY');
+    return (
+      <Text
+        accessibilityLabel={AccessibilityLabel.LAST_UPDATED_TEXT}
+        color={Colors.Gray7}
+        size={12}
+        style={styles.txtLastUpdate}
+      >
+        {dayMonthYear}
+      </Text>
+    );
+  }
   const lastUpdatedStr = lastUpdated
     ? timeDifference(new Date(), lastUpdated)
     : `5 ${t('seconds_ago')}`;

package/src/commons/MenuActionList/index.js

@@ -25,7 +25,6 @@ const MenuActionList = memo(
         return (
           <TouchableOpacity
             accessibilityLabel={AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE}
-            testID={AccessibilityLabel.MENU_ACTION_LIST_TOUCHABLE}
             onPress={onPress(item)}
             style={styles.item}
           >

package/src/commons/SubUnit/DeviceTemplate/ConfigAndEvaluation/ConfigAndEvaluation.js

@@ -4,29 +4,40 @@ import { View } from 'react-native';
 import Text from '../../../Text';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
 import { EvaluationConfigWrapper } from '../EvaluationOverConfig/EvaluationOverConfig';
+import IconComponent from '../../../IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigAndEvaluationDisplay = memo(
-  ({ valueEvaluation, stationItem, configValue }) => {
+  ({ device, valueEvaluation, stationItem, configValue }) => {
+    const { icon_kit, icon } = device || {};
     return (
       <>
         <View>
           <View style={styles.rowTop}>
-            <Text type="H4" bold>
-              {stationItem?.configuration?.config_data?.name}
+            <IconComponent icon={icon_kit || icon} />
+          </View>
+          <View style={styles.rowTop}>
+            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+          </View>
+          <View style={styles.rowBottom}>
+            <Text style={styles.textValue} bold>
+              {configValue?.value}{' '}
+              {stationItem?.configuration?.config_data?.unit}
             </Text>
           </View>
-          <Text type="Body" color={valueEvaluation?.color}>
+          <Text style={styles.textStatus} color={valueEvaluation?.color}>
             {valueEvaluation?.text}
           </Text>
         </View>
-        <View style={styles.rowBottom}>
-          <Text style={styles.textValue} bold>
-            {configValue?.value || '-'}
-          </Text>
-          <Text type="H4">{stationItem?.configuration?.config_data?.unit}</Text>
-        </View>
+
         {configValue?.last_updated && (
-          <LastUpdatedText lastUpdated={configValue?.last_updated} />
+          <View style={styles.lastUpdate}>
+            <LastUpdatedText
+              lastUpdated={configValue?.last_updated}
+              format={'DDMMYYYY'}
+            />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
+          </View>
         )}
       </>
     );

package/src/commons/SubUnit/DeviceTemplate/ConfigValue/ConfigValue.js

@@ -5,6 +5,8 @@ import Text from '../../../Text';
 import { useConfigGlobalState } from '../../../../iot/states';
 import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
+import IconComponent from '../../../IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 const ConfigValue = ({ device, stationItem }) => {
   // eslint-disable-next-line no-unused-vars
@@ -13,27 +15,33 @@ const ConfigValue = ({ device, stationItem }) => {
   const configIds = useMemo(() => {
     return [stationItem.configuration?.config];
   }, [stationItem.configuration?.config]);
-
+  const { icon_kit, icon } = device || {};
   useWatchConfigs(configIds);
 
   return (
     <>
       <View>
         <View style={styles.rowTop}>
-          <Text type="H4" bold>
-            {stationItem?.configuration?.config_data?.name}
+          <IconComponent icon={icon_kit || icon} />
+        </View>
+        <View style={styles.rowTop}>
+          <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+        </View>
+        <View style={styles.rowBottom}>
+          <Text style={styles.textValue} bold>
+            {configValue?.value} {stationItem?.configuration?.config_data?.unit}
           </Text>
         </View>
+        {configValue?.last_updated && (
+          <View style={styles.lastUpdate}>
+            <LastUpdatedText
+              lastUpdated={configValue?.last_updated}
+              format={'DDMMYYYY'}
+            />
+            <IconOutline style={styles.marginTop10} name="right" size={12} />
+          </View>
+        )}
       </View>
-      <View style={styles.rowBottom}>
-        <Text style={styles.textValue} bold>
-          {configValue?.value || '-'}
-        </Text>
-        <Text type="H4">{stationItem?.configuration?.config_data?.unit}</Text>
-      </View>
-      {configValue?.last_updated && (
-        <LastUpdatedText lastUpdated={configValue?.last_updated} />
-      )}
     </>
   );
 };

package/src/commons/SubUnit/DeviceTemplate/EvaluationOverConfig/EvaluationOverConfig.js

@@ -9,6 +9,8 @@ import {
 } from '../../../../screens/Device/hooks/useEvaluateValue';
 import { useWatchConfigs } from '../../../../hooks/IoT';
 import LastUpdatedText from '../../../Device/LastUpdatedText';
+import IconComponent from '../../../IconComponent';
+import { IconOutline } from '@ant-design/icons-react-native';
 
 export const EvaluationConfigWrapper = memo(
   ({ device, stationItem, Child }) => {
@@ -31,9 +33,9 @@ export const EvaluationConfigWrapper = memo(
       configValue?.value,
       valueEvaluationObject
     );
-
     return (
       <Child
+        device={device}
         valueEvaluation={valueEvaluation}
         stationItem={stationItem}
         configValue={configValue}
@@ -43,24 +45,34 @@ export const EvaluationConfigWrapper = memo(
 );
 
 const EvaluationOverConfigDisplay = memo(
-  ({ valueEvaluation, stationItem, configValue }) => {
+  ({ device, valueEvaluation, stationItem, configValue }) => {
+    const { icon_kit, icon } = device || {};
     return (
       <>
         <View>
           <View style={styles.rowTop}>
-            <Text type="H4" bold>
-              {stationItem?.configuration?.config_data?.name}
+            <IconComponent icon={icon_kit || icon} />
+          </View>
+          <View style={styles.rowTop}>
+            <Text bold>{stationItem?.configuration?.config_data?.name}</Text>
+          </View>
+
+          <View style={styles.rowBottom}>
+            <Text style={styles.textValue} bold color={valueEvaluation?.color}>
+              {valueEvaluation?.text}
             </Text>
           </View>
+
+          {configValue?.last_updated && (
+            <View style={styles.lastUpdate}>
+              <LastUpdatedText
+                lastUpdated={configValue?.last_updated}
+                format={'DDMMYYYY'}
+              />
+              <IconOutline style={styles.marginTop10} name="right" size={12} />
+            </View>
+          )}
         </View>
-        <View style={styles.rowBottom}>
-          <Text style={styles.textValue} bold color={valueEvaluation?.color}>
-            {valueEvaluation?.text}
-          </Text>
-        </View>
-        {configValue?.last_updated && (
-          <LastUpdatedText lastUpdated={configValue?.last_updated} />
-        )}
       </>
     );
   }

package/src/commons/SubUnit/DeviceTemplate/styles/ConfigValueStyles.js

@@ -16,8 +16,19 @@ export default StyleSheet.create({
     alignItems: 'center',
   },
   textValue: {
-    fontSize: 28,
-    lineHeight: 32,
-    marginRight: 8,
+    marginTop: 6,
+    lineHeight: 16,
+  },
+  textStatus: {
+    marginTop: 6,
+    fontSize: 12,
+  },
+  lastUpdate: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  marginTop10: {
+    marginTop: 10,
   },
 });

package/src/commons/SubUnit/__test__/ShortDetail.test.js

@@ -13,6 +13,7 @@ import ItemDevice from '../../Device/ItemDevice';
 import { DeviceTemplate } from '../DeviceTemplate/DeviceTemplate';
 import ItemHanetDevice from '../../Device/Hanet/ItemHanetDevice';
 import { watchMultiConfigs } from '../../../iot/Monitor';
+import Text from '../../Text';
 
 jest.mock('../../../iot/Monitor');
 
@@ -37,6 +38,9 @@ jest.mock('@react-navigation/native', () => {
     useFocusEffect: jest.fn((handler) => handler()),
   };
 });
+jest.mock('../../../iot/states', () => ({
+  useConfigGlobalState: () => [{}, null],
+}));
 
 describe('test ShortDetail Subunit', () => {
   let tree, props;
@@ -189,6 +193,18 @@ describe('test ShortDetail Subunit', () => {
   ['ConfigAndEvaluation', 'ConfigValue', 'EvaluationOverConfig'].forEach(
     (template) => {
       it(`render with device template ${template}`, async () => {
+        const globalStates = require('../../../iot/states');
+        globalStates.useConfigGlobalState = () => [
+          {
+            1: {
+              value: 10,
+              status: null,
+              last_updated: '2023-10-10T04:36:04.010471Z',
+              status_of_value: 'NO_CHANGE',
+            },
+          },
+          null,
+        ];
         props.station.devices = [
           {
             action: {
@@ -203,14 +219,18 @@ describe('test ShortDetail Subunit', () => {
             icon: '',
             id: 1,
             name: 'People Counting',
+            icon_kit: 'https://xxx.png',
             quick_action: null,
-            remote_control_options: {},
             station: {},
             status: null,
             status2: null,
             station_items: [
               {
                 template: template,
+                configuration: {
+                  config: 1,
+                  config_data: { id: 29520, name: 'Moving', unit: '' },
+                },
               },
             ],
           },
@@ -222,6 +242,14 @@ describe('test ShortDetail Subunit', () => {
         const instance = tree.root;
         const itemDevices = instance.findAllByType(DeviceTemplate);
         expect(itemDevices.length).toBe(1);
+
+        const lastUpdate = instance.findAll(
+          (el) =>
+            el.props.accessibilityLabel ===
+              `${AccessibilityLabel.LAST_UPDATED_TEXT}` && el.type === Text
+        );
+        expect(lastUpdate).toHaveLength(1);
+        expect(lastUpdate[0].props.children).toEqual('05:36 10-10-2023');
       });
     }
   );

package/src/configs/AccessibilityLabel.js

@@ -684,4 +684,7 @@ export default {
 
   //MemberInfo
   CHANGE_ROLE: 'CHANGE_ROLE',
+
+  //LastUpdatedText
+  LAST_UPDATED_TEXT: 'LAST_UPDATED_TEXT',
 };

package/src/screens/Device/detail.js

@@ -722,7 +722,6 @@ const DeviceDetail = ({ route }) => {
     loading.displayTemplate === false &&
     loading.isConnected === false &&
     isNetworkConnected !== null;
-
   return (
     <View style={styles.wrap}>
       <WrapHeaderScrollable