@eohjsc/react-native-smart-city 0.2.97 → 0.3.0

package/src/commons/Device/Hanet/ItemHanetDevice.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
+import renderer, { act } from 'react-test-renderer';
+import ItemHanetDevice from './ItemHanetDevice';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ItemHanetDevice {...props} />
+  </SCProvider>
+);
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+    }),
+  };
+});
+
+describe('Test ItemHanetDevice', () => {
+  let tree, props;
+
+  beforeEach(() => {
+    props = {
+      svgMain: 'icon',
+      title: 'title',
+      sensor: {},
+      unit: {},
+      station: {},
+    };
+  });
+
+  test('render ItemHanetDevice', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const touches = instance.findAllByType(TouchableWithoutFeedback);
+    act(() => {
+      tree = touches[0].props.onPress();
+    });
+    expect(mockNavigate).toBeCalled();
+  });
+
+  test('render ItemHanetDevice sensor has icon', () => {
+    props.sensor.icon_kit = 'icon';
+    act(() => {
+      tree = renderer.create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const touches = instance.findAllByType(TouchableWithoutFeedback);
+    expect(touches.length).toBeGreaterThan(0);
+  });
+});

package/src/commons/Device/HistoryChart.js

@@ -239,6 +239,8 @@ const HistoryChart = memo(
           onConfirm={onConfirmStart}
           onCancel={onCancel}
           display="spinner"
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
@@ -247,6 +249,8 @@ const HistoryChart = memo(
           onConfirm={onConfirmEnd}
           onCancel={onCancel}
           display="spinner"
+          cancelTextIOS={t('cancel')}
+          confirmTextIOS={t('confirm')}
         />
       </View>
     );

package/src/commons/Device/LinearChart.js

@@ -52,6 +52,21 @@ const chartOptions = {
       format: '{value:%d.%m %H:%M}',
     },
   },
+  legend: {
+    useHTML: true,
+    labelFormatter: function () {
+      if (this.visible) {
+        return (
+          '<span style="color:#333333;font-weight:bold">' +
+          this.name +
+          '</span>'
+        );
+      }
+      return (
+        '<span style="color:#cccccc;font-weight:bold">' + this.name + '</span>'
+      );
+    },
+  },
 };
 
 function LinearChart({ datas }) {

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/Explore/__test__/CityItem.test.js

@@ -2,12 +2,15 @@ import React from 'react';
 import renderer, { act } from 'react-test-renderer';
 import CityItem from '../CityItem';
 import { TouchableOpacity } from 'react-native';
-import axios from 'axios';
 import { API } from '../../../configs';
 import Pin from '../../../../assets/images/Explore/Pin.svg';
 import PinOutline from '../../../../assets/images/Explore/PinOutline.svg';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
+import MockAdapter from 'axios-mock-adapter';
+import api from '../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
 
 const mockedDispatch = jest.fn();
 
@@ -17,7 +20,6 @@ const wrapComponent = (item, mockeSelect) => (
   </SCProvider>
 );
 
-jest.mock('axios');
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: () => mockedDispatch,
@@ -25,9 +27,6 @@ jest.mock('react-redux', () => ({
 
 describe('Test CityItem', () => {
   let tree;
-  afterEach(() => {
-    axios.post.mockClear();
-  });
 
   test('render CityItem is_pin: true', async () => {
     const item = {
@@ -38,37 +37,23 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    const response = {
-      status: 200,
-    };
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.UNIT.PIN_UNIT()).reply(200);
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const buttons = instance.findAllByType(TouchableOpacity);
     expect(buttons.length).toBe(2);
-    await act(async () => {
-      await buttons[0].props.onPress();
-    });
+    await buttons[0].props.onPress();
     expect(mockeSelect).toHaveBeenCalledTimes(1);
-
     const pin = instance.findAllByType(Pin);
     expect(pin.length).toBe(2);
-    await act(async () => {
-      await pin[1].props.onPress();
-    });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
-
+    mock.onPost(API.UNIT.PIN_UNIT()).reply(200);
+    await pin[1].props.onPress();
     const unpin = instance.findAllByType(PinOutline);
+    mock.onPost(API.UNIT.UNPIN_UNIT(1)).reply(200);
+    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
-    await act(async () => {
-      await unpin[1].props.onPress();
-    });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem is_pin: false', async () => {
@@ -80,24 +65,33 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    const response = {
-      status: 200,
-    };
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
-
     const unpin = instance.findAllByType(PinOutline);
+    mock.onPost(API.UNIT.PIN_UNIT(1)).reply(200);
+    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
+  });
+
+  test('render CityItem is_pin: false and call api false', async () => {
+    const item = {
+      id: 1,
+      name: 'name',
+      icon: 'icon',
+      is_pin: false,
+      count_pin: 1,
+    };
+    const mockeSelect = jest.fn();
     await act(async () => {
-      await unpin[1].props.onPress();
+      tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.PIN_UNIT(1));
+    const instance = tree.root;
+    const unpin = instance.findAllByType(PinOutline);
+    mock.onPost(API.UNIT.PIN_UNIT(1)).reply(400);
+    await unpin[1].props.onPress();
+    expect(unpin.length).toBe(2);
   });
 
   test('render CityItem PinOutline axios.post response false', async () => {
@@ -109,22 +103,14 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    const response = {};
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.UNIT.PIN_UNIT()).reply(200, {});
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
-
     const unpin = instance.findAllByType(PinOutline);
+    await unpin[1].props.onPress();
     expect(unpin.length).toBe(2);
-    await act(async () => {
-      await unpin[1].props.onPress();
-    });
-    expect(axios.post).not.toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem Pin axios.post response false', async () => {
@@ -136,21 +122,14 @@ describe('Test CityItem', () => {
       count_pin: 1,
     };
     const mockeSelect = jest.fn();
-    const response = {};
-
-    axios.post.mockImplementation(async () => {
-      return response;
-    });
+    mock.onPost(API.UNIT.UNPIN_UNIT(1)).reply(400, {});
     await act(async () => {
       tree = await renderer.create(wrapComponent(item, mockeSelect));
     });
     const instance = tree.root;
     const pin = instance.findAllByType(Pin);
+    await pin[1].props.onPress();
     expect(pin.length).toBe(2);
-    await act(async () => {
-      await pin[1].props.onPress();
-    });
-    expect(axios.post).toHaveBeenCalledWith(API.UNIT.UNPIN_UNIT(1));
   });
 
   test('render CityItem icon null', async () => {

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,
+  },
+});

package/src/commons/FieldTemplate/ChooseUserField/__test__/index.test.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import MockAdapter from 'axios-mock-adapter';
+import { act, create } from 'react-test-renderer';
+import { TESTID } from '../../../../configs/Constants';
+import { mockSCStore } from '../../../../context/mockStore';
+import { SCProvider } from '../../../../context';
+import ChooseUserField from '../index';
+import { TouchableOpacity } from 'react-native';
+import { ModalCustom } from '../../../Modal';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (
+  unit = { id: 1 },
+  dataItem = {
+    type: 'choose_user',
+    key: 'user_id',
+    action: {
+      type: 'action_zigbee',
+      id: 1,
+    },
+  },
+  index = 0,
+  setDataForm,
+  dataForm = [
+    {
+      type: 'choose_user',
+      key: 'user_id',
+      action: {
+        type: 'action_zigbee',
+        id: 1,
+      },
+    },
+  ]
+) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ChooseUserField
+      unit={unit}
+      dataItem={dataItem}
+      index={index}
+      setDataForm={jest.fn()}
+      dataForm={dataForm}
+    />
+  </SCProvider>
+);
+
+describe('Test ChooseUserField', () => {
+  let tree;
+
+  const onPressCancel = async (instance, popup) => {
+    const buttonCancel = instance.find(
+      (el) =>
+        el.props.testID ===
+          TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_SECONDARY &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonCancel.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  const onPressApply = async (instance, popup) => {
+    const buttonApply = instance.find(
+      (el) =>
+        el.props.testID === TESTID.CHOOSE_POPUP + TESTID.BOTTOM_VIEW_MAIN &&
+        el.type === TouchableOpacity
+    );
+
+    await act(async () => {
+      await buttonApply.props.onPress();
+    });
+    expect(popup.props.isVisible).toBeFalsy();
+  };
+
+  test('render ChooseUserField handleOnApply', async () => {
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(200, [{ id: 1, name: 'Ken' }]);
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+
+    const instance = tree.root;
+
+    const ChooseField = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_FIELD &&
+        item.type === TouchableOpacity
+    );
+    await act(async () => {
+      await ChooseField.props.onPress();
+    });
+
+    const popup = instance.find(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_POPUP && item.type === ModalCustom
+    );
+    expect(popup.props.isVisible).toBeTruthy();
+    await onPressCancel(instance, popup);
+    await onPressApply(instance, popup);
+  });
+
+  test('fetch unit_members error', async () => {
+    mock.onGet(API.SHARE.UNITS_MEMBERS(1)).reply(new Error('Network Error'));
+    await act(async () => {
+      tree = create(wrapComponent());
+    });
+    const instance = tree.root;
+    const ChooseField = instance.findAll(
+      (item) =>
+        item.props.testID === TESTID.CHOOSE_ITEM &&
+        item.type === TouchableOpacity
+    );
+    expect(ChooseField).toHaveLength(0);
+  });
+});

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

@@ -0,0 +1,62 @@
+import React, { memo, useEffect, useState } from 'react';
+import { IconOutline } from '@ant-design/icons-react-native';
+import { TouchableOpacity, View } from 'react-native';
+
+import styles from './ChooseFieldStyles';
+import ChoosePopup from './ChoosePopup';
+import { useBoolean } from '../../../hooks/Common';
+import { axiosGet } from '../../../utils/Apis/axios';
+import { API, Colors } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import Text from '../../Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+
+const ChooseUserField = ({ unit, dataItem, index, setDataForm, dataForm }) => {
+  const [showFilterPopup, setShowFilterPopup, setHideFilterPopup] =
+    useBoolean();
+  const [choose, setChoose] = useState({});
+  const [members, setMembers] = useState([]);
+  const t = useTranslations();
+  const fetchMembers = async () => {
+    const { success, data } = await axiosGet(API.SHARE.UNITS_MEMBERS(unit.id));
+    if (success) {
+      setMembers(data);
+    }
+  };
+
+  useEffect(() => {
+    if (!members.length) {
+      fetchMembers();
+      return;
+    }
+
+    dataItem.data = choose.id;
+    dataItem.valid = true;
+    dataItem[dataItem.action.type] = dataItem.action.id;
+    dataForm[index] = dataItem;
+    setDataForm([...dataForm]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [choose]);
+
+  return (
+    <View style={styles.wrapper}>
+      <Text style={styles.textHeadLine}>{t('choose_user')}</Text>
+      <TouchableOpacity
+        testID={TESTID.CHOOSE_FIELD}
+        style={styles.buttonValue}
+        onPress={setShowFilterPopup}
+      >
+        <Text style={styles.value}>{choose.name}</Text>
+        <IconOutline name="right" size={20} color={Colors.Gray8} />
+      </TouchableOpacity>
+      <ChoosePopup
+        isVisible={showFilterPopup}
+        onHide={setHideFilterPopup}
+        members={members}
+        title={t('choose_user')}
+        onApply={setChoose}
+      />
+    </View>
+  );
+};
+export default memo(ChooseUserField);