@eohjsc/react-native-smart-city 0.2.96 → 0.2.99

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/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/ConnectingProcess/index.js

@@ -10,7 +10,7 @@ import { axiosPost } from '../../utils/Apis/axios';
 import { API, Colors } from '../../configs';
 import styles from './styles';
 import DeviceItem from './DeviceItem/DeviceItem';
-import Connecting from '../Connecting ';
+import Connecting from '../Connecting';
 import { useSCContextSelector } from '../../context';
 
 const ConnectingProcess = ({ route }) => {

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/FieldTemplate/ChooseUserField/ChooseFieldStyles.js

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    paddingTop: 30,
+  },
+  textHeadLine: {
+    fontSize: 16,
+    color: Colors.Gray9,
+    fontWeight: 'bold',
+  },
+  buttonValue: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  value: {
+    marginRight: 20,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+});

package/src/commons/FieldTemplate/ChooseUserField/ChoosePopup.js

@@ -0,0 +1,96 @@
+import React, { useState, useCallback } from 'react';
+import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import BottomButtonView from '../../BottomButtonView';
+import { ModalCustom } from '../../Modal';
+import RadioCircle from '../../RadioCircle';
+import Text from '../../Text';
+
+import styles from './ChoosePopupStyles';
+
+const RowMember = ({ member, isSelected, onSelect }) => {
+  const handleOnPress = useCallback(() => {
+    onSelect(member);
+  }, [onSelect, member]);
+  return (
+    <TouchableOpacity
+      style={styles.row}
+      onPress={handleOnPress}
+      testID={TESTID.CHOOSE_ITEM}
+    >
+      <RadioCircle active={isSelected} />
+      <View style={styles.wrapText}>
+        <Text type="H4" color={Colors.Gray9}>
+          {member.name
+            ? member.name
+            : member.phone_number
+            ? member.phone_number
+            : member.email}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const ChoosePopup = ({ isVisible, title, onHide, members, onApply }) => {
+  const t = useTranslations();
+  const [selectedUsers, setSelectedUsers] = useState({});
+
+  const handleOnSelectUser = useCallback((user) => {
+    setSelectedUsers(user);
+  }, []);
+
+  const handleOnApply = useCallback(() => {
+    onApply(selectedUsers);
+    onHide();
+  }, [selectedUsers, onApply, onHide]);
+
+  const handleOnCancel = useCallback(() => {
+    onHide();
+  }, [onHide]);
+
+  return (
+    <ModalCustom
+      testID={TESTID.CHOOSE_POPUP}
+      isVisible={isVisible}
+      onBackButtonPress={handleOnCancel}
+      onBackdropPress={handleOnCancel}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      animationIn={'zoomIn'}
+      animationOut={'zoomOut'}
+      style={styles.wrapPopup}
+    >
+      <View style={[styles.popup, styles.heigh50percent]}>
+        <Text type="H4" style={styles.title} bold>
+          {title}
+        </Text>
+        <View style={styles.separator} />
+        <ScrollView>
+          {members.map((member, index) => (
+            <RowMember
+              key={index}
+              member={member}
+              isSelected={selectedUsers.id === member.id}
+              onSelect={handleOnSelectUser}
+            />
+          ))}
+        </ScrollView>
+        <View style={styles.separator} />
+        <BottomButtonView
+          rowButton={true}
+          testIDPrefix={TESTID.CHOOSE_POPUP}
+          style={styles.bottomButtonView}
+          secondaryTitle={t('cancel')}
+          mainTitle={t('apply')}
+          onPressSecondary={handleOnCancel}
+          onPressMain={handleOnApply}
+        />
+      </View>
+    </ModalCustom>
+  );
+};
+
+export default ChoosePopup;

package/src/commons/FieldTemplate/ChooseUserField/ChoosePopupStyles.js

@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../configs';
+
+export default StyleSheet.create({
+  wrapPopup: {
+    marginHorizontal: 16,
+  },
+  popup: {
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: (Constants.height * 80) / 100,
+    padding: 24,
+    paddingBottom: 100,
+    borderRadius: 10,
+  },
+  heigh50percent: {
+    height: (Constants.height * 50) / 100,
+  },
+  title: {
+    marginBottom: 16,
+  },
+  bottomButtonView: {
+    marginBottom: 24,
+  },
+  separator: {
+    height: 0.5,
+    backgroundColor: Colors.Gray4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  wrapText: {
+    flex: 1,
+    paddingVertical: 8,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+});