@eohjsc/react-native-smart-city 0.3.33 → 0.3.36

package/src/screens/SmartAccount/Connecting/index.js

@@ -0,0 +1,171 @@
+import React, { useEffect, useCallback, useContext } from 'react';
+import { SafeAreaView, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import * as Progress from 'react-native-progress';
+import AnimatedEllipsis from 'react-native-animated-ellipsis';
+
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Action } from '../../../context/actionType';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosPost } from '../../../utils/Apis/axios';
+import { API, Colors, Constants } from '../../../configs';
+import Routes from '../../../utils/Route';
+import { ToastBottomHelper } from '../../../utils/Utils';
+import styles from './style';
+
+const SmartAccountConnecting = ({ route }) => {
+  const t = useTranslations();
+  const { setAction } = useContext(SCContext);
+  const { navigate } = useNavigation();
+  const percent = useSCContextSelector((state) => state.percent);
+
+  const {
+    username,
+    password,
+    brand,
+    unit_id,
+    listDeviceIds,
+    stationId,
+    nameSubUnit,
+    listSelectDevice,
+    smart_account_id,
+    smart_account_id_from_backend,
+    device_data,
+  } = route.params;
+
+  const handleRefreshPercent = useCallback(() => {
+    const to = setTimeout(() => {
+      setAction(Action.REFRESH_PERCENT);
+      clearTimeout(to);
+    }, 1500);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const connectingAccount = useCallback(async () => {
+    setAction(Action.PERCENT_LOADED);
+    const { success, data } = await axiosPost(API.SMART_ACCOUNT.SYNC, {
+      username: username,
+      password: password,
+      brand: brand,
+      unit: unit_id,
+    });
+
+    if (success) {
+      setAction(Action.PROCESS_DONE);
+      const timeConnecting = setTimeout(() => {
+        navigate(Routes.ListDeviceSmartAccount, {
+          username: username,
+          brand: brand,
+          device_data: data.sensors_unidentified || device_data,
+          unit_id: unit_id,
+          smart_account_id_from_backend: data.smart_account_id,
+        });
+
+        clearTimeout(timeConnecting);
+      }, 1000);
+    } else {
+      navigate(Routes.SmartAccount, {
+        params: {},
+      });
+      ToastBottomHelper.error(data[Object.keys(data)[0]][0]);
+    }
+    handleRefreshPercent();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [brand, navigate, password, unit_id, username]);
+
+  const addDeviceToStation = useCallback(async () => {
+    setAction(Action.PERCENT_LOADED);
+    const { success } = await axiosPost(
+      API.SMART_ACCOUNT.ADD_DEVICE_TO_STATION,
+      {
+        sensor_ids: listDeviceIds,
+        station: stationId,
+      }
+    );
+    if (success) {
+      setAction(Action.PROCESS_DONE);
+      const timeAddDevice = setTimeout(() => {
+        navigate(Routes.SuccessfullyConnected, {
+          nameSubUnit: nameSubUnit,
+          listDeviceIds: listDeviceIds,
+          listSelectDevice,
+          smart_account_id: smart_account_id,
+          smart_account_id_from_backend: smart_account_id_from_backend,
+          unit_id: unit_id,
+          stationId,
+          username,
+          brand,
+        });
+        clearTimeout(timeAddDevice);
+      }, 1000);
+    }
+    handleRefreshPercent();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    listSelectDevice,
+    listDeviceIds,
+    nameSubUnit,
+    navigate,
+    smart_account_id,
+    smart_account_id_from_backend,
+    unit_id,
+    stationId,
+  ]);
+
+  useEffect(() => {
+    if (percent && percent !== 1) {
+      const to = setTimeout(() => {
+        setAction(Action.PERCENT_LOADED);
+        clearTimeout(to);
+      }, 1000);
+    }
+  }, [percent, setAction]);
+
+  useEffect(() => {
+    if (listDeviceIds) {
+      addDeviceToStation();
+    } else {
+      connectingAccount();
+    }
+  }, [addDeviceToStation, connectingAccount, listDeviceIds]);
+
+  return (
+    <SafeAreaView style={styles.wrap}>
+      <View style={styles.boxText}>
+        <Text bold style={styles.connectingText}>
+          {t('connecting_smart_account')}
+        </Text>
+        <AnimatedEllipsis style={styles.animatedEllipsis} />
+      </View>
+
+      <Text style={styles.warningText}>
+        {t('warning_connecting_smart_account')}
+      </Text>
+      <View style={styles.progressBar}>
+        <View style={styles.connecting}>
+          <Text type="H4" bold>
+            {t('continue')}
+          </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>
+    </SafeAreaView>
+  );
+};
+
+export default SmartAccountConnecting;

package/src/screens/SmartAccount/Connecting/style.js

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+import { getStatusBarHeight } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingTop: getStatusBarHeight(true),
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: '100%',
+  },
+  connectingText: {
+    marginLeft: 30,
+    marginTop: 16,
+    fontSize: 20,
+    color: Colors.Gray9,
+  },
+  animatedEllipsis: {
+    fontSize: 25,
+    color: Colors.Gray9,
+    marginTop: 14,
+  },
+  warningText: {
+    marginHorizontal: 30,
+    marginTop: 16,
+    fontSize: 14,
+    color: Colors.Gray8,
+  },
+  boxText: {
+    flexDirection: 'row',
+  },
+  progressBar: {
+    flexDirection: 'column',
+    marginTop: 180,
+    marginHorizontal: 30,
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+});

package/src/screens/SmartAccount/ListDevice/DeviceItem.js

@@ -0,0 +1,45 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import FImage from '../../../commons/FImage';
+import Text from '../../../commons/Text';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import styles from './styles/DeviceItemStyles';
+
+const DeviceItem = memo(
+  ({ id, name, setListSelectedDevice, isSelected, icon, item }) => {
+    const t = useTranslations();
+
+    return (
+      <TouchableOpacity
+        onPress={() => setListSelectedDevice(id, item)}
+        accessibilityLabel={AccessibilityLabel.TOUCH_SELECT_ITEM_SMART_ACCOUNT}
+      >
+        <View
+          style={[
+            styles.container,
+            isSelected ? styles.colorSelected : styles.colorUnSelected,
+          ]}
+        >
+          <View style={styles.opticalPower}>
+            <FImage source={{ uri: icon }} style={styles.iconSensor} />
+            <View
+              style={[
+                styles.circle,
+                isSelected ? styles.circle : styles.circleNotChange,
+              ]}
+            />
+          </View>
+          <Text type="H4" semibold style={styles.nameSensor}>
+            {name}
+          </Text>
+          <Text type="Label" style={styles.redText}>
+            {t('click_here_to_setup_device')}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+export default DeviceItem;

package/src/screens/SmartAccount/ListDevice/__test__/DeviceItem.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import Text from '../../../../commons/Text';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import DeviceItem from '../DeviceItem';
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceItem {...props} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+test('test DeviceItem', () => {
+  let tree;
+  let props = {
+    icon: '',
+    name: 'test',
+    itemId: 2,
+  };
+  act(() => {
+    tree = create(wrapComponent(props));
+  });
+  const instance = tree.root;
+  const texts = instance.findAllByType(Text);
+  expect(texts).toHaveLength(4);
+});

package/src/screens/SmartAccount/ListDevice/__test__/ListDevice.test.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { SafeAreaView, TouchableOpacity } from 'react-native';
+
+import ListDevice from '../index';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Text from '../../../../commons/Text';
+import api from '../../../../utils/Apis/axios';
+import { API } from '../../../../configs';
+import Routes from '../../../../utils/Route';
+import MockAdapter from 'axios-mock-adapter';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const mockedNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <ListDevice route={route} />
+  </SCProvider>
+);
+
+describe('Test ListDeviceSmartAccount', () => {
+  let tree;
+  afterEach(() => {
+    mockedNavigate.mockClear();
+  });
+  test('render ListDeviceSmartAccount', () => {
+    const route = {
+      params: {
+        username: 'abc',
+        password: '123456',
+        brand: '',
+        smart_account_id: 1,
+        device_data: [
+          { id: 1, name: 'sensor 1' },
+          { id: 2, name: 'sensor 2' },
+        ],
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    expect(texts).toHaveLength(12);
+    expect(safeAreaView).toHaveLength(1);
+  });
+
+  test('render ListDevice has not device_data', async () => {
+    const route = {
+      params: {
+        username: 'abc',
+        password: '123456',
+        brand: '',
+        smart_account_id: 1,
+      },
+    };
+    mock
+      .onGet(API.SMART_ACCOUNT.FETCH_UNIDENTIFIED_DEVICE_OF_SMART_ACCOUNT(1))
+      .reply(200, [
+        { id: 1, name: 'sensor 1' },
+        { id: 2, name: 'sensor 2' },
+      ]);
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+
+    const instance = tree.root;
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    const buttons = instance.findAllByType(TouchableOpacity);
+    await buttons[2].props.onPress();
+    const touchs = instance.find(
+      (el) =>
+        el.props.accessibilityLabel === AccessibilityLabel.TOUCH_SELECT_ALL &&
+        el.type === TouchableOpacity
+    );
+    await act(async () => {
+      await touchs.props.onPress();
+    });
+
+    expect(safeAreaView).toHaveLength(1);
+    expect(mockedNavigate).toBeCalledWith(Routes.AddDeviceStack, {
+      screen: Routes.AddCommonSelectSubUnit,
+      params: {
+        addType: 'AddHassiDevice',
+        brand: '',
+        listSelectDevice: [],
+        listDeviceIds: [],
+        device_data: undefined,
+        smart_account_id: 1,
+        smart_account_id_from_backend: undefined,
+        unit_id: undefined,
+        username: 'abc',
+      },
+    });
+  });
+
+  test('render handle Selected device', () => {
+    const route = {
+      params: {
+        username: 'abc',
+        password: '123456',
+        brand: '',
+        smart_account_id: 1,
+        device_data: [
+          { id: 1, name: 'sensor 1' },
+          { id: 2, name: 'sensor 2' },
+        ],
+      },
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const touchSelectItem = instance.findAll(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.TOUCH_SELECT_ITEM_SMART_ACCOUNT &&
+        el.type === TouchableOpacity
+    );
+    act(async () => {
+      await touchSelectItem[0].props.onPress(1, { id: 1, name: 'sensor 1' });
+    });
+    expect(touchSelectItem).toBeDefined();
+  });
+});

package/src/screens/SmartAccount/ListDevice/index.js

@@ -0,0 +1,185 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { View, Image, TouchableOpacity } from 'react-native';
+import { useNavigation, useIsFocused } from '@react-navigation/native';
+
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { Button } from '../../../commons';
+import Text from '../../../commons/Text';
+import WrapHeaderScrollable from '../../../commons/Sharing/WrapHeaderScrollable';
+import DeviceItem from './DeviceItem';
+import { API, Colors, Images } from '../../../configs';
+import { axiosGet } from '../../../utils/Apis/axios';
+import Routes from '../../../utils/Route';
+import styles from './styles/index';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+
+const ListDeviceSmartAccount = ({ route }) => {
+  const {
+    username,
+    brand,
+    device_data,
+    unit_id,
+    smart_account_id,
+    smart_account_id_from_backend,
+  } = route.params;
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const [listSelectedDevice, setListSelectedDevice] = useState([]);
+  const [listDeviceSuccess, setListDeviceSuccess] = useState([]);
+  const [listDevices, setListDevices] = useState(device_data || []);
+  const { navigate, goBack } = useNavigation();
+  let circleOfSelectAll = useRef(false);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const listSelectAll = [];
+
+  const fetchSensorData = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.SMART_ACCOUNT.FETCH_UNIDENTIFIED_DEVICE_OF_SMART_ACCOUNT(
+        smart_account_id
+      )
+    );
+    if (success) {
+      setListDevices(data);
+    }
+  }, [smart_account_id]);
+
+  useEffect(() => {
+    if (!device_data && smart_account_id && isFocused) {
+      fetchSensorData();
+      setListDeviceSuccess([]);
+      setListSelectedDevice([]);
+    }
+  }, [fetchSensorData, isFocused, device_data, smart_account_id]);
+
+  const handleSelectedDevice = useCallback(
+    (id, item) => {
+      if (listSelectedDevice.includes(id)) {
+        setListSelectedDevice((oldArray) =>
+          oldArray.filter((itemDevice) => itemDevice !== id)
+        );
+        setListDeviceSuccess((oldArray) =>
+          oldArray.filter((itemDevice) => itemDevice !== item)
+        );
+        circleOfSelectAll.current = false;
+      } else {
+        setListSelectedDevice((oldArray) => [...oldArray, id]);
+        setListDeviceSuccess((oldArray) => [...oldArray, item]);
+        if (listDevices.length - 1 === listSelectedDevice.length) {
+          circleOfSelectAll.current = true;
+        }
+      }
+    },
+    [listSelectedDevice, listDevices.length]
+  );
+
+  const gotoSelectSubUnit = useCallback(() => {
+    navigate(Routes.AddDeviceStack, {
+      screen: Routes.AddCommonSelectSubUnit,
+      params: {
+        username,
+        brand,
+        listDeviceIds: listSelectedDevice,
+        unit_id: unit_id,
+        addType: 'AddHassiDevice',
+        device_data: device_data,
+        smart_account_id: smart_account_id,
+        listSelectDevice: listDeviceSuccess,
+        smart_account_id_from_backend: smart_account_id_from_backend,
+      },
+    });
+  }, [
+    brand,
+    listDeviceSuccess,
+    listSelectedDevice,
+    navigate,
+    device_data,
+    smart_account_id,
+    smart_account_id_from_backend,
+    unit_id,
+    username,
+  ]);
+
+  const handleSelectAll = useCallback(() => {
+    for (let i = 0; i < listDevices.length; i++) {
+      listSelectAll.push(listDevices[i].id);
+    }
+    if (listSelectAll.length !== listSelectedDevice.length) {
+      setListSelectedDevice(listSelectAll);
+      setListDeviceSuccess(listDevices);
+      circleOfSelectAll.current = true;
+    }
+    if (listSelectAll.length === listSelectedDevice.length) {
+      setListSelectedDevice([]);
+      setListDeviceSuccess([]);
+      circleOfSelectAll.current = false;
+    }
+  }, [listSelectAll, listSelectedDevice.length, listDevices]);
+
+  return (
+    <View style={styles.wrap}>
+      <WrapHeaderScrollable
+        onLeft={() => (device_data ? navigate(Routes.Dashboard) : goBack())}
+        title={brand === 'google_home' && 'Điện Quang'}
+        headerAniStyle={styles.headerAniStyle}
+      >
+        <View style={styles.contentContainer}>
+          <View style={styles.rowUsername}>
+            <Image width={50} source={Images.dienquang} />
+            <Text style={styles.textUsername}>{username}</Text>
+          </View>
+          <View style={styles.containerTypeDevice}>
+            <View style={styles.typeDeviceItem}>
+              <Text type="Body" color={Colors.Green7}>
+                {t('unidentified')}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.textAllDevice}>
+            <Text style={styles.allDevices} type="H3">
+              {`${t('text_all_devices')} (${
+                device_data ? device_data.length : listDevices.length
+              })`}
+            </Text>
+            <TouchableOpacity
+              onPress={handleSelectAll}
+              style={styles.selectAll}
+              accessibilityLabel={AccessibilityLabel.TOUCH_SELECT_ALL}
+            >
+              <View
+                style={[
+                  circleOfSelectAll.current
+                    ? styles.circle
+                    : styles.circleNotChange,
+                ]}
+              />
+              <Text style={styles.allDevices} type="H3">
+                {t('select_all')}
+              </Text>
+            </TouchableOpacity>
+          </View>
+          <View style={styles.boxDevices}>
+            {(device_data ? device_data : listDevices).map((item) => (
+              <DeviceItem
+                id={item.id}
+                name={item.name}
+                icon={item.icon_kit}
+                item={item}
+                setListSelectedDevice={handleSelectedDevice}
+                isSelected={listSelectedDevice.includes(item.id)}
+              />
+            ))}
+          </View>
+        </View>
+      </WrapHeaderScrollable>
+      <View style={styles.btnFixed}>
+        <Button
+          onPress={gotoSelectSubUnit}
+          type={listSelectedDevice.length ? 'primary' : 'disabled'}
+          title={t('next')}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default ListDeviceSmartAccount;

package/src/screens/SmartAccount/ListDevice/styles/DeviceItemStyles.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { Colors, Constants } from '../../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 16;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 145;
+
+export default StyleSheet.create({
+  container: {
+    padding: 12,
+    borderRadius: 10,
+    shadowRadius: 1,
+    width: widthItem,
+    height: heightItem,
+    borderWidth: 1,
+    borderColor: Colors.Gray4,
+    backgroundColor: Colors.White,
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  colorUnSelected: {
+    shadowColor: Colors.Shadow,
+    shadowOpacity: 0.3,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+  },
+  colorSelected: {
+    shadowColor: Colors.Green,
+    shadowOpacity: 1,
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+  },
+  iconSensor: {
+    width: 40,
+    height: 40,
+    resizeMode: 'contain',
+  },
+  nameSensor: {
+    color: Colors.Gray9,
+    marginTop: 5,
+  },
+  redText: {
+    color: Colors.Red,
+  },
+  opticalPower: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  circle: {
+    backgroundColor: Colors.Primary,
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: Colors.Primary,
+  },
+  circleNotChange: {
+    backgroundColor: Colors.White,
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: Colors.Gray6,
+  },
+});