@eohjsc/react-native-smart-city 0.3.62 → 0.3.64

package/package.json

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

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

@@ -11,6 +11,8 @@ import { AccessibilityLabel } from '../../../configs/Constants';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import SharedUnit from '../../Unit/SharedUnit';
 import { fetchWithCache } from '../../../utils/Apis/axios';
+import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
+import { STORAGE_KEY } from '../../../utils/Storage';
 
 const MyPinnedSharedUnit = ({ refreshing }) => {
   const t = useTranslations();
@@ -40,6 +42,14 @@ const MyPinnedSharedUnit = ({ refreshing }) => {
     }
   }, [fetchSharedUnitDashboard, isFocused, refreshing]);
 
+  useEffect(() => {
+    sharedUnits?.length &&
+      preloadImagesFromUnits(
+        sharedUnits,
+        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT
+      );
+  }, [sharedUnits]);
+
   return (
     <>
       <Section>

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

@@ -30,6 +30,8 @@ import Carousel from 'react-native-snap-carousel';
 import { AccessibilityLabel, DEVICE_TYPE } from '../../../configs/Constants';
 import Routes from '../../../utils/Route';
 import MyUnitDevice from '../../../screens/Unit/components/MyUnitDevice';
+import { STORAGE_KEY } from '../../../utils/Storage';
+import { preloadImagesFromUnits } from '../../../utils/Functions/preloadImages';
 
 let screenWidth = Dimensions.get('window').width;
 
@@ -106,12 +108,11 @@ const MyUnit = ({ refreshing }) => {
   useWatchConfigs(configsNeedWatching);
 
   const goToDetail = useCallback(
-    (item) => {
+    (item) => () => {
       navigation.navigate(Routes.UnitStack, {
         screen: Routes.UnitDetail,
         params: {
           unitId: item.id,
-          unitData: item,
         },
       });
     },
@@ -130,7 +131,7 @@ const MyUnit = ({ refreshing }) => {
           }}
         >
           <TouchableOpacity
-            onPress={() => goToDetail(item)}
+            onPress={goToDetail(item)}
             style={styles.btnItem}
             activeOpacity={0.75}
             accessibilityLabel={`${AccessibilityLabel.MY_UNIT_GO_TO_DETAIL}-${index}`}
@@ -153,6 +154,11 @@ const MyUnit = ({ refreshing }) => {
     [myUnits, goToDetail]
   );
 
+  useEffect(() => {
+    myUnits?.length &&
+      preloadImagesFromUnits(myUnits, STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS);
+  }, [myUnits]);
+
   return (
     <>
       <Section style={styles.boxTxtMyUnit}>

package/src/commons/Device/HorizontalBarChart.js

@@ -105,7 +105,7 @@ const HorizontalBarChart = memo(({ datas, config }) => {
   });
 
   const heightChart = useMemo(() => {
-    const dataX = datas[0].data.map((item) => item.x);
+    const dataX = (datas[0]?.data || []).map((item) => item.x);
     return dataX.length > 1
       ? dataX.length === 2
         ? dataX.length * 55 + 30
@@ -114,13 +114,13 @@ const HorizontalBarChart = memo(({ datas, config }) => {
   }, [datas]);
 
   useEffect(() => {
-    const dataY = datas[0].data.map((item, index) => {
+    const dataY = (datas[0]?.data || []).map((item, index) => {
       return {
         color: index % 2 === 0 ? Colors.Primary + '20' : Colors.Primary + '16',
         y: item.y,
       };
     });
-    const dataX = datas[0].data.map((item) => item.x);
+    const dataX = (datas[0].data || []).map((item) => item.x);
     const maxY = getMaxValueIndex(dataY);
     if (!isEmpty(maxY.max)) {
       dataY.splice(maxY._index, 1, { ...maxY.max, color: Colors.Primary });

package/src/commons/Device/WindSpeed/Anemometer/index.js

@@ -1,5 +1,5 @@
 import React, { memo, useCallback } from 'react';
-import Svg, { Path, Text, G, Circle } from 'react-native-svg';
+import Svg, { Path, Text, Circle } from 'react-native-svg';
 import { View, StyleSheet } from 'react-native';
 
 import {
@@ -28,6 +28,8 @@ const Anemometer = memo(
     };
 
     const value = data.length ? data[0].value : 0;
+    const measure = data.length ? data[0].measure : 'm/s';
+
     const radius = (size - strokeWidth) / 2;
     const viewBox = `0 0 ${width} ${width}`;
     const d = drawArc(center.x, center.y, radius, startAngle, endAngle);
@@ -35,8 +37,6 @@ const Anemometer = memo(
     const strokeAngle = (endAngle - startAngle) / numberOfSection;
     const strokeLength = (strokeAngle * circumference) / 360 - 1;
     const strokeDasharrayBg = `${strokeLength} 1`;
-    const totalAngle = (3 * PI) / 2;
-    const alpha = (value * totalAngle) / maxValue;
     const arc = circumference * 0.75;
     const offset = arc - (value / maxValue) * arc;
 
@@ -116,7 +116,6 @@ const Anemometer = memo(
       maxValue,
       txtColor,
     ]);
-    const needleAngle = -21 + (alpha / PI) * 180;
 
     return (
       <View style={styles.standard}>
@@ -145,10 +144,11 @@ const Anemometer = memo(
           />
           {textAngles()}
           <Text
-            fill={Colors.Gray8}
-            fontSize="24"
+            fill={Colors.Lime6}
+            fontSize={48}
+            fontWeight="bold"
             x={width / 2}
-            y={width / 2 + 64}
+            y={width / 2 + 16}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
@@ -156,30 +156,14 @@ const Anemometer = memo(
           </Text>
           <Text
             fill={Colors.Gray8}
-            fontSize="16"
+            fontSize={16}
             x={width / 2}
-            y={width / 2 + 88}
+            y={width / 2 + 64}
             textAnchor="middle"
             fontFamily={Fonts.Regular}
           >
-            m/s
+            {measure}
           </Text>
-
-          <G
-            x={width / 2 - 50}
-            y={width / 2 - 12}
-            rotation={needleAngle}
-            origin="50,10."
-          >
-            <Path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              // eslint-disable-next-line max-len
-              d="M6.75518 30.5986L46.6732 5.59447C49.7242 3.68338 53.7596 4.87054 55.2897 8.12934C56.8321 11.4146 55.1275 15.3065 51.667 16.4005L6.75518 30.5986Z"
-              fill="#595959"
-            />
-            <Circle cx={49.5} cy={10.5762} r={3.5} fill="white" />
-          </G>
         </Svg>
       </View>
     );

package/src/commons/FourButtonFilterHistory/index.js

@@ -47,7 +47,7 @@ const FourButtonFilterHistory = memo(({ groupBy, setGroupBy }) => {
 
   const onPressButton = useCallback(
     (data) => () => {
-      setGroupBy(data);
+      setGroupBy && setGroupBy(data);
     },
     [setGroupBy]
   );

package/src/configs/API.js

@@ -219,6 +219,20 @@ const API = {
       DETAIL: (id) => `/chip_manager/developer_mode_chips/${id}/`,
       REBOOT: (id) => `/chip_manager/developer_mode_chips/${id}/reboot_chip/`,
     },
+    ARDUINO: {
+      DEVICE: (gatewayId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/`,
+      DEVICE_DETAIL: (gatewayId, deviceId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/${deviceId}/`,
+      CONFIG_PINS: (gatewayId, deviceId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/${deviceId}/pins/`,
+      CONFIG_PIN_DETAIL: (gatewayId, deviceId, configPinId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/${deviceId}/pins/${configPinId}/`,
+      ACTION: (gatewayId, deviceId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/${deviceId}/actions/`,
+      ACTION_DETAIL: (gatewayId, deviceId, actionId) =>
+        `/iot/modules/arduino/gateways/${gatewayId}/devices/${deviceId}/actions/${actionId}/`,
+    },
     ZIGBEE: {
       SEARCH_DEVICE: (id) => `/iot/modules/zigbee/chips/${id}/search_device/`,
       DEVICE_CONFIGURATION: (id, deviceId) =>

package/src/configs/Constants.js

@@ -83,6 +83,7 @@ export const DEVICE_TYPE = {
   GOOGLE_HOME: 'GOOGLE_HOME',
   WIFI_DEVICE: 'WIFI_DEVICE',
   MODBUS: 'MODBUS',
+  INTERNAL: 'INTERNAL',
 };
 export const PERMISSION_TYPE = {
   ACTION: 'ACTION',

package/src/context/actionType.ts

@@ -37,6 +37,7 @@ export const Action = {
   SET_WIDGET_DRAGGING: 'SET_WIDGET_DRAGGING',
   SET_IS_EDITING_TEMPLATE: 'SET_IS_EDITING_TEMPLATE',
   SET_IS_IN_EDIT_TEMPLATE_SCREEN: 'SET_IS_IN_EDIT_TEMPLATE_SCREEN',
+  LOGOUT: 'LOGOUT',
 };
 
 export type AuthData = {

package/src/context/reducer.ts

@@ -15,6 +15,7 @@ import {
   BluetoothType,
 } from './actionType';
 import { uniq, reduce } from 'lodash';
+import { STORAGE_KEY, removeMultiple } from '../utils/Storage.js';
 
 export type ContextData = {
   auth: AuthData;
@@ -481,6 +482,15 @@ export const reducer = (currentState: ContextData, action: Action) => {
         },
       };
 
+    case Action.LOGOUT:
+      removeMultiple([
+        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_UNITS,
+        STORAGE_KEY.IS_FIRST_TIME_LOAD_MY_SHARE_UNIT,
+      ]);
+      return {
+        ...currentState,
+      };
+
     default:
       return currentState;
   }

package/src/navigations/AllGatewayStack.js

@@ -1,15 +1,17 @@
 import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 
-import GatewayDetail from '../screens/Gateway/GatewayDetail';
-import GatewayInfo from '../screens/Gateway/GatewayInfo';
-import GatewayConnectionMethods from '../screens/Gateway/GatewayConnectionMethods';
-import DeviceZigbeeDetail from '../screens/Gateway/DeviceZigbeeDetail';
-import DeviceGatewayInfo from '../screens/Gateway/DeviceGatewayInfo';
-import DetailConfigActionZigbee from '../screens/Gateway/DetailConfigActionZigbee';
-import DeviceModbusDetail from '../screens/Gateway/DeviceModbusDetail';
-import DetailConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
-import DetailChildConfigActionModbus from '../screens/Gateway/DetailConfigActionModbus';
+import GatewayDetail from '../screens/AllGateway/GatewayDetail';
+import GatewayInfo from '../screens/AllGateway/GatewayInfo';
+import GatewayConnectionMethods from '../screens/AllGateway/GatewayConnectionMethods';
+import DeviceZigbeeDetail from '../screens/AllGateway/DeviceZigbeeDetail';
+import DeviceInternalDetail from '../screens/AllGateway/DeviceInternalDetail';
+import DeviceGatewayInfo from '../screens/AllGateway/DeviceGatewayInfo';
+import DetailConfigActionZigbee from '../screens/AllGateway/DetailConfigActionZigbee';
+import DeviceModbusDetail from '../screens/AllGateway/DeviceModbusDetail';
+import DetailConfigActionModbus from '../screens/AllGateway/DetailConfigActionModbus';
+import DetailChildConfigActionModbus from '../screens/AllGateway/DetailConfigActionModbus';
+import DetailConfigActionInterval from '../screens/AllGateway/DetailConfigActionInternal';
 import Route from '../utils/Route'; // utils/Route
 import { screenOptions } from './utils';
 
@@ -33,6 +35,10 @@ export const AllGatewayStack = memo(() => {
         component={GatewayConnectionMethods}
         name={Route.GatewayConnectionMethods}
       />
+      <Stack.Screen
+        component={DeviceInternalDetail}
+        name={Route.DeviceInternalDetail}
+      />
       <Stack.Screen
         component={DeviceZigbeeDetail}
         name={Route.DeviceZigbeeDetail}
@@ -45,6 +51,10 @@ export const AllGatewayStack = memo(() => {
         component={DetailConfigActionZigbee}
         name={Route.DetailConfigActionZigbee}
       />
+      <Stack.Screen
+        component={DetailConfigActionInterval}
+        name={Route.DetailConfigActionInterval}
+      />
       <Stack.Screen
         component={DetailConfigActionModbus}
         name={Route.DetailConfigActionModbus}

package/src/navigations/UnitStack.js

@@ -53,7 +53,7 @@ import EmergencySetting from '../screens/EmergencySetting';
 import ConfirmUnitDeletion from '../screens/ConfirmUnitDeletion';
 import InfoMemberUnit from '../screens/Sharing/InfoMemberUnit';
 import EnterPassword from '../screens/EnterPassword';
-import AllGateway from '../screens/Gateway';
+import AllGateway from '../screens/AllGateway';
 import SelectAddToFavorites from '../screens/Unit/SelectAddToFavorites';
 import { HanetCameraStack } from './HanetCameraStack';
 import { axiosGet, fetchWithCache } from '../utils/Apis/axios';

package/src/screens/AllGateway/DetailConfigActionInternal/__test__/index.test.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { useRoute } from '@react-navigation/native';
+
+import { SCProvider } from '../../../../context';
+import { mockSCStore } from '../../../../context/mockStore';
+import DetailConfigAction from '../../components/DetailConfigAction';
+import DetailConfigActionInternal from '..';
+
+const wrapComponent = () => (
+  <SCProvider initState={mockSCStore({})}>
+    <DetailConfigActionInternal />
+  </SCProvider>
+);
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useRoute: jest.fn(),
+  };
+});
+
+const mockNavigate = jest.fn();
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      pop: jest.fn(),
+    }),
+    useRoute: jest.fn(),
+    useIsFocused: () => true,
+  };
+});
+
+describe('Test DetailConfigActionInternal', () => {
+  let tree;
+  it('test render DetailConfigActionInternal isConfigRead', async () => {
+    useRoute.mockReturnValue({
+      params: {
+        isConfigRead: true,
+        isConfigWrite: false,
+        isAction: false,
+        itemActionConfig: {
+          id: 1,
+          config: { name: 'config1' },
+          value_type: 'boolean',
+          pin_number: 0,
+          pin_mode: 1,
+        },
+      },
+    });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detailConfigAction = instance?.findAllByType(DetailConfigAction);
+    expect(detailConfigAction).toHaveLength(1);
+  });
+  it('test render DetailConfigActionInternal isConfigWrite', async () => {
+    useRoute.mockReturnValue({
+      params: {
+        isConfigRead: false,
+        isConfigWrite: true,
+        isAction: false,
+        itemActionConfig: {
+          id: 1,
+          config: { name: 'config1' },
+          value_type: 'boolean',
+          pin_number: 0,
+          pin_mode: 1,
+        },
+      },
+    });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detailConfigAction = instance?.findAllByType(DetailConfigAction);
+    expect(detailConfigAction).toHaveLength(1);
+  });
+  it('test render DetailConfigActionInternal isAction', async () => {
+    useRoute.mockReturnValue({
+      params: {
+        isConfigRead: false,
+        isConfigWrite: false,
+        isAction: true,
+        isChildAction: false,
+        itemActionConfig: {
+          id: 1,
+          action: { name: 'config1' },
+          pin: 'boolean',
+          default_value: 0,
+        },
+      },
+    });
+    await act(async () => {
+      tree = await create(wrapComponent());
+    });
+    const instance = tree.root;
+    const detailConfigAction = instance?.findAllByType(DetailConfigAction);
+    expect(detailConfigAction).toHaveLength(1);
+  });
+});

package/src/screens/AllGateway/DetailConfigActionInternal/index.js

@@ -0,0 +1,97 @@
+import React, { memo, useMemo } from 'react';
+import { View } from 'react-native';
+import { useRoute } from '@react-navigation/native';
+
+import styles from './styles';
+import DetailConfigAction from '../components/DetailConfigAction';
+
+const DetailConfigActionInternal = () => {
+  const { params = {} } = useRoute();
+  const {
+    device = {},
+    itemActionConfig,
+    isConfigRead,
+    isConfigWrite,
+    isAction,
+  } = params;
+
+  const listData = useMemo(() => {
+    if (isConfigRead || isConfigWrite) {
+      return [
+        {
+          id: 1,
+          title: 'config_name',
+          data: itemActionConfig?.config?.name || '--',
+        },
+        {
+          id: 2,
+          title: 'config_type',
+          data:
+            itemActionConfig?.value_type === 'boolean'
+              ? 'Digital'
+              : itemActionConfig?.value_type === 'integer'
+              ? 'Analog'
+              : '--',
+        },
+        {
+          id: 3,
+          title: 'pin',
+          data: itemActionConfig?.pin_number || '0',
+        },
+        {
+          id: 4,
+          title: 'pin_mode',
+          data: itemActionConfig?.pin_mode || '--',
+        },
+      ];
+    }
+    if (isAction) {
+      return [
+        {
+          id: 1,
+          title: 'action_name',
+          data: itemActionConfig?.action?.name || '--',
+        },
+        {
+          id: 2,
+          title: 'pin_number',
+          data: itemActionConfig?.pin || '0',
+        },
+        {
+          id: 3,
+          title: 'default_value',
+          data: itemActionConfig?.default_value || '--',
+        },
+      ];
+    }
+    return [];
+  }, [isAction, isConfigRead, isConfigWrite, itemActionConfig]);
+
+  const title = useMemo(
+    () =>
+      ((isConfigRead || isConfigWrite) && itemActionConfig?.config?.name) ||
+      (isAction && itemActionConfig?.action?.name) ||
+      '',
+    [
+      isConfigRead,
+      isConfigWrite,
+      itemActionConfig?.config?.name,
+      itemActionConfig?.action?.name,
+      isAction,
+    ]
+  );
+
+  const subTitle = useMemo(() => device?.sensor?.name || '--', [device]);
+
+  return (
+    <View style={styles.wrap}>
+      <DetailConfigAction
+        title={title}
+        subTitle={subTitle}
+        listData={listData}
+      />
+    </View>
+  );
+};
+
+export default memo(DetailConfigActionInternal);

package/src/screens/{Gateway → AllGateway}/DeviceGatewayInfo/index.js

@@ -8,7 +8,12 @@ import Information from '../components/Information';
 
 const DeviceGatewayInfo = () => {
   const { params = {} } = useRoute();
-  const { device = {}, isZigbee = false, isModbus = false } = params;
+  const {
+    device = {},
+    isZigbee = false,
+    isModbus = false,
+    isInternal = false,
+  } = params;
   const {
     ieee_address = '',
     model_name = '',
@@ -16,9 +21,26 @@ const DeviceGatewayInfo = () => {
     delay = '',
     index = '',
     sensor = {},
+    used_pins = [],
   } = device;
   const { name = '', connection_time = '' } = sensor;
 
+  const deviceInformationInternal = useMemo(
+    () => [
+      {
+        id: 1,
+        title: 'device_name',
+        data: name,
+      },
+      {
+        id: 2,
+        title: 'used_pin',
+        data: used_pins?.join(','),
+      },
+    ],
+    [name, used_pins]
+  );
+
   const deviceInformationZigbee = useMemo(
     () => [
       {
@@ -81,7 +103,9 @@ const DeviceGatewayInfo = () => {
       <Information
         buttonBackStyles={styles.buttonBack}
         listInformation={
-          isZigbee
+          isInternal
+            ? deviceInformationInternal
+            : isZigbee
             ? deviceInformationZigbee
             : isModbus
             ? deviceInformationModbus