@eohjsc/react-native-smart-city 0.2.95 → 0.2.98

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

@@ -1,11 +1,25 @@
+/* eslint-disable promise/prefer-await-to-callbacks */
 import { TESTID } from '../../../configs/Constants';
 import { watchMultiConfigs } from '../../../iot/Monitor';
 import React from 'react';
 import { View } from 'react-native';
+import { useSelector } from 'react-redux';
 import { act, create } from 'react-test-renderer';
 import OnOffTemplate from '../OnOffTemplate';
 import OnOffButtonTemplate from '../OnOffTemplate/OnOffButtonTemplate';
 import OnOffSimpleTemplate from '../OnOffTemplate/OnOffSimpleTemplate';
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+
+const wrapComponent = (actionGroup, mockDoAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OnOffTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
 
 jest.mock('../../../iot/Monitor');
 
@@ -13,9 +27,15 @@ jest.mock('../../../iot/states', () => ({
   useConfigGlobalState: () => [{ 5: 2 }, null],
 }));
 
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
+
 describe('Test OnOffTemplate', () => {
-  let wrapper;
   let actionGroup;
+  let tree;
+  let sensor;
 
   const action_data = {
     color: '#00979D',
@@ -62,20 +82,23 @@ describe('Test OnOffTemplate', () => {
       },
       title: 'Turn on / off',
     };
+
+    sensor = { name: 'Sensor' };
+
+    const localState = {
+      isOnSwich: false,
+    };
+    useSelector.mockImplementation((cb) => {
+      return cb(localState);
+    });
   });
 
   test('render with template OnOffSimpleActionTemplate', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
   });
@@ -84,15 +107,9 @@ describe('Test OnOffTemplate', () => {
     actionGroup.template = 'on_off_button_action_template';
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findAllByType(OnOffButtonTemplate);
     expect(template).toHaveLength(0);
   });
@@ -101,15 +118,9 @@ describe('Test OnOffTemplate', () => {
     actionGroup.template = 'wrong_template';
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{}}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
 
     const templateOnOffButton = instance.findAll(
       (el) =>
@@ -125,32 +136,20 @@ describe('Test OnOffTemplate', () => {
   test('render with template OnOffSimpleActionTemplate with is_managed_by_backend', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
-    expect(watchMultiConfigs).toBeCalledTimes(1);
+    expect(watchMultiConfigs).toBeCalledTimes(0);
   });
 
   test('template OnOffSimpleActionTemplate doAction with is_on_value, match configValue', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ name: 'Sensor name' }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findByType(OnOffSimpleTemplate);
     expect(template.props.isOn).toEqual(true);
 
@@ -160,7 +159,7 @@ describe('Test OnOffTemplate', () => {
     expect(mockDoAction).toHaveBeenCalledWith(
       action_off_data,
       null,
-      'Sensor name turn on / off off'
+      'Sensor turn on / off off'
     );
     expect(watchMultiConfigs).toBeCalledTimes(0);
   });
@@ -169,15 +168,9 @@ describe('Test OnOffTemplate', () => {
     actionGroup.configuration.is_on_value = [1];
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ name: 'Sensor name' }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findByType(OnOffSimpleTemplate);
     expect(template.props.isOn).toEqual(false);
 
@@ -187,22 +180,16 @@ describe('Test OnOffTemplate', () => {
     expect(mockDoAction).toHaveBeenCalledWith(
       action_on_data,
       null,
-      'Sensor name turn on / off on'
+      'Sensor turn on / off on'
     );
   });
 
   test('template OnOffSimpleActionTemplate doAction with is_on_value and is_managed_by_backend', async () => {
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ name: 'Sensor name', is_managed_by_backend: true }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, sensor));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findByType(OnOffSimpleTemplate);
     expect(template.props.isOn).toEqual(true);
 
@@ -212,9 +199,9 @@ describe('Test OnOffTemplate', () => {
     expect(mockDoAction).toHaveBeenCalledWith(
       action_off_data,
       null,
-      'Sensor name turn on / off off'
+      'Sensor turn on / off off'
     );
-    expect(watchMultiConfigs).toBeCalledTimes(2);
+    expect(watchMultiConfigs).toBeCalledTimes(0);
   });
 
   test('render with template OnOffSimpleActionTemplate with just action_data', async () => {
@@ -230,15 +217,9 @@ describe('Test OnOffTemplate', () => {
     };
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
     expect(template[0].props.disabled).toBeFalsy();
@@ -261,15 +242,9 @@ describe('Test OnOffTemplate', () => {
     };
     const mockDoAction = jest.fn();
     await act(async () => {
-      wrapper = await create(
-        <OnOffTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={{ is_managed_by_backend: true }}
-        />
-      );
+      tree = await create(wrapComponent(actionGroup, mockDoAction, {}));
     });
-    const instance = wrapper.root;
+    const instance = tree.root;
     const template = instance.findAllByType(OnOffSimpleTemplate);
     expect(template).toHaveLength(1);
     expect(template[0].props.disabled).toBeTruthy();

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

@@ -1,8 +1,27 @@
+/* eslint-disable promise/prefer-await-to-callbacks */
 import React from 'react';
 import { create, act } from 'react-test-renderer';
 import { TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
 
 import OneBigButtonTemplate from '../OneBigButtonTemplate';
+import { mockSCStore } from '../../../context/mockStore';
+import { SCProvider } from '../../../context';
+
+const wrapComponent = (actionGroup, mockDoAction, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <OneBigButtonTemplate
+      actionGroup={actionGroup}
+      doAction={mockDoAction}
+      sensor={sensor}
+    />
+  </SCProvider>
+);
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(),
+}));
 
 describe('Test OneBigButtonTemplate', () => {
   const action_data = {
@@ -23,24 +42,25 @@ describe('Test OneBigButtonTemplate', () => {
       text: 'UP',
     },
   };
-  const sensor = {
-    name: 'Sensor name',
-  };
-  let wrapper;
+  let tree;
+  let sensor;
 
-  test('render OneBigButtonTemplate', () => {
-    const mockDoAction = jest.fn();
-    act(() => {
-      wrapper = create(
-        <OneBigButtonTemplate
-          actionGroup={actionGroup}
-          doAction={mockDoAction}
-          sensor={sensor}
-        />
-      );
+  beforeEach(() => {
+    const localState = {
+      isOnSwich: false,
+    };
+    useSelector.mockImplementation((cb) => {
+      return cb(localState);
     });
+    sensor = { name: 'Sensor' };
+  });
 
-    const instance = wrapper.root;
+  test('render OneBigButtonTemplate', async () => {
+    const mockDoAction = jest.fn();
+    await act(async () => {
+      tree = await create(wrapComponent(actionGroup, mockDoAction, sensor));
+    });
+    const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);
     expect(buttons.length).toEqual(1);
 
@@ -49,10 +69,6 @@ describe('Test OneBigButtonTemplate', () => {
     });
 
     expect(mockDoAction).toHaveBeenCalledTimes(1);
-    expect(mockDoAction).toHaveBeenCalledWith(
-      action_data,
-      null,
-      'Sensor name up'
-    );
+    expect(mockDoAction).toHaveBeenCalledWith(action_data, null, 'Sensor up');
   });
 });

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

@@ -152,7 +152,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      1,
+      JSON.stringify({ level: 1, key_code: 1 }),
       'Sensor name fan speed 1'
     );
     is_managed_by_backend
@@ -221,7 +221,7 @@ describe('Test OptionsDropdownActionTemplate', () => {
 
     expect(mockDoAction).toHaveBeenCalledWith(
       action_data,
-      'level-1',
+      JSON.stringify({ level: 'level-1', key_code: 1 }),
       'Sensor name fan speed level-1'
     ); // doAction with text instead of int
 

package/src/commons/Auth/AccountList.js

@@ -5,7 +5,7 @@ import AccountItem from './AccountItem';
 
 const AccountList = ({ accounts }) => {
   return (
-    <ScrollView>
+    <ScrollView scrollIndicatorInsets={{ right: 1 }}>
       {accounts.map((account) => (
         <AccountItem key={account.id || account.name} account={account} />
       ))}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import Connecting from '../index';
+import Text from '../../Text';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <Connecting route={route} />
+  </SCProvider>
+);
+describe('Test Connecting', () => {
+  let tree;
+  test('create Connecting', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const text = instance.findAllByType(Text);
+    expect(text).toHaveLength(4);
+  });
+});

package/src/commons/Connecting/index.js

@@ -0,0 +1,67 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { View } from 'react-native';
+import * as Progress from 'react-native-progress';
+import Text from '../Text';
+import { Colors, Constants } from '../../configs';
+import styles from './styles';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { HeaderCustom } from '../Header';
+
+const Connecting = ({ isLoading, isConnect, isPercentConnect }) => {
+  const t = useTranslations();
+  const [percent, setPercent] = useState(0);
+
+  useEffect(() => {
+    processLoading();
+  }, [processLoading]);
+
+  const processLoading = useCallback(() => {
+    let interval;
+    if (isLoading) {
+      interval = setInterval(() => {
+        setPercent((prev) => {
+          if (prev === 1) {
+            clearInterval(interval);
+            return 1;
+          } else if (prev === 0.8 && isConnect) {
+            clearInterval(interval);
+            return 0.8;
+          } else {
+            return prev + 0.2;
+          }
+        });
+      }, 180);
+    } else {
+      clearInterval(interval);
+    }
+  }, [isConnect, isLoading]);
+  return (
+    <View style={styles.screen}>
+      <HeaderCustom title={t('connect_device')} isShowSeparator />
+      <View style={styles.body}>
+        <View style={styles.connecting}>
+          <Text type="H4" bold>
+            {t('connecting')}
+          </Text>
+        </View>
+        <View style={styles.percentLoad}>
+          <Progress.Bar
+            progress={isPercentConnect || percent}
+            animated={true}
+            color={Colors.Primary}
+            indeterminateAnimationDuration={1000}
+            height={7}
+            width={Constants.width - 80}
+            useNativeDriver={true}
+          />
+          <Text style={styles.textPercentLoad}>{`${parseInt(
+            (isPercentConnect || percent) * 100,
+            10
+          )}%`}</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Connecting;

package/src/commons/Connecting/styles.js

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { Constants } from '../../configs';
+
+export default StyleSheet.create({
+  screen: {
+    flex: 1,
+    width: '100%',
+  },
+  body: {
+    width: '100%',
+    height: Constants.height - 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+});

package/src/commons/ConnectingProcess/index.js

@@ -3,14 +3,14 @@ import { SafeAreaView, View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import Routes from '../../utils/Route';
 import { useNavigation } from '@react-navigation/native';
-import * as Progress from 'react-native-progress';
 import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
 
 import Text from '../Text';
 import { axiosPost } from '../../utils/Apis/axios';
-import { API, Colors, Constants } from '../../configs';
+import { API, Colors } from '../../configs';
 import styles from './styles';
 import DeviceItem from './DeviceItem/DeviceItem';
+import Connecting from '../Connecting';
 import { useSCContextSelector } from '../../context';
 
 const ConnectingProcess = ({ route }) => {
@@ -29,31 +29,9 @@ const ConnectingProcess = ({ route }) => {
     wifi_pass,
     chip_id,
   } = route.params;
-  const [percent, setPercent] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [sensor, setSensor] = useState(null);
   const user = useSCContextSelector((state) => state?.auth?.account?.user);
-  useEffect(() => {
-    processLoading();
-  }, [processLoading]);
-
-  const processLoading = useCallback(() => {
-    let interval;
-    if (isLoading) {
-      interval = setInterval(() => {
-        setPercent((prev) => {
-          if (prev === 1) {
-            clearInterval(interval);
-            return 1;
-          } else {
-            return prev + 0.2;
-          }
-        });
-      }, 180);
-    } else {
-      clearInterval(interval);
-    }
-  }, [isLoading]);
 
   const ConnectingDevice = useCallback(async () => {
     setIsLoading(true);
@@ -120,35 +98,6 @@ const ConnectingProcess = ({ route }) => {
     chip_id,
   ]);
 
-  const Connecting = useCallback(() => {
-    return (
-      <>
-        <View style={styles.progressBar}>
-          <View style={styles.connecting}>
-            <Text type="H4" bold>
-              {t('connecting')}
-            </Text>
-          </View>
-        </View>
-        <View style={styles.percentLoad}>
-          <Progress.Bar
-            progress={percent}
-            animated={true}
-            color={Colors.Primary}
-            indeterminateAnimationDuration={1000}
-            height={7}
-            width={Constants.width - 80}
-            useNativeDriver={true}
-          />
-          <Text style={styles.textPercentLoad}>{`${parseInt(
-            percent * 100,
-            10
-          )}%`}</Text>
-        </View>
-      </>
-    );
-  }, [percent, t]);
-
   const ConnectingSuccess = useCallback(() => {
     return (
       <View style={styles.ConnectingSuccess}>
@@ -188,7 +137,7 @@ const ConnectingProcess = ({ route }) => {
         <Text bold style={styles.connectingText}>
           {t('connect_device')}
         </Text>
-        {!!isLoading && <Connecting />}
+        {!!isLoading && <Connecting isLoading={isLoading} />}
         {!isLoading && <ConnectingSuccess />}
       </View>
       {!isLoading && (

package/src/commons/Device/HistoryChart.js

@@ -234,19 +234,23 @@ const HistoryChart = memo(
         )}
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime.toDate()}
+          date={eventPicker.startTime.valueOf()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
           display="spinner"
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={eventPicker.endTime.toDate()}
+          date={eventPicker.endTime.valueOf()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}
           display="spinner"
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
         />
       </View>
     );

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

@@ -1,4 +1,5 @@
 import React, { memo, useCallback } from 'react';
+import { View } from 'react-native';
 import { FlatList } from 'react-native';
 import QualityIndicatorItem from '../WaterQualitySensor/QualityIndicatorsItem';
 import styles from './PMSensorIndicatorStyles';
@@ -26,18 +27,21 @@ const PMSensorIndicatior = memo(({ data, style }) => {
   const isScrollMode = data.length > 3;
 
   return (
-    <FlatList
-      bounces={false}
-      numColumns={1}
-      horizontal={true}
-      contentContainerStyle={[
-        styles.standard,
-        !isScrollMode && styles.centerItem,
-      ]}
-      data={data}
-      keyExtractor={keyExtractor}
-      renderItem={renderItem}
-    />
+    <View style={styles.wrap}>
+      <FlatList
+        bounces={false}
+        numColumns={1}
+        horizontal={true}
+        contentContainerStyle={[
+          styles.standard,
+          !isScrollMode && styles.centerItem,
+        ]}
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        scrollIndicatorInsets={{ right: 1 }}
+      />
+    </View>
   );
 });
 

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

@@ -10,4 +10,7 @@ export default StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
   },
+  wrap: {
+    marginVertical: 16,
+  },
 });

package/src/commons/Device/WaterQualitySensor/ListQualityIndicator.js

@@ -27,6 +27,7 @@ const ListQualityIndicator = ({ data, style }) => {
         showsHorizontalScrollIndicator={false}
         nestedScrollEnabled
         contentContainerStyle={[styles.flatlistContent, style]}
+        scrollIndicatorInsets={{ right: 1 }}
       />
     </View>
   );

package/src/commons/FullLoading/index.js

@@ -22,7 +22,8 @@ const styles = StyleSheet.create({
     left: 0,
     bottom: 0,
     right: 0,
-    zIndex: 10,
+    zIndex: 1000, // works on ios
+    elevation: 1000, // works on android
   },
   background: {
     backgroundColor: colorOpacity(Colors.White, 0.8),

package/src/commons/MenuActionAddnew/index.js

@@ -59,6 +59,7 @@ const MenuActionAddnew = memo(
               data={dataActions}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>

package/src/commons/MenuActionList/index.js

@@ -57,6 +57,7 @@ const MenuActionList = memo(
               data={listItem}
               keyExtractor={keyExtractor}
               renderItem={renderItem}
+              scrollIndicatorInsets={{ right: 1 }}
             />
           </View>
         </View>