@eohjsc/react-native-smart-city 0.4.0 → 0.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.4.00",
+  "version": "0.4.02",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -177,6 +177,7 @@
     "react-native-image-resizer": "^1.4.5",
     "react-native-input-credit-card": "^0.5.5",
     "react-native-iphone-x-helper": "^1.2.1",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-localize": "^1.4.1",
     "react-native-maps": "0.27.1",
@@ -199,7 +200,6 @@
     "react-native-svg": "^12.1.0",
     "react-native-toast-message": "^2.1.1",
     "react-native-udp": "^4.1.3",
-    "react-native-unimodules": "^0.11.0",
     "react-native-version-check": "^3.4.2",
     "react-native-vlc-media-player": "^1.0.41",
     "react-native-webview": "11.17.2",
@@ -207,12 +207,6 @@
     "react-native-wheel-scrollview-picker": "^1.2.2",
     "react-native-wifi-reborn": "^4.5.0",
     "react-navigation": "^2.2.0",
-    "react-redux": "^7.2.1",
-    "redux": "^4.0.5",
-    "redux-logger": "^3.0.6",
-    "redux-mock-store": "^1.5.4",
-    "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
     "string-format": "^2.0.0",
     "sync-directory": "^5.1.7",
     "timezone-mock": "^1.1.3",

package/src/commons/ActionGroup/NumberUpDownActionTemplate.js

@@ -14,6 +14,7 @@ const NumberUpDownActionTemplate = ({
   actionGroup = {},
   doAction,
   sensor = {},
+  isWidgetOrder,
 }) => {
   const { configuration = {}, title } = actionGroup;
   const {
@@ -105,7 +106,7 @@ const NumberUpDownActionTemplate = ({
   );
 
   return (
-    <View style={styles.wrap}>
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
       {!!title && (
         <Text left type="Label" style={styles.title}>
           {title}

package/src/commons/ActionGroup/NumberUpDownActionTemplateStyle.js

@@ -11,6 +11,10 @@ export default StyleSheet.create({
     borderRadius: 10,
     flex: 1,
   },
+  wrapOrderItem: {
+    flex: 1,
+    padding: 16,
+  },
   downButton: {
     marginRight: 60,
   },

package/src/commons/ActionGroup/OptionsDropdownActionTemplate.js

@@ -27,6 +27,7 @@ const OptionsDropdownActionTemplate = ({
   actionGroup = {},
   doAction,
   sensor = {},
+  isWidgetOrder,
 }) => {
   const t = useTranslations();
   const { configuration = {}, title = '' } = actionGroup;
@@ -122,7 +123,7 @@ const OptionsDropdownActionTemplate = ({
   }, [icon]);
 
   return (
-    <View style={styles.wrap}>
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
       <View style={styles.iconAndText}>
         {!checkIcon && (
           <IconComponent

package/src/commons/ActionGroup/OptionsDropdownActionTemplateStyle.js

@@ -13,6 +13,12 @@ export default StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
+  wrapOrderItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    padding: 16,
+  },
   iconAndText: {
     flex: 1,
     flexDirection: 'row',

package/src/commons/ActionGroup/SliderRangeTemplate.js

@@ -18,7 +18,7 @@ import { DEVICE_TYPE } from '../../configs/Constants';
 import _TextInput from '../Form/TextInput';
 
 const SliderRangeTemplate = memo(
-  ({ actionGroup = {}, doAction, sensor, item }) => {
+  ({ actionGroup = {}, doAction, sensor, item, isWidgetOrder }) => {
     const t = useTranslations();
     const { configuration = {} } = actionGroup;
     const [configValues] = useConfigGlobalState('configValues');
@@ -86,7 +86,9 @@ const SliderRangeTemplate = memo(
     };
 
     return (
-      <View style={styles.viewBrightness}>
+      <View
+        style={(isWidgetOrder && styles.wrapOrderItem) || styles.viewBrightness}
+      >
         <Text type="H4" style={styles.LeftTextBrightness}>
           {actionGroup?.title || item?.label || t('brightness')}
         </Text>

package/src/commons/ActionGroup/SliderRangeTemplateStyles.js

@@ -10,6 +10,7 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
     borderRadius: 10,
   },
+  wrapOrderItem: { padding: 16 },
   trackSlider: {
     height: 4,
   },

package/src/commons/ActionGroup/StatesGridActionTemplate.js

@@ -111,6 +111,7 @@ const StatesGridActionTemplate = ({
   actionGroup = {},
   doAction,
   sensor = {},
+  isWidgetOrder,
 }) => {
   const { configuration = {}, title } = actionGroup;
 
@@ -130,7 +131,7 @@ const StatesGridActionTemplate = ({
   }, [configuration, configValues]);
 
   return (
-    <View style={styles.wrap}>
+    <View style={(isWidgetOrder && styles.wrapOrderItem) || styles.wrap}>
       {!!title && (
         <Text type="H4" style={styles.textModeMargin}>
           {title}

package/src/commons/ActionGroup/StatesGridActionTemplateStyle.js

@@ -16,6 +16,10 @@ export default StyleSheet.create({
     borderBottomRightRadius: 10,
     borderBottomLeftRadius: 10,
   },
+  wrapOrderItem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
   wrapOption: {
     flex: 1,
     flexDirection: 'row',

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefault.js

@@ -16,6 +16,7 @@ const ThreeButtonDefault = memo(
     onButton1Press,
     onButton2Press,
     onButton3Press,
+    isWidgetOrder,
   }) => {
     const Icon2CT = () => {
       return icon2 === 'stop' ? (
@@ -68,7 +69,12 @@ const ThreeButtonDefault = memo(
     ]);
 
     return (
-      <View style={styles.threeButtonDefault}>
+      <View
+        style={[
+          styles.threeButtonDefault,
+          isWidgetOrder && styles.widgetOrderThreeButton,
+        ]}
+      >
         {listButton.map((item, index) => {
           return (
             <TouchableOpacity

package/src/commons/ActionGroup/ThreeButtonTemplate/components/ThreeButtonDefaultStyles.js

@@ -11,6 +11,14 @@ export default StyleSheet.create({
     borderColor: Colors.Gray4,
     borderRadius: 10,
   },
+  widgetOrderThreeButton: {
+    alignItems: 'center',
+    margin: 0,
+    marginTop: 20,
+    paddingHorizontal: 8,
+    borderWidth: 0,
+    borderRadius: 0,
+  },
   buttonAction: {
     flex: 1,
     aspectRatio: 1,

package/src/commons/ActionGroup/ThreeButtonTemplate/index.js

@@ -8,7 +8,7 @@ import IconComponent from '../../IconComponent';
 import ThreeButtonCircle from './components/ThreeButtonCircle';
 import ThreeButtonDefault from './components/ThreeButtonDefault';
 
-const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
+const ThreeButtonTemplate = memo(({ actionGroup, doAction, isWidgetOrder }) => {
   const { configuration } = actionGroup;
   const {
     text1,
@@ -93,6 +93,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
       onButton1Press: onButton1Press,
       onButton2Press: onButton2Press,
       onButton3Press: onButton3Press,
+      isWidgetOrder: isWidgetOrder,
     };
     switch (layout) {
       case 'circle': {
@@ -115,6 +116,7 @@ const ThreeButtonTemplate = memo(({ actionGroup, doAction }) => {
     text1,
     text2,
     text3,
+    isWidgetOrder,
   ]);
 
   return (

package/src/commons/ActionGroup/ThreeButtonTemplate/styles.js

@@ -5,6 +5,9 @@ export default StyleSheet.create({
     flex: 1,
     marginBottom: 16,
   },
+  wrapOrderItem: {
+    flex: 1,
+  },
   lockSwitch: {
     flexDirection: 'row',
     justifyContent: 'space-between',

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

@@ -26,11 +26,6 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{ 5: { value: 2 } }, null],
 }));
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 jest.mock('@react-navigation/native', () => {
   return {
     ...jest.requireActual('@react-navigation/native'),

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

@@ -16,11 +16,6 @@ const wrapComponent = (actionGroup, mockDoAction, sensor) => (
   </SCProvider>
 );
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useSelector: jest.fn(),
-}));
-
 describe('Test OneBigButtonTemplate', () => {
   const action_data = {
     color: '#00979D',

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

@@ -10,33 +10,10 @@ 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 {
@@ -49,19 +26,17 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: () => mockedDispatch,
-}));
-
-const wrapComponent = () => (
-  <SCProvider initState={mockSCStore({})}>
+const wrapComponent = (data = {}) => (
+  <SCProvider initState={mockSCStore(data)}>
     <MyUnit refreshing={true} />
   </SCProvider>
 );
 
 describe('Test MyUnit', () => {
   let tree;
+  let storeData = {
+    app: { isDeleteUnitSuccessFully: true, isNeedUpdateCache: true },
+  };
   let data = [
     {
       id: 1,
@@ -96,6 +71,7 @@ describe('Test MyUnit', () => {
 
   beforeEach(() => {
     mock.resetHistory();
+    mockedNavigate.mockClear();
   });
 
   const getElement = (instance) => {
@@ -113,7 +89,7 @@ describe('Test MyUnit', () => {
 
   it('MyUnit no Unit', async () => {
     await act(async () => {
-      tree = await renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent(storeData));
     });
     const instance = tree.root;
     const { textNoUnit } = getElement(instance);
@@ -123,7 +99,7 @@ describe('Test MyUnit', () => {
   it('MyUnit with unit', async () => {
     mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, data);
     await act(async () => {
-      tree = await renderer.create(wrapComponent());
+      tree = await renderer.create(wrapComponent(storeData));
     });
     const instance = tree.root;
     const devices = instance.findAllByType(MyUnitDevice);
@@ -139,19 +115,25 @@ describe('Test MyUnit', () => {
       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);
+  it('Test isNeedUpdateCache = false', async () => {
+    mock.onGet(API.UNIT.MY_UNITS()).replyOnce(200, [data[1]]);
     await act(async () => {
-      tree = await renderer.create(wrapComponent());
+      tree = await renderer.create(
+        wrapComponent({ app: { isNeedUpdateCache: false } })
+      );
+    });
+    const instance = tree.root;
+    const button = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-0`,
+    });
+    await act(async () => {
+      await button.props.onPress(data[1]);
+    });
+    expect(mockedNavigate).toBeCalledWith('UnitStack', {
+      params: { unitId: 2 },
+      screen: 'UnitDetail',
     });
-    jest.runAllTimers();
-    expect(mockSetAction).toBeCalledWith(Action.RESET_DELETE_UNIT_ACTION);
   });
 });

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

@@ -34,6 +34,7 @@ import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
 import { STORAGE_KEY } from '../../../utils/Storage';
 import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
 import FImage from '../../FImage';
+import { usePrevious } from '../../../hooks';
 
 let screenWidth = Dimensions.get('window').width;
 
@@ -45,6 +46,7 @@ const MyUnit = ({ refreshing }) => {
   const isFocused = useIsFocused();
   const navigation = useNavigation();
   const [myUnits, setMyUnits] = useState([]);
+  const previousMyUnits = usePrevious(myUnits);
   const [slideIndex, setSlideIndex] = useState(0);
   const { setAction } = useContext(SCContext);
   const isDeleteUnitSuccessFully = useSCContextSelector(
@@ -186,14 +188,14 @@ const MyUnit = ({ refreshing }) => {
   }, [fetchMyUnitDashboard, isFocused, refreshing]);
 
   useEffect(() => {
-    if (isDeleteUnitSuccessFully) {
+    if (isDeleteUnitSuccessFully || previousMyUnits?.length > myUnits?.length) {
       const to = setTimeout(() => {
         carouselRef?.current?.snapToItem();
         setAction(Action.RESET_DELETE_UNIT_ACTION);
       }, 60);
       return () => clearTimeout(to);
     }
-  }, [isDeleteUnitSuccessFully, setAction]);
+  }, [isDeleteUnitSuccessFully, setAction, previousMyUnits, myUnits]);
 
   return (
     <>

package/src/commons/DateTimeRangeChange/index.js

@@ -18,6 +18,7 @@ const DateTimeRangeChange = memo(
     selectStart,
     selectEnd,
     inline = true,
+    isWidgetOrder,
   }) => {
     const format = showTime ? DATE_TIME_FORMAT.DMY_HM : DATE_TIME_FORMAT.DMY;
     const mode = showTime ? 'datetime' : 'date';
@@ -77,20 +78,40 @@ const DateTimeRangeChange = memo(
         style={[styles.dateTimeView, !inline && styles.spaceBetween, style]}
       >
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text type="Label" color={Colors.Gray7}>
+          <Text
+            type="Label"
+            color={Colors.Gray7}
+            style={isWidgetOrder && styles.marginHorizontalEight}
+          >
             {t('from')}
           </Text>
-          <DateTimeButton onPress={onStart} style={!inline && styles.button}>
+          <DateTimeButton
+            onPress={onStart}
+            style={
+              (isWidgetOrder && styles.widgetOrderButton) ||
+              (!inline && styles.button)
+            }
+          >
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
               {startDate.format(format)}
             </Text>
           </DateTimeButton>
         </View>
         <View style={[styles.wrap, !inline && styles.buttonWrap]}>
-          <Text type="Label" color={Colors.Gray7}>
+          <Text
+            type="Label"
+            color={Colors.Gray7}
+            style={isWidgetOrder && styles.marginHorizontalEight}
+          >
             {t('to')}
           </Text>
-          <DateTimeButton onPress={onEnd} style={!inline && styles.button}>
+          <DateTimeButton
+            onPress={onEnd}
+            style={
+              (isWidgetOrder && styles.widgetOrderButton) ||
+              (!inline && styles.button)
+            }
+          >
             <Text type={'Label'} color={Colors.Gray8} style={styles.txtTime}>
               {endDate.format(format)}
             </Text>
@@ -152,4 +173,11 @@ const styles = StyleSheet.create({
     marginHorizontal: 0,
     width: 150,
   },
+  widgetOrderButton: {
+    marginHorizontal: 0,
+    width: 110,
+  },
+  marginHorizontalEight: {
+    marginHorizontal: 8,
+  },
 });

package/src/commons/Device/Emergency/EmergencyDetail.js

@@ -16,7 +16,7 @@ const { standardizeHeight } = standardizeCameraScreenSize(
 
 const EmergencyDetail = memo(({ item }) => {
   const t = useTranslations();
-  const { uri, preview_uri } = item?.configuration?.camera;
+  const { uri, preview_uri } = item?.configuration?.camera || {};
   const groupId = item?.configuration?.device?.group?.id;
   const isFocused = useIsFocused();
   const { listContacts, getListContacts } = useEmeragencyContacts();

package/src/commons/Device/HistoryChart.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useState, useMemo } from 'react';
+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';
@@ -31,95 +31,57 @@ const HistoryChart = memo(
     configuration,
   }) => {
     const t = useTranslations();
-    const [chartOptions, setChartOptions] = useState({
-      index: -1,
-      showAll: true,
-    });
+    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 [price, setPrice] = useState(null);
-
-    const selectStart = useCallback(
-      (date) => {
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            return state;
-          }
-          if (moment(date) < state.endTime) {
-            setStartDate(moment(date));
-            return {
-              ...state,
-              showModalStart: false,
-              startTime: date ? moment(date) : moment().valueOf(),
-            };
-          } else {
-            setStartDate(moment(date));
-            setEndDate(moment(date).add(1, 'day'));
-            return {
-              ...state,
-              showModalStart: false,
-              startTime: date ? moment(date) : moment().valueOf(),
-              endTime: date ? moment(date).add(1, 'day') : moment().valueOf(),
-            };
-          }
-        });
-        onCancel();
-      },
-      [onCancel, setStartDate, setEndDate]
-    );
-
-    const selectEnd = useCallback(
-      (date) => {
-        setEventPicker((state) => {
-          if (typeof date === 'number') {
-            return state;
-          }
-          if (moment(date).add(1, 'day') > state.startTime) {
-            setEndDate(moment(date));
-            return {
-              ...state,
-              showModalEnd: false,
-              endTime: date ? moment(date) : moment().valueOf(),
-            };
-          } else {
-            setStartDate(moment(date).add(-1, 'day'));
-            setEndDate(moment(date));
-            return {
-              ...state,
-              showModalEnd: false,
-              startTime: date
-                ? moment(date).add(-1, 'day')
-                : moment().valueOf(),
-              endTime: date ? moment(date) : moment().valueOf(),
-            };
-          }
-        });
-        onCancel();
-      },
-      [onCancel, setStartDate, setEndDate]
-    );
 
-    const onCancel = useCallback(() => {
-      setEventPicker((state) => ({
-        ...state,
-        showModalEnd: false,
-        showModalStart: false,
-      }));
-    }, []);
-    const onShowOneChart = useCallback(
-      (index) => {
-        if (index === chartOptions.index) {
-          setChartOptions({ index, showAll: !chartOptions.showAll });
+    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 {
-          setChartOptions({ index, showAll: false });
+          return {
+            ...state,
+            showModalStart: false,
+            startTime: date ? moment(date) : moment().valueOf(),
+            endTime: date ? moment(date).add(1, 'day') : moment().valueOf(),
+          };
         }
-      },
-      [chartOptions]
-    );
+      });
+    }, []);
+
+    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) => ({
@@ -154,8 +116,15 @@ const HistoryChart = memo(
       if (configuration.type === 'horizontal_bar_chart') {
         return <HorizontalBarChart datas={datas} config={chartConfig} />;
       }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configuration, datas, chartOptions, onShowOneChart]);
+    }, [chartConfig, configuration.type, datas]);
+
+    useEffect(() => {
+      setStartDate(eventPicker.startTime);
+    }, [eventPicker.startTime, setStartDate]);
+
+    useEffect(() => {
+      setEndDate(eventPicker.endTime);
+    }, [eventPicker.endTime, setEndDate]);
 
     return (
       <View style={style}>

package/src/commons/Device/PMSensor/PMSensorIndicator.js

@@ -5,7 +5,7 @@ import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
 import { keyExtractor, roundNumber } from '../../../utils/Utils';
 
-const PMSensorIndicator = memo(({ data = [], style }) => {
+const PMSensorIndicator = memo(({ data = [], style, isWidgetOrder }) => {
   const renderItem = useCallback(
     ({ item }) => {
       const getValue = ['', null, undefined, NaN].includes(item?.value)
@@ -28,7 +28,7 @@ const PMSensorIndicator = memo(({ data = [], style }) => {
   const isScrollMode = data.length > 3;
 
   return (
-    <View style={styles.wrap}>
+    <View style={[styles.wrap, isWidgetOrder && styles.marginBottomZero]}>
       <FlatList
         bounces={false}
         numColumns={1}
@@ -36,6 +36,7 @@ const PMSensorIndicator = memo(({ data = [], style }) => {
         contentContainerStyle={[
           styles.standard,
           !isScrollMode && styles.centerItem,
+          isWidgetOrder && styles.marginBottomZero,
         ]}
         data={data}
         keyExtractor={keyExtractor}