@eohjsc/react-native-smart-city 0.7.23 → 0.7.25

package/index.js

@@ -14,6 +14,7 @@ import { initSCConfig } from './src/configs';
 import AutomateStack from './src/navigations/AutomateStack';
 import NotificationStack from './src/navigations/NotificationStack';
 import MyPinnedSharedUnit from './src/commons/Dashboard/MyPinnedSharedUnit';
+import MyDashboardDevice from './src/commons/Dashboard/MyDashboardDevice';
 import MyUnit from './src/commons/Dashboard/MyUnit';
 import SharedUnit from './src/commons/Unit/SharedUnit';
 import { Action } from './src/context/actionType';
@@ -41,6 +42,7 @@ export {
   NotificationStack,
   MyPinnedSharedUnit,
   SharedUnit,
+  MyDashboardDevice,
   MyUnit,
   SCWrapper,
   Action,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.7.23",
+  "version": "0.7.25",
   "description": "TODO",
   "main": "index.js",
   "files": [

package/src/commons/Dashboard/MyDashboardDevice/__test__/index.test.js

@@ -0,0 +1,171 @@
+import MockAdapter from 'axios-mock-adapter';
+import React, { useContext } from 'react';
+import renderer, { act } from 'react-test-renderer';
+
+import { Action } from '../../../../context/actionType';
+import { API } from '../../../../configs';
+import { AccessibilityLabel } from '../../../../configs/Constants';
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import { Section } from '../../../Section';
+import ItemDevice from '../../../Device/ItemDevice';
+import { DeviceTemplate } from '../../../SubUnit/DeviceTemplate/DeviceTemplate';
+import api from '../../../../utils/Apis/axios';
+import Routes from '../../../../utils/Route';
+import MyDashboardDevice from '..';
+
+const mock = new MockAdapter(api.axiosInstance);
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <MyDashboardDevice refreshing={true} />
+  </SCProvider>
+);
+
+describe('Test MyDashboardDevice', () => {
+  let tree;
+  const data = [
+    {
+      id: 1,
+      name: 'EoH',
+      devices: [
+        {
+          id: 1,
+          name: 'LED',
+          is_managed_by_backend: true,
+          device_type: '',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+          quick_action: {
+            config_id: 1,
+          },
+        },
+        {
+          id: 2,
+          name: 'Presence',
+          is_managed_by_backend: true,
+          device_type: '',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+          station_items: [
+            {
+              configuration: {
+                config: 2,
+              },
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: 'Switch',
+          is_managed_by_backend: false,
+          device_type: 'GOOGLE_HOME',
+          station: {
+            id: 1,
+            name: 'Phòng họp',
+          },
+        },
+      ],
+    },
+  ];
+  const mockSetAction = jest.fn();
+
+  beforeEach(async () => {
+    mock.reset();
+    useContext.mockReturnValue({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: false },
+      }),
+      setAction: mockSetAction,
+    });
+    mockSetAction.mockClear();
+  });
+
+  it('Test dashboard no device', async () => {
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const sectors = instance.findAllByType(Section);
+    expect(sectors).toHaveLength(0);
+    expect(mockSetAction).not.toHaveBeenCalled();
+  });
+
+  it('Test dashboard with devices and go to unit', async () => {
+    mock.onGet(API.UNIT.MY_DASHBOARD_DEVICES()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(ItemDevice);
+    expect(devices).toHaveLength(2);
+    const deviceTemplates = instance.findAllByType(DeviceTemplate);
+    expect(deviceTemplates).toHaveLength(1);
+
+    const goToUnit = instance.findByProps({
+      accessibilityLabel: `${AccessibilityLabel.UNIT_GO_TO_DETAIL}-0`,
+    });
+    await act(async () => {
+      await goToUnit.props.onPress();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      params: {
+        unitId: 1,
+      },
+      screen: Routes.UnitDetail,
+    });
+    expect(mockSetAction).toHaveBeenCalledWith(
+      Action.SET_DEVICES_STATUS,
+      data[0].devices
+    );
+  });
+
+  it('Test dashboard with devices and go to device', async () => {
+    useContext.mockReturnValue({
+      stateData: mockSCStore({
+        app: { isNeedUpdateCache: true },
+      }),
+      setAction: mockSetAction,
+    });
+    mock.onGet(API.UNIT.MY_DASHBOARD_DEVICES()).reply(200, data);
+    await act(async () => {
+      tree = await renderer.create(wrapComponent());
+    });
+    const instance = tree.root;
+    const devices = instance.findAllByType(ItemDevice);
+    expect(devices).toHaveLength(2);
+    const deviceTemplates = instance.findAllByType(DeviceTemplate);
+    expect(deviceTemplates).toHaveLength(1);
+
+    await act(async () => {
+      await devices[0].props.goToDetail();
+    });
+    expect(global.mockedNavigate).toHaveBeenCalledWith(Routes.UnitStack, {
+      params: {
+        sensorId: 1,
+        station: {
+          id: 1,
+          name: 'Phòng họp',
+        },
+        title: 'LED',
+        unitId: 1,
+      },
+      screen: Routes.DeviceDetail,
+    });
+    expect(mockSetAction).toHaveBeenCalledTimes(2);
+    expect(mockSetAction).toHaveBeenNthCalledWith(
+      1,
+      Action.IS_CHECK_CLEAR_CACHE_UNITS,
+      false
+    );
+    expect(mockSetAction).toHaveBeenNthCalledWith(
+      2,
+      Action.SET_DEVICES_STATUS,
+      data[0].devices
+    );
+  });
+});

package/src/commons/Dashboard/MyDashboardDevice/index.js

@@ -0,0 +1,218 @@
+import { API, Colors, Images } from '../../../configs';
+import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
+import { Image, FlatList, TouchableOpacity, View } from 'react-native';
+import React, {
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useEffect,
+  useState,
+} from 'react';
+import { SCContext, useSCContextSelector } from '../../../context';
+import { axiosGet, fetchWithCache } from '../../../utils/Apis/axios';
+import { useWatchConfigs } from '../../../hooks/IoT';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+
+import { Action } from '../../../context/actionType';
+import Routes from '../../../utils/Route';
+import { Section } from '../../Section';
+import Text from '../../Text';
+import { keyExtractor } from '../../../utils/Utils';
+import ItemDevice from '../../Device/ItemDevice';
+import { DeviceTemplate } from '../../SubUnit/DeviceTemplate/DeviceTemplate';
+import { useTranslations } from '../../../hooks/Common/useTranslations';
+import styles from './styles';
+
+const MyDashboardDevice = ({ refreshing }) => {
+  const t = useTranslations();
+  const isFocused = useIsFocused();
+  const navigation = useNavigation();
+  const { setAction } = useContext(SCContext);
+  const isNeedUpdateCache = useSCContextSelector(
+    (state) => state.app.isNeedUpdateCache
+  );
+  const [myDashboardDevices, setMyDashboardDevices] = useState([]);
+
+  const configsNeedWatching = useMemo(() => {
+    const configIds = [];
+
+    myDashboardDevices.forEach(({ devices }) => {
+      devices
+        .filter((device) => device.device_type !== DEVICE_TYPE.GOOGLE_HOME)
+        .forEach((device) => {
+          const quickActionId = device.quick_action?.config_id;
+          quickActionId && configIds.push(quickActionId);
+
+          device.station_items?.forEach((item) => {
+            const stationConfigId = item.configuration?.config;
+            stationConfigId && configIds.push(stationConfigId);
+          });
+        });
+    });
+
+    return configIds;
+  }, [myDashboardDevices]);
+
+  useWatchConfigs(configsNeedWatching);
+
+  const fetchMyDashboardDevices = useCallback(async () => {
+    if (isNeedUpdateCache) {
+      setAction(Action.IS_CHECK_CLEAR_CACHE_UNITS, false);
+      const { success, data } = await axiosGet(
+        API.UNIT.MY_DASHBOARD_DEVICES(),
+        {},
+        true
+      );
+      if (success) {
+        setMyDashboardDevices(data);
+        data.forEach((dashboard) => {
+          setAction(Action.SET_DEVICES_STATUS, dashboard.devices);
+        });
+      }
+    } else {
+      await fetchWithCache(API.UNIT.MY_DASHBOARD_DEVICES(), {}, (response) => {
+        const { success, data } = response;
+        if (success) {
+          setMyDashboardDevices(data);
+          data.forEach((dashboard) => {
+            setAction(Action.SET_DEVICES_STATUS, dashboard.devices);
+          });
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const goToUnitDetail = useCallback(
+    (unit) => () => {
+      navigation.navigate(Routes.UnitStack, {
+        screen: Routes.UnitDetail,
+        params: {
+          unitId: unit.id,
+        },
+      });
+    },
+    [navigation]
+  );
+
+  const goToDeviceDetail = useCallback(
+    (unitId, device) => () => {
+      navigation.navigate(Routes.UnitStack, {
+        screen: Routes.DeviceDetail,
+        params: {
+          unitId: unitId,
+          station: device.station,
+          sensorId: device.id,
+          title: device.name,
+        },
+      });
+    },
+    [navigation]
+  );
+
+  const renderStationItem = useCallback(
+    (device, unitId, stationItem) => {
+      return (
+        <DeviceTemplate
+          device={device}
+          stationItem={stationItem}
+          unit={{ id: unitId }}
+          station={device.station}
+          goToDetail={goToDeviceDetail(unitId, device)}
+          key={`device-template-${stationItem.id}`}
+        />
+      );
+    },
+    [goToDeviceDetail]
+  );
+
+  const renderDisplayItem = useCallback(
+    (device, unitId) => {
+      let displays = [];
+      if (!device.station_items?.length || device.quick_action) {
+        displays.push(
+          <ItemDevice
+            description={device.value}
+            title={device.name}
+            sensor={device}
+            unit={{ id: unitId }}
+            station={device.station}
+            goToDetail={goToDeviceDetail(unitId, device)}
+            key={`device-${device.id}`}
+          />
+        );
+      }
+      if (device.station_items?.length) {
+        displays.push(
+          ...device.station_items.map((item) =>
+            renderStationItem(device, unitId, item)
+          )
+        );
+      }
+      return displays;
+    },
+    [goToDeviceDetail, renderStationItem]
+  );
+
+  const renderItem = useCallback(
+    ({ item, index }) => {
+      return (
+        <View style={styles.wrapItem}>
+          <View style={styles.titleItem}>
+            <Text type="H3" semibold>
+              {item.name}
+            </Text>
+            <TouchableOpacity
+              onPress={goToUnitDetail(item)}
+              style={styles.arrowRightButton}
+              accessibilityLabel={`${AccessibilityLabel.UNIT_GO_TO_DETAIL}-${index}`}
+            >
+              <Image source={Images.arrowBack} style={styles.arrowRight} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.wrapperDevices}>
+            {item.devices.map((device) => {
+              return renderDisplayItem(device, item.id);
+            })}
+          </View>
+        </View>
+      );
+    },
+    [goToUnitDetail, renderDisplayItem]
+  );
+
+  useEffect(() => {
+    if (isFocused || refreshing) {
+      fetchMyDashboardDevices();
+    }
+  }, [fetchMyDashboardDevices, isFocused, refreshing]);
+
+  return (
+    <>
+      {!!myDashboardDevices.length && (
+        <Section style={styles.wrapperDashboardDevice}>
+          <Text
+            style={styles.dashboardDevicesTitle}
+            type="H5"
+            color={Colors.Gray8}
+          >
+            {t('dashboard_devices')}
+          </Text>
+          <View style={styles.container}>
+            <FlatList
+              keyExtractor={keyExtractor}
+              data={myDashboardDevices}
+              extraData={myDashboardDevices}
+              renderItem={renderItem}
+              contentContainerStyle={styles.contentContainerStyle}
+              refreshing={false}
+            />
+          </View>
+        </Section>
+      )}
+    </>
+  );
+};
+
+export default memo(MyDashboardDevice);

package/src/commons/Dashboard/MyDashboardDevice/styles.js

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from '../../../configs';
+
+const styles = StyleSheet.create({
+  contentContainerStyle: {
+    paddingLeft: 16,
+    paddingRight: 16,
+  },
+  wrapperDashboardDevice: {
+    padding: 0,
+    paddingBottom: 10,
+    backgroundColor: Colors.White,
+  },
+  dashboardDevicesTitle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+    paddingTop: 16,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: Colors.White,
+  },
+  wrapperDevices: {
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 10,
+    borderBottomColor: Colors.Gray4,
+    borderBottomWidth: 1,
+  },
+  arrowRightButton: {
+    width: 20,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  arrowRight: {
+    transform: [
+      {
+        rotate: '180deg',
+      },
+    ],
+    tintColor: Colors.Gray7,
+    width: 8,
+    height: 12,
+  },
+  wrapItem: {
+    marginBottom: 16,
+  },
+  titleItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default styles;

package/src/commons/Device/ItemDevice.js

@@ -18,7 +18,7 @@ import IconComponent from '../IconComponent';
 import ItemDeviceWrapper from './ItemDeviceWrapper';
 
 const ItemDevice = memo(
-  ({ description, title, sensor, unit, station, wrapStyle }) => {
+  ({ description, title, sensor, unit, station, goToDetail, wrapStyle }) => {
     const t = useTranslations();
     const navigation = useNavigation();
     const { is_managed_by_backend, device_type, icon_kit, icon, quick_action } =
@@ -44,6 +44,14 @@ const ItemDevice = memo(
       });
     }, [navigation, sensor, station, title, unit]);
 
+    const onPress = useCallback(() => {
+      if (goToDetail) {
+        goToDetail();
+      } else {
+        goToSensorDisplay();
+      }
+    }, [goToDetail, goToSensorDisplay]);
+
     const textConnected = useMemo(() => {
       if (is_managed_by_backend) {
         if (
@@ -80,10 +88,11 @@ const ItemDevice = memo(
         device={sensor}
         unit={unit}
         station={station}
+        goToDetail={goToDetail}
         wrapStyle={wrapStyle}
       >
         <View style={styles.boxIcon}>
-          <TouchableOpacity onPress={goToSensorDisplay}>
+          <TouchableOpacity onPress={onPress}>
             <IconComponent icon={icon_kit || icon} />
           </TouchableOpacity>
           {canRenderQuickAction && (
@@ -94,7 +103,7 @@ const ItemDevice = memo(
             />
           )}
         </View>
-        <TouchableOpacity onPress={goToSensorDisplay}>
+        <TouchableOpacity onPress={onPress}>
           <Text
             numberOfLines={1}
             semibold

package/src/commons/Device/ItemDeviceWrapper.js

@@ -17,7 +17,7 @@ import {
 } from '../../configs/Constants';
 
 const ItemDeviceWrapper = memo(
-  ({ device, unit, station, wrapStyle, children }) => {
+  ({ device, unit, station, goToDetail, wrapStyle, children }) => {
     const navigation = useNavigation();
 
     const {
@@ -42,6 +42,14 @@ const ItemDeviceWrapper = memo(
       });
     }, [navigation, device, station, unit]);
 
+    const onPress = useCallback(() => {
+      if (goToDetail) {
+        goToDetail();
+      } else {
+        goToSensorDisplay();
+      }
+    }, [goToDetail, goToSensorDisplay]);
+
     const borderColor = useMemo(() => {
       if (!!device && device?.is_managed_by_backend) {
         if (device?.device_type === DEVICE_TYPE.LG_THINQ) {
@@ -73,7 +81,7 @@ const ItemDeviceWrapper = memo(
 
     return (
       <TouchableWithoutFeedback
-        onPress={goToSensorDisplay}
+        onPress={onPress}
         accessibilityLabel={`${AccessibilityLabel.SENSOR_NAME}-${device?.id}`}
       >
         <View

package/src/commons/SubUnit/DeviceTemplate/DeviceTemplate.js

@@ -3,14 +3,19 @@ import { getTemplate } from './';
 import ItemDeviceWrapper from '../../Device/ItemDeviceWrapper';
 
 export const DeviceTemplate = memo(
-  ({ device, stationItem, unit, station, key }) => {
+  ({ device, stationItem, unit, station, goToDetail }) => {
     const Template = getTemplate(stationItem);
     if (!Template) {
       return null;
     }
     return (
-      <ItemDeviceWrapper device={device} unit={unit} station={station}>
-        <Template.Display device={device} stationItem={stationItem} key={key} />
+      <ItemDeviceWrapper
+        device={device}
+        unit={unit}
+        station={station}
+        goToDetail={goToDetail}
+      >
+        <Template.Display device={device} stationItem={stationItem} />
       </ItemDeviceWrapper>
     );
   }

package/src/commons/UnitSummary/ConfigHistoryChart/index.js

@@ -23,7 +23,13 @@ export const useFetchConfigHistory = (
 ) => {
   const fetchDataDisplayHistory = useCallback(
     async (startDate, endDate, setProcessing = () => {}) => {
-      if (!configs.length || !startDate || !endDate) {
+      if (
+        !configs ||
+        !Array.isArray(configs) ||
+        !configs.length ||
+        !startDate ||
+        !endDate
+      ) {
         return;
       }
 

package/src/configs/API.js

@@ -27,6 +27,9 @@ const API = {
     END_DEVICES_STATUS: (id) =>
       `/property_manager/units/${id}/end_devices_status/`,
     CHANGE_OWNER: (id) => `/property_manager/units/${id}/change_owner/`,
+    MY_DASHBOARD_DEVICES: () => '/property_manager/units/my_dashboard_devices/',
+    DASHBOARD_DEVICES: (id) =>
+      `/property_manager/units/${id}/dashboard_devices/`,
     FAVOURITE_DEVICES: (id) =>
       `/property_manager/units/${id}/favourite_devices/`,
     DEVICES_NOT_FAVORITES: (id) =>
@@ -75,6 +78,10 @@ const API = {
     DISPLAY_ACTIONS: (id) => `/property_manager/devices/${id}/display_actions/`,
     CHANGE_SUB_UNIT: (unit_id, station_id, id) =>
       `/property_manager/${unit_id}/sub_units/${station_id}/devices/${id}/change_sub_unit/`,
+    ADD_TO_DASHBOARD: (id) =>
+      `/property_manager/devices/${id}/add_to_dashboard/`,
+    REMOVE_FROM_DASHBOARD: (id) =>
+      `/property_manager/devices/${id}/remove_from_dashboard/`,
     ADD_TO_FAVOURITES: (id) =>
       `/property_manager/devices/${id}/add_to_favourites/`,
     REMOVE_FROM_FAVOURITES: (id) =>

package/src/configs/AccessibilityLabel.js

@@ -40,6 +40,7 @@ export default {
   MY_UNIT_GO_TO_DETAIL: 'MY_UNIT_GO_TO_DETAIL',
   MY_UNIT_NO_UNIT: 'MY_UNIT_NO_UNIT',
   ITEM_UNIT: 'ITEM_UNIT',
+  UNIT_GO_TO_DETAIL: 'UNIT_GO_TO_DETAIL',
 
   // ConfirmUnitDeletion
   CONFIRM_UNIT_DELETION_BUTTON: 'CONFIRM_UNIT_DELETION_BUTTON',
@@ -270,6 +271,7 @@ export default {
   PARKING_SPOT_TEXT_RESULT: 'PARKING_SPOT_TEXT_RESULT',
 
   // Header Device
+  HEADER_DEVICE_BUTTON_PIN: 'HEADER_DEVICE_BUTTON_PIN',
   HEADER_DEVICE_BUTTON_STAR: 'HEADER_DEVICE_BUTTON_STAR',
   HEADER_SCRIPT_DETAIL_BUTTON_STAR: 'HEADER_SCRIPT_DETAIL_BUTTON_STAR',
   HEADER_DEVICE_BUTTON_MORE: 'HEADER_DEVICE_BUTTON_MORE',

package/src/context/actionType.ts

@@ -12,6 +12,9 @@ export const Action = {
   SET_NETWORK_CONNECTED: 'SET_NETWORK_CONNECTED',
   CAMERA_STATUS_CHANGE: 'CAMERA_STATUS_CHANGE',
   CLOSE_ALL_CAMERA: 'CLOSE_ALL_CAMERA',
+  SET_DASHBOARD_DEVICES: 'SET_DASHBOARD_DEVICES',
+  ADD_DEVICES_TO_DASHBOARD: 'ADD_DEVICE_TO_DASHBOARD',
+  REMOVE_DEVICES_FROM_DASHBOARD: 'REMOVE_DEVICE_FROM_DASHBOARD',
   SET_FAVORITE_DEVICES: 'SET_FAVORITE_DEVICES',
   ADD_DEVICES_TO_FAVORITES: 'ADD_DEVICE_TO_FAVORITES',
   REMOVE_DEVICES_FROM_FAVORITES: 'REMOVE_DEVICE_FROM_FAVORITES',
@@ -78,6 +81,7 @@ export type ListAction = {
 }[];
 
 export type UnitType = {
+  dashboardDeviceIds: [];
   favoriteDeviceIds: [];
 };
 

package/src/context/mockStore.ts

@@ -27,6 +27,7 @@ export const mockDataStore: ContextData = {
   listAction: [],
   myUnits: [],
   unit: {
+    dashboardDeviceIds: [],
     favoriteDeviceIds: [],
   },
   automate: {
@@ -103,6 +104,10 @@ export const mockSCStore = (data: ContextData): ContextData => {
     },
     myUnits: [...mockDataStore.myUnits, ...(data?.myUnits || [])],
     unit: {
+      dashboardDeviceIds: [
+        ...mockDataStore.unit.dashboardDeviceIds,
+        ...(data?.unit?.dashboardDeviceIds || []),
+      ],
       favoriteDeviceIds: [
         ...mockDataStore.unit.favoriteDeviceIds,
         ...(data?.unit?.favoriteDeviceIds || []),