@eohjsc/react-native-smart-city 0.2.84 → 0.2.87

package/src/commons/ConnectingProcess/index.js

@@ -0,0 +1,205 @@
+import React, { useEffect, useCallback, useState } from 'react';
+import { SafeAreaView, View, TouchableOpacity } from 'react-native';
+import { useTranslations } from '../../hooks/Common/useTranslations';
+import Routes from '../../utils/Route';
+import { useNavigation } from '@react-navigation/native';
+import * as Progress from 'react-native-progress';
+import ImageSuccessfully from '../../Images/Common/SuccessfullyConnected.svg';
+
+import Text from '../Text';
+import { axiosPost } from '../../utils/Apis/axios';
+import { API, Colors, Constants } from '../../configs';
+import styles from './styles';
+import DeviceItem from './DeviceItem/DeviceItem';
+import { useSCContextSelector } from '../../context';
+
+const ConnectingProcess = ({ route }) => {
+  const { navigate, goBack } = useNavigation();
+  const t = useTranslations();
+
+  const {
+    scan_sensor_data,
+    gateway,
+    station,
+    unit,
+    unit_id,
+    unit_name,
+    devicePrefixName,
+    wifi_ssid,
+    wifi_pass,
+    chip_id,
+  } = route.params;
+  const [percent, setPercent] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [sensor, setSensor] = useState(null);
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
+  useEffect(() => {
+    processLoading();
+  }, [processLoading]);
+
+  const processLoading = useCallback(() => {
+    let interval;
+    if (isLoading) {
+      interval = setInterval(() => {
+        setPercent((prev) => {
+          if (prev === 1) {
+            clearInterval(interval);
+            return 1;
+          } else {
+            return prev + 0.2;
+          }
+        });
+      }, 180);
+    } else {
+      clearInterval(interval);
+    }
+  }, [isLoading]);
+
+  const ConnectingDevice = useCallback(async () => {
+    setIsLoading(true);
+    switch (devicePrefixName) {
+      case 'SENSOR':
+        {
+          const body = { imei: scan_sensor_data?.imei, chip: gateway?.id };
+          const { success, data } = await axiosPost(
+            API.SUB_UNIT.SENSOR_SCAN(station.id),
+            body
+          );
+          if (success) {
+            setSensor(data);
+          } else {
+            goBack();
+          }
+        }
+        break;
+      case 'ROBOT': {
+        const { success, data } = await axiosPost(API.UNIT.CHIP_SCAN(unit.id), {
+          imei: gateway?.imei,
+          qr_code: scan_sensor_data?.imei,
+          name: gateway?.model,
+          station: station?.id,
+          wifi_ssid: wifi_ssid,
+          wifi_pass: wifi_pass,
+          phone: user?.phone_number,
+        });
+        if (success) {
+          setSensor(data);
+        } else {
+          goBack();
+        }
+        break;
+      }
+      case 'LITE': {
+        const { success } = await axiosPost(API.UNIT.ADD_GATEWAY(unit_id), {
+          chip: chip_id,
+          imei: gateway?.imei,
+          chip_name: gateway?.model,
+        });
+        if (success) {
+          setSensor({ name: gateway?.model });
+        } else {
+          goBack();
+        }
+        break;
+      }
+    }
+    setIsLoading(false);
+  }, [
+    devicePrefixName,
+    scan_sensor_data?.imei,
+    gateway?.id,
+    gateway?.imei,
+    gateway?.model,
+    station,
+    goBack,
+    unit,
+    wifi_ssid,
+    wifi_pass,
+    user?.phone_number,
+    unit_id,
+    chip_id,
+  ]);
+
+  const Connecting = useCallback(() => {
+    return (
+      <>
+        <View style={styles.progressBar}>
+          <View style={styles.connecting}>
+            <Text type="H4" bold>
+              {t('connecting')}
+            </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>
+      </>
+    );
+  }, [percent, t]);
+
+  const ConnectingSuccess = useCallback(() => {
+    return (
+      <View style={styles.ConnectingSuccess}>
+        <ImageSuccessfully />
+        <Text bold style={styles.connectingText}>
+          {t('successfully_connected')}
+        </Text>
+        <Text size={14} style={styles.textHome}>
+          {`${unit?.name || unit_name} ${
+            station?.name !== undefined ? '- ' + station?.name : ''
+          }`}
+        </Text>
+        <DeviceItem icon={sensor?.icon_kit} name={sensor?.name} />
+      </View>
+    );
+  }, [sensor?.icon_kit, sensor?.name, station?.name, t, unit?.name, unit_name]);
+
+  const handleDone = useCallback(() => {
+    navigate(Routes.UnitStack, {
+      screen: Routes.UnitDetail,
+      params: {
+        unitId: unit?.id || unit_id,
+        unitData: unit,
+        routeName: 'DashboardStack',
+        stationId: station?.id,
+      },
+    });
+  }, [navigate, station?.id, unit, unit_id]);
+
+  useEffect(() => {
+    ConnectingDevice();
+  }, [ConnectingDevice]);
+
+  return (
+    <SafeAreaView style={styles.wrap}>
+      <View style={styles.boxText}>
+        <Text bold style={styles.connectingText}>
+          {t('connect_device')}
+        </Text>
+        {!!isLoading && <Connecting />}
+        {!isLoading && <ConnectingSuccess />}
+      </View>
+      {!isLoading && (
+        <TouchableOpacity style={styles.buttonDone} onPress={handleDone}>
+          <Text color={Colors.Primary} type={'H4'}>
+            {t('done')}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </SafeAreaView>
+  );
+};
+
+export default ConnectingProcess;

package/src/commons/ConnectingProcess/styles.js

@@ -0,0 +1,69 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../configs';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+export default StyleSheet.create({
+  wrap: {
+    paddingTop: getStatusBarHeight(true),
+    backgroundColor: Colors.White,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'space-between',
+  },
+  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: {
+    flex: 1,
+  },
+  progressBar: {
+    flexDirection: 'column',
+    marginTop: 180,
+    marginHorizontal: 30,
+  },
+  connecting: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginBottom: 10,
+  },
+  percentLoad: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textPercentLoad: {
+    marginLeft: 10,
+  },
+  ConnectingSuccess: {
+    marginTop: 180,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textHome: {
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  buttonDone: {
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingBottom: getBottomSpace() + 24,
+  },
+});

package/src/commons/Device/DisconnectedView.js

@@ -42,7 +42,7 @@ const DisplayTextDisconnected = memo(({ type }) => {
   return <Text style={styles.redStatus}>{text}</Text>;
 });
 
-const DisconnectedView = memo(({ sensor, type }) => {
+const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
   const t = useTranslations();
   return (
     <View style={styles.statusContainer}>
@@ -74,6 +74,12 @@ const DisconnectedView = memo(({ sensor, type }) => {
           <CircleView size={6} backgroundColor={Colors.Gray8} />
           <Text style={styles.noticeText}>{t('check_the_wifi')}</Text>
         </View>
+        {isDeviceHasBle && (
+          <View style={styles.infoRow}>
+            <CircleView size={6} backgroundColor={Colors.Gray8} />
+            <Text style={styles.noticeText}>{t('check_the_ble')}</Text>
+          </View>
+        )}
       </View>
     </View>
   );

package/src/commons/Device/ItemDevice.js

@@ -14,7 +14,7 @@ import Text from '../../commons/Text';
 import { isDeviceConnected } from '../../iot/RemoteControl/Bluetooth';
 
 import { Colors, Constants } from '../../configs';
-import { TESTID } from '../../configs/Constants';
+import { TESTID, DEVICE_TYPE } from '../../configs/Constants';
 import FImage from '../../commons/FImage';
 
 const marginItem = 12;
@@ -61,11 +61,16 @@ const ItemDevice = memo(
       status === undefined
         ? isNetworkConnected && sensor.is_connected
         : isNetworkConnected && status.is_connected;
-    const isBLEConnected = isDeviceConnected(
+    const isConnectedViaBLE = isDeviceConnected(
       sensor?.remote_control_options?.bluetooth?.address
     );
+    const isConnectedViaGGHome =
+      !!sensor &&
+      sensor?.is_other_device &&
+      !sensor?.device_type !== DEVICE_TYPE.LG_THINQ &&
+      isGGHomeConnected;
     const isConnected =
-      isConnectedViaInternet || isGGHomeConnected || isBLEConnected;
+      isConnectedViaInternet || isConnectedViaGGHome || isConnectedViaBLE;
     const borderColor = isConnected ? Colors.Gray4 : Colors.Red6;
     const textConnected = isConnected ? t('connected') : t('disconnected');
 

package/src/commons/Device/LinearChart.js

@@ -47,45 +47,9 @@ const chartOptions = {
       text: '',
     },
     labels: {
-      formatter: function (value) {
-        const time = new Date(this.value || value);
-        let date = ('0' + time.getDate()).slice(-2);
-        let month = ('0' + (time.getMonth() + 1)).slice(-2);
-        return `${date}.${month}`;
-      },
-    },
-    minRange: 3600 * 24 * 1000,
-  },
-  plotOptions: {
-    series: {
-      events: {
-        legendItemClick: function () {
-          const { index, visible, chart } = this;
-          const { series } = chart;
-          series.forEach((serie, i) => {
-            if (i !== index) {
-              serie.visible ? serie.show() : serie.hide();
-            }
-          });
-          const isHiding = (serie, i) => {
-            if (i === index) {
-              return visible;
-            }
-            return !serie.visible;
-          };
-          if (this.chart.series.every(isHiding)) {
-            this.chart.yAxis[0].update({
-              min: 0,
-              max: 100,
-            });
-          } else {
-            this.chart.yAxis[0].update({
-              min: undefined,
-              max: undefined,
-            });
-          }
-        },
-      },
+      align: 'center',
+      padding: 70,
+      format: '{value:%d.%m %H:%M}',
     },
   },
 };

package/src/commons/Device/__test__/DisconnectedView.test.js

@@ -5,9 +5,9 @@ import renderer, { act } from 'react-test-renderer';
 import { SCProvider } from '../../../context';
 import { mockSCStore } from '../../../context/mockStore';
 
-const wrapComponent = (sensor) => (
+const wrapComponent = (sensor, isDeviceHasBle) => (
   <SCProvider initState={mockSCStore({})}>
-    <DisconnectedView sensor={sensor} />
+    <DisconnectedView sensor={sensor} isDeviceHasBle={isDeviceHasBle} />
   </SCProvider>
 );
 
@@ -63,4 +63,15 @@ describe('Test DisconnectedView', () => {
     const Views = instance.findAllByType(View);
     expect(Views).toHaveLength(15);
   });
+
+  test('render DisconnectedView text check bluetooth', () => {
+    const isDeviceHasBle = true;
+    const sensor = { icon: 'test' };
+    act(() => {
+      tree = renderer.create(wrapComponent(sensor, isDeviceHasBle));
+    });
+    const instance = tree.root;
+    const Views = instance.findAllByType(View);
+    expect(Views).toHaveLength(17);
+  });
 });

package/src/commons/Form/TextInputPassword.js

@@ -111,7 +111,7 @@ const styles = StyleSheet.create({
   icons: {
     position: 'absolute',
     right: 0,
-    top: 7,
+    top: -5,
     bottom: 0,
     width: 40,
     justifyContent: 'center',

package/src/commons/MediaPlayer/__test__/index.test.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { TouchableOpacity } from 'react-native';
+import MediaPlay from '../index';
+
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+  };
+});
+
+const wrapComponent = (props) => (
+  <SCProvider initState={mockSCStore({})}>
+    <MediaPlay {...props} />
+  </SCProvider>
+);
+
+describe('Test MediaPlayer', () => {
+  let tree, props;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+    props = {
+      uri: 'uri',
+      previewUri: 'previewUri',
+      thumbnail: 'thumbnail',
+      background: 'background',
+    };
+  });
+
+  it('Test render', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(props));
+    });
+    const instance = tree.root;
+    const pauseButton = instance.findByType(TouchableOpacity);
+    await act(async () => {
+      await pauseButton.props.onPress();
+    });
+    jest.runAllTimers();
+  });
+});

package/src/commons/RowItem/index.js

@@ -21,7 +21,8 @@ export const RowItem = memo(
     type, //primary | disable | undefined
     leftIcon,
     text,
-    subtext,
+    isShowSubText = true,
+    subtext = '',
     subtextColor = Colors.Gray6,
     rightComponent,
     onPress,
@@ -40,14 +41,18 @@ export const RowItem = memo(
         <View style={styles.wrapItem}>
           <TouchableOpacity onPress={onPress} disabled={type === 'disable'}>
             <View style={styles.Border}>
-              <View style={styles.paddingLeft16}>
-                <CircleView size={40} backgroundColor={circleColor} center>
-                  {leftIcon}
-                </CircleView>
-              </View>
+              {!!leftIcon && (
+                <View style={styles.paddingLeft16}>
+                  <CircleView size={40} backgroundColor={circleColor} center>
+                    {leftIcon}
+                  </CircleView>
+                </View>
+              )}
               <View style={styles.columeFlex}>
                 <Text style={styles.titleName}> {text}</Text>
-                <Text style={styles.status}> {subtext}</Text>
+                {!!isShowSubText && (
+                  <Text style={styles.status}> {subtext}</Text>
+                )}
               </View>
               {!!rightComponent && (
                 <View style={styles.endFlex}>{rightComponent}</View>

package/src/commons/SubUnit/ShortDetail.js

@@ -4,7 +4,7 @@ import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Images, Device, API } from '../../configs';
-import { SubUnitName, TESTID } from '../../configs/Constants';
+import { TESTID } from '../../configs/Constants';
 import { Section } from '../Section';
 import Text from '../Text';
 import ItemDevice from '../Device/ItemDevice';
@@ -104,28 +104,16 @@ const ShortDetailSubUnit = ({
   };
 
   const handleOnAddNew = () => {
-    if (!station.isFavorites) {
-      navigate(Routes.AddDeviceStack, {
-        screen: Routes.ScanSensorQR,
-        params: {
-          station_id: station.id,
-          unit_id: unit.id,
-          unit_name: unit.name,
-        },
-      });
-    } else {
-      alert(t('feature_under_development'));
-    }
+    navigate(Routes.AddDeviceStack, {
+      screen: Routes.ScanSensorQR,
+      params: {
+        station_id: station?.id,
+        unit_id: unit.id,
+        unit_name: unit.name,
+      },
+    });
   };
 
-  const itemAddNewTitle = t(
-    station?.isFavorites
-      ? 'add_to_favorites'
-      : station?.name === SubUnitName.smart
-      ? 'add_script'
-      : 'add_new'
-  );
-
   return (
     <Section style={styles.noShadow}>
       {renderCamera()}
@@ -156,7 +144,7 @@ const ShortDetailSubUnit = ({
               status={sensorsStatus.find((s) => s.id === sensor.id)}
             />
           ))}
-        <ItemAddNew title={itemAddNewTitle} onAddNew={handleOnAddNew} />
+        <ItemAddNew title={t('add_new_device')} onAddNew={handleOnAddNew} />
       </View>
     </Section>
   );