@eohjsc/react-native-smart-city 0.4.47 → 0.4.48

package/src/screens/Device/detail.js

@@ -8,7 +8,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
-import { IconFill } from '@ant-design/icons-react-native';
+import { IconFill, IconOutline } from '@ant-design/icons-react-native';
 import { Icon } from '@ant-design/react-native';
 import moment from 'moment';
 
@@ -47,8 +47,6 @@ import { SensorDisplayItem } from './components/SensorDisplayItem';
 import { EmergencyCountdown } from './components/EmergencyCountdown';
 import { SensorConnectStatusViewHeader } from './components/SensorConnectStatusViewHeader';
 import PreventAccess from '../../commons/PreventAccess';
-import StarFull from '../../Images/Common/star-full.svg';
-import StarOutline from '../../Images/Common/star-outline.svg';
 
 import styles from './styles';
 import Routes from '../../utils/Route';
@@ -61,7 +59,7 @@ import { useReceiveNotifications } from '../../hooks';
 import useChipJsonConfiguration, {
   useConnectChipMqtt,
 } from '../../hooks/useMqtt';
-import { watchMultiConfigs } from '../../iot/Monitor';
+import { realWatchMultiConfigs } from '../../iot/Monitor';
 
 const DeviceDetail = ({ route }) => {
   const configIdsTemp = useRef([]);
@@ -138,7 +136,8 @@ const DeviceDetail = ({ route }) => {
     }
 
     return action.some((item) => {
-      return JSON.stringify(item?.configuration)?.includes(
+      const { configuration } = item?.configuration;
+      return JSON.stringify(configuration).includes(
         '"command_prefer_over_bluetooth":true'
       );
     });
@@ -330,7 +329,9 @@ const DeviceDetail = ({ route }) => {
 
   const listMenuItem = useMemo(() => {
     const menuItems = [];
-    if (display.items.some((i) => getActionComponent(i.template))) {
+    if (
+      display.items.some((i) => getActionComponent(i.configuration.template))
+    ) {
       menuItems.push({
         route: Routes.ActivityLog,
         data: {
@@ -499,30 +500,35 @@ const DeviceDetail = ({ route }) => {
       let params = new URLSearchParams();
       const configIds = [];
 
-      // todo Bang refactor widgets like dashboard
       display.items.map((item) => {
+        const type = item?.template || item?.type;
         if (!item.configuration) {
           return;
         }
-        item.configuration.configs?.map((config) => {
-          if (!configIds.includes(config.id)) {
-            configIds.push(config.id);
-          }
-        });
-        item.configuration.options?.map((option) => {
-          if (!configIds.includes(option.config)) {
-            configIds.push(option.config);
+        if (!['action', 'value'].includes(type)) {
+          return;
+        }
+        if (type === 'action') {
+          if (
+            [
+              'on_off_button_action_template',
+              'one_button_action_template',
+            ].includes(item.configuration.template)
+          ) {
+            !configIds.includes(item.configuration.configuration.config) &&
+              configIds.push(item.configuration.configuration.config);
           }
-        });
-        if (item.configuration.config) {
-          !configIds.includes(item.configuration.config) &&
-            configIds.push(item.configuration.config);
+        }
+        if (type === 'value') {
+          item.configuration.configs.map((config) => {
+            if (!configIds.includes(config.id)) {
+              configIds.push(config.id);
+            }
+          });
         }
       });
       configIdsTemp.current = configIds.filter(Boolean);
 
-      watchMultiConfigs(configIdsTemp.current);
-
       configIds.map((id) => {
         params.append('config', id);
       });
@@ -676,7 +682,11 @@ const DeviceDetail = ({ route }) => {
           onPress={isFavorite ? removeFromFavorites : addToFavorites}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_STAR}
         >
-          {isFavorite ? <StarFull /> : <StarOutline />}
+          {isFavorite ? (
+            <IconFill name="star" size={25} color={Colors.Yellow6} />
+          ) : (
+            <IconOutline name="star" size={25} />
+          )}
         </TouchableOpacity>
 
         {isShowSetupEmergencyContact && (
@@ -691,12 +701,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <Icon
-            name={'ellipsis'}
-            size={27}
-            color={Colors.Black}
-            style={styles.moreIcon}
-          />
+          <Icon name={'more'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -715,7 +720,7 @@ const DeviceDetail = ({ route }) => {
   }, [sensor]);
 
   useEffect(() => {
-    appState === 'active' && watchMultiConfigs(configIdsTemp.current);
+    appState === 'active' && realWatchMultiConfigs(configIdsTemp.current);
   }, [appState]);
 
   const shouldRender =

package/src/screens/Device/hooks/__test__/useEvaluateValue.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import React from 'react';
 import { renderHook } from '@testing-library/react-hooks';
 import { useEvaluateValue, useGetEvaluateValue } from '../useEvaluateValue';
@@ -105,23 +104,22 @@ describe('Test useEvaluateValue', () => {
     expect(evaluateValue.current(2, 2).text).toBe(2);
   });
 
-  // NOTE: Hinh will fix it later
-  // it('test evaluate fetch from server if not exists', async () => {
-  //   const mock = new MockAdapter(api.axiosInstance);
-  //   mock.onGet(API.FETCH_VALUE_EVALUATION(111)).reply(200, {
-  //     unit_id: 1,
-  //     configs: [111],
-  //   });
-
-  //   const { result: evaluateValue } = renderHook(
-  //     () => useGetEvaluateValue(111),
-  //     {
-  //       wrapper: wrapper(valueEvaluations),
-  //     }
-  //   );
-  //   expect(evaluateValue.current).toBe(undefined);
-  //   await flushPromises();
-
-  //   expect(mock.history.get.length).toBe(1);
-  // });
+  it('test evaluate fetch from server if not exists', async () => {
+    const mock = new MockAdapter(api.axiosInstance);
+    mock.onGet(API.FETCH_VALUE_EVALUATION(111)).reply(200, {
+      unit_id: 1,
+      configs: [111],
+    });
+
+    const { result: evaluateValue } = renderHook(
+      () => useGetEvaluateValue(111),
+      {
+        wrapper: wrapper(valueEvaluations),
+      }
+    );
+    expect(evaluateValue.current).toBe(undefined);
+    await flushPromises();
+
+    expect(mock.history.get.length).toBe(1);
+  });
 });

package/src/screens/Device/styles.js

@@ -97,7 +97,4 @@ export default StyleSheet.create({
     marginLeft: 16,
     marginBottom: 16,
   },
-  moreIcon: {
-    transform: [{ rotate: '90deg' }],
-  },
 });

package/src/screens/Notification/__test__/Notification.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { act, create } from 'react-test-renderer';
 import MockAdapter from 'axios-mock-adapter';
-import { FlatList, RefreshControl } from 'react-native';
+import { Animated, RefreshControl } from 'react-native';
 import { NavigationContext } from '@react-navigation/native';
 
 import { SCProvider } from '../../../context';
@@ -10,8 +10,7 @@ import Notification from '../index';
 import NotificationItem from '../components/NotificationItem';
 import { API } from '../../../configs';
 import api from '../../../utils/Apis/axios';
-import { Text } from '../../../commons';
-import AccessibilityLabel from '../../../configs/AccessibilityLabel';
+import { WrapHeaderScrollable } from '../../../commons';
 
 const wrapComponent = () => (
   <SCProvider initState={mockSCStore({})}>
@@ -106,22 +105,17 @@ describe('test Notification', () => {
       tree = await create(wrapComponent());
     });
     const instance = tree.root;
-    const flatlist = instance.findByType(FlatList);
+    const wrapHeaderScrollable = instance.findByType(WrapHeaderScrollable);
+    expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(false);
+
+    const scrollView = instance.findByType(Animated.ScrollView);
     mock
       .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2, ''))
       .reply(200, response);
     await act(async () => {
-      await flatlist.props.onMomentumScrollBegin();
-      await flatlist.props.onEndReached();
+      scrollView.props.onMomentumScrollEnd();
     });
-    const notificationItemTexts = instance.findAll(
-      (el) =>
-        el.type === Text &&
-        el.props.accessibilityLabel === AccessibilityLabel.NotificationItemText
-    );
-    expect(notificationItemTexts[2].props.children).toBe(
-      ' invited you to join '
-    );
+    expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(true);
   });
 
   it('test onRefresh', async () => {

package/src/screens/Notification/components/NotificationItem.js

@@ -30,7 +30,6 @@ const NotificationItem = memo(({ item }) => {
           bold={i % 2 !== 0}
           key={i}
           style={styles.textNotification}
-          accessibilityLabel={AccessibilityLabel.NotificationItemText}
         >
           {i % 2 === 0 ? str : params[str]}
         </Text>

package/src/screens/Notification/index.js

@@ -1,29 +1,55 @@
-import React, { memo, useState, useCallback, useEffect, useRef } from 'react';
-import { View, FlatList, ActivityIndicator } from 'react-native';
+import React, { memo, useMemo, useState, useCallback, useEffect } from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { Icon } from '@ant-design/react-native';
 import { useFocusEffect } from '@react-navigation/native';
 
 import styles from './styles/indexStyles';
-import { API } from '../../configs';
+import { API, Colors } from '../../configs';
 import { axiosGet } from '../../utils/Apis/axios';
+import { useTranslations } from '../../hooks/Common/useTranslations';
 import NotificationItem from './components/NotificationItem';
+import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
 import {
   watchNotificationData,
   unwatchNotificationData,
 } from '../../utils/Monitor';
 import { useSCContextSelector } from '../../context';
+import { notImplemented } from '../../utils/Utils';
 import { useReceiveNotifications } from '../../hooks';
 
 const Notification = memo(() => {
-  const onEndReachedCalledDuringMomentum = useRef(false);
-  const user = useSCContextSelector((state) => state?.auth?.account?.user);
+  const t = useTranslations();
   const [page, setPage] = useState(1);
+  const user = useSCContextSelector((state) => state?.auth?.account?.user);
   const [notifications, setNotifications] = useState([]);
   const [maxPageNotification, setMaxPageNotification] = useState(1);
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [isLoadMore, setIsLoadMore] = useState(false);
+
+  const rightComponent = useMemo(
+    () => (
+      <View style={styles.rightComponent}>
+        <TouchableOpacity
+          style={styles.iconPlus}
+          onPress={() => {
+            notImplemented(t);
+          }}
+        >
+          <Icon name={'plus'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+
+        <TouchableOpacity
+          onPress={() => {
+            notImplemented(t);
+          }}
+        >
+          <Icon name={'search'} size={27} color={Colors.Black} />
+        </TouchableOpacity>
+      </View>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
 
   const fetchNotifications = useCallback(async (pageParam) => {
-    setIsLoadMore(true);
     const { success, data } = await axiosGet(
       API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam, '')
     );
@@ -31,22 +57,16 @@ const Notification = memo(() => {
       setNotifications((preState) => preState.concat(data.results));
       setMaxPageNotification(Math.ceil(data.count / 10));
     }
-    setIsLoadMore(false);
-    onEndReachedCalledDuringMomentum.current = false;
   }, []);
 
   const handleOnLoadMore = useCallback(() => {
-    if (!onEndReachedCalledDuringMomentum.current) {
-      onEndReachedCalledDuringMomentum.current = true;
-      setPage((preState) => preState + 1);
-      if (page < maxPageNotification) {
-        fetchNotifications(page + 1);
-      }
+    setPage((preState) => preState + 1);
+    if (page < maxPageNotification) {
+      fetchNotifications(page + 1);
     }
   }, [page, maxPageNotification, fetchNotifications]);
 
   const onRefresh = useCallback(async () => {
-    setIsRefreshing(true);
     setPage(1);
     const { success, data } = await axiosGet(
       API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, '')
@@ -55,20 +75,8 @@ const Notification = memo(() => {
       setNotifications(data.results);
       setMaxPageNotification(Math.ceil(data.count / 10));
     }
-    setIsRefreshing(false);
   }, []);
 
-  const Footer = useCallback(() => {
-    if (!isLoadMore) {
-      return null;
-    }
-    return (
-      <View style={styles.footer}>
-        <ActivityIndicator />
-      </View>
-    );
-  }, [isLoadMore]);
-
   useReceiveNotifications(onRefresh);
 
   useEffect(() => {
@@ -85,20 +93,18 @@ const Notification = memo(() => {
 
   return (
     <View style={styles.wrap}>
-      <FlatList
-        keyExtractor={(item) => item.id}
-        renderItem={({ item }) => <NotificationItem item={item} />}
-        data={notifications}
-        extraData={notifications}
+      <WrapHeaderScrollable
+        title={t('notifications')}
+        rightComponent={rightComponent}
+        onLoadMore={handleOnLoadMore}
         onRefresh={onRefresh}
-        onEndReachedThreshold={0.5}
-        onEndReached={handleOnLoadMore}
-        refreshing={isRefreshing}
-        onMomentumScrollBegin={() =>
-          (onEndReachedCalledDuringMomentum.current = false)
-        }
-        ListFooterComponent={<Footer />}
-      />
+        disableLoadMore={page >= maxPageNotification}
+        styleScrollView={styles.styleScrollView}
+      >
+        {notifications.map((item, index) => (
+          <NotificationItem item={item} key={index} />
+        ))}
+      </WrapHeaderScrollable>
     </View>
   );
 });

package/src/screens/Notification/styles/indexStyles.js

@@ -13,13 +13,10 @@ export default StyleSheet.create({
     marginRight: 18,
     paddingRight: 10,
   },
+  iconPlus: {
+    marginRight: 22,
+  },
   styleScrollView: {
     marginTop: -10,
   },
-  footer: {
-    width: '100%',
-    height: 50,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 });

package/src/screens/SharedUnit/index.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FlatList, RefreshControl, TouchableOpacity, View } from 'react-native';
-import { useIsFocused } from '@react-navigation/native';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
 
 import { axiosGet } from '../../utils/Apis/axios';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -20,6 +20,7 @@ const Shared = () => {
   useBlockBackAndroid();
   const t = useTranslations();
   useTitleHeader(t('text_shared_with_me'));
+  const navigation = useNavigation();
   const [tab, setTabActiveState] = useState(0);
   const isFocused = useIsFocused();
   const [sharedUnits, setSharedUnits] = useState([]);
@@ -132,6 +133,7 @@ const Shared = () => {
               return (
                 <SharedUnit
                   key={`${item.id}-${item?.is_star}-${item?.is_pin}`}
+                  navigation={navigation}
                   item={item}
                   index={index}
                   renewItem={renewItem}
@@ -155,6 +157,7 @@ const Shared = () => {
               return (
                 <SharedUnit
                   key={`${item.id}-${item.is_star}-${item.is_pin}`}
+                  navigation={navigation}
                   item={item}
                   index={index}
                   renewItem={renewItem}

package/src/screens/Sharing/InfoMemberUnit.js

@@ -58,9 +58,7 @@ const InfoMemberUnit = memo(({ route }) => {
       if (stateAlertAction?.is_change) {
         hideAlertAction();
         if (itemSelected?.role?.is_owner) {
-          setTimeout(() => {
-            setIsShowWarning(true);
-          }, 500);
+          setIsShowWarning(true);
         }
       } else {
         removeMember(

package/src/screens/Sharing/MemberList.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { IconOutline } from '@ant-design/icons-react-native';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
-import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -17,8 +17,6 @@ import { useSCContextSelector } from '../../context';
 import { useBackendPermission } from '../../utils/Permission/backend';
 import { ToastBottomHelper } from '../../utils/Utils';
 
-const isAndroid = Platform.OS === 'android';
-
 const MemberList = ({ route }) => {
   const t = useTranslations();
   const { navigate } = useNavigation();
@@ -71,16 +69,6 @@ const MemberList = ({ route }) => {
     hideStateAlertSharingMenu();
   }, [hideStateAlertSharingMenu, isOwner, leaveUnit, unit.name]);
 
-  const getIconRight = useCallback(() => {
-    if (isOwner) {
-      if (isAndroid) {
-        return 'plus-square';
-      }
-      return 'plus';
-    }
-    return 'ellipsis';
-  }, [isOwner]);
-
   useEffect(() => {
     if (isFocused) {
       onRefresh();
@@ -91,13 +79,12 @@ const MemberList = ({ route }) => {
     <TouchableOpacity
       accessibilityLabel={AccessibilityLabel.MEMBER_LIST_RIGHT_HEADER_TOUCH}
       onPress={onPressRightHeader}
-      style={[styles.rightHeader]}
+      style={styles.rightHeader}
     >
       <IconOutline
-        name={getIconRight()}
+        name={isOwner ? 'plus' : 'more'}
         size={30}
         color={Colors.Black}
-        style={{ transform: [{ rotate: isOwner ? '0deg' : '90deg' }] }}
       />
     </TouchableOpacity>
   );

package/src/screens/Sharing/__test__/InfoMemberUnit.test.js

@@ -131,7 +131,6 @@ describe('Test InfoMemberUnit', () => {
   });
 
   it('test change owner', async () => {
-    jest.useFakeTimers();
     mock.onGet(API.SHARE.UNIT_MEMBER_INFO(1, 1)).reply(200, {
       id: 2,
       identity: 'owner',
@@ -164,7 +163,6 @@ describe('Test InfoMemberUnit', () => {
     await act(async () => {
       await alertAction.props.rightButtonClick();
     });
-    jest.runAllTimers();
     expect(alertAction.props.visible).toEqual(false);
     expect(modalPopupCT.props.isVisible).toEqual(true);