@eohjsc/react-native-smart-city 0.3.85 → 0.3.87

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.3.85",
+  "version": "0.3.87",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -108,6 +108,7 @@
     "@formatjs/intl-pluralrules": "^3.4.7",
     "@invertase/react-native-apple-authentication": "^1.1.2",
     "@messageformat/core": "^3.0.0",
+    "@miblanchard/react-native-slider": "^2.2.0",
     "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/cameraroll": "^4.0.0",
@@ -179,6 +180,7 @@
     "react-native-maps-directions": "^1.8.0",
     "react-native-modal": "^11.5.6",
     "react-native-modal-datetime-picker": "^8.9.3",
+    "react-native-new-snap-carousel": "^3.9.3",
     "react-native-onesignal": "^4.3.1",
     "react-native-pager-view": "^5.4.1",
     "react-native-parallax-scroll-view": "^0.21.3",
@@ -190,7 +192,6 @@
     "react-native-responsive-fontsize": "^0.5.1",
     "react-native-safe-area-context": "^3.1.1",
     "react-native-screens": "^2.9.0",
-    "react-native-snap-carousel": "4.0.0-beta.5",
     "react-native-super-grid": "^4.0.3",
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",

package/src/commons/ActionGroup/OnOffSmartLock/AutoLock/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useCallback, useState } from 'react';
 import { View } from 'react-native';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import Text from '../../../Text';
 import { HeaderCustom } from '../../../Header';
 import ButtonWrapper from './ButtonWrapper';

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -5,7 +5,7 @@ import styles from './SliderRangeTemplateStyles';
 import Text from '../Text';
 import { Colors } from '../../configs';
 import SvgBrightness from '../../../assets/images/brightness.svg';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import { useConfigGlobalState } from '../../iot/states';
 import { DEVICE_TYPE } from '../../configs/Constants';
 
@@ -17,14 +17,8 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   const { config = undefined } = configuration;
 
   const getPercent = useCallback(() => {
-    if (config) {
-      const configValue = configValues[config] || {};
-      const { value = 0 } = configValue;
-      if (value) {
-        return value;
-      }
-    }
-    return 0;
+    const { value } = configValues[config] || { value: 0 };
+    return value;
   }, [config, configValues]);
 
   const [valueBrightness, setValueBrightness] = useState(getPercent());
@@ -32,9 +26,10 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
 
   const onChangeBrightness = useCallback(
     async (value) => {
+      const value_brness = value[0];
       await doAction(
         configuration?.action_data,
-        JSON.stringify({ value_brness: value, value: value })
+        JSON.stringify({ value_brness: value_brness, value: value_brness })
       );
     },
     [configuration?.action_data, doAction]
@@ -45,8 +40,7 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
   }, [valueBrightness]);
 
   useEffect(() => {
-    const configValue = configValues[config] || {};
-    const { value = 0 } = configValue;
+    const { value } = configValues[config] || { value: 0 };
     if (value && isFirstTime) {
       setValueBrightness(value);
       setIsFirstTime(false);
@@ -71,7 +65,7 @@ const SliderRangeTemplate = memo(({ actionGroup = {}, doAction, sensor }) => {
       </View>
       <View style={styles.RightBrightness}>
         <Slider
-          style={styles.slider}
+          containerStyle={styles.slider}
           value={valueBrightness}
           onSlidingComplete={onChangeBrightness}
           onValueChange={setValueBrightness}

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -15,7 +15,6 @@ export default StyleSheet.create({
   },
   slider: {
     width: 131,
-    transform: [{ scaleY: 2 }],
   },
   trackSlider: {
     height: 8,

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

@@ -5,7 +5,7 @@ import SliderRangeTemplate from '../SliderRangeTemplate';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import { useConfigGlobalState } from '../../../iot/states';
-import SliderRange from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 
 jest.mock('../../../iot/Monitor');
 const mockDoAction = jest.fn();
@@ -55,10 +55,10 @@ describe('Test SliderRangeTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findAllByType(SliderRange);
+    const silderRange = instance.findAllByType(Slider);
     expect(silderRange).toHaveLength(1);
     await act(async () => {
-      await silderRange[0].props.onSlidingComplete(50);
+      await silderRange[0].props.onSlidingComplete([50]);
     });
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
@@ -80,7 +80,7 @@ describe('Test SliderRangeTemplate', () => {
       wrapper = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
     const instance = wrapper.root;
-    const silderRange = instance.findByType(SliderRange);
+    const silderRange = instance.findByType(Slider);
     expect(silderRange.props.value).toBe(50);
   });
 });

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/ActionGroup/__test__/index.test.js

@@ -14,7 +14,7 @@ import Text from '../../Text';
 import { AccessibilityLabel } from '../../../configs/Constants';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
-import Slider from '@react-native-community/slider';
+import { Slider } from '@miblanchard/react-native-slider';
 import { WheelColorPicker } from '../ColorPickerTemplate';
 import RadioCircle from '../../RadioCircle';
 

package/src/commons/Automate/__test__/ItemAutomate.test.js

@@ -1,24 +1,46 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
+import { TouchableOpacity } from 'react-native';
+
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import Text from '../../Text';
 import ItemAutomate from '../ItemAutomate';
 
-const wrapComponent = (type = 'one_tap') => (
+const wrapComponent = (rest) => (
   <SCProvider initState={mockSCStore({})}>
-    <ItemAutomate type={type} />
+    <ItemAutomate {...rest} />
   </SCProvider>
 );
 
 describe('Test ItemAutomate', () => {
   let tree;
+  let defaultProps = {
+    type: 'one_tap',
+  };
   it('Test render', async () => {
     await act(async () => {
-      tree = await create(wrapComponent());
+      tree = await create(wrapComponent(defaultProps));
     });
     const instance = tree.root;
     const texts = instance.findAllByType(Text);
     expect(texts[0].props.children).toEqual('Launch One-Tap');
   });
+
+  it('Test render TouchableOpacity', async () => {
+    const mockOnPress = jest.fn();
+    defaultProps = {
+      type: 'one_tap',
+      onPress: mockOnPress,
+    };
+    await act(async () => {
+      tree = await create(wrapComponent(defaultProps));
+    });
+    const instance = tree.root;
+    const touchableOpacities = instance.findAllByType(TouchableOpacity);
+    await act(async () => {
+      touchableOpacities[0].props.onPress();
+    });
+    expect(mockOnPress).toBeCalledTimes(1);
+  });
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
+
 import MyUnit from '..';
 import MyUnitDevice from '../../../../screens/Unit/components/MyUnitDevice';
 import { AccessibilityLabel } from '../../../../configs/Constants';
@@ -8,11 +9,34 @@ import { SCProvider } from '../../../../context';
 import { mockSCStore } from '../../../../context/mockStore';
 import api from '../../../../utils/Apis/axios';
 import { API } from '../../../../configs';
+import Routes from '../../../../utils/Route';
+import { Action } from '../../../../context/actionType';
 
 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', () => {
+  return {
+    ...jest.requireActual('react'),
+    useContext: () => ({
+      stateData: mockSCStore({
+        app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
+      }),
+      setAction: mockSetAction,
+    }),
+  };
+});
 
 jest.mock('@react-navigation/native', () => {
   return {
@@ -104,5 +128,30 @@ describe('Test MyUnit', () => {
     const instance = tree.root;
     const devices = instance.findAllByType(MyUnitDevice);
     expect(devices).toHaveLength(2);
+
+    const button = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
+    });
+    await act(async () => {
+      await button.props.onPress(data[0]);
+    });
+    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+      params: { unitId: 1 },
+      screen: Routes.UnitDetail,
+    });
+    expect(mockSetAction).toBeCalledWith(
+      Action.IS_CHECK_CLEAR_CACHE_UNITS,
+      false
+    );
+  });
+
+  it('Test isDeleteUnitSuccessFully', async () => {
+    jest.useFakeTimers();
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    jest.runAllTimers();
+    expect(mockSetAction).toBeCalledWith(Action.RESET_DELETE_UNIT_ACTION);
   });
 });

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

@@ -5,8 +5,9 @@ import React, {
   useState,
   useContext,
   useMemo,
+  useRef,
 } from 'react';
-import { View, Image, TouchableOpacity, Dimensions } from 'react-native';
+import { View, TouchableOpacity, Dimensions } from 'react-native';
 import {
   useNavigation,
   useIsFocused,
@@ -14,35 +15,44 @@ import {
 } from '@react-navigation/native';
 import NetInfo from '@react-native-community/netinfo';
 import { BleManager } from 'react-native-ble-plx';
-import Carousel from 'react-native-snap-carousel';
-
 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';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import { useUnitConnectRemoteDevices } from '../../../screens/Unit/hook/useUnitConnectRemoteDevices';
 import { useWatchConfigs, useBluetoothConnection } from '../../../hooks/IoT';
-import { SCContext } from '../../../context';
+import { SCContext, useSCContextSelector } from '../../../context';
 import { Action } from '../../../context/actionType';
+
+import Carousel from 'react-native-new-snap-carousel';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 import { STORAGE_KEY } from '../../../utils/Storage';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
+import FImage from '../../FImage';
 
 let screenWidth = Dimensions.get('window').width;
 
 const bleManager = new BleManager();
 
 const MyUnit = ({ refreshing }) => {
+  const carouselRef = useRef();
   const t = useTranslations();
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const [myUnits, setMyUnits] = useState([]);
   const [slideIndex, setSlideIndex] = useState(0);
   const { setAction } = useContext(SCContext);
+  const isDeleteUnitSuccessFully = useSCContextSelector(
+    (state) => state.app.isDeleteUnitSuccessFully
+  );
+  const isNeedUpdateCache = useSCContextSelector(
+    (state) => state.app.isNeedUpdateCache
+  );
 
   const {
     permissionsRequested: bluetoothPermRequested,
@@ -54,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(() => {
@@ -136,9 +147,13 @@ const MyUnit = ({ refreshing }) => {
             accessibilityLabel={`${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${index}`}
           >
             <View style={styles.overlay} />
-            <Image
+            <FImage
               style={styles.bgMyUnit}
-              source={{ uri: item.background }}
+              source={
+                item?.background
+                  ? { uri: item.background }
+                  : Images.unitDefaultBackground
+              }
               defaultSource={Images.BgUnit}
               resizeMode="cover"
             />
@@ -158,6 +173,22 @@ 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(() => {
+        carouselRef?.current?.snapToItem();
+        setAction(Action.RESET_DELETE_UNIT_ACTION);
+      }, 60);
+      return () => clearTimeout(to);
+    }
+  }, [isDeleteUnitSuccessFully, setAction]);
+
   return (
     <>
       <Section style={styles.boxTxtMyUnit}>
@@ -167,6 +198,7 @@ const MyUnit = ({ refreshing }) => {
         <View style={styles.container}>
           {myUnits.length ? (
             <Carousel
+              ref={carouselRef}
               layout={'default'}
               data={myUnits}
               sliderWidth={screenWidth}