@eohjsc/react-native-smart-city 0.5.9 → 0.6.0-rc2

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

@@ -12,17 +12,6 @@ const wrapComponent = (unit, summaryDetail) => (
   </SCProvider>
 );
 
-const mockedNavigate = jest.fn();
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      navigate: mockedNavigate,
-    }),
-    useIsFocused: () => true,
-  };
-});
-
 const mockConnectHomeAssistant = jest.fn();
 jest.mock('../../../../../hooks/IoT', () => {
   return {
@@ -34,10 +23,6 @@ jest.mock('../../../../../hooks/IoT', () => {
 });
 
 describe('test RunningDevices', () => {
-  afterEach(() => {
-    mockedNavigate.mockClear();
-  });
-
   let list_svgMain = [
     '',
     'sensor',
@@ -128,7 +113,7 @@ describe('test RunningDevices', () => {
     await act(async () => {
       button[0].props.onPress();
     });
-    expect(mockedNavigate).toBeCalledWith('DeviceDetail', {
+    expect(global.mockedNavigate).toBeCalledWith('DeviceDetail', {
       sensorData: summaryDetail.devices[0],
       station: 'station',
       title: undefined,

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

@@ -25,18 +25,21 @@ const Temperature = ({ summaryDetail }) => {
     () => [
       {
         id: temp,
+        key: 'temp',
         svgMain: <SvgTemperature />,
         title: `${t('text_temperature')}`,
         measure: '°C',
       },
       {
         id: humi,
+        key: 'humi',
         svgMain: <SvgHumidity />,
         title: `${t('text_humidity')}`,
         measure: '%',
       },
       {
         id: wind,
+        key: 'wind',
         svgMain: <SvgWind />,
         title: `${t('text_wind')}`,
         des: `${t('text_win_direction')}: ${windDirection || t('loading')}`,
@@ -44,6 +47,7 @@ const Temperature = ({ summaryDetail }) => {
       },
       {
         id: rain,
+        key: 'rain',
         svgMain: <SvgRain />,
         title: `${t('text_rain')}`,
         measure: '',
@@ -78,7 +82,7 @@ const Temperature = ({ summaryDetail }) => {
         <Today style={styles.textIndoor} />
         <View style={styles.boxTemperature}>
           {dataTemperature.map((item) => (
-            <ItemTemperature {...item} key={item.id} />
+            <ItemTemperature {...item} key={item.key} />
           ))}
         </View>
       </Section>

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

@@ -9,14 +9,6 @@ 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,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -37,7 +37,7 @@ const UvIndex = memo(({ summaryDetail }) => {
         <Today />
         <SegmentedRoundChart data={data} />
         <View style={styles.boxHealth}>
-          <IconOutline name="alert" size={20} style={styles.iconMargin} />
+          <AntDesign name="alert" size={20} style={styles.iconMargin} />
           <Text
             semibold
             color={Colors.Gray9}

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import { useNavigation } from '@react-navigation/native';
 
 import Text from '../../../../../commons/Text';
@@ -23,7 +23,7 @@ const Item = memo(({ id, svgMain, title, measure, des, color, waterType }) => {
         <Text>{title}</Text>
         {waterType && (
           <TouchableOpacity onPress={goToDetail} style={styles.buttonInfo}>
-            <IconOutline
+            <AntDesign
               style={styles.row}
               name="info-circle"
               size={20}

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

@@ -8,19 +8,9 @@ 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({})}>
@@ -29,10 +19,10 @@ const wrapComponent = (data) => (
 );
 
 describe('Test WaterQualityGuide', () => {
+  const { navigate } = useNavigation();
   let data;
   beforeEach(() => {
     Date.now = jest.fn(() => new Date('2021-01-24T12:00:00.000Z'));
-    mockNavigate.mockClear();
     data = {
       summaryDetail: {
         ph_id: 1,
@@ -45,6 +35,7 @@ describe('Test WaterQualityGuide', () => {
           ph: 1,
           tur: 2,
           clo: 3,
+          temp: 4,
         },
       },
     };
@@ -83,25 +74,30 @@ describe('Test WaterQualityGuide', () => {
     await act(async () => {
       buttons[0].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(1);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'turbidity',
     });
 
     await act(async () => {
       buttons[1].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(2);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(2);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'ph',
     });
 
     await act(async () => {
       buttons[2].props.onPress();
     });
-    expect(mockNavigate).toHaveBeenCalledTimes(3);
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
+    expect(navigate).toHaveBeenCalledTimes(3);
+    expect(navigate).toHaveBeenCalledWith(Routes.WaterQualityGuide, {
       waterType: 'clo',
     });
+
+    await act(async () => {
+      buttons[3].props.onPress();
+    });
+    expect(navigate).toHaveBeenCalledTimes(3); // not call navigate
   });
 });

package/src/screens/UnitSummary/index.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useState } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { TouchableOpacity } from 'react-native';
-import { IconOutline } from '@ant-design/icons-react-native';
+import AntDesign from 'react-native-vector-icons/AntDesign';
 import moment from 'moment';
 
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -129,9 +129,9 @@ const UnitSummary = memo(({ route }) => {
     fetchSummaryDetail();
   }, [fetchSummaryDetail, summary?.screen]);
 
-  const onRefresh = useCallback(() => {
+  const onRefresh = useCallback(async () => {
     setLoading(true);
-    fetchSummaryDetail();
+    await fetchSummaryDetail();
   }, [fetchSummaryDetail]);
 
   const { dataNotification } = useReceiveNotifications();
@@ -168,11 +168,7 @@ const UnitSummary = memo(({ route }) => {
                 accessibilityLabel={AccessibilityLabel.UNIT_SUMMARY_GUIDE_TOUCH}
                 onPress={() => navigation.navigate(GuideName)}
               >
-                <IconOutline
-                  name="info-circle"
-                  size={27}
-                  color={Colors.Black}
-                />
+                <AntDesign name="info-circle" size={27} color={Colors.Black} />
               </TouchableOpacity>
             </View>
           ) : null

package/src/utils/Converter/__test__/timer.test.js

@@ -17,6 +17,14 @@ describe('Test timer', () => {
     expect(result).toBe('1 seconds ago');
   });
 
+  it('Test timeDifference when previous is string', async () => {
+    result = await timeDifference(
+      new Date('2022-08-01T03:24:01'),
+      '2022-08-01T03:24:00'
+    );
+    expect(result).toBe('1 seconds ago');
+  });
+
   it('Test timeDifference when elapsed < msPerMinute and symbol=true', async () => {
     result = await timeDifference(
       new Date('2022-08-01T03:24:01'),

package/src/utils/Functions/preloadImages.js

@@ -7,7 +7,7 @@ export const preloadImagesFromUnits = async (units, storeKey) => {
   const isFirstTime = await getData(storeKey);
   if (units?.length && !isFirstTime) {
     await storeData(storeKey, 'true');
-    Promise.all(
+    const results = await Promise.all(
       units.map(async (item) => {
         const unitId =
           storeKey === STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS
@@ -22,18 +22,17 @@ export const preloadImagesFromUnits = async (units, storeKey) => {
           return success && data;
         }
       })
-      // eslint-disable-next-line promise/prefer-await-to-then
-    ).then((results) => {
-      const icons = results
-        .map((item) => item?.stations?.map((i) => i?.background) || [])
-        .flat()
-        .filter(Boolean);
-      FastImage.preload(
-        icons.map((uri) => ({
-          uri,
-          priority: FastImage.priority.high,
-        }))
-      );
-    });
+    );
+
+    const icons = results
+      .map((item) => item?.stations?.map((i) => i?.background) || [])
+      .flat()
+      .filter(Boolean);
+    FastImage.preload(
+      icons.map((uri) => ({
+        uri,
+        priority: FastImage.priority.high,
+      }))
+    );
   }
 };

package/src/utils/Monitor.js

@@ -2,11 +2,11 @@ import { getPusher, destroyPusher } from './Pusher';
 
 // eslint-disable-next-line promise/prefer-await-to-callbacks
 export const watchNotificationData = (user, callback) => {
-  const channel = getPusher().subscribe(`private-user-${user.id}`);
-  channel.bind('new-notification', callback);
+  // const channel = getPusher().subscribe(`private-user-${user.id}`);
+  // channel.bind('new-notification', callback);
 };
 
 export const unwatchNotificationData = (user) => {
-  getPusher().unsubscribe(`private-user-${user.id}`);
-  destroyPusher();
+  // getPusher().unsubscribe(`private-user-${user.id}`);
+  // destroyPusher();
 };

package/src/utils/Storage.js

@@ -1,4 +1,4 @@
-import AsyncStorage from '@react-native-community/async-storage';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const STORAGE_KEY = {
   FIREBASE_APP_CONFIG: 'app_config',

package/src/commons/Device/HistoryChart.js

@@ -1,225 +0,0 @@
-import React, { memo, useCallback, useState, useMemo, useEffect } from 'react';
-import { StyleSheet, View, Dimensions } from 'react-native';
-import moment from 'moment';
-import { useTranslations } from '../../hooks/Common/useTranslations';
-
-import { Colors } from '../../configs';
-import Text from '../../commons/Text';
-import Button from '../../commons/Button';
-import CurrencyInput from '../../commons/Form/CurrencyInput';
-import DateTimeRangeChange from '../DateTimeRangeChange';
-import HorizontalBarChart from './HorizontalBarChart';
-import LinearChart from './LinearChart';
-import ChartAggregationOption from '../ChartAggregationOption';
-import { formatMoney } from '../../utils/Utils';
-
-const { width } = Dimensions.get('window');
-
-const HistoryChart = memo(
-  ({
-    datas,
-    chartConfig,
-    setChartConfig,
-    style,
-    formatType,
-    startDate,
-    endDate,
-    setEndDate,
-    setStartDate,
-    groupBy,
-    setGroupBy,
-    configuration = {},
-  }) => {
-    const t = useTranslations();
-    const [price, setPrice] = useState(null);
-
-    const [eventPicker, setEventPicker] = useState({
-      showModalEnd: false,
-      showModalStart: false,
-      startTime: startDate ? startDate : moment().subtract(1, 'day'),
-      endTime: endDate ? endDate : moment(),
-    });
-
-    const selectStart = useCallback((date) => {
-      setEventPicker((state) => {
-        if (typeof date === 'number') {
-          return state;
-        }
-        if (moment(date) < state.endTime) {
-          return {
-            ...state,
-            showModalStart: false,
-            startTime: date ? moment(date) : moment().valueOf(),
-          };
-        } else {
-          return {
-            ...state,
-            showModalStart: false,
-            startTime: date ? moment(date) : moment().valueOf(),
-            endTime: date ? moment(date).add(1, 'day') : moment().valueOf(),
-          };
-        }
-      });
-    }, []);
-
-    const selectEnd = useCallback((date) => {
-      setEventPicker((state) => {
-        if (typeof date === 'number') {
-          return state;
-        }
-        if (moment(date).add(1, 'day') > state.startTime) {
-          return {
-            ...state,
-            showModalEnd: false,
-            endTime: date ? moment(date) : moment().valueOf(),
-          };
-        }
-        return {
-          ...state,
-          showModalEnd: false,
-          startTime: date ? moment(date).add(-1, 'day') : moment().valueOf(),
-          endTime: date ? moment(date) : moment().valueOf(),
-        };
-      });
-    }, []);
-
-    const onCalculateCost = useCallback(() => {
-      setChartConfig((config) => ({
-        ...config,
-        price,
-      }));
-    }, [setChartConfig, price]);
-
-    const totalPrice = useMemo(() => {
-      if (configuration.config !== 'power_consumption') {
-        return null;
-      }
-      const { price: chartPrice } = chartConfig;
-      if (chartPrice === '' || isNaN(chartPrice)) {
-        return null;
-      }
-      const sum = datas[0].data.reduce((a, b) => a + b.y, 0);
-      const roundedSum = sum * chartPrice;
-      return roundedSum.toFixed();
-    }, [configuration, datas, chartConfig]);
-
-    const renderChart = useMemo(() => {
-      if (configuration.type === 'line_chart') {
-        return (
-          <View style={styles.chartContainer}>
-            <View style={[styles.chart, { width: width }]}>
-              <LinearChart datas={datas} />
-            </View>
-          </View>
-        );
-      }
-      if (configuration.type === 'horizontal_bar_chart') {
-        return <HorizontalBarChart datas={datas} config={chartConfig} />;
-      }
-    }, [chartConfig, configuration.type, datas]);
-
-    useEffect(() => {
-      setStartDate(eventPicker.startTime);
-    }, [eventPicker.startTime, setStartDate]);
-
-    useEffect(() => {
-      setEndDate(eventPicker.endTime);
-    }, [eventPicker.endTime, setEndDate]);
-
-    return (
-      <View style={style}>
-        <View style={styles.historyView}>
-          <View style={styles.titleHistory}>
-            <Text size={20} semibold color={Colors.Gray9}>
-              {t('history')}
-            </Text>
-            {configuration.type === 'horizontal_bar_chart' && (
-              <ChartAggregationOption
-                groupBy={groupBy}
-                setGroupBy={setGroupBy}
-              />
-            )}
-          </View>
-          {!(
-            configuration.type === 'horizontal_bar_chart' && groupBy !== 'date'
-          ) && (
-            <DateTimeRangeChange
-              startTime={eventPicker.startTime}
-              selectStart={selectStart}
-              selectEnd={selectEnd}
-              endTime={eventPicker.endTime}
-              formatType={formatType}
-            />
-          )}
-        </View>
-        {configuration.config === 'power_consumption' && (
-          <View style={styles.wrapCalculateCost}>
-            <Text type="H4">
-              {t('input_price_to_calculate_electricity_cost')}
-            </Text>
-            <View style={styles.row}>
-              <CurrencyInput
-                value={price}
-                onChange={setPrice}
-                minValue={0}
-                maxValue={100000000}
-                placeholder={'0'}
-                onSubmitEditing={onCalculateCost}
-              />
-              <Button
-                type="primary"
-                title={t('calculate_cost')}
-                onPress={onCalculateCost}
-                style={styles.buttonCalculate}
-                textSemiBold={false}
-              />
-            </View>
-          </View>
-        )}
-        {renderChart}
-        {configuration.config === 'power_consumption' && !!chartConfig.price && (
-          <Text type="H4">
-            {t('total_power_price')} <Text bold>{formatMoney(totalPrice)}</Text>
-          </Text>
-        )}
-      </View>
-    );
-  }
-);
-
-export default HistoryChart;
-
-const styles = StyleSheet.create({
-  historyView: {
-    paddingTop: 16,
-  },
-  titleHistory: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  chartInfo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  chartContainer: {
-    marginLeft: -8,
-  },
-  chart: {
-    height: 300,
-  },
-  wrapCalculateCost: {
-    marginTop: 12,
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 8,
-  },
-  buttonCalculate: {
-    width: null,
-    flex: null,
-    paddingHorizontal: 12,
-  },
-});

package/src/commons/Device/WindSpeed/LinearChart/__test__/LinearChart.test.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import Svg from 'react-native-svg';
-import LinearChart from '../';
-import renderer, { act } from 'react-test-renderer';
-import { SCProvider } from '../../../../../context';
-import { mockSCStore } from '../../../../../context/mockStore';
-
-Date.now = jest.fn(() => 1487076708000);
-
-const wrapComponent = (chartOptions, datasShow) => (
-  <SCProvider initState={mockSCStore({})}>
-    <LinearChart chartOptions={chartOptions} datasShow={datasShow} />
-  </SCProvider>
-);
-
-describe('Test LinearChart', () => {
-  let wrapper;
-
-  it('LinearChart render', async () => {
-    const chartOptions = {
-      showAll: true,
-    };
-    const datasShow = [
-      {
-        data: [
-          {
-            x: 0,
-            y: 1,
-          },
-          {
-            x: 1,
-            y: 2,
-          },
-          {
-            x: 2,
-            y: 3,
-          },
-        ],
-      },
-    ];
-    await act(async () => {
-      wrapper = renderer.create(wrapComponent(chartOptions, datasShow));
-    });
-    const instance = wrapper.root;
-    const Svgs = instance.findAllByType(Svg);
-    expect(Svgs).toHaveLength(1);
-  });
-});