@eohjsc/react-native-smart-city 0.2.82 → 0.2.85

package/src/screens/AddNewGateway/PlugAndPlay/GatewayWifiList.js

@@ -1,10 +1,16 @@
-import React, { memo, useState, useCallback } from 'react';
+import React, {
+  memo,
+  useState,
+  useCallback,
+  useContext,
+  useEffect,
+} from 'react';
 import {
   View,
   StyleSheet,
   TouchableOpacity,
   ScrollView,
-  TextInput,
+  ActivityIndicator,
 } from 'react-native';
 import { HeaderCustom } from '../../../commons/Header';
 import { Colors } from '../../../configs';
@@ -12,6 +18,9 @@ import Text from '../../../commons/Text';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import WifiIcon from '../../../../assets/images/wifi.svg';
 import ButtonPopup from '../../../commons/ButtonPopup';
+import TextInputPassword from '../../../commons/Form/TextInputPassword';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { Action } from '../../../context/actionType';
 
 const GatewayWifiList = memo(({ route }) => {
   const { list_wifi, socket } = route.params;
@@ -20,6 +29,11 @@ const GatewayWifiList = memo(({ route }) => {
   const [isShowPopupPassword, setIsShowPopupPassword] = useState(false);
   const [password, setPassword] = useState('');
   const [selectedWifi, setSelectedWifi] = useState('');
+  const { setAction } = useContext(SCContext);
+
+  const isConnectWifiGateway = useSCContextSelector(
+    (state) => state.app.isConnectWifiGateway
+  );
 
   const showPopupPassword = (ssid) => {
     setIsShowPopupPassword(true);
@@ -32,21 +46,27 @@ const GatewayWifiList = memo(({ route }) => {
     },
     [setPassword]
   );
-
-  const connectWifi = async () => {
-    await socket.send(
-      JSON.stringify({
-        type: 'connect',
-        data: { wifi: { ssid: selectedWifi, pass: password } },
-      }),
-      undefined,
-      undefined,
-      54321,
-      '192.168.27.1',
-      undefined
-    );
-  };
-
+  const connectWifi = useCallback(async () => {
+    if (!isConnectWifiGateway) {
+      await socket.send(
+        JSON.stringify({
+          type: 'connect',
+          data: { wifi: { ssid: selectedWifi, pass: password } },
+        }),
+        undefined,
+        undefined,
+        54321,
+        '192.168.27.1',
+        undefined
+      );
+      setAction(Action.IS_CONNECT_WIFI_GATEWAY, true);
+    }
+  }, [isConnectWifiGateway, password, selectedWifi, setAction, socket]);
+  useEffect(() => {
+    if (!isConnectWifiGateway) {
+      setIsShowPopupPassword(false);
+    }
+  }, [isConnectWifiGateway]);
   return (
     <View style={styles.screen}>
       <HeaderCustom title={t('connect_device')} isShowSeparator />
@@ -79,19 +99,28 @@ const GatewayWifiList = memo(({ route }) => {
 
       <ButtonPopup
         visible={isShowPopupPassword}
-        mainTitle={t('connect')}
-        onPressMain={() => connectWifi()}
+        mainTitle={
+          isConnectWifiGateway ? (
+            <ActivityIndicator color={Colors.White} size={'small'} />
+          ) : (
+            t('connect')
+          )
+        }
+        onPressMain={connectWifi}
         secondaryTitle={t('cancel')}
+        typeSecondary={isConnectWifiGateway ? 'disabled' : 'cancel'}
         onPressSecondary={() => setIsShowPopupPassword(false)}
         hideClose={true}
       >
         <>
           <Text>{t('enter_wifi_password')}</Text>
-          <TextInput
-            secureTextEntry={true}
-            style={styles.input}
-            onChangeText={onPasswordChange}
+          <TextInputPassword
+            secureTextEntry
+            placeholder={t('password')}
+            onChange={onPasswordChange}
             value={password}
+            textInputStyle={styles.input}
+            selectionColor={Colors.Primary}
           />
         </>
       </ButtonPopup>

package/src/screens/AddNewGateway/SelectGateway.js

@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import { SafeAreaView, ScrollView, TouchableOpacity, View } from 'react-native';
+
+import { API } from '../../configs';
+import { Section, RadioCircle, ViewButtonBottom } from '../../commons';
+import { axiosGet } from '../../utils/Apis/axios';
+import Text from '../../commons/Text';
+import Routes from '../../utils/Route';
+import { TESTID } from '../../configs/Constants';
+import styles from './SelectGatewayStyles';
+
+const AddNewGatewaySelectGateway = ({ route }) => {
+  const t = useTranslations();
+  const navigation = useNavigation();
+  const isFocused = useIsFocused();
+  const { addType, unit_id, scan_sensor_data, devicePrefixName } = route.params;
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+
+  const [gateways, setGateways] = useState([]);
+  const [title, setTitle] = useState('');
+  const [subTitle, setSubTitle] = useState('');
+  const [gateway, setGateway] = useState({});
+
+  useEffect(() => {
+    switch (addType) {
+      case 'AddDeviceNewFlow':
+        setTitle(t('text_select_a_gateway'));
+        setSubTitle(t('text_select_a_gateway'));
+        break;
+      default:
+        setTitle(t('text_select_a_gateway'));
+        setSubTitle(t('text_select_a_gateway'));
+        break;
+    }
+  }, [title, subTitle, addType, t]);
+
+  const fetchDetails = useCallback(async () => {
+    const { success, data } = await axiosGet(
+      API.CHIP.GET_CHIPS_FROM_UNIT(unit_id)
+    );
+    if (success) {
+      setGateways(data);
+    }
+  }, [unit_id]);
+
+  useEffect(() => {
+    isFocused && fetchDetails();
+  }, [fetchDetails, isFocused]);
+
+  const onPressNext = useCallback(() => {
+    switch (addType) {
+      case 'AddDeviceNewFlow':
+        navigation.navigate(Routes.AddCommonSelectSubUnit, {
+          unit_id: unit_id,
+          addType: 'AddDeviceNewFlow',
+          scan_sensor_data,
+          gateway,
+          devicePrefixName,
+        });
+        break;
+      default:
+        break;
+    }
+  }, [
+    addType,
+    devicePrefixName,
+    gateway,
+    navigation,
+    scan_sensor_data,
+    unit_id,
+  ]);
+
+  const handleSelectIndex = (index) => {
+    setGateway(gateways[index]);
+    if (index !== selectedIndex) {
+      setSelectedIndex(index);
+    } else {
+      setSelectedIndex(-1);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text semibold style={styles.title}>
+        {title}
+      </Text>
+      <Text style={styles.subtitle}>{subTitle}</Text>
+      <View style={styles.contentContainer}>
+        <ScrollView
+          style={styles.scrollContainer}
+          showsVerticalScrollIndicator={false}
+        >
+          <Section type={'border'}>
+            {gateways.map((item, index) => (
+              <TouchableOpacity
+                key={index}
+                style={styles.rowContainer}
+                onPress={() => handleSelectIndex(index)}
+              >
+                <RadioCircle
+                  active={selectedIndex === index}
+                  testID={TESTID.SELECT_GATEWAY_RADIO_BUTTON}
+                />
+                <TouchableOpacity
+                  style={styles.row}
+                  onPress={() => handleSelectIndex(index)}
+                  testID={TESTID.SELECT_GATEWAY_NAME}
+                >
+                  <Text style={styles.text} testID={TESTID.SELECT_GATEWAY_NAME}>
+                    {item.name}
+                  </Text>
+                </TouchableOpacity>
+              </TouchableOpacity>
+            ))}
+          </Section>
+        </ScrollView>
+        <ViewButtonBottom
+          leftTitle={t('cancel')}
+          onLeftClick={() => navigation.goBack()}
+          rightTitle={t('next')}
+          rightDisabled={selectedIndex === -1}
+          onRightClick={onPressNext}
+          testIDPrefix={TESTID.PREFIX.SELECT_UNIT}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default AddNewGatewaySelectGateway;

package/src/screens/AddNewGateway/SelectGatewayStyles.js

@@ -0,0 +1,55 @@
+import { Colors } from '../../configs';
+
+import { StyleSheet, StatusBar, Platform } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.Gray2,
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
+  },
+  contentContainer: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  scrollContainer: {
+    width: '100%',
+    flex: 1,
+  },
+  title: {
+    color: Colors.Gray9,
+    fontSize: 20,
+    lineHeight: 28,
+    marginTop: 8,
+    marginBottom: 4,
+    marginLeft: 16,
+  },
+  subtitle: {
+    color: Colors.Gray8,
+    fontSize: 14,
+    lineHeight: 22,
+    marginLeft: 16,
+    marginBottom: 16,
+  },
+  row: {
+    flex: 1,
+    paddingVertical: 16,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+    marginRight: 24,
+    marginLeft: 16,
+  },
+  rowContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 16,
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    color: Colors.Gray9,
+  },
+  buttonAdd: {
+    marginHorizontal: 16,
+  },
+});

package/src/screens/AddNewGateway/__test__/SetupGateway.test.js

@@ -7,9 +7,6 @@ import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 import SetupGatewayWifi from '../SetupGatewayWifi';
 import DisplayChecking from '../../../commons/DisplayChecking';
-import { AlertAction } from '../../../commons';
-import _TextInputPassword from '../../../commons/Form/TextInputPassword';
-import _TextInput from '../../../commons/Form/TextInput';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -90,53 +87,4 @@ describe('Test SetupGatewayWifi', () => {
     const displayLoadingConnect = instance.findByType(DisplayChecking);
     expect(displayLoadingConnect.props.visible).toBeTruthy();
   });
-
-  test('test render AlertAction', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const alertAction = instance.findByType(AlertAction);
-    await act(async () => {
-      alertAction.props.hideModal();
-      alertAction.props.leftButtonClick();
-    });
-    expect(alertAction).toBeDefined();
-  });
-
-  test('test render _TextInputPassword', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const textInputPassword = instance.findByType(_TextInputPassword);
-    await act(async () => {
-      textInputPassword.props.onChange('new_name');
-    });
-    expect(textInputPassword.props.value).toEqual('new_name');
-  });
-
-  test('test render TextInput', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const textInput = instance.findByType(_TextInput);
-    await act(async () => {
-      textInput.props.onChange('new_text');
-    });
-    expect(textInput.props.value).toEqual('new_text');
-  });
-
-  test('test render DisplayChecking', async () => {
-    await act(async () => {
-      tree = await create(wrapComponent(route));
-    });
-    const instance = tree.root;
-    const displayChecking = instance.findByType(DisplayChecking);
-    await act(async () => {
-      displayChecking.props.onClose();
-    });
-    expect(displayChecking).toBeDefined();
-  });
 });

package/src/screens/Device/EditDevice/__test__/EditDevice.test.js

@@ -90,7 +90,7 @@ describe('Test EditDevice', () => {
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
-    expect(axios.patch).toHaveBeenCalledWith(API.SENSOR.RENAME_SENSOR(1), {
+    expect(axios.patch).toHaveBeenCalledWith(API.SENSOR.SENSOR_DETAIL(1), {
       name: 'new_name',
     });
     expect(alertAction.props.visible).toBeFalsy();
@@ -119,7 +119,7 @@ describe('Test EditDevice', () => {
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
-    expect(axios.delete).toHaveBeenCalledWith(API.SENSOR.REMOVE_SENSOR(1));
+    expect(axios.delete).toHaveBeenCalledWith(API.SENSOR.SENSOR_DETAIL(1));
     expect(alertAction.props.visible).toBeFalsy();
     expect(mockPop).toHaveBeenCalled();
   });

package/src/screens/Device/EditDevice/index.js

@@ -29,7 +29,7 @@ const EditDevice = memo(() => {
     useEditDevice();
   const renameSensor = useCallback(async () => {
     const { success, data } = await axiosPatch(
-      API.SENSOR.RENAME_SENSOR(sensor?.id),
+      API.SENSOR.SENSOR_DETAIL(sensor?.id),
       {
         name: inputName,
       }
@@ -53,7 +53,7 @@ const EditDevice = memo(() => {
 
   const deleteSensor = useCallback(async () => {
     hideAlertAction();
-    const { success } = await axiosDelete(API.SENSOR.REMOVE_SENSOR(sensor?.id));
+    const { success } = await axiosDelete(API.SENSOR.SENSOR_DETAIL(sensor?.id));
 
     if (success) {
       navigation.pop(2);

package/src/screens/Device/__test__/detail.test.js

@@ -93,7 +93,7 @@ describe('test DeviceDetail', () => {
   beforeEach(() => {
     route = {
       params: {
-        unit: {
+        unitData: {
           id: 1,
           name: 'Unit name',
           address: '298 Dien Bien Phu',
@@ -105,10 +105,11 @@ describe('test DeviceDetail', () => {
           id: 2,
           name: 'Station name',
         },
-        sensor: {
+        sensorData: {
           id: 1,
           is_managed_by_backend: true,
           station: { id: 2, name: 'Station name' },
+          name: 'Sensor name',
         },
         title: 'Button',
       },
@@ -252,7 +253,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action1,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
 
     const button2 = instance.find(
@@ -263,7 +266,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action2,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
 
     const button3 = instance.find(
@@ -274,7 +279,9 @@ describe('test DeviceDetail', () => {
     });
     expect(axios.post).toHaveBeenCalledWith(API.SENSOR.QUICK_ACTION(1), {
       key: responseDisplay.data.items[1].configuration.configuration.action3,
+      data: null,
       source: 'internet',
+      action_name: undefined,
     });
   });
 
@@ -628,7 +635,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('not fetch value if not managed by backend', async () => {
-    route.params.sensor.is_managed_by_backend = false;
+    route.params.sensorData.is_managed_by_backend = false;
 
     await act(async () => {
       tree = await create(wrapComponent(account, route));
@@ -638,7 +645,7 @@ describe('test DeviceDetail', () => {
   });
 
   test('render CurrentRainSensor but is other device', async () => {
-    route.params.sensor.is_other_device = true;
+    route.params.sensorData.is_other_device = true;
     route.params.isGGHomeConnected = true;
 
     const responseDisplay = {
@@ -708,9 +715,9 @@ describe('test DeviceDetail', () => {
   });
 
   test('Add device to Favourites', async () => {
-    const unit_id = route.params.unit.id;
+    const unit_id = route.params.unitData.id;
     const station_id = route.params.station.id;
-    const sensor = route.params.sensor;
+    const sensor = route.params.sensorData;
     sensor.is_favourite = false;
 
     await act(async () => {
@@ -736,9 +743,9 @@ describe('test DeviceDetail', () => {
   });
 
   test('Remove device from Favourites', async () => {
-    const unit_id = route.params.unit.id;
+    const unit_id = route.params.unitData.id;
     const station_id = route.params.station.id;
-    const sensor = route.params.sensor;
+    const sensor = route.params.sensorData;
     sensor.is_favourite = true;
 
     await act(async () => {
@@ -810,12 +817,12 @@ describe('test DeviceDetail', () => {
       await menu.props.onItemClick(gotoActivityLog);
     });
     expect(mockedNavigate).toHaveBeenCalledWith(Routes.ActivityLog, {
-      id: route.params.sensor.id,
+      id: route.params.sensorData.id,
       type: 'action',
-      share: route.params.unit,
+      share: route.params.unitData,
       filterEnabled: {
         date: true,
-        user: Boolean(route.params.unit.id),
+        user: Boolean(route.params.unitData.id),
       },
     });
   });

package/src/screens/Device/components/SensorConnectStatusViewHeader.js

@@ -3,7 +3,7 @@ import { ConnectedViewHeader, DisconnectedView } from '../../../commons/Device';
 import { DEVICE_TYPE } from '../../../configs/Constants';
 
 export const SensorConnectStatusViewHeader = (props) => {
-  if (!!props.sensor && !props.sensor.is_other_device) {
+  if (!!props.sensor && !props.sensor?.is_other_device) {
     if (props.connected) {
       return (
         <>
@@ -31,7 +31,7 @@ export const SensorConnectStatusViewHeader = (props) => {
       return <DisconnectedView sensor={props.sensor} />;
     }
   } else {
-    if (props.sensor.device_type === DEVICE_TYPE.LG_THINQ) {
+    if (props.sensor?.device_type === DEVICE_TYPE.LG_THINQ) {
       return (
         <>
           <ConnectedViewHeader lastUpdated={props.lastUpdated} />

package/src/screens/Device/components/SensorDisplayItem.js

@@ -40,8 +40,8 @@ export const SensorDisplayItem = ({
   const t = useTranslations();
   const userId = useSCContextSelector((state) => state.auth.account.user.id);
   const doAction = useCallback(
-    (action, data) => {
-      sendRemoteCommand(sensor, action, data, userId);
+    (action, data, actionName) => {
+      sendRemoteCommand(sensor, action, data, userId, actionName);
     },
     [sensor, userId]
   );