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

package/src/commons/Calendar/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Image } from 'react-native';
 import { Calendar } from 'react-native-calendars';
 import moment from 'moment';
@@ -20,6 +20,10 @@ export default ({
   const t = useTranslations();
   const [dateSelected, setDateSelected] = useState(defaultDate);
 
+  useEffect(() => {
+    setDateSelected(defaultDate);
+  }, [defaultDate]);
+
   const onDateSelected = useCallback(
     (day) => {
       setDateSelected(moment(day.timestamp));

package/src/commons/ConnectingProcess/__test__/Connecting.test.js

@@ -14,9 +14,12 @@ describe('Test ConnectingProcess', () => {
   let tree;
   test('create ConnectingProcess', () => {
     const scan_sensor_data = { imei: 'SENSOR-afasdfas' };
+    const devicePrefixName = 'SENSOR';
     const gateway = { id: 1, name: 'gateway' };
     const station = { id: 1, icon_kit: 'a', name: 'station' };
-    const route = { params: { scan_sensor_data, gateway, station } };
+    const route = {
+      params: { scan_sensor_data, gateway, station, devicePrefixName },
+    };
     act(() => {
       tree = renderer.create(wrapComponent(route));
     });

package/src/commons/Device/HorizontalBarChart.js

@@ -105,7 +105,11 @@ const HorizontalBarChart = memo(({ datas, config }) => {
 
   const heightChart = useMemo(() => {
     const dataX = datas[0].data.map((item) => item.x);
-    return dataX.length > 1 ? dataX.length * 55 : 90;
+    return dataX.length > 1
+      ? dataX.length === 2
+        ? dataX.length * 55 + 30
+        : dataX.length * 55
+      : 90;
   }, [datas]);
 
   useEffect(() => {
@@ -171,7 +175,7 @@ const styles = StyleSheet.create({
   },
   webviewStyle: {
     flex: 1,
-    minHeight: 200,
+    minHeight: 0,
     height: 300,
     opacity: 0.99,
   },

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

@@ -1,55 +1,24 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { View } from 'react-native';
 import { useTranslations } from '../../../hooks/Common/useTranslations';
-import { useIsFocused } from '@react-navigation/native';
+import { useSensorsStatus } from '../../../hooks/Common';
 
 import { Section } from '../../Section';
 import ItemDevice from '../../Device/ItemDevice';
 import ItemOneTap from '../OneTap/ItemOneTap';
 import ItemAddNew from '../../Device/ItemAddNew';
 import styles from './styles';
-import { API } from '../../../configs';
-import { axiosGet } from '../../../utils/Apis/axios';
 
 const SubUnitFavorites = ({
   unit,
   isOwner,
   favorites,
-  serverDown,
   isGGHomeConnected,
   wrapItemStyle,
 }) => {
   const t = useTranslations();
-  const isFocused = useIsFocused();
-  const intervalSensorStatus = useRef();
-  const [sensorsStatus, setSensorsStatus] = useState([]);
 
-  useEffect(() => {
-    if (isFocused) {
-      const getSensorsStatus = async () => {
-        const params = new URLSearchParams();
-        if (favorites?.devices?.length > 0) {
-          favorites.devices.forEach((sensor) => {
-            params.append('sensors', sensor.id);
-          });
-          const { success, data } = await axiosGet(
-            API.UNIT.SENSORS_STATUS(unit.id),
-            {
-              params: params,
-            }
-          );
-          if (success) {
-            setSensorsStatus(data);
-          }
-        }
-      };
-      const updateInterval = setInterval(getSensorsStatus, 5000);
-      intervalSensorStatus.current = updateInterval;
-      return () => clearInterval(updateInterval);
-    } else {
-      clearInterval(intervalSensorStatus.current);
-    }
-  }, [isFocused, favorites?.devices, unit.id]);
+  const { getStatus, serverDown } = useSensorsStatus(unit, favorites?.devices);
 
   const handleOnAddNew = () => {
     alert(t('feature_under_development'));
@@ -74,7 +43,7 @@ const SubUnitFavorites = ({
               station={sensor.station}
               isGGHomeConnected={isGGHomeConnected}
               serverDown={serverDown}
-              status={sensorsStatus.find((s) => s.id === sensor.id)}
+              status={getStatus(sensor)}
               wrapStyle={wrapItemStyle}
             />
           ))}

package/src/commons/SubUnit/ShortDetail.js

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { useNavigation, useIsFocused } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
+import { useSensorsStatus } from '../../hooks/Common';
 
-import { Images, Device, API } from '../../configs';
+import { Images, Device } from '../../configs';
 import { DEVICE_TYPE, TESTID } from '../../configs/Constants';
 import { Section } from '../Section';
 import Text from '../Text';
@@ -14,51 +15,16 @@ import { standardizeCameraScreenSize } from '../../utils/Utils';
 import Routes from '../../utils/Route';
 import FastImage from 'react-native-fast-image';
 import MediaPlayerDetail from '../MediaPlayerDetail';
-import { axiosGet } from '../../utils/Apis/axios';
 
 const { standardizeWidth, standardizeHeight } = standardizeCameraScreenSize(
   Device.screenWidth - 32
 );
 
-const ShortDetailSubUnit = ({
-  unit,
-  station,
-  serverDown,
-  isGGHomeConnected,
-}) => {
+const ShortDetailSubUnit = ({ unit, station, isGGHomeConnected }) => {
   const t = useTranslations();
-  const isFocused = useIsFocused();
   const { navigate } = useNavigation();
-  const intervalSensorStatus = useRef();
 
-  const [sensorsStatus, setSensorsStatus] = useState([]);
-
-  useEffect(() => {
-    if (isFocused) {
-      const getSensorsStatus = async () => {
-        const params = new URLSearchParams();
-        if (station?.sensors?.length > 0) {
-          station.sensors.forEach((sensor) => {
-            params.append('sensors', sensor.id);
-          });
-          const { success, data } = await axiosGet(
-            API.UNIT.SENSORS_STATUS(unit.id),
-            {
-              params: params,
-            }
-          );
-          if (success) {
-            setSensorsStatus(data);
-          }
-        }
-      };
-      const updateInterval = setInterval(getSensorsStatus, 5000);
-      intervalSensorStatus.current = updateInterval;
-      return () => clearInterval(updateInterval);
-    } else {
-      clearInterval(intervalSensorStatus.current);
-    }
-  }, [isFocused, station?.sensors, unit.id]);
+  const { getStatus, serverDown } = useSensorsStatus(unit, station?.sensors);
 
   const renderCamera = () => {
     if (station?.camera) {
@@ -158,7 +124,7 @@ const ShortDetailSubUnit = ({
                     station={station}
                     isGGHomeConnected={isGGHomeConnected}
                     serverDown={serverDown}
-                    status={sensorsStatus.find((s) => s.id === sensor.id)}
+                    status={getStatus(sensor)}
                   />
                 );
             }

package/src/configs/Constants.js

@@ -74,6 +74,7 @@ export const Constants = {
 export const DEVICE_TYPE = {
   LG_THINQ: 'LG_THINQ',
   HANET: 'HANET',
+  ZIGBEE: 'ZIGBEE',
 };
 
 const marginItem = 12;
@@ -393,6 +394,7 @@ export const TESTID = {
   BUTTON_TEMPLATE_2: 'BUTTON_TEMPLATE_2',
   BUTTON_TEMPLATE_3: 'BUTTON_TEMPLATE_3',
   TEXT_DOOR_LOOK_ON_OFF: 'TEXT_DOOR_LOOK_ON_OFF',
+  BUTTON_ON_OFF: 'BUTTON_ON_OFF',
 
   //  Device Detail
   DEVICE_DETAIL_MEDIA_PLAYER: 'DEVICE_DETAIL_MEDIA_PLAYER',
@@ -679,6 +681,9 @@ export const TESTID = {
   GENERATE_PASSCODE_SET_TIME: 'GENERATE_PASSCODE_SET_TIME',
   GENERATE_PASSCODE_SET_DURATION: 'GENERATE_PASSCODE_SET_DURATION',
 
+  //Passcode
+  PASSCODE_LIST: 'PASSCODE_LIST',
+
   //AutoLock
   AUTO_LOCK_BUTTON_ENABLE: 'AUTO_LOCK_BUTTON_ENABLE',
   AUTO_LOCK_BUTTON_INSTANT: 'AUTO_LOCK_BUTTON_INSTANT',

package/src/hooks/Common/index.js

@@ -4,6 +4,7 @@ import useForceUpdate from './useForceUpdate';
 import useKeyboardShow from './useKeyboardShow';
 import usePopover from './usePopover';
 import useTitleHeader from './useTitleHeader';
+import useSensorsStatus from './useSensorsStatus';
 import { useBlockBackAndroid } from './useBlockBackAndroid';
 import { useIsOwnerOfUnit } from './useIsOwnerOfUnit';
 import { useStatusBar } from './useStatusBar';
@@ -20,4 +21,5 @@ export {
   useIsOwnerOfUnit,
   useStatusBar,
   useGetIdUser,
+  useSensorsStatus,
 };

package/src/hooks/Common/useSensorsStatus.js

@@ -0,0 +1,52 @@
+import { useState, useEffect, useRef } from 'react';
+import { useIsFocused } from '@react-navigation/native';
+import { axiosGet } from '../../utils/Apis/axios';
+import { API } from '../../configs';
+
+const useSensorsStatus = (unit, sensors) => {
+  const isFocused = useIsFocused();
+  const intervalSensorStatus = useRef();
+  const [sensorsStatus, setSensorsStatus] = useState([]);
+  const [serverDown, setServerDown] = useState(false);
+
+  useEffect(() => {
+    if (isFocused) {
+      const getSensorsStatus = async () => {
+        const params = new URLSearchParams();
+        if (sensors?.length > 0) {
+          sensors.forEach((sensor) => {
+            params.append('sensors', sensor.id);
+          });
+          const { success, data, resp_status } = await axiosGet(
+            API.UNIT.SENSORS_STATUS(unit.id),
+            {
+              params: params,
+            }
+          );
+          if (success) {
+            setSensorsStatus(data);
+            setServerDown(false);
+          } else if (resp_status >= 500) {
+            setServerDown(true);
+          }
+        }
+      };
+      const updateInterval = setInterval(getSensorsStatus, 5000);
+      intervalSensorStatus.current = updateInterval;
+      return () => clearInterval(updateInterval);
+    } else {
+      clearInterval(intervalSensorStatus.current);
+    }
+  }, [isFocused, sensors, unit.id]);
+
+  const getStatus = (sensor) => {
+    sensorsStatus.find((s) => s.id === sensor.id);
+  };
+
+  return {
+    getStatus,
+    serverDown,
+  };
+};
+
+export default useSensorsStatus;

package/src/screens/AddNewGateway/PlugAndPlay/__test__/ConnectWifiWarning.test.js

@@ -16,6 +16,7 @@ jest.mock('react', () => {
     useState: jest.fn((init) => [init, mockSetState]),
   };
 });
+
 jest.mock('react-native-udp', () => {
   return {
     createSocket: () => ({

package/src/screens/AddNewGateway/__test__/SelectGateway.test.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { act, create } from 'react-test-renderer';
+import axios from 'axios';
+
+import AddNewGatewaySelectGateway from '../SelectGateway';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import { SafeAreaView } from 'react-native';
+
+const wrapComponent = (route) => (
+  <SCProvider initState={mockSCStore({})}>
+    <AddNewGatewaySelectGateway route={route} />
+  </SCProvider>
+);
+
+jest.mock('axios');
+
+jest.mock('react', () => {
+  return { ...jest.requireActual('react'), memo: (x) => x };
+});
+
+const mockedNavigate = jest.fn();
+const mockedGoBack = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  return {
+    ...jest.requireActual('@react-navigation/native'),
+    useNavigation: () => ({
+      navigate: mockedNavigate,
+      goBack: mockedGoBack,
+    }),
+    useIsFocused: () => true,
+  };
+});
+
+describe('Test AddNewGatewaySelectGateway', () => {
+  let tree;
+  let route;
+
+  afterEach(() => {
+    axios.get.mockClear();
+    mockedNavigate.mockClear();
+  });
+
+  beforeEach(() => {
+    route = {
+      params: {
+        unit_id: 1,
+      },
+    };
+  });
+
+  test('create AddNewGatewaySelectGateway', async () => {
+    await act(async () => {
+      tree = await create(wrapComponent(route));
+    });
+    const instance = tree.root;
+    const safeAreaView = instance.findAllByType(SafeAreaView);
+    expect(safeAreaView).toHaveLength(1);
+  });
+});

package/src/screens/Device/__test__/DetailHistoryChart.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import renderer, { act } from 'react-test-renderer';
+import { DetailHistoryChart } from '../components/DetailHistoryChart';
+import { SCProvider } from '../../../context';
+import { mockSCStore } from '../../../context/mockStore';
+import HistoryChart from '../../../commons/Device/HistoryChart';
+const mockSetState = jest.fn();
+jest.mock('react', () => {
+  return {
+    ...jest.requireActual('react'),
+    memo: (x) => x,
+    useState: jest.fn((init) => [init, mockSetState]),
+  };
+});
+const wrapComponent = (item, sensor) => (
+  <SCProvider initState={mockSCStore({})}>
+    <DetailHistoryChart item={item} sensor={sensor} />
+  </SCProvider>
+);
+describe('Test DetailHistoryChart', () => {
+  let tree;
+  test('create DetailHistoryChart', () => {
+    const item = {
+      configuration: {
+        configs: [0],
+        icon: 'slack',
+      },
+    };
+    const sensor = {
+      name: 'Sensor name',
+      is_managed_by_backend: false,
+    };
+    act(() => {
+      tree = renderer.create(wrapComponent(item, sensor));
+    });
+    const instance = tree.root;
+    const historyChart = instance.findAllByType(HistoryChart);
+    expect(historyChart).toHaveLength(1);
+  });
+});

package/src/screens/Device/detail.js

@@ -8,7 +8,6 @@ import React, {
 import { View, TouchableOpacity } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import moment from 'moment';
-import _ from 'lodash';
 import { get } from 'lodash';
 import { useSelector } from 'react-redux';
 import { IconFill, IconOutline } from '@ant-design/icons-react-native';
@@ -463,10 +462,14 @@ const DeviceDetail = ({ route }) => {
     setDisplayValues((currentDisplayValues) => {
       for (const [configId, value] of Object.entries(configValues)) {
         const intId = parseInt(configId);
-        const index = _.findIndex(currentDisplayValues, (o) => o.id === intId);
+        const index = currentDisplayValues.findIndex(
+          (element) => element.id === intId
+        );
+
+        const item = currentDisplayValues[index];
         if (index !== -1) {
           currentDisplayValues[index].value = value;
-          currentDisplayValues[index].evaluate = null;
+          currentDisplayValues[index].evaluate = item.evaluate;
         } else {
           currentDisplayValues.push({
             id: intId,
@@ -496,7 +499,19 @@ const DeviceDetail = ({ route }) => {
       params: { unitId: unit?.id, group },
     });
   }, [navigation, unit?.group, unit?.id]);
-
+  const isHaveColorSliderTemplate = useMemo(() => {
+    let isFlag = false;
+    display?.items.some((item) => {
+      switch (item?.configuration?.template) {
+        case 'color_picker_template':
+        case 'slider_range_template':
+          return (isFlag = true);
+        default:
+          return (isFlag = false);
+      }
+    });
+    return isFlag;
+  }, [display]);
   // replace isConnected=True to see template
   const renderSensorConnected = () => {
     return (
@@ -536,31 +551,33 @@ const DeviceDetail = ({ route }) => {
               );
           }
         })}
-        <Card title={t('controller')}>
-          {display.items.map((item) => {
-            switch (item?.configuration?.template) {
-              case 'color_picker_template':
-              case 'slider_range_template':
-                return (
-                  <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}
-                  />
-                );
-              default:
-                return <></>;
-            }
-          })}
-        </Card>
+        {!!isHaveColorSliderTemplate && (
+          <Card title={t('controller')}>
+            {display.items.map((item) => {
+              switch (item?.configuration?.template) {
+                case 'color_picker_template':
+                case 'slider_range_template':
+                  return (
+                    <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}
+                    />
+                  );
+                default:
+                  return <></>;
+              }
+            })}
+          </Card>
+        )}
       </SensorConnectStatusViewHeader>
     );
   };

package/src/screens/HanetCamera/Detail.js

@@ -81,13 +81,18 @@ const HanetCameraDetail = ({ route }) => {
 
   const CheckInItem = useCallback(
     ({ item }) => {
-      const textMask =
-        item.detected_mask === 'MASK_OFF'
-          ? t('mask_off')
-          : item.detected_mask === 'MASK_ON'
-          ? t('mask_on')
-          : '';
-      const isStranger = item.person_type === 'STRANGER';
+      const textMaskMapping = {
+        MASK_OFF: t('mask_off'),
+        MASK_ON: t('mask_on'),
+      };
+      const textNameMapping = {
+        STRANGER: t('stranger'),
+        IMAGE_FROM_CAMERA: t('image_from_camera'),
+      };
+      const textMask = textMaskMapping[item.detected_mask] || '';
+      const textName = textNameMapping[item.person_type] || item.person_name;
+      const isStranger = !['EMPLOYEE', 'CUSTOMER'].includes(item.person_type);
+
       return (
         <View style={styles.wrapItem}>
           <Text type="Body" color={Colors.Gray7} style={styles.timeCheckIn}>
@@ -103,13 +108,15 @@ const HanetCameraDetail = ({ route }) => {
           </View>
           <View style={styles.wrapItemInfo}>
             <Text type="Body" color={isStranger ? Colors.Red6 : Colors.Gray9}>
-              {isStranger ? t('stranger') : item.person_name}
+              {textName}
             </Text>
-            <View style={styles.itemDescription}>
-              <Text type="Label" color={Colors.Gray7}>
-                {textMask}
-              </Text>
-            </View>
+            {!!textMask && (
+              <View style={styles.itemDescription}>
+                <Text type="Label" color={Colors.Gray7}>
+                  {textMask}
+                </Text>
+              </View>
+            )}
           </View>
           <View style={styles.wrapAvatar}>
             <Image

package/src/screens/HanetCamera/ManageAccess.js

@@ -1,12 +1,11 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, TouchableOpacity, Image, FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import ImagePicker from 'react-native-image-crop-picker';
 import { Icon } from '@ant-design/react-native';
-import { IconOutline, IconFill } from '@ant-design/icons-react-native';
+import { IconOutline } from '@ant-design/icons-react-native';
 import { HeaderCustom } from '../../commons/Header';
-import BottomSheet from '../../commons/BottomSheet';
 import Text from '../../commons/Text';
+import RequestFaceIDPopup from './components/RequestFaceIDPopup';
 import styles from './styles/manageAccessStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 import { useHanetPlaceMembers } from './hooks';
@@ -14,7 +13,6 @@ import { useBoolean } from '../../hooks/Common';
 import { Colors } from '../../configs';
 import { TESTID } from '../../configs/Constants';
 import Routes from '../../utils/Route';
-import SmartPhoneSvg from '../../../assets/images/Common/SmartPhone.svg';
 
 const HanetManageAccess = ({ route }) => {
   const t = useTranslations();
@@ -40,7 +38,7 @@ const HanetManageAccess = ({ route }) => {
   const [showAddMemberModal, setShowAddMemberModal, setHideAddMemberModal] =
     useBoolean();
 
-  const captureFaceID = () => {
+  const onCaptureFaceID = () => {
     navigate(Routes.HanetCaptureFaceID, {
       title: t('add_new_member'),
       hanetPlace: hanetPlace,
@@ -52,15 +50,7 @@ const HanetManageAccess = ({ route }) => {
     });
   };
 
-  const chooseFile = async () => {
-    const options = {
-      mediaType: 'photo',
-      compressImageMaxHeight: 1280,
-      compressImageMaxWidth: 738,
-      compressImageQuality: 0.7,
-      forceJpg: true,
-    };
-    const result = await ImagePicker.openPicker(options);
+  const onChooseFile = (result) => {
     navigate(Routes.HanetMemberInfo, {
       hanetPlace: hanetPlace,
       hanetMember: {
@@ -72,25 +62,6 @@ const HanetManageAccess = ({ route }) => {
     });
   };
 
-  const addMemberOptions = [
-    {
-      icon: <IconFill name="camera" color={Colors.Gray9} size={27} />,
-      text: t('capture_image'),
-      onChoose: () => {
-        setHideAddMemberModal();
-        captureFaceID();
-      },
-    },
-    {
-      icon: <SmartPhoneSvg />,
-      text: t('pick_available_image_from_your_phone'),
-      onChoose: () => {
-        setHideAddMemberModal();
-        chooseFile();
-      },
-    },
-  ];
-
   const MemberItem = useCallback(
     ({ item }) => {
       return (
@@ -146,26 +117,13 @@ const HanetManageAccess = ({ route }) => {
         contentContainerStyle={styles.contentContainerStyle}
         scrollIndicatorInsets={{ right: 1 }}
       />
-      <BottomSheet
-        isVisible={showAddMemberModal}
-        onBackdropPress={setHideAddMemberModal}
+      <RequestFaceIDPopup
         title={t('add_member')}
-        style={styles.addMemberModal}
-      >
-        {addMemberOptions.map((option, i) => (
-          <TouchableOpacity
-            key={i}
-            onPress={option.onChoose}
-            style={styles.row}
-            testID={`${TESTID.HANET_ADD_MEMBER_OPTION}_${i}`}
-          >
-            {option.icon}
-            <Text type="H4" color={Colors.Gray9} style={styles.textOption}>
-              {option.text}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </BottomSheet>
+        isVisible={showAddMemberModal}
+        setHide={setHideAddMemberModal}
+        onCaptureFaceID={onCaptureFaceID}
+        onChooseFile={onChooseFile}
+      />
     </View>
   );
 };