@eohjsc/react-native-smart-city 0.6.0-rc1 → 0.6.0-rc3

package/package.json

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

package/src/commons/Header/HeaderCustom.js

@@ -3,6 +3,7 @@ import { View, Text, TouchableOpacity, Image } from 'react-native';
 import Images from '../../configs/Images';
 import { Colors } from '../../configs';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import styles from './Styles/HeaderCustomStyles';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -98,7 +99,11 @@ const HeaderCustom = ({
               accessibilityLabel={AccessibilityLabel.MENU_POPPER_MORE}
             >
               <View style={styles.buttonBack}>
-                <AntDesign name={'more'} size={27} color={Colors.Black} />
+                <MaterialIcons
+                  name={'more-vert'}
+                  size={27}
+                  color={Colors.Black}
+                />
               </View>
             </TouchableOpacity>
           </>

package/src/commons/SummaryItem/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import styles from './styles';
 import { Colors } from '../../configs';
@@ -11,38 +11,37 @@ import WaterQuality from '../../../assets/images/WaterQuality.svg';
 import Device from '../../../assets/images/Device.svg';
 import { AccessibilityLabel } from '../../configs/Constants';
 
+const iconMap = {
+  air_quality: AirQuality,
+  water_quality: WaterQuality,
+  temperature: Temperature,
+  uv_index: UVIndex,
+  three_phase_power_consumption: PowerMeter,
+  power_consumption: PowerMeter,
+  default: Device,
+};
+
 const SummaryItem = memo(({ item, goToSummary }) => {
-  const Icon = (() => {
-    switch (item.template) {
-      case 'air_quality':
-        return AirQuality; /* istanbul ignore next */
-      case 'water_quality':
-        return WaterQuality; /* istanbul ignore next */
-      case 'temperature':
-        return Temperature; /* istanbul ignore next */
-      case 'uv_index':
-        return UVIndex; /* istanbul ignore next */
-      case 'three_phase_power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      case 'power_consumption':
-        return PowerMeter; /* istanbul ignore next */
-      default:
-        return Device; /* istanbul ignore next */
-    }
-  })();
+  const { template, left_text, left_value, id } = item;
+  const Icon = useMemo(() => iconMap[template] || iconMap.default, [template]);
+
+  const handlePress = useCallback(() => {
+    goToSummary(item);
+  }, [goToSummary, item]);
+
   return (
     <TouchableOpacity
-      onPress={() => goToSummary(item)}
+      onPress={handlePress}
       style={styles.wrapSummaryItem}
-      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${item?.id}`}
+      accessibilityLabel={`${AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_ITEM}-${id}`}
     >
       <View style={styles.summaryItem}>
         <Icon />
         <Text type="Body" color={Colors.Gray7} style={styles.summaryText}>
-          {item.left_text}
+          {left_text}
         </Text>
         <Text color={Colors.Gray9} bold>
-          {item.left_value}
+          {left_value}
         </Text>
       </View>
       <View style={styles.dashItem} />

package/src/commons/Unit/HeaderUnit/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useRef } from 'react';
 import { View, TouchableOpacity, StyleSheet, StatusBar } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation } from '@react-navigation/native';
 import { getStatusBarHeight } from 'react-native-iphone-x-helper';
 
@@ -84,8 +85,8 @@ const HeaderUnit = memo(
               accessibilityLabel={idButtonMore}
             >
               <View style={styles.btnMore}>
-                <AntDesign
-                  name={'more'}
+                <MaterialIcons
+                  name={'more-vert'}
                   size={27}
                   color={transparent ? Colors.White : Colors.Black}
                 />

package/src/commons/Unit/SharedUnit.js

@@ -100,7 +100,7 @@ const SharedUnit = ({
               />
             ) : (
               <AntDesign
-                name="pushpin"
+                name="pushpino"
                 size={20}
                 onPress={addPinSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_PIN_SHARED_UNIT}-${item.id}`}
@@ -116,7 +116,7 @@ const SharedUnit = ({
               />
             ) : (
               <AntDesign
-                name="star"
+                name="staro"
                 size={20}
                 onPress={addStarSharedUnit}
                 accessibilityLabel={`${AccessibilityLabel.ICON_ADD_STAR_SHARED_UNIT}-${item.id}`}

package/src/configs/API.js

@@ -195,8 +195,7 @@ const API = {
     },
   },
   NOTIFICATION: {
-    LIST_EOH_NOTIFICATIONS: (page, type) =>
-      `/notifications/eoh/?page=${page}&type=${type}`,
+    LIST_EOH_NOTIFICATIONS: (page) => `/notifications/eoh/?page=${page}`,
     SET_READ: (id) => `/notifications/eoh/${id}/set_read/`,
   },
   VALUE_EVALUATIONS: () => '/property_manager/config_value_evaluations/',

package/src/screens/Automate/ScriptDetail/index.js

@@ -8,6 +8,7 @@ import React, {
 import { Image, Platform, TouchableOpacity, View, Switch } from 'react-native';
 import { PopoverMode } from 'react-native-popover-view';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { useTranslations } from '../../../hooks/Common/useTranslations';
 import styles from './Styles/indexStyles';
@@ -191,7 +192,7 @@ const ScriptDetail = ({ route }) => {
           accessibilityLabel={AccessibilityLabel.ICON_MORE}
         >
           <View style={[styles.headerButton, styles.moreButton]}>
-            <AntDesign name={'more'} size={27} color={Colors.Black} />
+            <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
           </View>
         </TouchableOpacity>
       </View>

package/src/screens/Automate/index.js

@@ -197,7 +197,7 @@ const Automate = () => {
       /* istanbul ignore next */
       headerRight: () => (
         <TouchableOpacity style={styles.buttonAdd}>
-          <AntDesign name={'plus-circle'} size={28} color={Colors.Orange} />
+          <AntDesign name={'pluscircle'} size={28} color={Colors.Orange} />
         </TouchableOpacity>
       ),
     });

package/src/screens/Device/detail.js

@@ -9,6 +9,7 @@ import React, {
 import { View, TouchableOpacity, Platform } from 'react-native';
 import { useNavigation, useFocusEffect } from '@react-navigation/native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 
 import { SCContext } from '../../context';
@@ -684,9 +685,9 @@ const DeviceDetail = ({ route }) => {
         >
           <View style={styles.buttonStar}>
             {isFavorite ? (
-              <AntDesign name="star" size={25} color={Colors.Yellow6} />
+              <AntDesign name="star" size={30} color={Colors.Yellow6} />
             ) : (
-              <AntDesign name="star" size={25} />
+              <AntDesign name="staro" size={30} />
             )}
           </View>
         </TouchableOpacity>
@@ -705,7 +706,7 @@ const DeviceDetail = ({ route }) => {
           ref={refMenuAction}
           accessibilityLabel={AccessibilityLabel.HEADER_DEVICE_BUTTON_MORE}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/HanetCamera/Detail.js

@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 import { View, TouchableOpacity, FlatList, Image } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
 import styles from './styles/detailStyles';
 import { HeaderCustom } from '../../commons/Header';
@@ -184,7 +184,11 @@ const HanetCameraDetail = ({ route }) => {
               onPress={handleShowMenuAction}
               ref={refMenuAction}
             >
-              <AntDesign name={'more'} size={27} color={Colors.Black} />
+              <MaterialIcons
+                name={'more-vert'}
+                size={27}
+                color={Colors.Black}
+              />
             </TouchableOpacity>
           </View>
         );

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

@@ -73,9 +73,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -101,9 +99,7 @@ describe('test Notification', () => {
         type: 'NEWS',
       });
     }
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -112,9 +108,7 @@ describe('test Notification', () => {
     expect(wrapHeaderScrollable.props.disableLoadMore).toEqual(false);
 
     const scrollView = instance.findByType(Animated.ScrollView);
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(2)).reply(200, response);
     await act(async () => {
       scrollView.props.onMomentumScrollEnd();
     });
@@ -144,9 +138,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });
@@ -179,9 +171,7 @@ describe('test Notification', () => {
         },
       ],
     };
-    mock
-      .onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, ''))
-      .reply(200, response);
+    mock.onGet(API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)).reply(200, response);
     await act(async () => {
       tree = await create(wrapComponent());
     });

package/src/screens/Notification/index.js

@@ -41,7 +41,7 @@ const Notification = memo(() => {
             notImplemented(t);
           }}
         >
-          <AntDesign name={'search'} size={27} color={Colors.Black} />
+          <AntDesign name={'search1'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),
@@ -51,7 +51,7 @@ const Notification = memo(() => {
 
   const fetchNotifications = useCallback(async (pageParam) => {
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam, '')
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(pageParam)
     );
     if (success) {
       setNotifications((preState) => preState.concat(data.results));
@@ -69,7 +69,7 @@ const Notification = memo(() => {
   const onRefresh = useCallback(async () => {
     setPage(1);
     const { success, data } = await axiosGet(
-      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1, '')
+      API.NOTIFICATION.LIST_EOH_NOTIFICATIONS(1)
     );
     if (success) {
       setNotifications(data.results);

package/src/screens/Sharing/UnitMemberList.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useIsFocused } from '@react-navigation/native';
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTranslations } from '../../hooks/Common/useTranslations';
@@ -81,11 +82,11 @@ const UnitMemberList = ({ route }) => {
       onPress={onPressRightHeader}
       style={styles.rightHeader}
     >
-      <AntDesign
-        name={isOwner ? 'plus' : 'more'}
-        size={30}
-        color={Colors.Black}
-      />
+      {isOwner ? (
+        <AntDesign name={'plus'} size={30} color={Colors.Black} />
+      ) : (
+        <MaterialIcons name={'more-vert'} size={30} color={Colors.Black} />
+      )}
     </TouchableOpacity>
   );
 

package/src/screens/SmartIr/components/GroupButtonByType/GroupButtonByType.js

@@ -6,6 +6,7 @@ import SmartTiviActionTemplate from '../../../../commons/ActionGroup/SmartTiviAc
 import Text from '../../../../commons/Text';
 import { ModalCustom } from '../../../../commons/Modal';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { Colors } from '../../../../configs';
 import TextInput from '../../../../commons/Form/TextInput';
 import { ButtonsBottom } from './ButtonsBottom';
@@ -69,8 +70,8 @@ const GroupButtonByType = memo(({ route }) => {
               style={[styles.headerButton]}
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_MORE}
             >
-              <AntDesign
-                name={'more'}
+              <MaterialIcons
+                name={'more-vert'}
                 size={27}
                 color={Colors.Black}
                 accessibilityLabel={AccessibilityLabel.ICON_OUTLINE_TYPE_MORE}

package/src/screens/SubUnit/ManageSubUnit.js

@@ -15,6 +15,7 @@ import Text from '../../commons/Text';
 
 import styles from './ManageSubUnitStyles';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import Routes from '../../utils/Route';
 import { RowItem } from '../../commons/RowItem';
 import NoSubUnitImage from '../../../assets/images/Illustrations.svg';
@@ -60,7 +61,7 @@ const ManageSubUnit = ({ route }) => {
           // ref={refMenuAction}
           style={[styles.headerButton, styles.moreButton]}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     ),

package/src/screens/Template/detail.js

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useNavigation, useRoute } from '@react-navigation/native';
 
 import WrapHeaderScrollable from '../../commons/Sharing/WrapHeaderScrollable';
@@ -163,7 +163,7 @@ const TemplateDetail = () => {
           ref={refMenuAction}
           style={styles.headerButton}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/SmartAccountItem.js

@@ -4,7 +4,7 @@ import React, { memo, useRef } from 'react';
 import styles from './SmartAccountStyles';
 import { Colors } from '../../configs';
 import Text from '../../commons/Text';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { AccessibilityLabel } from '../../configs/Constants';
 
 export const SmartAccountItem = memo(
@@ -44,7 +44,7 @@ export const SmartAccountItem = memo(
           onPress={onPressMore}
           ref={buttonMoreRef}
         >
-          <AntDesign name={'more'} size={27} color={Colors.Black} />
+          <MaterialIcons name={'more-vert'} size={27} color={Colors.Black} />
         </TouchableOpacity>
       </View>
     );

package/src/screens/Unit/Summaries.js

@@ -10,6 +10,7 @@ import { AccessibilityLabel } from '../../configs/Constants';
 import { useSCContextSelector } from '../../context';
 
 const Summaries = memo(({ unit }) => {
+  const { id } = unit;
   const [unitSummaries, setUnitSummaries] = useState([]);
   const isFocused = useIsFocused();
   const navigation = useNavigation();
@@ -17,12 +18,12 @@ const Summaries = memo(({ unit }) => {
   const timeoutId = useRef(null);
 
   const fetchUnitSummary = useCallback(async () => {
-    if (!unit.id) {
+    if (!id) {
       return false;
     }
 
     const { success, data } = await axiosGet(
-      API.UNIT.UNIT_SUMMARY(unit.id),
+      API.UNIT.UNIT_SUMMARY(id),
       {},
       true
     );
@@ -31,18 +32,18 @@ const Summaries = memo(({ unit }) => {
       return true;
     }
     return false;
-  }, [unit.id]);
+  }, [id]);
 
   const goToSummary = useCallback(
     (summary) => {
       navigation.navigate(Routes.UnitSummary, {
         summaryId: summary.id,
-        unitId: unit.id,
+        unitId: id,
         summaryData: summary,
         unitData: unit,
       });
     },
-    [navigation, unit]
+    [navigation, unit, id]
   );
 
   const continuousFetchSummary = useCallback(async () => {
@@ -80,32 +81,25 @@ const Summaries = memo(({ unit }) => {
   const { dataNotification } = useReceiveNotifications();
 
   useEffect(() => {
-    if (dataNotification) {
-      const { summary_id } = dataNotification.params || {};
-      if (summary_id) {
-        fetchUnitSummary();
-      }
+    if (dataNotification?.params?.summary_id) {
+      fetchUnitSummary();
     }
   }, [dataNotification, fetchUnitSummary]);
 
+  if (unitSummaries.length === 0) {
+    return null;
+  }
+
   return (
-    <>
-      {unitSummaries.length > 0 && (
-        <ScrollView
-          horizontal
-          scrollIndicatorInsets={{ right: 1 }}
-          accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
-        >
-          {unitSummaries.map((item, index) => (
-            <SummaryItem
-              key={(item?.id || index).toString()}
-              item={item}
-              goToSummary={goToSummary}
-            />
-          ))}
-        </ScrollView>
-      )}
-    </>
+    <ScrollView
+      horizontal
+      scrollIndicatorInsets={{ right: 1 }}
+      accessibilityLabel={AccessibilityLabel.UNIT_DETAIL_UNIT_SUMMARY_VIEW}
+    >
+      {unitSummaries.map((item) => (
+        <SummaryItem key={item.id} item={item} goToSummary={goToSummary} />
+      ))}
+    </ScrollView>
   );
 });
 

package/src/utils/Monitor.js

@@ -2,11 +2,11 @@ import { getPusher, destroyPusher } from './Pusher';
 
 // eslint-disable-next-line promise/prefer-await-to-callbacks
 export const watchNotificationData = (user, callback) => {
-  const channel = getPusher().subscribe(`private-user-${user.id}`);
-  channel.bind('new-notification', callback);
+  // const channel = getPusher().subscribe(`private-user-${user.id}`);
+  // channel.bind('new-notification', callback);
 };
 
 export const unwatchNotificationData = (user) => {
-  getPusher().unsubscribe(`private-user-${user.id}`);
-  destroyPusher();
+  // getPusher().unsubscribe(`private-user-${user.id}`);
+  // destroyPusher();
 };