@eohjsc/react-native-smart-city 0.4.84 → 0.4.86

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

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
@@ -10,84 +10,76 @@ import SvgHumidity from '../../../../../assets/images/Device/humidity.svg';
 import SvgRain from '../../../../../assets/images/Device/rain-outline.svg';
 import SvgTemperature from '../../../../../assets/images/Device/temperature.svg';
 import SvgWind from '../../../../../assets/images/Device/wind.svg';
+import { useWatchConfigs } from '../../../../hooks/IoT';
 
-const getDataTemperature = (summaryDetail, t) => {
-  return [
-    {
-      id: '0',
-      svgMain: <SvgTemperature />,
-      title: `${t('text_temperature')}`,
-      value: `${summaryDetail.tempValue || t('loading')}`,
-    },
-    {
-      id: '1',
-      svgMain: <SvgHumidity />,
-      title: `${t('text_humidity')}`,
-      value: `${summaryDetail.humiValue || t('loading')}`,
-    },
-    {
-      id: '2',
-      svgMain: <SvgWind />,
-      title: `${t('text_wind')}`,
-      value: summaryDetail.windValue || t('loading'),
-      des: `${t('text_win_direction')}: ${
-        summaryDetail.windDirection || t('loading')
-      }`,
-    },
-    {
-      id: '3',
-      svgMain: <SvgRain />,
-      title: `${t('text_rain')}`,
-      value: summaryDetail.rainValue || t('loading'),
-    },
-  ];
-};
-
-const Temperature = memo(({ summaryDetail }) => {
+const Temperature = ({ summaryDetail }) => {
   const t = useTranslations();
-  const { listConfigs } = summaryDetail;
+  const { listConfigs, windDirection } = summaryDetail;
+  const { temp, humi, rain, rain_duration, wind, wind_direction } =
+    listConfigs || {};
+  useWatchConfigs([temp, humi, rain, rain_duration, wind, wind_direction]);
 
-  const showBoxHistory = useMemo(() => {
-    return !!listConfigs;
-  }, [listConfigs]);
+  const showBoxHistory = !!listConfigs;
 
   const dataTemperature = useMemo(
-    () => getDataTemperature(summaryDetail, t),
-    [summaryDetail, t]
+    () => [
+      {
+        id: temp,
+        svgMain: <SvgTemperature />,
+        title: `${t('text_temperature')}`,
+        measure: '°C',
+      },
+      {
+        id: humi,
+        svgMain: <SvgHumidity />,
+        title: `${t('text_humidity')}`,
+        measure: '%',
+      },
+      {
+        id: wind,
+        svgMain: <SvgWind />,
+        title: `${t('text_wind')}`,
+        des: `${t('text_win_direction')}: ${windDirection || t('loading')}`,
+        measure: 'm/s',
+      },
+      {
+        id: rain,
+        svgMain: <SvgRain />,
+        title: `${t('text_rain')}`,
+        measure: '',
+        custom_get_value: {
+          1: t('rainy'),
+          0: t('no_rain'),
+        },
+      },
+    ],
+    [humi, rain, windDirection, t, temp, wind]
   );
 
-  const configs = useMemo(() => {
-    return [
+  const configs = useMemo(
+    () => [
       {
-        id: listConfigs?.temp,
+        id: temp,
         title: t('text_temperature'),
         color: Colors.Blue10,
       },
       {
-        id: listConfigs?.humi,
+        id: humi,
         title: t('text_humidity'),
         color: Colors.Red6,
       },
-    ];
-  }, [listConfigs?.humi, listConfigs?.temp, t]);
+    ],
+    [humi, temp, t]
+  );
+
   return (
     <>
       <Section type={'border'}>
         <Today style={styles.textIndoor} />
         <View style={styles.boxTemperature}>
-          {dataTemperature.map((item, index) => {
-            const { title, value, des, svgMain } = item;
-
-            return (
-              <ItemTemperature
-                title={title}
-                value={value}
-                des={des}
-                svgMain={svgMain}
-                key={index.toString()}
-              />
-            );
-          })}
+          {dataTemperature.map((item) => (
+            <ItemTemperature {...item} key={item.id} />
+          ))}
         </View>
       </Section>
       {showBoxHistory && (
@@ -97,7 +89,7 @@ const Temperature = memo(({ summaryDetail }) => {
       )}
     </>
   );
-});
+};
 
 export default Temperature;
 
@@ -110,23 +102,4 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     justifyContent: 'space-between',
   },
-  rowAverage: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 16,
-    paddingHorizontal: 16,
-  },
-  txtAverage: {
-    marginRight: 20,
-  },
-  boxLastDay: {
-    paddingVertical: 24,
-    borderRadius: 20,
-    backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    marginTop: 16,
-    marginBottom: 25,
-    paddingHorizontal: 0,
-  },
 });

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

@@ -0,0 +1,36 @@
+import React, { memo, useCallback } from 'react';
+
+import styles from './styles';
+
+import { useTranslations } from '../../../../hooks/Common/useTranslations';
+import { useConfigGlobalState } from '../../../../iot/states';
+import SegmentedRoundDisplay from '../../../../commons/UnitSummary/AirQuality/SegmentedRoundDisplay';
+
+const SegmentedRoundChart = memo(({ data }) => {
+  const t = useTranslations();
+
+  const { id, uv_color, uv_level } = data || {};
+  const [configValues] = useConfigGlobalState('configValues');
+
+  const renderAir = useCallback(() => {
+    const getValue = configValues?.[id]?.value ?? '--';
+
+    return (
+      <SegmentedRoundDisplay
+        filledArcColor={uv_color}
+        value={getValue}
+        valueText={getValue}
+        totalValue={10}
+        style={styles.segment}
+        pos={[0, 2, 4, 6, 8, '10+']}
+        title={uv_level}
+        boxTitle
+        textHeader={t('UV Index')}
+      />
+    );
+  }, [configValues, id, t, uv_color, uv_level]);
+
+  return renderAir();
+});
+
+export default SegmentedRoundChart;

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

@@ -9,6 +9,14 @@ import api from '../../../../../utils/Apis/axios';
 
 new MockAdapter(api.axiosInstance);
 
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useFocusEffect: (func) => func(),
+  };
+});
+
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
     <UvIndex {...data} />

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

@@ -1,5 +1,5 @@
 import React, { memo, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { View } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
@@ -7,45 +7,35 @@ import { Colors } from '../../../../configs';
 import Text from '../../../../commons/Text';
 import { Section, Today } from '../../../../commons';
 import VisualChart from '../../../Device/components/VisualChart';
-import SegmentedRoundDisplay from '../../../../commons/UnitSummary/AirQuality/SegmentedRoundDisplay';
+import SegmentedRoundChart from './SegmentedRoundChart';
+import { useWatchConfigs } from '../../../../hooks/IoT';
+import styles from './styles';
 
 const UvIndex = memo(({ summaryDetail }) => {
   const t = useTranslations();
-  const { uv_id } = summaryDetail;
+  const {
+    listConfigs = {},
+    uv_id,
+    uv_color,
+    uv_level,
+    advices = [],
+    uv_value,
+  } = summaryDetail;
+  const { uv } = listConfigs;
   const showBoxHistory = useMemo(() => {
     return !!uv_id;
   }, [uv_id]);
-  const advices = summaryDetail.advices ? summaryDetail.advices : [];
-  let valueRefined = summaryDetail.uv_value;
-  if (summaryDetail.uv_value < 0) {
-    valueRefined = 0;
-  } else if (summaryDetail.uv_value > 10) {
-    valueRefined = 10;
-  }
+  useWatchConfigs([uv]);
 
   const configs = useMemo(() => {
     return [{ id: uv_id, title: t('text_uv_index'), color: Colors.Blue10 }];
   }, [t, uv_id]);
-
+  const data = { id: uv, uv_color, uv_level, uv_value: uv_value };
   return (
     <>
       <Section type={'border'}>
         <Today />
-        <SegmentedRoundDisplay
-          filledArcColor={summaryDetail.uv_color}
-          value={valueRefined}
-          valueText={
-            summaryDetail.uv_value !== undefined
-              ? summaryDetail.uv_value
-              : t('loading')
-          }
-          totalValue={10}
-          style={styles.segment}
-          pos={[0, 2, 4, 6, 8, '10+']}
-          title={summaryDetail.uv_level}
-          boxTitle
-          textHeader={t('UV Index')}
-        />
+        <SegmentedRoundChart data={data} />
         <View style={styles.boxHealth}>
           <IconOutline name="alert" size={20} style={styles.iconMargin} />
           <Text
@@ -83,49 +73,3 @@ const UvIndex = memo(({ summaryDetail }) => {
 });
 
 export default UvIndex;
-
-const styles = StyleSheet.create({
-  box: {
-    paddingHorizontal: 16,
-    paddingVertical: 24,
-    borderRadius: 20,
-    backgroundColor: Colors.White,
-    borderWidth: 1,
-    borderColor: Colors.Gray4,
-    marginBottom: 16,
-  },
-  textIndoor: {
-    color: Colors.Gray9,
-    fontSize: 20,
-    marginBottom: 4,
-  },
-  segment: {
-    marginTop: 36,
-    alignSelf: 'center',
-  },
-  boxHealth: {
-    flexDirection: 'row',
-    marginTop: 24,
-    alignItems: 'center',
-    marginBottom: 12,
-  },
-  boxDot: {
-    width: 8,
-    height: 8,
-    borderRadius: 4,
-    backgroundColor: Colors.Yellow6,
-    marginRight: 8,
-    marginTop: 6,
-  },
-  boxContentHealth: {
-    flexDirection: 'row',
-    marginBottom: 8,
-    marginRight: 21,
-  },
-  iconMargin: {
-    marginRight: 8,
-  },
-  textTitle: {
-    lineHeight: 28,
-  },
-});

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

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../../configs';
+
+export default StyleSheet.create({
+  box: {
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    borderRadius: 20,
+    backgroundColor: Colors.White,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    marginBottom: 16,
+  },
+  textIndoor: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    marginBottom: 4,
+  },
+  segment: {
+    marginTop: 36,
+    alignSelf: 'center',
+  },
+  boxHealth: {
+    flexDirection: 'row',
+    marginTop: 24,
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  boxDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: Colors.Yellow6,
+    marginRight: 8,
+    marginTop: 6,
+  },
+  boxContentHealth: {
+    flexDirection: 'row',
+    marginBottom: 8,
+    marginRight: 21,
+  },
+  iconMargin: {
+    marginRight: 8,
+  },
+  textTitle: {
+    lineHeight: 28,
+  },
+});

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

@@ -6,12 +6,12 @@ import { useNavigation } from '@react-navigation/native';
 import Text from '../../../../../commons/Text';
 import { Colors, Constants } from '../../../../../configs';
 import Route from '../../../../../utils/Route';
+import { useConfigGlobalState } from '../../../../../iot/states';
 
 const width_item = (Constants.width - 48) / 2;
 
-const Item = memo((props) => {
-  const { svgMain, title, des, value, color, waterType } = props;
-
+const Item = memo(({ id, svgMain, title, measure, des, color, waterType }) => {
+  const [configValues] = useConfigGlobalState('configValues');
   const navigation = useNavigation();
   const goToDetail = () => {
     navigation.navigate(Route.WaterQualityGuide, { waterType });
@@ -33,7 +33,9 @@ const Item = memo((props) => {
         )}
       </View>
       <Text size={24} color={color || Colors.Gray9} style={styles.textValue}>
-        {value}
+        {configValues[id]?.value !== undefined
+          ? `${configValues[id].value} ${measure}`
+          : '--'}
       </Text>
       <Text color={Colors.Gray8}>{des}</Text>
       <View style={styles.boxSvg}>

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

@@ -8,8 +8,19 @@ import { SCProvider } from '../../../../../context';
 import { mockSCStore } from '../../../../../context/mockStore';
 import MockAdapter from 'axios-mock-adapter';
 import api from '../../../../../utils/Apis/axios';
-import { useNavigation } from '@react-navigation/native';
+
 new MockAdapter(api.axiosInstance);
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+    useFocusEffect: (func) => func(),
+  };
+});
 
 const wrapComponent = (data) => (
   <SCProvider initState={mockSCStore({})}>
@@ -19,19 +30,22 @@ const wrapComponent = (data) => (
 
 describe('Test WaterQualityGuide', () => {
   let data;
-  const mockedNavigate = useNavigation().navigate;
-
   beforeEach(() => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
-    mockedNavigate.mockReset();
+    mockNavigate.mockClear();
     data = {
       summaryDetail: {
         ph_id: 1,
-        tur_id: 1,
-        clo_id: 1,
+        tur_id: 2,
+        clo_id: 3,
         tur_value: 1,
         tur_color: '',
         tur_status: '',
+        listConfigs: {
+          ph: 1,
+          tur: 2,
+          clo: 3,
+        },
       },
     };
   });
@@ -69,24 +83,24 @@ describe('Test WaterQualityGuide', () => {
     await act(async () => {
       buttons[0].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledTimes(1);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'turbidity',
     });
 
     await act(async () => {
       buttons[1].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledTimes(2);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(mockNavigate).toHaveBeenCalledTimes(2);
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'ph',
     });
 
     await act(async () => {
       buttons[2].props.onPress();
     });
-    expect(mockedNavigate).toHaveBeenCalledTimes(3);
-    expect(mockedNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(mockNavigate).toHaveBeenCalledTimes(3);
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'clo',
     });
   });

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

@@ -5,14 +5,101 @@ import { Today, Section } from '../../../../commons';
 import Text from '../../../../commons/Text';
 import VisualChart from '../../../Device/components/VisualChart';
 import Item from './Item';
+import { useWatchConfigs } from '../../../../hooks/IoT';
 
 const WaterQuality = memo(({ summaryDetail }) => {
   const t = useTranslations();
-  const { ph_id, tur_id, clo_id } = summaryDetail;
+  const {
+    ph_id,
+    tur_id,
+    clo_id,
+    clo_status,
+    ph_status,
+    tur_status,
+    ph_color,
+    clo_color,
+    tur_color,
+    listConfigs = {},
+  } = summaryDetail;
+  const { ph, clo, tur, temp } = listConfigs;
+  useWatchConfigs([ph, clo, tur, temp]);
+
   const showBoxHistory = useMemo(() => {
     return ph_id || tur_id || clo_id ? true : false;
   }, [ph_id, tur_id, clo_id]);
 
+  const createDataItem = (
+    id,
+    color,
+    title,
+    measure,
+    des,
+    waterType,
+    svgMain
+  ) => ({
+    id,
+    color,
+    title,
+    measure,
+    des,
+    waterType,
+    svgMain,
+  });
+
+  const datas = useMemo(() => {
+    const data = [];
+
+    if (tur) {
+      data.push(
+        createDataItem(
+          tur,
+          tur_color,
+          t('Turbidity'),
+          '°C',
+          tur_status,
+          'turbidity',
+          ''
+        )
+      );
+    }
+    if (ph) {
+      data.push(
+        createDataItem(ph, ph_color, t('pH'), 'pH', ph_status, 'ph', '')
+      );
+    }
+    if (clo) {
+      data.push(
+        createDataItem(
+          clo,
+          clo_color,
+          t('Chlorine residual'),
+          'mg/l',
+          clo_status,
+          'clo',
+          ''
+        )
+      );
+    }
+    if (temp) {
+      data.push(
+        createDataItem(temp, '', t('Water temperature'), '°C', '', null, '')
+      );
+    }
+    return data;
+  }, [
+    clo,
+    clo_color,
+    clo_status,
+    ph,
+    ph_color,
+    ph_status,
+    t,
+    temp,
+    tur,
+    tur_color,
+    tur_status,
+  ]);
+
   const configs = useMemo(() => {
     return [
       { id: ph_id, title: 'pH', color: 'red' },
@@ -26,7 +113,10 @@ const WaterQuality = memo(({ summaryDetail }) => {
         <Today style={styles.textIndoor} />
         <Text style={styles.overall}>{t('water_quality_overall')}</Text>
         <View style={styles.boxWaterQuality}>
-          <Item
+          {datas.map((item) => (
+            <Item {...item} key={item.id} />
+          ))}
+          {/* <Item
             title={t('Turbidity')}
             value={summaryDetail.tur_value}
             color={summaryDetail.tur_color}
@@ -55,7 +145,7 @@ const WaterQuality = memo(({ summaryDetail }) => {
             value={summaryDetail.temp_value}
             des={''}
             svgMain={''}
-          />
+          /> */}
         </View>
       </Section>
       {showBoxHistory && (

package/src/screens/UnitSummary/index.js

@@ -11,8 +11,8 @@ import { API, Colors } from '../../configs';
 import Routes from '../../utils/Route';
 import { axiosGet } from '../../utils/Apis/axios';
 import { title_height } from '../../commons/HeaderAni';
+import AirQuality from './components/AirQuality';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import AirQuality from '../../commons/UnitSummary/AirQuality';
 import PowerConsumption from './components/PowerConsumption';
 import ThreePhasePowerConsumption from './components/3PPowerConsumption';
 import RunningDevices from './components/RunningDevices';
@@ -127,14 +127,6 @@ const UnitSummary = memo(({ route }) => {
   useEffect(() => {
     setLoading(true);
     fetchSummaryDetail();
-
-    if (summary?.screen !== Routes.RunningDevices) {
-      const autoUpdate = setInterval(() => {
-        fetchSummaryDetail();
-      }, 10000); // fetch each 10 second
-
-      return () => clearInterval(autoUpdate);
-    }
   }, [fetchSummaryDetail, summary?.screen]);
 
   const onRefresh = useCallback(() => {

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

@@ -94,6 +94,8 @@ export default {
   text_temperature: 'Temperature',
   text_wind: 'Wind',
   text_rain: 'Rain',
+  rainy: 'Rainy',
+  no_rain: 'No rain',
   text_win_direction: 'Direction',
   text_good: 'Good',
   text_moderate: 'Moderate',
@@ -717,6 +719,11 @@ export default {
   ok_and_got_it: 'Ok',
   notify_back: 'Are you sure to go back?',
   notifications: 'Notifications',
+  notification: 'Notification',
+  send_notification: 'Send Notification',
+  title_notification: 'Subject: “Warning”',
+  message_notification:
+    'Warning content: "The temperature in the office is high, please check."',
   promotions: 'Promotions',
   news: 'News',
   system: 'System',
@@ -1008,9 +1015,11 @@ export default {
   action: 'action',
   power: 'Power',
   actions_list: 'Actions list',
-  delette_action: 'Delete action?',
+  delete_action: 'Delete action?',
   message_delete_action:
     'Are you sure you want to delete action of \n{actionName} in {stationName}?',
+  message_delete_notify:
+    'Are you sure you want to remove sending notifications?',
   add_script: 'Add Script',
   delete_script: 'Delete Script',
   title_delete_script: 'Delete script "{scriptName}"?',
@@ -1037,6 +1046,12 @@ export default {
   update_smart: 'Update Smart',
   automate: 'Automate',
   smart: 'Smart',
+  enable_this_script: 'Enable this script',
+  this_script_has_been_disabled: 'This script has been disabled',
+  control_device: 'Control device',
+  send_email: 'Send e-mail',
+  send_app_notification: 'Send app notification',
+  delay_the_action: 'Delay the action',
   end_device_not_support_script:
     // eslint-disable-next-line max-len
     'This device does not support installing "{not_support}" scripts, but you can use "{support}" scripts to perform the desired setup.',