@eohjsc/react-native-smart-city 0.3.31 → 0.3.34

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

@@ -0,0 +1,186 @@
+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;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [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,
+  },
+});

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

@@ -0,0 +1,85 @@
+import { StyleSheet } from 'react-native';
+import { getBottomSpace } from 'react-native-iphone-x-helper';
+import { Colors } from '../../../../configs';
+
+export default StyleSheet.create({
+  wrap: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  boxDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    marginTop: 16,
+    justifyContent: 'space-between',
+  },
+  textUsername: {
+    color: Colors.Gray9,
+    fontSize: 16,
+    paddingLeft: 10,
+  },
+  contentContainer: {
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingBottom: 120,
+  },
+  rowUsername: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  allDevices: {
+    paddingTop: 20,
+    color: Colors.Gray9,
+  },
+  typeDeviceItem: {
+    backgroundColor: Colors.Gray3,
+    borderRadius: 30,
+    paddingHorizontal: 20,
+    paddingVertical: 5,
+    alignSelf: 'flex-start',
+  },
+  containerTypeDevice: {
+    paddingTop: 20,
+  },
+  btnFixed: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: getBottomSpace() > 0 ? getBottomSpace() : 24,
+    paddingTop: 16,
+    backgroundColor: Colors.White,
+    marginHorizontal: 16,
+  },
+  headerAniStyle: {
+    borderBottomWidth: 0,
+    borderColor: Colors.White,
+  },
+  textAllDevice: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  circle: {
+    backgroundColor: Colors.Primary,
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: Colors.Primary,
+    marginTop: 25,
+    marginRight: 15,
+  },
+  circleNotChange: {
+    backgroundColor: Colors.White,
+    width: 15,
+    height: 15,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: Colors.Gray6,
+    marginTop: 25,
+    marginRight: 15,
+  },
+  selectAll: {
+    flexDirection: 'row',
+  },
+});

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

@@ -0,0 +1,37 @@
+import React, { memo, useCallback, useState } from 'react';
+import { View } from 'react-native';
+
+import FImage from '../../../commons/FImage';
+import { API } from '../../../configs';
+import { axiosPatch } from '../../../utils/Apis/axios';
+import _TextInput from '../../../commons/Form/TextInput';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import styles from './DeviceItemStyles';
+
+const DeviceItem = memo(({ icon, name, itemId }) => {
+  const [newName, setNewName] = useState(name);
+
+  const handleBlur = useCallback(async () => {
+    await axiosPatch(API.DEVICE.END_DEVICE_DETAIL(itemId), {
+      name: newName,
+    });
+  }, [itemId, newName]);
+
+  return (
+    <View style={styles.container}>
+      <FImage source={{ uri: icon }} style={styles.iconSensor} />
+      <_TextInput
+        value={newName}
+        textInputStyle={styles.textItem}
+        onChange={setNewName}
+        onBlur={handleBlur}
+        maxLength={64}
+        accessibilityLabel={
+          AccessibilityLabel.ON_CHANGE_NAME_DEVICE_SMART_ACCOUNT
+        }
+      />
+    </View>
+  );
+});
+
+export default DeviceItem;

package/src/{commons/ConnectingProcess/DeviceItem → screens/SmartAccount/SuccessfullyConnected}/DeviceItemStyles.js

@@ -1,14 +1,23 @@
 import { StyleSheet } from 'react-native';
-import { Colors } from '../../../configs';
+import { Colors, Constants } from '../../../configs';
+
+const marginItem = 12;
+const marginHorizontal = 5;
+const widthItem = (Constants.width - marginHorizontal * 2 - marginItem) / 2;
+const heightItem = (widthItem / 166) * 60;
 
 export default StyleSheet.create({
   container: {
+    paddingHorizontal: 15,
     borderRadius: 10,
     width: 250,
+    height: heightItem,
     borderWidth: 1,
     borderColor: Colors.Gray4,
     backgroundColor: Colors.White,
     justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16,
     flexDirection: 'row',
     shadowColor: Colors.Shadow,
     shadowOffset: {
@@ -20,8 +29,6 @@ export default StyleSheet.create({
     elevation: 6,
     paddingLeft: 30,
     paddingRight: 30,
-    display: 'flex',
-    alignItems: 'center',
   },
   iconSensor: {
     width: 32,
@@ -29,13 +36,14 @@ export default StyleSheet.create({
     resizeMode: 'contain',
   },
   textItem: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
     borderWidth: 0,
     borderBottomWidth: 1,
     borderBottomColor: Colors.Primary,
     textAlign: 'center',
     marginTop: -10,
-    padding: 5,
     fontSize: 16,
-    height: 50,
   },
 });

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import _TextInput from '../../../../commons/Form/TextInput';
+import { API } from '../../../../configs';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import MockAdapter from 'axios-mock-adapter';
+import DeviceItem from '../DeviceItem';
+import api from '../../../../utils/Apis/axios';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DeviceItem {...props} />
+  </SCProvider>
+);
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+describe('Test SmartAccount', () => {
+  let tree;
+  test('test DeviceItem', async () => {
+    let props = {
+      icon: '',
+      name: 'test',
+      itemId: 2,
+    };
+    await act(() => {
+      tree = create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(_TextInput);
+    expect(texts).toHaveLength(1);
+  });
+
+  test('test onchange name device', async () => {
+    let props = {
+      icon: '',
+      name: 'test',
+      itemId: 2,
+    };
+    act(() => {
+      tree = create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const textInput = instance.find(
+      (el) =>
+        el.props.accessibilityLabel ===
+          AccessibilityLabel.ON_CHANGE_NAME_DEVICE_SMART_ACCOUNT &&
+        el.type === _TextInput
+    );
+    await act(async () => {
+      await textInput.props.onBlur('new name');
+    });
+    mock.onPatch(API.DEVICE.END_DEVICE_DETAIL(1)).reply(200);
+    expect(textInput).toBeDefined();
+  });
+});

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

@@ -0,0 +1,88 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { SafeAreaView } from 'react-native';
+
+import SuccessfullyConnected from '../index';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import Text from '../../../../commons/Text';
+import AccessibilityLabel from '../../../../configs/AccessibilityLabel';
+import Routes from '../../../../utils/Route';
+
+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({})}>
+    <SuccessfullyConnected route={route} />
+  </SCProvider>
+);
+
+describe('Test SuccessfullyConnected', () => {
+  let tree;
+  const route = {
+    params: {
+      nameSubUnit: 'test NameSubUnit',
+      smart_account_id: 1,
+      unit_id: 1,
+      username: 'textEoh@gmail.com',
+      brand: 'test brand',
+      listSelectDevice: [
+        {
+          icon_kit: '',
+          name: 'text device',
+          id: 1,
+        },
+        {
+          icon_kit: '',
+          name: 'text device 2',
+          id: 2,
+        },
+      ],
+    },
+  };
+  afterEach(() => {
+    mockedNavigate.mockClear();
+  });
+  test('render SuccessfullyConnected', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const texts = instance.findAllByType(Text);
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    expect(texts).toHaveLength(6);
+    expect(safeAreaView).toHaveLength(1);
+  });
+  test('render onPress finish', () => {
+    act(() => {
+      tree = renderer.create(wrapComponent(route));
+    });
+    const instance = tree.root;
+
+    const next = instance.find(
+      (item) =>
+        item.props.accessibilityLabel ===
+        `${AccessibilityLabel.PREFIX.BUTTON_FINISH_SMART_ACCOUNT}${AccessibilityLabel.VIEW_BUTTON_BOTTOM_RIGHT_BUTTON}`
+    );
+
+    act(async () => {
+      next.props.onPress();
+    });
+    expect(mockedNavigate).toBeCalledWith(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: 1,
+        isSuccessfullyConnected: true,
+      },
+    });
+  });
+});

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

@@ -0,0 +1,101 @@
+import React, { memo, useCallback } from 'react';
+import { View, SafeAreaView, ScrollView } from 'react-native';
+import { CommonActions, useNavigation } from '@react-navigation/native';
+import { IconOutline } from '@ant-design/icons-react-native';
+
+import DeviceItem from './DeviceItem';
+import Routes from '../../../utils/Route';
+import Text from '../../../commons/Text';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { ViewButtonBottom } from '../../../commons';
+import { Colors } from '../../../configs';
+import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import styles from './styles';
+
+const SuccessfullyConnected = memo(({ route }) => {
+  const {
+    nameSubUnit,
+    listSelectDevice,
+    smart_account_id,
+    unit_id,
+    stationId,
+    smart_account_id_from_backend,
+    username,
+    brand,
+  } = route.params;
+  const t = useTranslations();
+  const { navigate, dispatch } = useNavigation();
+
+  const handleContinue = useCallback(() => {
+    navigate(Routes.ListDeviceSmartAccount, {
+      smart_account_id: smart_account_id || smart_account_id_from_backend,
+      username,
+      brand,
+      unit_id,
+    });
+  }, [
+    brand,
+    navigate,
+    smart_account_id,
+    smart_account_id_from_backend,
+    unit_id,
+    username,
+  ]);
+
+  const handleFinish = useCallback(() => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: unit_id,
+        stationId,
+        isSuccessfullyConnected: true,
+      },
+    });
+    dispatch((state) => {
+      const routes = [];
+      return CommonActions.reset({
+        ...state,
+        ...routes.push({ name: Routes.Dashboard, key: Routes.Dashboard }),
+        index: routes.length - 1,
+      });
+    });
+  }, [dispatch, navigate, stationId, unit_id]);
+
+  return (
+    <>
+      <SafeAreaView style={styles.wrap}>
+        <ScrollView>
+          <View style={styles.body}>
+            <IconOutline name="check-circle" size={28} color={Colors.Green6} />
+            <Text bold style={styles.connectingText}>
+              {t('successfully_connected')}
+            </Text>
+            <Text size={14} style={styles.textHome}>
+              Home - {nameSubUnit}
+            </Text>
+            {listSelectDevice.map((item) => (
+              <DeviceItem
+                icon={item?.icon_kit}
+                name={item?.name}
+                itemId={item.id}
+              />
+            ))}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+      <View style={styles.ViewButtonBottom}>
+        <ViewButtonBottom
+          leftTitle={t('continue')}
+          onLeftClick={handleContinue}
+          rightTitle={t('finish')}
+          onRightClick={handleFinish}
+          accessibilityLabelPrefix={
+            AccessibilityLabel.PREFIX.BUTTON_FINISH_SMART_ACCOUNT
+          }
+        />
+      </View>
+    </>
+  );
+});
+
+export default SuccessfullyConnected;