@eohjsc/react-native-smart-city 0.2.45 → 0.2.49

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

@@ -0,0 +1,57 @@
+import React from 'react';
+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.connected) {
+      return (
+        <>
+          <ConnectedViewHeader
+            lastUpdated={props.lastUpdated}
+            isDisplayTime={props.isDisplayTime}
+            showWindDirection={props.showWindDirection}
+          />
+          {props.children}
+        </>
+      );
+    } else if (props.connectedBlt) {
+      return (
+        <>
+          <ConnectedViewHeader
+            lastUpdated={props.lastUpdated}
+            type={'Bluetooth'}
+            isDisplayTime={props.isDisplayTime}
+            showWindDirection={props.showWindDirection}
+          />
+          {props.children}
+        </>
+      );
+    } else {
+      return <DisconnectedView sensor={props.sensor} />;
+    }
+  } else {
+    if (props.sensor.device_type === DEVICE_TYPE.LG_THINQ) {
+      return (
+        <>
+          <ConnectedViewHeader lastUpdated={props.lastUpdated} />
+          {props.children}
+        </>
+      );
+    } else {
+      if (props.isGGHomeConnected) {
+        return (
+          <>
+            <ConnectedViewHeader
+              lastUpdated={props.lastUpdated}
+              type={'GoogleHome'}
+            />
+            {props.children}
+          </>
+        );
+      } else {
+        return <DisconnectedView sensor={props.sensor} type={'GoogleHome'} />;
+      }
+    }
+  }
+};

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

@@ -0,0 +1,127 @@
+import React, { useCallback } from 'react';
+import { View } from 'react-native';
+import ActionGroup from '../../../commons/ActionGroup';
+import { Card } from '../../../commons/CardShadow';
+import MediaPlayer from '../../../commons/MediaPlayer';
+import { Device } from '../../../configs';
+import { TESTID } from '../../../configs/Constants';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import { standardizeCameraScreenSize } from '../../../utils/Utils';
+import { DetailHistoryChart } from './DetailHistoryChart';
+import { sendRemoteCommand } from '../../../iot/RemoteControl';
+import CurrentRainSensor from '../../../commons/Device/RainningSensor/CurrentRainSensor';
+import PMSensorIndicatior from '../../../commons/Device/PMSensor/PMSensorIndicatior';
+import Anemometer from '../../../commons/Device/WindSpeed/Anemometer';
+import styles from '../styles';
+import Compass from '../../../commons/Device/WindDirection/Compass';
+import DeviceAlertStatus from '../../../commons/Device/DeviceAlertStatus';
+import FlatListItems from '../../../commons/Device/FlatListItems';
+import ListQualityIndicator from '../../../commons/Device/WaterQualitySensor/ListQualityIndicator';
+import EmergencyDetail from '../../../commons/Device/Emergency/EmergencyDetail';
+import EmergencyButton from '../../../commons/Device/Emergency/EmergencyButton';
+import FooterInfo from '../../../commons/Device/FooterInfo';
+
+const { standardizeHeight, standardizeWidth } = standardizeCameraScreenSize(
+  Device.screenWidth - 32
+);
+
+export const SensorDisplayItem = ({
+  item,
+  sensor,
+  emergency,
+  getData,
+  maxValue,
+  offsetTitle,
+  setOffsetTitle,
+  setShowWindDirection,
+  background,
+}) => {
+  const t = useTranslations();
+  const doAction = useCallback(
+    (action, data) => {
+      sendRemoteCommand(sensor, action, data);
+    },
+    [sensor]
+  );
+  if (item.configuration.type === 'compass') {
+    setShowWindDirection(true);
+  }
+  switch (item.type) {
+    case 'camera':
+      return (
+        <Card title={t('camera')}>
+          <View style={styles.mediaContainer}>
+            <MediaPlayer
+              testID={TESTID.DEVICE_DETAIL_MEDIA_PLAYER}
+              uri={item.configuration.uri}
+              style={{ height: standardizeHeight }}
+              ratioWidth={standardizeWidth - 32}
+              thumbnail={{
+                uri: item.configuration.preview_uri,
+              }}
+              background={{ uri: background }}
+            />
+          </View>
+        </Card>
+      );
+    case 'action':
+      return (
+        <ActionGroup
+          testID={TESTID.DEVICE_DETAIL_ACTION_GROUP}
+          actionGroup={item.configuration}
+          doAction={doAction}
+          sensor={sensor}
+        />
+      );
+    case 'history':
+      return <DetailHistoryChart item={item} sensor={sensor} />;
+    case 'value':
+      switch (item.configuration.type) {
+        case 'circle':
+          return <CurrentRainSensor data={getData(item)} />;
+        case 'simple_list':
+          return (
+            <PMSensorIndicatior
+              data={getData(item)}
+              style={styles.simpleList}
+            />
+          );
+        case 'gauge':
+          return <Anemometer data={getData(item)} maxValue={maxValue} />;
+        case 'compass':
+          return <Compass data={getData(item)} />;
+        case 'alert_status':
+          return (
+            <DeviceAlertStatus
+              data={getData(item)}
+              style={styles.marginLeft}
+              offsetTitle={offsetTitle}
+              setOffsetTitle={setOffsetTitle}
+            />
+          );
+        case 'flat_list':
+          return (
+            <FlatListItems
+              title={item.configuration.title}
+              data={getData(item)}
+              style={[styles.marginLeft, styles.marginVertical]}
+              offsetTitle={offsetTitle}
+            />
+          );
+        default:
+          return <ListQualityIndicator data={getData(item)} />;
+      }
+    case 'emergency':
+      switch (item.configuration.type) {
+        case 'detail':
+          return <EmergencyDetail item={item} />;
+        default:
+          return <EmergencyButton emergency={emergency} />;
+      }
+    case 'info':
+      return <FooterInfo data={item.configuration} />;
+    default:
+      break;
+  }
+  return false;
+};

package/src/screens/Device/detail.js

@@ -1,5 +1,4 @@
 import React, {
-  memo,
   useCallback,
   useEffect,
   useMemo,
@@ -7,7 +6,6 @@ import React, {
   useRef,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { connect } from 'react-redux';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
 import _ from 'lodash';
@@ -18,55 +16,42 @@ import { Icon } from '@ant-design/react-native';
 
 import { useCountUp } from './hooks/useCountUp';
 import { getData as getLocalData } from '../../utils/Storage';
-import { API, Colors, Device } from '../../configs';
+import { API, Colors } from '../../configs';
 import { axiosGet, axiosPost } from '../../utils/Apis/axios';
 import {
   isDeviceConnected,
   scanBluetoothDevices,
 } from '../../iot/RemoteControl/Bluetooth';
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
-import ActionGroup, { getActionComponent } from '../../commons/ActionGroup';
-import { ConnectedViewHeader, DisconnectedView } from '../../commons/Device';
-import HistoryChart from '../../commons/Device/HistoryChart';
-import PMSensorIndicatior from '../../commons/Device/PMSensor/PMSensorIndicatior';
-import CurrentRainSensor from '../../commons/Device/RainningSensor/CurrentRainSensor';
-import ListQualityIndicator from '../../commons/Device/WaterQualitySensor/ListQualityIndicator';
-import Anemometer from '../../commons/Device/WindSpeed/Anemometer';
-import Compass from '../../commons/Device/WindDirection/Compass';
-import DeviceAlertStatus from '../../commons/Device/DeviceAlertStatus';
-import FlatListItems from '../../commons/Device/FlatListItems';
-import MediaPlayer from '../../commons/MediaPlayer';
+import { getActionComponent } from '../../commons/ActionGroup';
 import { AlertSendConfirm } from '../../commons/EmergencyButton/AlertSendConfirm';
 import { AlertSent } from '../../commons/EmergencyButton/AlertSent';
 import {
   useAlertResolveEmergency,
   useEmergencyButton,
 } from './hooks/useEmergencyButton';
-import EmergencyDetail from '../../commons/Device/Emergency/EmergencyDetail';
 import BottomButtonView from '../../commons/BottomButtonView';
 import Text from '../../commons/Text';
 import { transformDatetime } from '../../utils/Converter/time';
 import { AlertAction, ButtonPopup, MenuActionMore } from '../../commons';
-import EmergencyButton from '../../commons/Device/Emergency/EmergencyButton';
-import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
-import FooterInfo from '../../commons/Device/FooterInfo';
+import { TESTID } from '../../configs/Constants';
 import Routes from '../../utils/Route';
-import { sendRemoteCommand } from '../../iot/RemoteControl';
 import { usePopover } from '../../hooks/Common';
 import { useConfigGlobalState } from '../../iot/states';
-import { standardizeCameraScreenSize } from '../../utils/Utils';
 import { useNavigation } from '@react-navigation/native';
 import styles from './styles';
-import { Card } from '../../commons/CardShadow';
 import { useIsOwnerOfUnit, useBoolean } from '../../hooks/Common';
-
-const { standardizeHeight, standardizeWidth } = standardizeCameraScreenSize(
-  Device.screenWidth - 32
-);
-
-const DeviceDetail = ({ account, route }) => {
+import { SensorDisplayItem } from './components/SensorDisplayItem';
+import { useSCContextSelector } from '../../context';
+import { EmergencyCountdown } from './components/EmergencyCountdown';
+import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusViewHeader';
+import { useDisconnectedDevice } from './hooks/useDisconnectedDevice';
+import { useNetInfo } from '@react-native-community/netinfo';
+
+const DeviceDetail = ({ route }) => {
   const t = useTranslations();
   const navigation = useNavigation();
+  const token = useSCContextSelector((state) => state.auth.account.token);
   const [offsetTitle, setOffsetTitle] = useState(1);
   const [display, setDisplay] = useState({ items: [] });
   const [displayValues, setDisplayValues] = useState([]);
@@ -82,7 +67,7 @@ const DeviceDetail = ({ account, route }) => {
   // eslint-disable-next-line no-unused-vars
   const [configValues, setConfigValues] = useConfigGlobalState('configValues');
 
-  const { unit, sensor, isGGHomeConnected } = route.params;
+  const { unit, sensor, isGGHomeConnected, station } = route.params;
   const [isFavourite, setIsFavourite] = useState(sensor.is_favourite);
   const { isOwner } = useIsOwnerOfUnit(unit.user_id);
   const [sensorName, setSensorName] = useState(sensor?.name);
@@ -94,6 +79,10 @@ const DeviceDetail = ({ account, route }) => {
     [sensor]
   );
 
+  useDisconnectedDevice(isConnected, sensorName);
+
+  const netInfo = useNetInfo();
+
   const isShowSetupEmergencyContact =
     display.items.filter(
       (item) =>
@@ -127,7 +116,7 @@ const DeviceDetail = ({ account, route }) => {
   }, [currentUserId, unit]);
 
   const fetchDataDeviceDetail = useCallback(async () => {
-    if (!account.token) {
+    if (!token) {
       return;
     }
     if (!sensor) {
@@ -169,7 +158,7 @@ const DeviceDetail = ({ account, route }) => {
     if (controlResult.success) {
       setControlOptions(controlResult.data);
     }
-  }, [account.token, sensor, setDeviceId, setLastEvent]);
+  }, [token, sensor, setDeviceId, setLastEvent]);
 
   const {
     deviceId: emergencyDeviceId,
@@ -204,30 +193,44 @@ const DeviceDetail = ({ account, route }) => {
     ) {
       menuItems.push({
         route: Routes.ActivityLog,
-        data: { id: sensor.id, type: 'action' },
+        data: {
+          id: sensor.id,
+          type: 'action',
+          filterEnabled: {
+            date: false,
+            user: false,
+          },
+        },
         text: t('activity_log'),
       });
-      if (isOwner) {
-        menuItems.push({
-          text: t('edit'),
-          route: Routes.EditDevice,
-          data: {
-            sensor,
-            setSensorNameDetail: setSensorName,
-            sensorNameDetail: sensorName,
-          },
-        });
-        menuItems.push({
-          route: Routes.ManageAccess,
-          data: { unit, sensor },
-          text: t('manage_access'),
-        });
-      }
+    }
+    if (isOwner) {
+      menuItems.push({
+        text: t('edit'),
+        route: Routes.EditDevice,
+        data: {
+          sensor,
+          setSensorNameDetail: setSensorName,
+          sensorNameDetail: sensorName,
+        },
+      });
+      menuItems.push({
+        route: Routes.ManageAccess,
+        data: { unit, sensor },
+        text: t('manage_access'),
+      });
     }
     if (isShowSetupEmergencyContact) {
       menuItems.push({
         route: Routes.ActivityLog,
-        data: { id: emergencyDeviceId, type: 'emergency_event' },
+        data: {
+          id: emergencyDeviceId,
+          type: 'emergency_event',
+          filterEnabled: {
+            date: false,
+            user: false,
+          },
+        },
         text: t('activity_log'),
       });
     }
@@ -384,86 +387,36 @@ const DeviceDetail = ({ account, route }) => {
 
   // replace isConnected=True to see template
   const renderSensorConnected = () => {
-    if (!!sensor && !sensor.is_other_device) {
-      if (isDeviceConnectedViaBle || isConnected) {
-        return (
-          <>
-            <ConnectedViewHeader
-              lastUpdated={lastUpdated}
-              isDisplayTime={
-                isShowSetupEmergencyContact ? false : isDisplayTime
-              }
-              showWindDirection={showWindDirection}
-            />
-            {display.items.map((item) => (
-              <SensorDisplayItem
-                testID={TESTID.SENSOR_DISPLAY_ITEM}
-                key={item.id.toString()}
-                item={item}
-                emergency={onEmergencyButtonPress}
-                sensor={sensor}
-                getData={getData}
-                maxValue={maxValue}
-                offsetTitle={offsetTitle}
-                setOffsetTitle={setOffsetTitle}
-                setShowWindDirection={setShowWindDirection}
-              />
-            ))}
-          </>
-        );
-      } else {
-        return <DisconnectedView sensor={sensor} />;
-      }
-    } else {
-      if (sensor.device_type === DEVICE_TYPE.LG_THINQ) {
-        return (
-          <>
-            <ConnectedViewHeader lastUpdated={lastUpdated} />
-            {display.items.map((item) => (
-              <SensorDisplayItem
-                testID={TESTID.SENSOR_DISPLAY_ITEM}
-                key={item.id.toString()}
-                item={item}
-                emergency={onEmergencyButtonPress}
-                sensor={sensor}
-                getData={getData}
-                maxValue={maxValue}
-                offsetTitle={offsetTitle}
-                setOffsetTitle={setOffsetTitle}
-                setShowWindDirection={setShowWindDirection}
-              />
-            ))}
-          </>
-        );
-      } else {
-        if (isGGHomeConnected) {
-          return (
-            <>
-              <ConnectedViewHeader
-                lastUpdated={lastUpdated}
-                type={'GoogleHome'}
-              />
-              {display.items.map((item) => (
-                <SensorDisplayItem
-                  testID={TESTID.SENSOR_DISPLAY_ITEM}
-                  key={item.id.toString()}
-                  item={item}
-                  emergency={onEmergencyButtonPress}
-                  sensor={sensor}
-                  getData={getData}
-                  maxValue={maxValue}
-                  offsetTitle={offsetTitle}
-                  setOffsetTitle={setOffsetTitle}
-                  setShowWindDirection={setShowWindDirection}
-                />
-              ))}
-            </>
-          );
-        } else {
-          return <DisconnectedView sensor={sensor} type={'GoogleHome'} />;
+    return (
+      <SensorConnectStatusViewHeader
+        sensor={sensor}
+        connected={netInfo.isConnected && isConnected}
+        connectedBlt={
+          (!netInfo.isConnected || (netInfo.isConnected && !isConnected)) &&
+          isDeviceConnectedViaBle
         }
-      }
-    }
+        lastUpdated={lastUpdated}
+        isDisplayTime={isShowSetupEmergencyContact ? false : isDisplayTime}
+        showWindDirection={showWindDirection}
+        isGGHomeConnected={isGGHomeConnected}
+      >
+        {display.items.map((item) => (
+          <SensorDisplayItem
+            testID={TESTID.SENSOR_DISPLAY_ITEM}
+            key={item.id.toString()}
+            item={item}
+            emergency={onEmergencyButtonPress}
+            sensor={sensor}
+            getData={getData}
+            maxValue={maxValue}
+            offsetTitle={offsetTitle}
+            setOffsetTitle={setOffsetTitle}
+            setShowWindDirection={setShowWindDirection}
+            background={station?.background}
+          />
+        ))}
+      </SensorConnectStatusViewHeader>
+    );
   };
 
   const getDataFromLocal = async () => {
@@ -636,170 +589,4 @@ const DeviceDetail = ({ account, route }) => {
   );
 };
 
-const DetailHistoryChart = ({ item, sensor }) => {
-  const [chartData, setChartData] = useState(item.configuration.configs);
-  const [startDate, setStartDate] = useState(
-    moment().subtract(1, 'days').valueOf()
-  );
-  const [endDate, setEndDate] = useState(moment().valueOf());
-  useEffect(() => {
-    const fetchData = async () => {
-      let params = new URLSearchParams();
-      item.configuration.configs.map((config) => {
-        params.append('config', config.id);
-      });
-      params.append('date_from', startDate / 1000);
-      params.append('date_to', endDate / 1000);
-      const { success, data } = await axiosGet(
-        API.SENSOR.DISPLAY_HISTORY(sensor.id),
-        { params }
-      );
-      if (success) {
-        for (let i = 0; i < data.length; i++) {
-          for (let j = 0; j < data[i].data.length; j++) {
-            data[i].data[j].x = moment(data[i].data[j].x).toDate();
-          }
-        }
-
-        const formatData = item.configuration.configs.map((config) => {
-          const dataChart = data.find((k) => k.config === config.id) || {
-            data: [],
-          };
-          return { ...config, data: dataChart.data };
-        });
-        setChartData(formatData);
-      }
-    };
-    fetchData();
-  }, [startDate, endDate, item, sensor]);
-  if (!chartData.length) {
-    return false;
-  }
-
-  return (
-    <HistoryChart
-      configuration={item.configuration}
-      datas={chartData}
-      style={styles.chartStyle}
-      setStartDate={setStartDate}
-      setEndDate={setEndDate}
-    />
-  );
-};
-
-const SensorDisplayItem = ({
-  item,
-  sensor,
-  emergency,
-  getData,
-  maxValue,
-  offsetTitle,
-  setOffsetTitle,
-  setShowWindDirection,
-}) => {
-  const t = useTranslations();
-  const doAction = useCallback(
-    (action, data) => {
-      sendRemoteCommand(sensor, action, data);
-    },
-    [sensor]
-  );
-  if (item.configuration.type === 'compass') {
-    setShowWindDirection(true);
-  }
-  switch (item.type) {
-    case 'camera':
-      return (
-        <Card title={t('camera')}>
-          <View style={styles.mediaContainer}>
-            <MediaPlayer
-              testID={TESTID.DEVICE_DETAIL_MEDIA_PLAYER}
-              uri={item.configuration.uri}
-              style={{ height: standardizeHeight }}
-              ratioWidth={standardizeWidth - 32}
-            />
-          </View>
-        </Card>
-      );
-    case 'action':
-      return (
-        <ActionGroup
-          testID={TESTID.DEVICE_DETAIL_ACTION_GROUP}
-          actionGroup={item.configuration}
-          doAction={doAction}
-          sensor={sensor}
-        />
-      );
-    case 'history':
-      return <DetailHistoryChart item={item} sensor={sensor} />;
-    case 'value':
-      switch (item.configuration.type) {
-        case 'circle':
-          return <CurrentRainSensor data={getData(item)} />;
-        case 'simple_list':
-          return (
-            <PMSensorIndicatior
-              data={getData(item)}
-              style={styles.simpleList}
-            />
-          );
-        case 'gauge':
-          return <Anemometer data={getData(item)} maxValue={maxValue} />;
-        case 'compass':
-          return <Compass data={getData(item)} />;
-        case 'alert_status':
-          return (
-            <DeviceAlertStatus
-              data={getData(item)}
-              style={styles.marginLeft}
-              offsetTitle={offsetTitle}
-              setOffsetTitle={setOffsetTitle}
-            />
-          );
-        case 'flat_list':
-          return (
-            <FlatListItems
-              title={item.configuration.title}
-              data={getData(item)}
-              style={[styles.marginLeft, styles.marginVertical]}
-              offsetTitle={offsetTitle}
-            />
-          );
-        default:
-          return <ListQualityIndicator data={getData(item)} />;
-      }
-    case 'emergency':
-      switch (item.configuration.type) {
-        case 'detail':
-          return <EmergencyDetail item={item} />;
-        default:
-          return <EmergencyButton emergency={emergency} />;
-      }
-    case 'info':
-      return <FooterInfo data={item.configuration} />;
-    default:
-      break;
-  }
-  return false;
-};
-
-const EmergencyCountdown = memo(({ countUpStr }) => {
-  const t = useTranslations();
-  return (
-    <View style={styles.countDown}>
-      <Text type="Label" center style={styles.messageCountDown}>
-        {t('time_since_the_emergency_button_was_pressed')}
-      </Text>
-      <Text type="H3" center semibold color={Colors.Red6}>
-        {countUpStr}
-      </Text>
-    </View>
-  );
-});
-
-const mapStateToProps = (state) => ({
-  account: state.auth.account,
-});
-const mapDispatchToProps = {};
-
-export default connect(mapStateToProps, mapDispatchToProps)(DeviceDetail);
+export default DeviceDetail;