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

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',

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

@@ -179,6 +179,8 @@ export default {
   text_temperature: 'Nhiệt độ',
   text_wind: 'Gió',
   text_rain: 'Mưa',
+  rainy: 'Có mưa',
+  no_rain: 'Không mưa',
   text_win_direction: 'Hướng gió',
   text_good: 'Tốt',
   text_moderate: 'Trung bình',

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

@@ -1,53 +0,0 @@
-import React, { memo } from 'react';
-import { View, StyleSheet } from 'react-native';
-
-import Text from '../../../../../commons/Text';
-import { Colors } from '../../../../../configs';
-
-const ItemPower = memo((props) => {
-  const { svg, title, des, time, value } = props;
-  return (
-    <View style={styles.container}>
-      {svg}
-      <View style={styles.content}>
-        <View style={styles.boxInfo}>
-          <Text size={16} color={Colors.Gray9} style={styles.textMarginBottom}>
-            {title}
-          </Text>
-          <Text size={14} color={Colors.Gray8} style={styles.textMarginBottom}>
-            {des}
-          </Text>
-          <Text size={14} color={Colors.Gray8}>
-            {time}
-          </Text>
-        </View>
-        <Text size={14} color={Colors.Gray8}>
-          {value}
-        </Text>
-      </View>
-    </View>
-  );
-});
-
-export default ItemPower;
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    paddingTop: 16,
-  },
-  content: {
-    flexDirection: 'row',
-    paddingBottom: 16,
-    flex: 1,
-    marginLeft: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: Colors.Gray4,
-  },
-  boxInfo: {
-    flex: 1,
-  },
-  textMarginBottom: {
-    marginBottom: 4,
-  },
-});

package/src/screens/UnitSummary/components/PowerConsumption/__test__/ItemPower.test.js

@@ -1,20 +0,0 @@
-import React from 'react';
-import { act, create } from 'react-test-renderer';
-import Text from '../../../../../commons/Text';
-import ItemPower from '../ItemPower';
-
-describe('test ItemPower', () => {
-  it('render', async () => {
-    let tree;
-    let data = { svg: '', title: 'Title item', des: '', time: '', value: '' };
-
-    await act(async () => {
-      tree = await create(<ItemPower {...data} />);
-    });
-
-    const instance = tree.root;
-    const texts = instance.findAllByType(Text);
-    expect(texts).toHaveLength(4);
-    expect(texts[0].props.children).toEqual('Title item');
-  });
-});