@eohjsc/react-native-smart-city 0.6.2 → 0.7.3

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 MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -37,7 +37,11 @@ const UvIndex = memo(({ summaryDetail }) => {
         <Today />
         <SegmentedRoundChart data={data} />
         <View style={styles.boxHealth}>
-          <IconOutline name="alert" size={20} style={styles.iconMargin} />
+          <MaterialCommunityIcons
+            name="alert-circle-outline"
+            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/components/__test__/UnitSummary.test.js

@@ -22,8 +22,8 @@ describe('Test UnitSummary', () => {
       tree = await create(<UnitSummary {...defaultProps} index={0} />);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities[0].props.style).toEqual([
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities[0].props.style).toEqual([
       styles.summaryContainer,
       { borderTopLeftRadius: 10 },
     ]);
@@ -34,8 +34,8 @@ describe('Test UnitSummary', () => {
       tree = await create(<UnitSummary {...defaultProps} index={1} />);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities[0].props.style).toEqual([
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities[0].props.style).toEqual([
       styles.summaryContainer,
       { borderTopRightRadius: 10 },
     ]);
@@ -46,8 +46,8 @@ describe('Test UnitSummary', () => {
       tree = await create(<UnitSummary {...defaultProps} index={1} len={2} />);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities[0].props.style).toEqual([
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities[0].props.style).toEqual([
       styles.summaryContainer,
       { borderBottomRightRadius: 10 },
     ]);
@@ -58,8 +58,8 @@ describe('Test UnitSummary', () => {
       tree = await create(<UnitSummary {...defaultProps} index={2} len={3} />);
     });
     const instance = tree.root;
-    const TouchableOpacities = instance.findAllByType(TouchableOpacity);
-    expect(TouchableOpacities[0].props.style).toEqual([
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities[0].props.style).toEqual([
       styles.summaryContainer,
       { borderBottomLeftRadius: 10 },
     ]);

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/Apis/axios.js

@@ -17,7 +17,9 @@ const api = create({
 
 if (__DEV__ && process.env.NODE_ENV !== 'test') {
   api.axiosInstance.interceptors.request.use((request) => {
-    console.log(`${request.method.toUpperCase()} ${request.url || ''}`);
+    console.log(
+      `${new Date()} ${request.method.toUpperCase()} ${request.url || ''}`
+    );
     if (process.env.DEBUG_AXIOS_DETAIL_REQUEST) {
       if (request.data) {
         console.log(JSON.stringify(request.data));
@@ -28,7 +30,7 @@ if (__DEV__ && process.env.NODE_ENV !== 'test') {
   });
 
   api.axiosInstance.interceptors.response.use((response) => {
-    console.log(`${response.status} ${response.config.url}`);
+    console.log(`${new Date()} ${response.status} ${response.config.url}`);
     if (process.env.DEBUG_AXIOS_DETAIL_REQUEST) {
       console.log(response.data);
     }

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

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

package/src/utils/Route/index.js

@@ -19,7 +19,6 @@ const Routes = {
   EditSubUnit: 'EditSubUnit',
   Language: 'Language',
   SubUnit: 'SubUnit',
-  SubUnitDetail: 'SubUnitDetail',
   DeviceDetail: 'DeviceDetail',
   HanetCameraStack: 'HanetCameraStack',
   HanetCameraDetail: 'HanetCameraDetail',

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/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);
-  });
-});

package/src/commons/Device/WindSpeed/LinearChart/index.js

@@ -1,155 +0,0 @@
-import React, { memo } from 'react';
-import Svg, { G } from 'react-native-svg';
-import {
-  VictoryLine,
-  VictoryAxis,
-  VictoryScatter,
-  VictoryTooltip,
-} from 'victory-native';
-import { useTranslations } from '../../../../hooks/Common/useTranslations';
-
-import { Colors } from '../../../../configs';
-import ChartLoading from '../../../ChartLoading';
-import ValueBalloon from '../../../Device/WindSpeed/LinearChart/ValueBalloon';
-import { getMaxValueIndex } from '../../../../utils/chartHelper/getMaxValueIndex';
-import getTickValues from '../../../../utils/dateHelper/getTickValues';
-
-const LinearChart = memo(
-  ({
-    startTime,
-    endTime,
-    datasShow,
-    configuration,
-    datasColor,
-    chartOptions,
-  }) => {
-    const t = useTranslations();
-    const datas = chartOptions.showAll
-      ? datasShow
-      : datasShow.filter((item, index) => index === chartOptions.index);
-    if (!datasShow[0].data) {
-      return <ChartLoading />;
-    }
-    if (!datasShow[0].data.length) {
-      return <ChartLoading message={t('no_data')} />;
-    }
-    const chartTick = getTickValues(datas[0], configuration).stringArr;
-    const maxValue = getMaxValueIndex(datas[0].data);
-
-    return (
-      <Svg width={'100%'} height={300} style>
-        <G x={-12} y={-12}>
-          <VictoryAxis
-            dependentAxis
-            domain={[0, maxValue.max.y * 1.2]}
-            offsetX={50}
-            orientation="left"
-            standalone={false}
-            style={styleVerticalAxis}
-          />
-          <VictoryAxis
-            crossAxis
-            scale="time"
-            standalone={false}
-            style={styleHorizontalAxis}
-            tickValues={chartTick}
-          />
-          {datas.map((item, index) => {
-            const tickValues = getTickValues(item).arr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index.toString()}>
-                <VictoryLine
-                  data={item.data}
-                  domain={{
-                    x: [tickValues[0], tickValues[tickValues.length - 1]],
-                    y: [0, maxValueLine.max.y * 1.2],
-                  }}
-                  style={{
-                    data: { stroke: item.color },
-                  }}
-                  interpolation="monotoneX"
-                  scale={{ x: 'time', y: 'linear' }}
-                  standalone={false}
-                />
-              </G>
-            );
-          })}
-          {datas.map((item, index) => {
-            const scatterValues = getTickValues(item).stringDataArr;
-            const maxValueLine = getMaxValueIndex(item.data);
-            return (
-              <G key={index}>
-                <VictoryScatter
-                  standalone={false}
-                  data={scatterValues}
-                  labels={(datum) => {
-                    if (item.measure === 'pH') {
-                      return `${item.measure} ${datum.y.toString()}`;
-                    }
-                    return `${datum.y.toString()} ${item.measure}`;
-                  }}
-                  labelComponent={
-                    <VictoryTooltip
-                      flyoutComponent={<ValueBalloon />}
-                      renderInPortal={false}
-                    />
-                  }
-                  domain={{ y: [0, maxValueLine.max.y * 1.2] }}
-                  samples={25}
-                  size={5}
-                  style={{ ...styleScatter, data: { fill: item.color } }}
-                />
-              </G>
-            );
-          })}
-        </G>
-      </Svg>
-    );
-  }
-);
-
-export default LinearChart;
-
-const styleVerticalAxis = {
-  axis: { stroke: Colors.Gray4, strokeWidth: 1 },
-  ticks: {
-    size: 5,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-  grid: {
-    fill: 'none',
-    stroke: Colors.Gray4,
-    strokeDasharray: '5,5',
-    pointerEvents: 'painted',
-  },
-};
-
-const styleHorizontalAxis = {
-  axis: { stroke: 'black', strokeWidth: 0 },
-  ticks: {
-    size: 10,
-    stroke: 'black',
-    strokeWidth: 0,
-  },
-  tickLabels: {
-    fill: Colors.Gray8,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 10,
-  },
-};
-
-const styleScatter = {
-  labels: {
-    fill: Colors.White,
-    padding: 14,
-    fontFamily: 'SFProDisplay-Regular',
-    fontSize: 12,
-  },
-};

package/src/screens/AddNewGateway/hooks/__Tests__/index.test.js

@@ -1,27 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks';
-import MockAdapter from 'axios-mock-adapter';
-import api from '../../../../utils/Apis/axios';
-import { useConnectGateway } from '..';
-
-import { API } from '../../../../configs';
-
-const mock = new MockAdapter(api.axiosInstance);
-jest.mock('@react-navigation/native', () => {
-  return {
-    ...jest.requireActual('@react-navigation/native'),
-    useNavigation: () => ({
-      dangerouslyGetParent: () => ({
-        dangerouslyGetState: jest.fn(),
-      }),
-    }),
-  };
-});
-describe('Test useHomeAssistantConnection', () => {
-  it('test connectGoogleHome all connected', async () => {
-    const { result } = renderHook(() => useConnectGateway(1));
-    await act(async () => {
-      await result.current.onPressDone();
-    });
-    mock.onGet(API.UNIT.UNIT_DETAIL(1)).reply(200, {});
-  });
-});

package/src/screens/AddNewGateway/hooks/index.js

@@ -1,31 +0,0 @@
-import { useCallback } from 'react';
-import { useNavigation } from '@react-navigation/native';
-import { axiosGet } from '../../../utils/Apis/axios';
-import { API } from '../../../configs';
-
-const useConnectGateway = (unit_id) => {
-  const navigation = useNavigation();
-
-  const fetchDetails = useCallback(async () => {
-    const { success: fetchSuccess, data: unit } = await axiosGet(
-      API.UNIT.UNIT_DETAIL(unit_id),
-      {},
-      true
-    );
-    return { fetchSuccess, unit };
-  }, [unit_id]);
-
-  const onPressDone = useCallback(async () => {
-    const { fetchSuccess } = await fetchDetails();
-    if (!fetchSuccess) {
-      return;
-    }
-    navigation.dangerouslyGetParent().pop();
-  }, [fetchDetails, navigation]);
-
-  return {
-    onPressDone,
-  };
-};
-
-export { useConnectGateway };