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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eohjsc/react-native-smart-city",
   "title": "React Native Smart Home",
-  "version": "0.6.0-rc3",
+  "version": "0.6.0-rc5",
   "description": "TODO",
   "main": "index.js",
   "files": [
@@ -125,7 +125,7 @@
     "pluralize": "^8.0.0",
     "postinstall": "^0.7.0",
     "precompiled-mqtt": "^4.3.14-beta",
-    "pusher-js": "^7.4.0",
+    "pusher-js": "^8.4.0-rc2",
     "pusher-js-auth": "^4.0.1",
     "python-struct": "^1.1.3",
     "querystring": "^0.2.0",

package/src/commons/ActionGroup/SmartTiviActionTemplate/component/ControlPlay.js

@@ -21,7 +21,7 @@ const ControlPlay = memo(
         >
           <AntDesign
             size={32}
-            name={'backward'}
+            name={'stepbackward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />
@@ -44,7 +44,7 @@ const ControlPlay = memo(
         >
           <AntDesign
             size={32}
-            name={'forward'}
+            name={'stepforward'}
             color={Colors.Gray9}
             style={[styles.button]}
           />

package/src/commons/Device/DisconnectedView.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
 import { Colors } from '../../configs';
@@ -57,7 +57,7 @@ const DisconnectedView = memo(({ sensor, type, isDeviceHasBle }) => {
       </View>
       <View style={styles.disconnectSuggestionContainer} testID={'suggestions'}>
         <View style={styles.row}>
-          <AntDesign name={'alert'} size={16} />
+          <MaterialCommunityIcons name={'alert-circle-outline'} size={16} />
           <Text bold style={styles.boldText}>
             {t('suggestions')}:
           </Text>

package/src/commons/EmergencyButton/AlertSendConfirm.js

@@ -29,7 +29,7 @@ const AlertSendConfirm = ({
       bodyStyle={styles.buttonPopupBody}
     >
       <View style={styles.firstInfo}>
-        <AntDesign name="clock-circle" size={42} style={styles.clock} />
+        <AntDesign name="clockcircleo" size={42} style={styles.clock} />
         <Text semibold type="H4" style={styles.textAlertWillBe}>
           {t('alert_will_be_sent_in')}
         </Text>

package/src/commons/EmergencyButton/AlertSent.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { ButtonPopup } from '../index';
 import { useTranslations } from '../../hooks/Common/useTranslations';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Text from '../Text';
 import { Colors } from '../../configs';
 
@@ -59,7 +59,11 @@ const AlertSent = ({
         type="H5"
         style={styles.location}
       >{`${unit?.name} - ${station?.name}`}</Text>
-      <AntDesign name="alert" size={42} style={styles.alert} />
+      <MaterialCommunityIcons
+        name="alert-circle-outline"
+        size={42}
+        style={styles.alert}
+      />
       <Text semibold style={styles.textAlertSent}>
         {data.title}
       </Text>

package/src/commons/SearchLocation/index.js

@@ -11,7 +11,7 @@ const SearchBarLocation = memo(({ input, onTextInput }) => {
   return (
     <View style={styles.container}>
       <AntDesign
-        name="search"
+        name="search1"
         size={24}
         color={Colors.Gray6}
         accessibilityLabel="icon-search"

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet, Image } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 import { Colors, Images } from '../../../configs';
 import Text from '../../Text';
@@ -27,8 +27,8 @@ const SubUnitCard = ({ onPressItem, devices, name, id }) => {
           </Text>
           <Text style={[styles.subText]}>{devices + ' devices'}</Text>
         </View>
-        <AntDesign
-          name="more"
+        <MaterialIcons
+          name="more-vert"
           color={Colors.White}
           size={24}
           onPress={() => {}}

package/src/navigations/AutomateStack.js

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useContext } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/core';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { SCContext } from '../context';
 import { Action } from '../context/actionType';
 
@@ -44,7 +44,7 @@ const AutomateStack = memo(() => {
         title: t('smart'),
         headerLeft: () => (
           <TouchableOpacity style={Theme.menuIcon} onPress={toggleDrawer}>
-            <AntDesign name={'menu'} color={Colors.Black} />
+            <MaterialIcons name={'menu'} color={Colors.Black} size={27} />
           </TouchableOpacity>
         ),
         headerTitleAlign: 'left',

package/src/navigations/SharedStack.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { createStackNavigator } from '@react-navigation/stack';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../hooks/Common/useTranslations';
 
 import Shared from '../screens/SharedUnit';
@@ -15,6 +15,7 @@ const SharedStack = memo(() => {
   const t = useTranslations();
   const { toggleDrawer, goBack } = useNavigation();
   const { params } = useRoute();
+  const { isMainSource } = params || {};
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -26,11 +27,12 @@ const SharedStack = memo(() => {
           headerLeft: () => (
             <TouchableOpacity
               style={styles.btnMenu}
-              onPress={() => (params?.isMainSource ? toggleDrawer() : goBack())}
+              onPress={() => (isMainSource ? toggleDrawer() : goBack())}
             >
-              <AntDesign
-                name={params?.isMainSource ? 'menu' : 'arrow-left'}
+              <MaterialIcons
+                name={isMainSource ? 'menu' : 'chevron-left'}
                 color={Colors.Black}
+                size={27}
               />
             </TouchableOpacity>
           ),

package/src/screens/AddLocationMaps/index.js

@@ -3,6 +3,7 @@ import { View, ScrollView, TouchableOpacity } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { useTranslations } from '../../hooks/Common/useTranslations';
 
@@ -204,7 +205,11 @@ const AddLocationMaps = memo(() => {
                   style={styles.button}
                   accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
                 >
-                  <AntDesign name="aim" size={27} color={Colors.Primary} />
+                  <MaterialIcons
+                    name="my-location"
+                    size={27}
+                    color={Colors.Primary}
+                  />
                   <Text
                     type="Body"
                     color={Colors.Gray9}
@@ -221,7 +226,7 @@ const AddLocationMaps = memo(() => {
                   accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
                 >
                   <AntDesign
-                    name="environment"
+                    name="enviroment"
                     size={27}
                     color={Colors.Primary}
                   />
@@ -270,7 +275,7 @@ const AddLocationMaps = memo(() => {
                   tracksViewChanges={false}
                 >
                   <AntDesign
-                    name="environment"
+                    name="enviroment"
                     size={27}
                     color={Colors.Blue10}
                   />

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

@@ -481,7 +481,7 @@ const ButtonStar = ({ automate }) => {
       {isStarred ? (
         <AntDesign name="star" size={25} color={Colors.Yellow6} />
       ) : (
-        <AntDesign name="star" size={25} />
+        <AntDesign name="staro" size={25} />
       )}
     </PreventDoubleTouch>
   );

package/src/screens/Device/detail.js

@@ -755,7 +755,7 @@ const DeviceDetail = ({ route }) => {
             >
               {display.items.map((item, index) => {
                 return (
-                  <>
+                  <View key={item?.id?.toString()}>
                     {!item.is_configuration_ready && (
                       <Text center>{t('bellow_widget_is_not_configured')}</Text>
                     )}
@@ -779,7 +779,7 @@ const DeviceDetail = ({ route }) => {
                       setShowWindDirection={setShowWindDirection}
                       background={station?.background}
                     />
-                  </>
+                  </View>
                 );
               })}
             </SensorConnectStatusViewHeader>

package/src/screens/SharedUnit/TabHeader.js

@@ -54,7 +54,7 @@ const TabHeader = ({ current, getCurrentTab, showModal, textFilter }) => {
           <Text style={styles.sortBy}>
             {t('sort_by') + ': '} {textFilter}
           </Text>
-          <AntDesign name="arrow-down" size={10} onPress={() => {}} />
+          <AntDesign name="arrowdown" size={10} />
         </TouchableOpacity>
       </View>
     </View>

package/src/screens/SmartIr/__test__/GroupButtonByType.test.js

@@ -10,6 +10,7 @@ import TextInput from '../../../commons/Form/TextInput';
 import { ModalCustom } from '../../../commons/Modal';
 import { TouchableOpacity } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 const wrapComponent = (route) => (
   <SCProvider initState={mockSCStore({})}>
@@ -137,7 +138,7 @@ describe('Test GroupButtonByType', () => {
     await act(async () => {
       await touch.props.onPress();
     });
-    expect(icon.props.name).toEqual('reload');
+    expect(icon.props.name).toEqual('reload1');
 
     const touch2 = instance.find(
       (el) =>
@@ -145,14 +146,14 @@ describe('Test GroupButtonByType', () => {
           AccessibilityLabel.HEADER_BUTTON_TYPE_MORE &&
         el.type === TouchableOpacity
     );
-    const AntDesign2 = instance.find(
+    const moreIcon = instance.find(
       (el) =>
         el.props.accessibilityLabel ===
-          AccessibilityLabel.ICON_OUTLINE_TYPE_MORE && el.type === AntDesign
+          AccessibilityLabel.ICON_OUTLINE_TYPE_MORE && el.type === MaterialIcons
     );
     await act(async () => {
       await touch2.props.onPress();
     });
-    expect(AntDesign2.props.name).toEqual('more');
+    expect(moreIcon.props.name).toEqual('more-vert');
   });
 });

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

@@ -59,7 +59,7 @@ const GroupButtonByType = memo(({ route }) => {
               accessibilityLabel={AccessibilityLabel.HEADER_BUTTON_TYPE_RELOAD}
             >
               <AntDesign
-                name={'reload'}
+                name={'reload1'}
                 size={27}
                 color={Colors.Black}
                 accessibilityLabel={AccessibilityLabel.ICON_OUTLINE_TYPE_RELOAD}

package/src/screens/Unit/SelectAddress.js

@@ -3,6 +3,7 @@ import { TouchableOpacity, View, ScrollView } from 'react-native';
 import MapView, { Marker, Circle, PROVIDER_GOOGLE } from 'react-native-maps';
 import { useNavigation } from '@react-navigation/native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { check, RESULTS } from 'react-native-permissions';
 import { openPromptEnableLocation } from '../../utils/Setting/Location';
 
@@ -194,7 +195,11 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_YOUR_LOCATION}
             >
-              <AntDesign name="aim" size={27} color={Colors.Primary} />
+              <MaterialIcons
+                name="my-location"
+                size={27}
+                color={Colors.Primary}
+              />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('your_location')}
               </Text>
@@ -205,7 +210,7 @@ const SelectAddress = memo(({ route }) => {
               style={styles.button}
               accessibilityLabel={AccessibilityLabel.BUTTON_CHOOSE_ON_MAP}
             >
-              <AntDesign name="environment" size={27} color={Colors.Primary} />
+              <AntDesign name="enviroment" size={27} color={Colors.Primary} />
               <Text type="Body" color={Colors.Gray9} style={styles.text} bold>
                 {t('choose_on_map')}
               </Text>
@@ -243,7 +248,7 @@ const SelectAddress = memo(({ route }) => {
               }}
               tracksViewChanges={false}
             >
-              <AntDesign name="environment" size={27} color={Colors.Blue10} />
+              <AntDesign name="enviroment" size={27} color={Colors.Blue10} />
             </Marker>
           </>
         )}

package/src/screens/Unit/components/Header/index.js

@@ -2,6 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
 import { Dimensions, View, TouchableOpacity, StyleSheet } from 'react-native';
 import Popover from '../../../../commons/Popover';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -107,8 +108,8 @@ const HeaderComponent = ({ title, goBack, dark, hideRight, style }) => {
                 onPress={() => setMenu(true)}
                 style={styles.rightHeader}
               >
-                <AntDesign
-                  name="more"
+                <MaterialIcons
+                  name="more-vert"
                   size={30}
                   color={dark ? Colors.Black : Colors.White}
                 />

package/src/screens/UnitSummary/components/AirQuality/index.js

@@ -1,6 +1,7 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import styles from './styles';
 
@@ -121,7 +122,11 @@ const AirQuality = memo(({ summaryDetail }) => {
           {<SegmentedRoundChart data={outdoor} />}
           {!!advices?.length && (
             <View style={styles.boxHealth}>
-              <AntDesign name="alert" size={20} style={styles.iconMargin} />
+              <MaterialCommunityIcons
+                name="alert-circle-outline"
+                size={20}
+                style={styles.iconMargin}
+              />
               <Text semibold color={Colors.Gray9} type="H4">
                 {t('Health advices:')}
               </Text>

package/src/screens/UnitSummary/components/UvIndex/index.js

@@ -1,6 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
-import AntDesign from 'react-native-vector-icons/AntDesign';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useTranslations } from '../../../../hooks/Common/useTranslations';
 
 import { Colors } from '../../../../configs';
@@ -37,7 +37,11 @@ const UvIndex = memo(({ summaryDetail }) => {
         <Today />
         <SegmentedRoundChart data={data} />
         <View style={styles.boxHealth}>
-          <AntDesign name="alert" size={20} style={styles.iconMargin} />
+          <MaterialCommunityIcons
+            name="alert-circle-outline"
+            size={20}
+            style={styles.iconMargin}
+          />
           <Text
             semibold
             color={Colors.Gray9}

package/src/utils/Monitor.js

@@ -1,12 +1,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);
+export const watchNotificationData = (user, handler) => {
+  const channel = getPusher().subscribe(`private-user-${user.id}`);
+  channel.bind('new-notification', handler);
 };
 
 export const unwatchNotificationData = (user) => {
-  // getPusher().unsubscribe(`private-user-${user.id}`);
-  // destroyPusher();
+  getPusher().unsubscribe(`private-user-${user.id}`);
+  destroyPusher();
 };