@eohjsc/react-native-smart-city 0.3.86 → 0.3.88

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.86",
+  "version": "0.3.88",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/ActionGroup/__test__/TwoButtonTemplate.test.js

@@ -172,4 +172,34 @@ describe('Test TwoButtonTemplate', () => {
     const touchableOpacities = instance.findAllByType(TouchableOpacity);
     expect(touchableOpacities.length).toEqual(2);
   });
+
+  it('render data configuration case button1 on value is null', async () => {
+    const mockDoAction = jest.fn();
+    let new_actionGroup = {
+      ...actionGroup,
+      configuration: {
+        ...actionGroup.configuration,
+        button1: {
+          ...actionGroup.configuration.button1,
+          is_on_value: null,
+        },
+        button2: {
+          ...actionGroup.configuration.button2,
+          is_on_value: [true],
+        },
+      },
+    };
+    await act(async () => {
+      wrapper = create(
+        <TwoButtonTemplate
+          actionGroup={new_actionGroup}
+          doAction={mockDoAction}
+          sensor={sensor}
+        />
+      );
+    });
+    const instance = wrapper.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    expect(touchableOpacities.length).toEqual(2);
+  });
 });

package/src/commons/{FourButtonFilterHistory → ChartAggregationOption}/__test__/FourButtonFilterHistory.test.js

@@ -2,12 +2,12 @@ import React from 'react';
 import { act, create } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import FourButtonFilterHistory from '../index';
+import ChartAggregationOption from '../index';
 import { TouchableOpacity } from 'react-native';
 
 const wrapComponent = (props) => (
   <SCProvider initState={mockSCStore({})}>
-    <FourButtonFilterHistory {...props} />
+    <ChartAggregationOption {...props} />
   </SCProvider>
 );
 

package/src/commons/ChartAggregationOption/index.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import Text from '../Text';
+import { Colors } from '../../configs';
+import styles from './styles';
+
+const defaultOptions = [
+  {
+    title: 'D',
+    data: 'date',
+  },
+
+  {
+    title: 'W',
+    data: 'week',
+  },
+
+  {
+    title: 'M',
+    data: 'month',
+  },
+
+  {
+    title: 'Y',
+    data: 'year',
+  },
+];
+
+const ItemButton = ({ title, onPress, isSelected }) => {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.button, isSelected && styles.selectedButton]}
+    >
+      <View>
+        <Text bold color={isSelected && Colors.Primary}>
+          {title}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ChartAggregationOption = ({
+  groupBy,
+  setGroupBy,
+  options = defaultOptions,
+}) => {
+  const onPressButton = useCallback(
+    (data) => () => {
+      setGroupBy && setGroupBy(data);
+    },
+    [setGroupBy]
+  );
+
+  return (
+    <View style={styles.row}>
+      {options.map((item, index) => {
+        return (
+          <ItemButton
+            key={index}
+            title={item.title}
+            onPress={onPressButton(item.data)}
+            isSelected={item.data === groupBy}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default ChartAggregationOption;

package/src/commons/Dashboard/MyPinnedSharedUnit/__test__/MyPinnedSharedUnit.test.js

@@ -12,10 +12,13 @@ import { API } from '../../../../configs';
 import { TouchableOpacity } from 'react-native';
 import api from '../../../../utils/Apis/axios';
 import SharedUnit from '../../../Unit/SharedUnit';
+import { Action } from '../../../../context/actionType';
 
 const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
+const mockSetAction = jest.fn();
+
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),
@@ -26,6 +29,18 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: true },
+      }),
+      setAction: mockSetAction,
+    }),
+  };
+});
+
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
     <MyPinnedSharedUnit />
@@ -60,6 +75,10 @@ describe('Test MyPinnedSharedUnit', () => {
       goToAllSharedUnits.props.onPress();
     });
     expect(mockedNavigate).toHaveBeenCalled();
+    expect(mockSetAction).toBeCalledWith(
+      Action.IS_CHECK_CLEAR_CACHE_UNITS,
+      false
+    );
   });
 
   it('render without item', async () => {

package/src/commons/Dashboard/MyPinnedSharedUnit/index.js

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useState, memo } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useState,
+  memo,
+  useContext,
+} from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 import styles from './styles';
@@ -10,15 +16,22 @@ import Routes from '../../../utils/Route';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
-import { fetchWithCache } from '../../../utils/Apis/axios';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
 import { STORAGE_KEY } from '../../../utils/Storage';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 const MyPinnedSharedUnit = ({ refreshing }) => {
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const [sharedUnits, setSharedUnits] = useState([]);
+  const { setAction } = useContext(SCContext);
+
+  const isNeedUpdateCache = useSCContextSelector(
+    (state) => state.app.isNeedUpdateCache
+  );
 
   const goToAllSharedUnits = () => {
     navigation.navigate(Routes.SharedStack, {
@@ -27,13 +40,21 @@ const MyPinnedSharedUnit = ({ refreshing }) => {
   };
 
   const fetchSharedUnitDashboard = useCallback(async () => {
-    await fetchWithCache(API.UNIT.SHARED_UNITS(), {}, (response) => {
-      const { success, data } = response;
-
-      if (success) {
-        setSharedUnits(data);
-      }
-    });
+    if (isNeedUpdateCache) {
+      setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
+      const { success, data } = await axiosGet(
+        API.UNIT.SHARED_UNITS(),
+        {},
+        true
+      );
+      success && setSharedUnits(data);
+    } else {
+      await fetchWithCache(API.UNIT.SHARED_UNITS(), {}, (response) => {
+        const { success, data } = response;
+        success && setSharedUnits(data);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setSharedUnits]);
 
   useEffect(() => {

package/src/commons/Dashboard/MyUnit/__test__/MyUnit.test.js

@@ -16,6 +16,14 @@ const mock = new MockAdapter(api.axiosInstance);
 
 const mockedNavigate = jest.fn();
 const mockedDispatch = jest.fn();
+const mockedSetAction = jest.fn();
+
+const mockUseContext = jest.fn().mockImplementation(() => ({
+  stateData: mockSCStore({}),
+  setAction: mockedSetAction,
+}));
+
+React.useContext = mockUseContext;
 
 const mockSetAction = jest.fn();
 jest.mock('react', () => {
@@ -23,7 +31,7 @@ jest.mock('react', () => {
     ...jest.requireActual('react'),
     useContext: () => ({
       stateData: mockSCStore({
-        app: { isDeleteUnitSuccessFully: true },
+        app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
       }),
       setAction: mockSetAction,
     }),
@@ -131,6 +139,10 @@ describe('Test MyUnit', () => {
       params: { unitId: 1 },
       screen: Routes.UnitDetail,
     });
+    expect(mockSetAction).toBeCalledWith(
+      Action.IS_CHECK_CLEAR_CACHE_UNITS,
+      false
+    );
   });
 
   it('Test isDeleteUnitSuccessFully', async () => {

package/src/commons/Dashboard/MyUnit/index.js

@@ -17,7 +17,7 @@ import NetInfo from '@react-native-community/netinfo';
 import { BleManager } from 'react-native-ble-plx';
 import { API, Colors, Images } from '../../../configs';
 import Text from '../../Text';
-import { fetchWithCache } from '../../../utils/Apis/axios';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
 
 import styles from './styles';
 import { Section } from '../../Section';
@@ -50,6 +50,9 @@ const MyUnit = ({ refreshing }) => {
   const isDeleteUnitSuccessFully = useSCContextSelector(
     (state) => state.app.isDeleteUnitSuccessFully
   );
+  const isNeedUpdateCache = useSCContextSelector(
+    (state) => state.app.isNeedUpdateCache
+  );
 
   const {
     permissionsRequested: bluetoothPermRequested,
@@ -61,17 +64,18 @@ const MyUnit = ({ refreshing }) => {
   }, [bluetoothPermRequested, requestBluetoothPerm]);
 
   const fetchMyUnitDashboard = useCallback(async () => {
-    await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
-      const { success, data } = response;
+    if (isNeedUpdateCache) {
+      setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
+      const { success, data } = await axiosGet(API.UNIT.MY_UNITS(), {}, true);
       success && setMyUnits(data);
-    });
-  }, [setMyUnits]);
-
-  useEffect(() => {
-    if (isFocused || refreshing) {
-      fetchMyUnitDashboard();
+    } else {
+      await fetchWithCache(API.UNIT.MY_UNITS(), {}, (response) => {
+        const { success, data } = response;
+        success && setMyUnits(data);
+      });
     }
-  }, [fetchMyUnitDashboard, isFocused, refreshing]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setMyUnits]);
 
   useFocusEffect(
     useCallback(() => {
@@ -169,6 +173,12 @@ const MyUnit = ({ refreshing }) => {
       preloadImagesFromUnits(myUnits, STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS);
   }, [myUnits]);
 
+  useEffect(() => {
+    if (isFocused || refreshing) {
+      fetchMyUnitDashboard();
+    }
+  }, [fetchMyUnitDashboard, isFocused, refreshing]);
+
   useEffect(() => {
     if (isDeleteUnitSuccessFully) {
       const to = setTimeout(() => {

package/src/commons/DateTimeRangeChange/DateTimeButton.js

@@ -1,21 +1,12 @@
 import React, { memo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { IconOutline } from '@ant-design/icons-react-native';
-import moment from 'moment';
-
-import Text from '../Text';
 import { Colors } from '../../configs';
 
-const DateTimeButton = memo(({ onPress, time, date, formatType, style }) => {
-  let format = 'DD.MM.YY HH:mm';
-  if (formatType === 'date') {
-    format = 'DD.MM.YY';
-  }
+const DateTimeButton = memo(({ onPress, style, children }) => {
   return (
     <TouchableOpacity style={[styles.dateSelect, style]} onPress={onPress}>
-      <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
-        {moment(time).format(format)}
-      </Text>
+      {children}
       <IconOutline style={styles.iconDateTime} name={'calendar'} />
     </TouchableOpacity>
   );
@@ -34,7 +25,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 8,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    width: 124,
+    width: 130,
     alignItems: 'center',
   },
   txtTime: {

package/src/commons/DateTimeRangeChange/index.js

@@ -1,23 +1,94 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useState } from 'react';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { StyleSheet, View } from 'react-native';
 
 import { Colors } from '../../configs';
 import Text from '../Text';
 import DateTimeButton from './DateTimeButton';
+import DateTimePickerModal from 'react-native-modal-datetime-picker';
+import moment from 'moment/moment';
 
 const DateTimeRangeChange = memo(
   ({
     startTime,
-    onStart,
-    onEnd,
     endTime,
     style,
-    date,
-    formatType,
+    showTime,
+    selectStart,
+    selectEnd,
     inline = true,
   }) => {
+    const format = showTime ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD';
+    const mode = showTime ? 'datetime' : 'date';
     const t = useTranslations();
+    const ensureDateStart = moment(startTime);
+    const ensureDateEnd = moment(endTime);
+
+    const [eventPicker, setEventPicker] = useState({
+      showModalEnd: false,
+      showModalStart: false,
+    });
+
+    const onStart = useCallback(() => {
+      setEventPicker((state) => ({
+        ...state,
+        showModalStart: true,
+        showModalEnd: false,
+      }));
+    }, []);
+    const onEnd = useCallback(() => {
+      setEventPicker((state) => ({
+        ...state,
+        showModalStart: false,
+        showModalEnd: true,
+      }));
+    }, []);
+    const onConfirmStart = useCallback(
+      (date) => {
+        const selectedDate = date ? moment(date) : moment().valueOf();
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+          return {
+            ...state,
+            showModalStart: false,
+            showModalEnd: true,
+          };
+        });
+        selectStart(selectedDate);
+      },
+      [onCancel, selectStart]
+    );
+
+    const onConfirmEnd = useCallback(
+      (date) => {
+        const selectedDate = date ? moment(date) : moment().valueOf();
+        setEventPicker((state) => {
+          if (typeof date === 'number') {
+            onCancel();
+            return state;
+          }
+
+          return {
+            ...state,
+            showModalEnd: false,
+          };
+        });
+        selectEnd(selectedDate);
+      },
+      [onCancel, selectEnd]
+    );
+
+    const onCancel = useCallback(() => {
+      setEventPicker((state) => ({
+        ...state,
+        showModalEnd: false,
+        showModalStart: false,
+      }));
+    }, []);
+
     return (
       <View
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
@@ -26,26 +97,49 @@ const DateTimeRangeChange = memo(
           <Text type="Label" color={Colors.Gray7}>
             {t('from')}
           </Text>
-          <DateTimeButton
-            onPress={onStart}
-            time={startTime}
-            date={date}
-            formatType={formatType}
-            style={!inline && styles.button}
-          />
+          <DateTimeButton onPress={onStart} style={!inline && styles.button}>
+            <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
+              {ensureDateStart.format(format)}
+            </Text>
+          </DateTimeButton>
         </View>
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
           <Text type="Label" color={Colors.Gray7}>
             {t('to')}
           </Text>
-          <DateTimeButton
-            onPress={onEnd}
-            time={endTime}
-            date={date}
-            formatType={formatType}
-            style={!inline && styles.button}
-          />
+          <DateTimeButton onPress={onEnd} style={!inline && styles.button}>
+            <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
+              {ensureDateEnd.format(format)}
+            </Text>
+          </DateTimeButton>
         </View>
+        <DateTimePickerModal
+          isVisible={eventPicker.showModalStart}
+          date={ensureDateStart._d}
+          mode={mode}
+          onConfirm={onConfirmStart}
+          onCancel={onCancel}
+          display="spinner"
+          title={t('select_start_time')}
+          headerTextIOS={t('pick_a_date')}
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
+          maximumDate={new Date()}
+        />
+        <DateTimePickerModal
+          isVisible={eventPicker.showModalEnd}
+          date={ensureDateEnd._d}
+          mode={mode}
+          onConfirm={onConfirmEnd}
+          onCancel={onCancel}
+          display="spinner"
+          title={t('select_end_time')}
+          headerTextIOS={t('pick_a_date')}
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
+          maximumDate={new Date()}
+          minimumDate={ensureDateStart._d}
+        />
       </View>
     );
   }

package/src/commons/Device/HistoryChart.js

@@ -11,7 +11,7 @@ import DateTimeRangeChange from '../DateTimeRangeChange';
 import HorizontalBarChart from './HorizontalBarChart';
 import DateTimePickerModal from 'react-native-modal-datetime-picker';
 import LinearChart from './LinearChart';
-import FourButtonFilterHistory from '../FourButtonFilterHistory';
+import ChartAggregationOption from '../ChartAggregationOption';
 import { formatMoney } from '../../utils/Utils';
 
 export const dateTimeType = {
@@ -186,7 +186,7 @@ const HistoryChart = memo(
               {t('history')}
             </Text>
             {configuration.type === 'horizontal_bar_chart' && (
-              <FourButtonFilterHistory
+              <ChartAggregationOption
                 groupBy={groupBy}
                 setGroupBy={setGroupBy}
               />

package/src/commons/Device/LinearChart.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 import HighchartsReactNative from '@eohjsc/highcharts';
 import moment from 'moment';
@@ -117,7 +117,7 @@ function LinearChart({ datas }) {
   );
 }
 
-export default memo(LinearChart);
+export default LinearChart;
 
 const styles = StyleSheet.create({
   container: {

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

@@ -128,7 +128,7 @@ const Anemometer = memo(
 
     const valueSize = useMemo(() => {
       if ([null, undefined, NaN].includes(value)) {
-        return;
+        return [];
       }
       if (value.toString().length < 4) {
         return [56, 16];
@@ -143,6 +143,9 @@ const Anemometer = memo(
     }, [value]);
 
     const toolTipTranslateX = useMemo(() => {
+      if (!value) {
+        return;
+      }
       if (value.toString().length < 4) {
         return -20;
       }
@@ -173,23 +176,25 @@ const Anemometer = memo(
         </View>
 
         <View style={styles.textValue}>
-          <Svg width={width} height={width} {...viewBox}>
-            <Text
-              fill={Colors.Lime6}
-              fontSize={valueSize[0]}
-              fontWeight="bold"
-              x={width / 2}
-              y={width / 2 + valueSize[1]}
-              textAnchor="middle"
-              fontFamily={Fonts.Regular}
-              onPressIn={handleShowToolTip(true)}
-              onPressOut={handleShowToolTip(false)}
-            >
-              {value.toString().length > 10
-                ? value.toString().substring(0, 10) + '...'
-                : value}
-            </Text>
-          </Svg>
+          {value && (
+            <Svg width={width} height={width} {...viewBox}>
+              <Text
+                fill={Colors.Lime6}
+                fontSize={valueSize[0]}
+                fontWeight="bold"
+                x={width / 2}
+                y={width / 2 + valueSize[1]}
+                textAnchor="middle"
+                fontFamily={Fonts.Regular}
+                onPressIn={handleShowToolTip(true)}
+                onPressOut={handleShowToolTip(false)}
+              >
+                {value.toString().length > 10
+                  ? value.toString().substring(0, 10) + '...'
+                  : value}
+              </Text>
+            </Svg>
+          )}
           {isShowToolTip && (
             <View
               style={{

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

@@ -26,7 +26,7 @@ describe('Test Anemometer', () => {
     });
     const instance = wrapper.root;
     const text = instance.findAllByType(Text);
-    expect(text.length).toBe(5);
+    expect(text.length).toBe(4);
   });
 
   it('test render value font size length < 4', async () => {

package/src/commons/MenuActionAddnew/__test__/MenuActionAddNew.test.js

@@ -17,7 +17,7 @@ describe('Test MenuActionAddNew', () => {
   let wrapper;
 
   // flat list issue
-  it.skip('onItemClick MenuActionAddNew', async () => {
+  it('onItemClick MenuActionAddNew', async () => {
     const mockFunc = jest.fn();
     await act(async () => {
       wrapper = create(wrapComponent(dataActions));

package/src/commons/MenuActionList/__test__/MenuActionList.test.js

@@ -9,7 +9,7 @@ describe('Test MenuActionList', () => {
   const listItem = [item(1)];
   let wrapper;
 
-  it.skip('onItemClick MenuActionList', async () => {
+  it('onItemClick MenuActionList', async () => {
     const mockOnItemClick = jest.fn();
     const mockHideModal = jest.fn();