@eohjsc/react-native-smart-city 0.2.92 → 0.2.93

package/src/commons/CameraDevice/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -10,6 +10,8 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import { Device } from '../../configs';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../utils/Route';
+import { SCContext } from '../../context';
+import { Action } from '../../context/actionType';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
@@ -18,8 +20,10 @@ const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
 const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
+  const { setAction } = useContext(SCContext);
 
   const onPressViewAll = () => {
+    setAction(Action.CLOSE_ALL_CAMERA);
     navigate(Routes.AllCamera, {
       arrCameras: station?.camera_devices,
       thumbnail: { uri: station?.background },
@@ -51,6 +55,7 @@ const CameraDevice = ({ station, handleFullScreen, goToPlayBack }) => {
           ]}
         >
           <MediaPlayerDetail
+            id={device.configuration.id}
             uri={device.configuration.uri}
             thumbnail={{
               uri: station.background,

package/src/commons/Device/HistoryChart.js

@@ -234,7 +234,7 @@ const HistoryChart = memo(
         )}
         <DateTimePickerModal
           isVisible={eventPicker.showModalStart}
-          date={eventPicker.startTime.utc().toDate()}
+          date={eventPicker.startTime.toDate()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmStart}
           onCancel={onCancel}
@@ -242,7 +242,7 @@ const HistoryChart = memo(
         />
         <DateTimePickerModal
           isVisible={eventPicker.showModalEnd}
-          date={eventPicker.endTime.utc().toDate()}
+          date={eventPicker.endTime.toDate()}
           mode={formatType || 'datetime'}
           onConfirm={onConfirmEnd}
           onCancel={onCancel}

package/src/commons/Device/ItemDevice.js

@@ -6,7 +6,7 @@ import {
   View,
 } from 'react-native';
 import Routes from '../../utils/Route';
-import { IconFill, IconOutline } from '@ant-design/icons-react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import ItemQuickAction from '../../commons/Action/ItemQuickAction';
@@ -16,7 +16,7 @@ import { useSCContextSelector } from '../../context';
 
 import { Colors } from '../../configs';
 import { TESTID, DEVICE_TYPE, DEVICE_SIZE } from '../../configs/Constants';
-import FImage from '../../commons/FImage';
+import IconComponent from '../IconComponent';
 
 const ItemDevice = memo(
   ({
@@ -33,7 +33,6 @@ const ItemDevice = memo(
   }) => {
     const t = useTranslations();
     const navigation = useNavigation();
-
     const isBluetoothEnabled = useSCContextSelector(
       (state) => state.app.isBluetoothEnabled
     );
@@ -51,15 +50,6 @@ const ItemDevice = memo(
       });
     }, [navigation, sensor, station, title, unit, isGGHomeConnected]);
 
-    const displayIconSensor = () => {
-      const iconKit = sensor.icon_kit;
-      return iconKit ? (
-        <FImage source={{ uri: iconKit }} style={styles.iconSensor} />
-      ) : (
-        <IconFill name={svgMain} size={32} color={Colors.Red6} />
-      );
-    };
-
     const isConnectedViaInternet =
       status === undefined
         ? !serverDown && isNetworkConnected && sensor.is_connected
@@ -85,7 +75,7 @@ const ItemDevice = memo(
         >
           <View style={styles.boxIcon}>
             <TouchableOpacity onPress={goToSensorDisplay}>
-              {displayIconSensor()}
+              <IconComponent icon={sensor.icon} iconKit={sensor.icon_kit} />
             </TouchableOpacity>
             <ItemQuickAction sensor={sensor} unit={unit} />
           </View>

package/src/commons/IconComponent/index.js

@@ -3,6 +3,7 @@ import React, { memo } from 'react';
 import { StyleSheet } from 'react-native';
 import { Colors } from '../../configs';
 import FImage from '../FImage';
+import Text from '../Text';
 
 // Priority: iconKit - icon - icon_outlined
 const IconComponent = memo(
@@ -14,33 +15,38 @@ const IconComponent = memo(
     size = 40,
     style,
   }) => {
-    let extraStyle = {};
-    if (size) {
-      extraStyle = {
-        width: size,
-        height: size,
-      };
+    let extraStyle = {
+      width: size,
+      height: size,
+    };
+
+    if (iconKit) {
+      return (
+        <FImage
+          source={{ uri: iconKit }}
+          style={[styles.iconAction, extraStyle, style]}
+        />
+      );
+    } else if (icon) {
+      return (
+        <IconFill
+          name={icon}
+          color={isSendingCommand ? Colors.TextGray : Colors.Green7}
+          size={24}
+          style={style}
+        />
+      );
+    } else if (icon_outlined) {
+      return (
+        <IconOutline
+          name={icon_outlined}
+          color={isSendingCommand ? Colors.TextGray : Colors.Green7}
+          size={24}
+          style={style}
+        />
+      );
     }
-    return iconKit ? (
-      <FImage
-        source={{ uri: iconKit }}
-        style={[styles.iconAction, extraStyle, style]}
-      />
-    ) : icon ? (
-      <IconFill
-        name={icon}
-        color={isSendingCommand ? Colors.TextGray : Colors.Green7}
-        size={24}
-        style={style}
-      />
-    ) : (
-      <IconOutline
-        name={icon_outlined}
-        color={isSendingCommand ? Colors.TextGray : Colors.Green7}
-        size={24}
-        style={style}
-      />
-    );
+    return <Text />;
   }
 );
 

package/src/commons/MediaPlayerDetail/index.js

@@ -28,6 +28,7 @@ import { SCContext, useSCContextSelector } from '../../context';
 import { Action } from '../../context/actionType';
 
 const MediaPlayerDetail = ({
+  id,
   uri,
   cameraName,
   thumbnail,
@@ -42,19 +43,23 @@ const MediaPlayerDetail = ({
   height,
 }) => {
   const { setAction } = useContext(SCContext);
-  const isFirstOpenCamera = useSCContextSelector(
-    (state) => state.app.isFirstOpenCamera
+  const { isFirstOpenCamera, camera_opened } = useSCContextSelector(
+    (state) => state.app
   );
   const t = useTranslations();
   const [paused, setPaused] = useState(isPaused);
 
   const onTapPause = useCallback(() => {
-    !isFirstOpenCamera && setPaused(false);
-  }, [isFirstOpenCamera]);
+    if (!isFirstOpenCamera) {
+      setPaused(false);
+      id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: true });
+    }
+  }, [id, isFirstOpenCamera, setAction]);
 
   const onTapGoDetail = useCallback(() => {
     if (!paused) {
       setPaused(true);
+      id && setAction(Action.CAMERA_STATUS_CHANGE, { id, status: false });
     } else {
       goToPlayBack && goToPlayBack();
     }
@@ -146,6 +151,13 @@ const MediaPlayerDetail = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFirstOpenCamera]);
 
+  useEffect(() => {
+    if (id && !(camera_opened || []).some((item) => item === id)) {
+      setPaused(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(camera_opened), id]);
+
   const source = !thumbnail || !thumbnail.uri ? Images.BgDevice : thumbnail;
   return (
     <View style={[styles.wrap, wrapStyles]}>

package/src/commons/SubUnit/Favorites/index.js

@@ -10,15 +10,16 @@ import ItemAddNew from '../../Device/ItemAddNew';
 import styles from './styles';
 
 const SubUnitFavorites = ({
-  unit,
   isOwner,
-  favorites,
+  unit,
+  favoriteDevices,
+  favoriteAutomates,
   isGGHomeConnected,
   wrapItemStyle,
 }) => {
   const t = useTranslations();
 
-  const { getStatus, serverDown } = useSensorsStatus(unit, favorites?.devices);
+  const { getStatus, serverDown } = useSensorsStatus(unit, favoriteDevices);
 
   const handleOnAddNew = () => {
     alert(t('feature_under_development'));
@@ -27,8 +28,8 @@ const SubUnitFavorites = ({
   return (
     <Section style={styles.noShadow}>
       <View style={styles.boxDevices}>
-        {!!favorites.devices &&
-          favorites.devices.map((sensor, index) => (
+        {!!favoriteDevices &&
+          favoriteDevices.map((sensor, index) => (
             <ItemDevice
               key={`device-${sensor.id}`}
               id={sensor.id}
@@ -47,8 +48,8 @@ const SubUnitFavorites = ({
               wrapStyle={wrapItemStyle}
             />
           ))}
-        {!!favorites.automates &&
-          favorites.automates.map((automate) => (
+        {!!favoriteAutomates &&
+          favoriteAutomates.map((automate) => (
             <ItemOneTap
               key={`automate-${automate.id}`}
               isOwner={isOwner}

package/src/commons/SubUnit/__test__/Favorites.test.js

@@ -60,42 +60,40 @@ describe('test ShortDetail Subunit', () => {
         user_id: 64,
       },
       isOwner: true,
-      favorites: {
-        devices: [
-          {
-            action: {
-              color: '#00979D',
-              icon: 'caret-up',
-              id: 1,
-              key: '',
-            },
-            action2: null,
-            chip_id: 1,
-            description: null,
-            icon: '',
+      favoriteDevices: [
+        {
+          action: {
+            color: '#00979D',
+            icon: 'caret-up',
             id: 1,
-            name: 'People Counting',
-            quick_action: null,
-            remote_control_options: {},
-            station: {},
-            status: null,
-            status2: null,
+            key: '',
           },
-        ],
-        automates: [
-          {
-            id: 1,
-            user: 6,
-            type: 'one_tap',
-            activate_at: '2021-09-17T05:30:00Z',
-            script: {
-              name: 'Joshua Ray',
-              icon: '',
-              icon_kit: '',
-            },
+          action2: null,
+          chip_id: 1,
+          description: null,
+          icon: '',
+          id: 1,
+          name: 'People Counting',
+          quick_action: null,
+          remote_control_options: {},
+          station: {},
+          status: null,
+          status2: null,
+        },
+      ],
+      favoriteAutomates: [
+        {
+          id: 1,
+          user: 6,
+          type: 'one_tap',
+          activate_at: '2021-09-17T05:30:00Z',
+          script: {
+            name: 'Joshua Ray',
+            icon: '',
+            icon_kit: '',
           },
-        ],
-      },
+        },
+      ],
       isGGHomeConnected: true,
     };
   });
@@ -108,8 +106,8 @@ describe('test ShortDetail Subunit', () => {
     const devices = instance.findAllByType(ItemDevice);
     const automates = instance.findAllByType(ItemOneTap);
     const itemAddNew = instance.findAllByType(ItemAddNew);
-    expect(devices).toHaveLength(props.favorites.devices.length);
-    expect(automates).toHaveLength(props.favorites.automates.length);
+    expect(devices).toHaveLength(props.favoriteDevices.length);
+    expect(automates).toHaveLength(props.favoriteAutomates.length);
     expect(itemAddNew).toHaveLength(1);
 
     await act(async () => {

package/src/configs/API.js

@@ -39,6 +39,8 @@ const API = {
       SCConfig.apiRoot + `/property_manager/units/${id}/add_gateway/`,
     SENSORS_STATUS: (id) =>
       SCConfig.apiRoot + `/property_manager/units/${id}/sensors_status/`,
+    FAVOURITE_DEVICES: (id) =>
+      SCConfig.apiRoot + `/property_manager/units/${id}/favourite_devices/`,
   },
   SUB_UNIT: {
     REMOVE_SUB_UNIT: (unitId, id) =>
@@ -128,6 +130,8 @@ const API = {
       SCConfig.apiRoot + '/property_manager/automate/multi_unit/',
     ACTIVITY_LOG: (id) =>
       SCConfig.apiRoot + `/property_manager/automate/${id}/logs/`,
+    STARRED_SCRIPTS: () =>
+      SCConfig.apiRoot + '/property_manager/automate/starred_scripts/',
   },
   GOOGLE_HOME: {
     CHECK_SEND_EMAIL: () =>

package/src/configs/Constants.js

@@ -239,6 +239,26 @@ export const TESTID = {
     CONTROL_BUTTON: 'CONTROL_BUTTON',
   },
 
+  // ConnectWifiWarning
+  CONNECT_WIFI_WARNING: {
+    BUTTON_BOTTOM: 'BUTTON_BOTTOM',
+  },
+
+  // GatewayWifiList
+  GATEWAY_WIFI_LIST: {
+    BUTTON_POPUP: 'BUTTON_POPUP',
+  },
+
+  //SetupGatewaywifi
+  SET_UP_GATEWAY_WIFI: {
+    BUTTON_ALERT: 'BUTTON_ALERT',
+  },
+
+  //GroupButtonByType
+  GROUP_BUTTON_TYPE: {
+    BUTTON_BOTTOM: 'BUTTON_BOTTOM',
+  },
+
   // sub unit
   SUB_UNIT_FULL_CAMERA: 'SUB_UNIT_FULL_CAMERA',
   SUB_UNIT_CAMERA_VIEW: 'SUB_UNIT_CAMERA_VIEW',
@@ -254,6 +274,7 @@ export const TESTID = {
   // NavBar
   NAVBAR_ICON_BARS: 'NAVBAR_ICON_BARS',
   NAVBAR_MENU_ACTION_MORE: 'NAVBAR_MENU_ACTION_MORE',
+  NAVBAR_ON_SNAP_ITEM: 'NAVBAR_ON_SNAP_ITEM',
 
   // device
   HORIZONTAL_BAR_CHART: 'HORIZONTAL_BAR_CHART',

package/src/context/actionType.ts

@@ -9,6 +9,14 @@ export const Action = {
   IS_CONNECT_WIFI_GATEWAY: 'IS_CONNECT_WIFI_GATEWAY',
   SET_BLUETOOTH_STATE: 'SET_BLUETOOTH_STATE',
   SET_NETWORK_CONNECTED: 'SET_NETWORK_CONNECTED',
+  CAMERA_STATUS_CHANGE: 'CAMERA_STATUS_CHANGE',
+  CLOSE_ALL_CAMERA: 'CLOSE_ALL_CAMERA',
+  SET_FAVORITE_DEVICES: 'SET_FAVORITE_DEVICES',
+  ADD_DEVICE_TO_FAVORITES: 'ADD_DEVICE_TO_FAVORITES',
+  REMOVE_DEVICE_FROM_FAVORITES: 'REMOVE_DEVICE_FROM_FAVORITES',
+  SET_STARRED_SCRIPTS: 'SET_STARRED_SCRIPTS',
+  STAR_SCRIPT: 'STAR_SCRIPT',
+  UNSTAR_SCRIPT: 'UNSTAR_SCRIPT',
 };
 
 export type AuthData = {
@@ -40,6 +48,14 @@ export type ListAction = {
   station_name: string;
 }[];
 
+export type UnitType = {
+  favoriteDeviceIds: [];
+};
+
+export type AutomateType = {
+  starredScriptIds: [];
+};
+
 export type ActionType = keyof typeof Action;
 
 export type ActionDataMap = {
@@ -56,4 +72,5 @@ export type AppType = {
   isConnectWifiGateway: boolean;
   isBluetoothEnabled: boolean;
   isNetworkConnected: boolean;
+  camera_opened: any[];
 };

package/src/context/mockStore.ts

@@ -25,6 +25,12 @@ export const mockDataStore: ContextData = {
     barStyle: '',
   },
   listAction: [],
+  unit: {
+    favoriteDeviceIds: [],
+  },
+  automate: {
+    starredScriptIds: [],
+  },
 };
 
 export const mockSCStore = (data: ContextData): ContextData => {
@@ -53,5 +59,17 @@ export const mockSCStore = (data: ContextData): ContextData => {
       isBluetoothEnabled: true,
       isNetworkConnected: true,
     },
+    unit: {
+      favoriteDeviceIds: [
+        ...mockDataStore.unit.favoriteDeviceIds,
+        ...(data?.unit?.favoriteDeviceIds || []),
+      ],
+    },
+    automate: {
+      starredScriptIds: [
+        ...mockDataStore.automate.starredScriptIds,
+        ...(data?.automate?.starredScriptIds || []),
+      ],
+    },
   };
 };

package/src/context/reducer.ts

@@ -7,8 +7,11 @@ import {
   Action,
   ListDevice,
   ListAction,
+  UnitType,
+  AutomateType,
   AppType,
 } from './actionType';
+import { uniq } from 'lodash';
 
 export type ContextData = {
   auth: AuthData;
@@ -16,6 +19,8 @@ export type ContextData = {
   listDevice: ListDevice;
   listAction: ListAction;
   statusBar: StatusBar;
+  unit: UnitType;
+  automate: AutomateType;
   app: AppType;
 };
 
@@ -37,12 +42,19 @@ export const initialState = {
   statusBar: {} as StatusBar,
   listDevice: {} as ListDevice,
   listAction: [] as ListAction,
+  unit: {
+    favoriteDeviceIds: [],
+  },
+  automate: {
+    starredScriptIds: [],
+  },
   app: {
     isFirstOpenCamera: true,
     isLavidaSource: false,
     isConnectWifiGateway: false,
     isBluetoothEnabled: false,
     isNetworkConnected: false,
+    camera_opened: [],
   },
 };
 
@@ -137,6 +149,96 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
     }
+
+    case Action.CAMERA_STATUS_CHANGE:
+      const { id, status } = payload;
+      const arrCameraTemp = currentState.app.camera_opened || [];
+      if (status) {
+        if (arrCameraTemp.length >= 4) {
+          arrCameraTemp.splice(0, 1);
+        }
+        arrCameraTemp.push(id);
+      } else {
+        const indexCameraRemoved = arrCameraTemp.findIndex(
+          (item) => item === id
+        );
+        arrCameraTemp.splice(indexCameraRemoved, 1);
+      }
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          camera_opened: arrCameraTemp,
+        },
+      };
+
+    case Action.CLOSE_ALL_CAMERA:
+      return {
+        ...currentState,
+        app: {
+          ...currentState.app,
+          camera_opened: [],
+        },
+      };
+
+    case Action.SET_FAVORITE_DEVICES:
+      return {
+        ...currentState,
+        unit: {
+          ...currentState.unit,
+          favoriteDeviceIds: payload,
+        },
+      };
+    case Action.ADD_DEVICE_TO_FAVORITES:
+      return {
+        ...currentState,
+        unit: {
+          ...currentState.unit,
+          favoriteDeviceIds: uniq(
+            currentState.unit.favoriteDeviceIds.concat(payload)
+          ),
+        },
+      };
+    case Action.REMOVE_DEVICE_FROM_FAVORITES:
+      return {
+        ...currentState,
+        unit: {
+          ...currentState.unit,
+          favoriteDeviceIds: currentState.unit.favoriteDeviceIds.filter(
+            (id) => id !== payload
+          ),
+        },
+      };
+
+    case Action.SET_STARRED_SCRIPTS:
+      return {
+        ...currentState,
+        automate: {
+          ...currentState.automate,
+          starredScriptIds: payload,
+        },
+      };
+    case Action.STAR_SCRIPT:
+      return {
+        ...currentState,
+        automate: {
+          ...currentState.automate,
+          starredScriptIds: uniq(
+            currentState.automate.starredScriptIds.concat(payload)
+          ),
+        },
+      };
+    case Action.UNSTAR_SCRIPT:
+      return {
+        ...currentState,
+        automate: {
+          ...currentState.automate,
+          starredScriptIds: currentState.automate.starredScriptIds.filter(
+            (id) => id !== payload
+          ),
+        },
+      };
+
     default:
       return currentState;
   }

package/src/iot/RemoteControl/Bluetooth.js

@@ -103,7 +103,9 @@ export const sendCommandOverBluetooth = async (
     command: action.key,
     password: bluetooth ? bluetooth.password : '',
     data,
+    sensor: sensor.id,
     user: userID,
+    sensorId: sensor.id,
   });
   return result;
 };

package/src/iot/RemoteControl/GoogleHome.js

@@ -225,6 +225,7 @@ export async function sendCommandOverGoogleHome(sensor, action, data) {
   }
 
   const { success } = await axiosPost(API.SENSOR.ACTIVITY_LOG(), {
+    sensor_id: sensor.id,
     action_id: action.id,
     message: 'Trigger by user action with google home',
   });

package/src/navigations/AutomateStack.js

@@ -1,8 +1,10 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useEffect, useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/core';
 import { Icon } from '@ant-design/react-native';
+import { SCContext } from '../context';
+import { Action } from '../context/actionType';
 
 import Routes from '../utils/Route';
 import { screenOptions } from './utils';
@@ -11,16 +13,29 @@ import { Colors, Theme } from '../configs';
 import Automate from '../screens/Automate';
 import MultiUnits from '../screens/Automate/MultiUnits';
 
+import { axiosGet } from '../utils/Apis/axios';
+import { API } from '../configs';
+
 const Stack = createStackNavigator();
 
 const AutomateStack = memo(() => {
   const t = useTranslations();
   const navigation = useNavigation();
+  const { setAction } = useContext(SCContext);
 
   const toggleDrawer = useCallback(() => {
     navigation.toggleDrawer();
   }, [navigation]);
 
+  useEffect(() => {
+    const fetchStarredScripts = async () => {
+      const { success, data } = await axiosGet(API.AUTOMATE.STARRED_SCRIPTS());
+      success && setAction(Action.SET_STARRED_SCRIPTS, data);
+    };
+    fetchStarredScripts();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <Stack.Navigator
       screenOptions={{