@eohjsc/react-native-smart-city 0.2.59 → 0.2.63

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { SmartAccountItem } from '../SmartAccountItem';
+import { TouchableOpacity } from 'react-native';
+import { TESTID } from '../../../configs/Constants';
+
+const mockedOnShowMenuMore = jest.fn();
+const mockedGotoSmartAccountDetail = jest.fn();
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <SmartAccountItem
+      onShowMenuMore={mockedOnShowMenuMore}
+      gotoSmartAccountDetail={mockedGotoSmartAccountDetail}
+    />
+  </SCProvider>
+);
+
+const mockedNavigate = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      goBack: mockedNavigate,
+    }),
+  };
+});
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+jest.mock('axios');
+describe('Test SmartAccountItem', () => {
+  let tree;
+  test('test render SmartAccountItem', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+
+    const onPressGotoSmartAccountDetail = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_ACCOUNT_ITEM &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      onPressGotoSmartAccountDetail.props.onPress();
+    });
+
+    expect(mockedGotoSmartAccountDetail).toHaveBeenCalled();
+
+    const onPressMore = instance.find(
+      (el) =>
+        el.props.testID === TESTID.SMART_ACCOUNT_ITEM_PRESSMORE &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      onPressMore.props.onPress();
+    });
+    expect(mockedOnShowMenuMore).toHaveBeenCalled();
+  });
+});

package/src/screens/UnitSummary/components/3PPowerConsumption/index.js

@@ -12,7 +12,7 @@ import HistoryChart from '../../../../commons/Device/HistoryChart';
 import { axiosGet } from '../../../../utils/Apis/axios';
 import { TESTID } from '../../../../configs/Constants';
 
-const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
+const ThreePhasePowerConsumption = memo(({ summaryDetail }) => {
   const t = useTranslations();
   const {
     volt1Value,
@@ -133,12 +133,63 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     return !!listConfigs;
   }, [listConfigs]);
 
-  const listIdsConfig = useMemo(() => {
-    return listConfigs;
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.volt_1,
+        title: 'Volt 1',
+        color: Colors.Red6,
+      },
+      {
+        id: listConfigs?.volt_2,
+        title: 'Volt 2',
+        color: Colors.Red8,
+      },
+      {
+        id: listConfigs?.volt_3,
+        title: 'Volt 3',
+        color: Colors.Red9,
+      },
+      {
+        id: listConfigs?.current_1,
+        title: 'Current 1',
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.current_2,
+        title: 'Current 2',
+        color: Colors.Blue11,
+      },
+      {
+        id: listConfigs?.current_3,
+        title: 'Current 3',
+        color: Colors.Blue12,
+      },
+      {
+        id: listConfigs?.active_power,
+        title: 'Active Power',
+        color: Colors.Orange6,
+      },
+      {
+        id: listConfigs?.power_factor_1,
+        title: 'Power Factor 1',
+        color: Colors.Green6,
+      },
+      {
+        id: listConfigs?.power_factor_2,
+        title: 'Power Factor 2',
+        color: Colors.Green9,
+      },
+      {
+        id: listConfigs?.power_factor_3,
+        title: 'Power Factor 3',
+        color: Colors.Green10,
+      },
+    ];
   }, [listConfigs]);
 
   const [startDate, setStartDate] = useState(
-    moment().subtract(7, 'days').valueOf()
+    moment().subtract(6, 'days').valueOf()
   );
   const [endDate, setEndDate] = useState(moment().valueOf());
   const [groupBy, setGroupBy] = useState('date');
@@ -168,7 +219,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs, groupBy]);
+  }, [startDate, endDate, listConfigs?.total_power, groupBy]);
   return (
     <>
       <Section type={'border'}>
@@ -180,60 +231,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                {
-                  id: listIdsConfig.volt_1,
-                  title: 'Volt 1',
-                  color: Colors.Red6,
-                },
-                {
-                  id: listIdsConfig.volt_2,
-                  title: 'Volt 2',
-                  color: Colors.Red8,
-                },
-                {
-                  id: listIdsConfig.volt_3,
-                  title: 'Volt 3',
-                  color: Colors.Red9,
-                },
-                {
-                  id: listIdsConfig.current_1,
-                  title: 'Current 1',
-                  color: Colors.Blue10,
-                },
-                {
-                  id: listIdsConfig.current_2,
-                  title: 'Current 2',
-                  color: Colors.Blue11,
-                },
-                {
-                  id: listIdsConfig.current_3,
-                  title: 'Current 3',
-                  color: Colors.Blue12,
-                },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Active Power',
-                  color: Colors.Orange6,
-                },
-                {
-                  id: listIdsConfig.power_factor_1,
-                  title: 'Power Factor 1',
-                  color: Colors.Green6,
-                },
-                {
-                  id: listIdsConfig.power_factor_2,
-                  title: 'Power Factor 2',
-                  color: Colors.Green9,
-                },
-                {
-                  id: listIdsConfig.power_factor_3,
-                  title: 'Power Factor 3',
-                  color: Colors.Green10,
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>
@@ -253,6 +251,7 @@ const ThreePhasePowerConsumption = memo(({ unit, summary, summaryDetail }) => {
             startDate={startDate}
             setEndDate={setEndDate}
             setStartDate={setStartDate}
+            groupBy={groupBy}
             setGroupBy={setGroupBy}
             configuration={{
               type: 'horizontal_bar_chart',

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

@@ -78,7 +78,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
   dataTotal.push(totalPower);
 
   const [startDate, setStartDate] = useState(
-    moment().subtract(7, 'days').valueOf()
+    moment().subtract(6, 'days').valueOf()
   );
   const [endDate, setEndDate] = useState(moment().valueOf());
   const [groupBy, setGroupBy] = useState('date');
@@ -108,7 +108,29 @@ const PowerConsumption = memo(({ summaryDetail }) => {
     if (listConfigs?.total_power) {
       fetchData();
     }
-  }, [startDate, endDate, listConfigs, groupBy]);
+  }, [startDate, endDate, listConfigs?.total_power, groupBy]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: listIdsConfig?.volt, title: 'Volt', color: 'red' },
+      {
+        id: listIdsConfig?.current,
+        title: 'Current',
+        color: 'blue',
+      },
+      {
+        id: listIdsConfig?.active_power,
+        title: 'Active Power',
+        color: 'orange',
+      },
+      {
+        id: listIdsConfig?.power_factor,
+        title: 'Power Factor',
+        color: 'green',
+      },
+    ];
+  }, [listIdsConfig]);
+
   return (
     <>
       <Section type={'border'}>
@@ -120,26 +142,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
         />
         {showBoxHistory && (
           <View>
-            <ConfigHistoryChart
-              configs={[
-                { id: listIdsConfig.volt, title: 'Volt', color: 'red' },
-                {
-                  id: listIdsConfig.active_power,
-                  title: 'Current',
-                  color: 'blue',
-                },
-                {
-                  id: listIdsConfig.current,
-                  title: 'Active Power',
-                  color: 'orange',
-                },
-                {
-                  id: listIdsConfig.power_factor,
-                  title: 'Power Factor',
-                  color: 'green',
-                },
-              ]}
-            />
+            <ConfigHistoryChart configs={configs} />
           </View>
         )}
       </Section>
@@ -160,6 +163,7 @@ const PowerConsumption = memo(({ summaryDetail }) => {
             endDate={endDate}
             setEndDate={setEndDate}
             setStartDate={setStartDate}
+            groupBy={groupBy}
             setGroupBy={setGroupBy}
             configuration={{
               type: 'horizontal_bar_chart',

package/src/screens/UnitSummary/components/Temperature/ItemTemperature/index.js

@@ -10,13 +10,13 @@ const ItemTemperature = memo((props) => {
   const { svgMain, title, des, value } = props;
   return (
     <View style={styles.container}>
-      <Text size={14} color={Colors.Gray8} style={styles.textTitle}>
+      <Text type="H4" color={Colors.Gray8} style={styles.textTitle}>
         {title}
       </Text>
       <Text size={24} color={Colors.Gray9} style={styles.textValue}>
         {value}
       </Text>
-      <Text size={12} color={Colors.Gray8}>
+      <Text type="H4" color={Colors.Gray8}>
         {des}
       </Text>
       <View style={styles.boxSvg}>{svgMain}</View>

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

@@ -56,6 +56,20 @@ const Temperature = memo(({ summaryDetail }) => {
     [summaryDetail]
   );
 
+  const configs = useMemo(() => {
+    return [
+      {
+        id: listConfigs?.temp,
+        title: t('text_temperature'),
+        color: Colors.Blue10,
+      },
+      {
+        id: listConfigs?.humi,
+        title: t('text_humidity'),
+        color: Colors.Red6,
+      },
+    ];
+  }, [listConfigs?.humi, listConfigs?.temp, t]);
   return (
     <>
       <Section type={'border'}>
@@ -78,20 +92,7 @@ const Temperature = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              {
-                id: listConfigs.temp,
-                title: t('text_temperature'),
-                color: Colors.Blue10,
-              },
-              {
-                id: listConfigs.humi,
-                title: t('text_humidity'),
-                color: Colors.Red6,
-              },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

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

@@ -22,6 +22,11 @@ const UvIndex = memo(({ summaryDetail }) => {
   } else if (summaryDetail.uv_value > 10) {
     valueRefined = 10;
   }
+
+  const configs = useMemo(() => {
+    return [{ id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 }];
+  }, [t, uv_id]);
+
   return (
     <>
       <Section type={'border'}>
@@ -70,11 +75,7 @@ const UvIndex = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

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

@@ -12,6 +12,14 @@ const WaterQuality = memo(({ summaryDetail }) => {
   const showBoxHistory = useMemo(() => {
     return ph_id || tur_id || clo_id ? true : false;
   }, [ph_id, tur_id, clo_id]);
+
+  const configs = useMemo(() => {
+    return [
+      { id: ph_id, title: 'pH', color: 'red' },
+      { id: tur_id, title: 'Turbidity', color: 'blue' },
+      { id: clo_id, title: 'Chlorine residual', color: 'orange' },
+    ];
+  }, [ph_id, tur_id, clo_id]);
   return (
     <>
       <Section type={'border'}>
@@ -52,13 +60,7 @@ const WaterQuality = memo(({ summaryDetail }) => {
       </Section>
       {showBoxHistory && (
         <Section type={'border'}>
-          <ConfigHistoryChart
-            configs={[
-              { id: ph_id, title: 'pH', color: 'red' },
-              { id: tur_id, title: 'Turbidity', color: 'blue' },
-              { id: clo_id, title: 'Chlorine residual', color: 'orange' },
-            ]}
-          />
+          <ConfigHistoryChart configs={configs} />
         </Section>
       )}
     </>

package/src/screens/UnitSummary/index.js

@@ -4,6 +4,7 @@ import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import moment from 'moment';
 
 import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
@@ -18,6 +19,7 @@ import Temperature from './components/Temperature';
 import UvIndex from './components/UvIndex';
 import WaterQuality from './components/WaterQuality';
 import { TESTID } from '../../configs/Constants';
+import { timeDifference } from '../../utils/Converter/time';
 
 const UnitSummary = memo(({ route }) => {
   const t = useTranslations();
@@ -25,6 +27,7 @@ const UnitSummary = memo(({ route }) => {
   const [summaryDetail, setSummaryDetail] = useState({});
 
   const [loading, setLoading] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState();
   const navigation = useNavigation();
 
   const getComponentAndGuide = useCallback(() => {
@@ -75,6 +78,7 @@ const UnitSummary = memo(({ route }) => {
     setLoading(false);
     if (success) {
       setSummaryDetail(data.data);
+      setLastUpdated(data.data.last_updated);
     }
   }, [summary.id, unit.id]);
 
@@ -84,7 +88,7 @@ const UnitSummary = memo(({ route }) => {
 
     const autoUpdate = setInterval(() => {
       fetchSummaryDetail();
-    }, 5000); // fetch each 5 second
+    }, 10000); // fetch each 10 second
 
     return () => clearInterval(autoUpdate);
   }, [fetchSummaryDetail]);
@@ -98,11 +102,15 @@ const UnitSummary = memo(({ route }) => {
   const ComponentName = UnitSummaryDetail.componentName;
   const GuideName = UnitSummaryDetail.guideName;
 
+  const lastUpdatedStr = lastUpdated
+    ? `${t('last_updated')} ${timeDifference(moment(), moment(lastUpdated))}`
+    : null;
+
   return (
     <View style={[styles.container]}>
       <WrapHeaderScrollable
         title={summary.name}
-        subTitle={t('last_updated_%{minutes}_minutes_ago', { minutes: 5 })}
+        subTitle={lastUpdatedStr}
         rightComponent={
           GuideName ? (
             <View style={styles.rightComponent}>
@@ -122,11 +130,7 @@ const UnitSummary = memo(({ route }) => {
         loading={loading}
         onRefresh={onRefresh}
       >
-        <ComponentName
-          summaryDetail={summaryDetail}
-          unit={unit}
-          summary={summary}
-        />
+        <ComponentName summaryDetail={summaryDetail} unit={unit} />
       </WrapHeaderScrollable>
     </View>
   );

package/src/screens/WaterQualityGuide/index.js

@@ -308,6 +308,7 @@ const WaterQualityGuide = memo(({ route }) => {
                 />
                 <View style={styles.contentBox}>
                   <Text
+                    type="H4"
                     testID={TESTID.WATER_QUALITY_GUIDE_TITLE_LEVEL}
                     semibold
                     size={16}

package/src/utils/Apis/axios.js

@@ -2,6 +2,7 @@ import axios from 'axios';
 import { deleteData, getData, storeData } from '../Storage';
 import { ToastBottomHelper } from '../Utils';
 import NetInfo from '@react-native-community/netinfo';
+import { Platform } from 'react-native';
 
 export const replaceParams = (apiURL, params) => {
   let _result = apiURL;
@@ -165,13 +166,12 @@ export function createFormData(data, list_file_field) {
       }
 
       formData.append(key, {
-        name: item.fileName,
-        type: item.type,
-        uri: item.uri,
+        uri: Platform.OS === 'ios' ? item.sourceURL : item.path,
+        type: item.mime,
+        name: item.filename || item.path?.split('/').pop(),
       });
       return;
     }
-
     formData.append(key, data[key]);
   });
 

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

@@ -471,7 +471,7 @@
   "scan_qr_code_at_%{spot}": "Scan QR code at spot %{spot}",
   "extend": "Extend",
   "verify_qr_code": "Verifying code...",
-  "tds_infomation": "TDS Infomation",
+  "tds_information": "TDS Information",
   "what_is_tds_title": "What is TDS?",
   "what_is_tds_text": "TDS: is the total dissolved solids present in a certain amount of water - (the total number of charged ions, including salts, minerals or metals) that exist in a certain volume of water. High TDS is also responsible for turbidity and sedimentation in water. TDS is expressed in mg / L or parts per million (parts per million).",
   "tds_guidlines_title": "TDS guidlines for drinking water",
@@ -781,6 +781,8 @@
   "Script": "Script",
   "One-Tap": "One-Tap",
   "Scenario": "Scenario",
+  "one_tap": "One-Tap",
+  "scenario": "Scenario",
   "automation": "Automation",
   "set_schedule": "Set schedule",
   "select_date": "Select date",
@@ -844,9 +846,25 @@
   "name_your_unit": "Name your unit",
   "script_updated_by": "Script updated by",
   "qr_scan_guidelines": "The QR code will be detected automatically when it’s positioned within the guide lines.",
+  "move_to_another_sub_unit": "Move to another Sub unit",
   "now_playing": "Now Playing",
   "pause": "Pause",
+  "setting": "Setting",
+  "duration": "Duration",
+  "level": "Level",
+  "strobe": "Strobe",
   "volume": "Volume",
   "this_notification_will_be_updated_soon": "This notification will be updated soon",
-  "tap_to_add_new_schedule": "Tap + to add new schedule"
+  "text_submit": "Submit",
+  "remove_account": "Remove Account",
+  "text_sub_unit_not_have_device": "You don't have sub-unit with a device to control",
+  "tap_to_add_new_schedule": "Tap + to add new schedule",
+  "confirmation": "Confirmation",
+  "enter_yes_to_perform": "You need to enter 'YES' to perform this action",
+  "please_enter_correct":"Please enter correct",
+  "add_schedule": "Add Schedule",
+  "curtain_opens": "Curtain opens",
+  "curtain_closes": "Curtain closes",
+  "schedule_name": "Schedule name",
+  "enter_name": "Enter name"
 }

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

@@ -57,7 +57,7 @@
   "%{number}_filter_need_to_be_replaced": "%{number} lõi lọc cần được thay thế.",
   "replace_all_filters": "Tất cả lõi lọc cần được thay thế.",
   "auth_already_have_an_account": "Bạn đã có tài khoản? ",
-  "tds_infomation": "Chỉ số TDS",
+  "tds_information": "Chỉ số TDS",
   "what_is_tds_title": "TDS là gì?",
   "set_a_number": "Đặt một số",
   "add_action": "Thêm hành động",
@@ -783,6 +783,8 @@
   "Script": "Kịch bản",
   "One-Tap": "Một chạm",
   "Scenario": "Kịch bản",
+  "one_tap": "Một chạm",
+  "scenario": "Kịch bản",
   "automation": "Tự động",
   "set_schedule": "Đặt lịch",
   "select_date": "Chọn ngày",
@@ -845,9 +847,26 @@
   "name_your_unit": "Đặt tên cho khu vực của bạn",
   "script_updated_by": "Kịch bản được cập nhật bởi",
   "qr_scan_guidelines": "Mã QR sẽ được phát hiện tự động khi nó được định vị trong các dòng hướng dẫn.",
+  "move_to_another_sub_unit": "Chuyển sang khu vực khác",
   "now_playing": "Đang chạy",
   "pause": "Tạm dừng",
+  "setting": "Cài đặt",
+  "duration": "Khoảng thời gian",
+  "level": "Cấp độ",
+  "strobe": "Nhấp nháy",
   "volume": "Âm lượng",
   "this_notification_will_be_updated_soon": "Thông báo này sẽ sớm được cập nhật",
-  "tap_to_add_new_schedule": "Nhấn + để thêm lịch trình mới"
+  "text_submit": "Xác nhận",
+  "tap_to_add_new_schedule": "Nhấn + để thêm lịch trình mới",
+  "remove_account": "Xóa tài khoản",
+   "text_subunit_not_have_device": "Bạn không có khu vực nào có thiết bị để điều khiển",
+  "choose_at_least_one": "Vui lòng chọn ít nhất 1 thiết bị.",
+  "confirmation": "Xác Nhận",
+  "enter_yes_to_perform": "Bạn cần nhập 'YES' để thực hiện hành động này",
+  "please_enter_correct":"Vui lòng nhập đúng",
+  "add_schedule": "Thêm lịch trình",
+  "curtain_opens": "Rèm mở",
+  "curtain_closes": "Rèm đóng",
+  "schedule_name": "Tên lịch trình",
+  "enter_name": "Nhập tên"
 }

package/src/utils/Route/index.js

@@ -96,6 +96,7 @@ const Routes = {
   TermAndPolicy: 'TermAndPolicy',
   Browser: 'Browser',
   ManageAccess: 'ManageAccess',
+  MoveToAnotherSubUnit: 'MoveToAnotherSubUnit',
   SelectSensorDevices: 'SelectSensorDevices',
   SelectAction: 'SelectAction',
   GuestInfo: 'GuestInfo',
@@ -119,6 +120,8 @@ const Routes = {
   ListSmartAccount: 'ListSmartAccount',
   ListDeviceSmartAccount: 'ListDeviceSmartAccount',
   SmartAccountConnecting: 'SmartAccountConnecting',
+  EmergencySetting: 'EmergencySetting',
+  ConfirmUnitDeletion: 'ConfirmUnitDeletion',
 };
 
 export default Routes;

package/src/utils/Utils.js

@@ -120,6 +120,10 @@ export const removeFromString = (str, index) => {
   return str.substr(0, index) + str.substr(index + 1);
 };
 
+export const arePropsEqual = (prevProps, nextProps) => {
+  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
+};
+
 export default {
   validateEmail,
   isObjectEmpty,

package/src/commons/ThreeButtonHistory/CalendarHeader.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import {
-  View,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  Image,
-} from 'react-native';
-import Text from '../Text';
-import { Images } from '../../configs';
-import styles from './CalendarHeaderStyles';
-
-const CalendarHeader = ({
-  currentMonth,
-  onAddMonth,
-  onSubtractMonth,
-  onPressTitle,
-}) => {
-  return (
-    <View style={styles.wrap}>
-      <TouchableOpacity onPress={onSubtractMonth} style={styles.button}>
-        <Image source={Images.arrowLeft} />
-      </TouchableOpacity>
-      <TouchableWithoutFeedback onPress={onPressTitle}>
-        <Text type="H4" bold>
-          {currentMonth.format('MMMM YYYY')}
-        </Text>
-      </TouchableWithoutFeedback>
-      <TouchableOpacity onPress={onAddMonth} style={styles.button}>
-        <Image source={Images.arrowLeft} style={styles.arrow} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default CalendarHeader;