add badge and notification navigation

App.js

@@ -65,11 +65,11 @@ export default function App() {
     if (data.action_type == 'Rewards') {
       RootNavigation.navigate('Reward Detail', { rewardId: data.data_id });
     } else if (data.action_type == 'Inbox') {
-
+      RootNavigation.navigate('Inbox Detail', { idInbox: data.data_id });
     } else if (data.action_type == 'Transaction') {
-      RootNavigation.navigate('Order Detail', {idTrans:data.data_id});
+      RootNavigation.navigate('Order Detail', { idTrans: data.data_id });
     } else if (data.action_type == 'Review') {
-      RootNavigation.navigate('RatingOrder', {idTrans:data.data_id});
+      RootNavigation.navigate('RatingOrder', { idTrans: data.data_id });
     } else if (data.action_type == 'WebView') {
 
     } else if (data.action_type == 'Transfer Receive') {
@@ -106,7 +106,7 @@ export default function App() {
         { cancelable: false },
       )
     }
-    
+
   }
 
 

view/Auth.js

@@ -678,7 +678,7 @@ class Auth extends React.Component {
           })} />
 
         <Stack.Screen name="Inbox List" component={InboxList}
-          options={{
+          options={({ navigation }) => ({
             headerStyle: { backgroundColor: "#CFB368" },
             headerBackTitleStyle: { color: 'white' },
             headerTintColor: '#fff',
@@ -688,8 +688,9 @@ class Auth extends React.Component {
               color: 'white',
               fontSize: 20,
             },
-            title: i18n.t('headerInboxList')
-          }} />
+            title: i18n.t('headerInboxList'),
+            headerLeft: props => <HeaderBackButton  {...props} onPress={() => navigation.navigate('Home', { screen: 'HOME' })} />
+          })} />
 
         <Stack.Screen name="Inbox Detail" component={InboxDetail} options={{ headerShown: false }} />
 

view/Home.js

@@ -14,6 +14,7 @@ import CheckVersion from '../function/CheckVersion';
 import ActionType from '../redux/globalActionType';
 import Toast from 'react-native-tiny-toast';
 import i18n from 'i18n-js';
+import { Badge } from 'react-native-elements'
 
 let version = info.expo.version
 let buildNumber = info.expo.android.versionCode
@@ -34,11 +35,13 @@ class Home extends React.Component {
       indicatorProfileCard: true,
       slider_height: 350,
       slugs: [],
-      placeholder: true
+      placeholder: true,
+      inbox: "0"
     }
   }
 
   componentDidMount() {
+    this.CheckInbox()
     console.log("INI BASE_URL : " + this.props.BASE_URL)
     const screenWidth = Math.round(Dimensions.get('window').width);
     this.setState({
@@ -57,6 +60,7 @@ class Home extends React.Component {
     this._renderCarousell()
 
     this._unsubscribe = this.props.navigation.addListener('focus', () => {
+      this.CheckInbox()
       this.setState({
         indicator: true,
         indicatorProfileCard: true
@@ -75,6 +79,24 @@ class Home extends React.Component {
     });
   }
 
+  CheckInbox() {
+    let params = {
+      session_id: this.props.session_id
+    }
+    Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/inbox/unread_count', params).then(respon => {
+      let res = respon.data.unread_count
+
+      this.setState({
+        inbox: res.toString()
+      })
+
+    }).catch(error => {
+      let response = error.response.data;
+      // console.log(response.msg)
+      Alert.alert('', response.msg);
+    })
+  }
+
   componentWillUnmount() {
     this._unsubscribe();
   }
@@ -116,7 +138,7 @@ class Home extends React.Component {
     this._getOutletClosest();
   }
   _renderCarousell() {
-    Axios.get(this.props.BASE_URL+'cms/v2/list/promotions-carousel').then(respon => {
+    Axios.get(this.props.BASE_URL + 'cms/v2/list/promotions-carousel').then(respon => {
       const dataCarousell = respon.data.contents;
       let imageLink = []
       let slugs = []
@@ -144,7 +166,7 @@ class Home extends React.Component {
       session_id: this.props.session_id,
     }
     // console.log(params);
-    Axios.post(this.props.BASE_URL+'crm/v2/member/get_profile', params).then(res => {
+    Axios.post(this.props.BASE_URL + 'crm/v2/member/get_profile', params).then(res => {
 
       const dataCard = res.data
       let point = dataCard.kaspro_point
@@ -173,7 +195,7 @@ class Home extends React.Component {
       long: this.state.my_long
     }
     // console.log(params);
-    Axios.post(this.props.BASE_URL+'crm/v2/outlet/get_closest', params).then(res => {
+    Axios.post(this.props.BASE_URL + 'crm/v2/outlet/get_closest', params).then(res => {
       // console.log(res.data.data)
 
       let outletId = res.data.data.outlet_id
@@ -243,6 +265,14 @@ class Home extends React.Component {
               <View style={{ margin: 15, flex: 0.15, alignItems: 'flex-end' }}>
                 <TouchableOpacity onPress={() => this.props.navigation.navigate('Inbox List')}>
                   <SimpleLineIcons name="bell" size={24} color="white" />
+                  {
+                    this.state.inbox == '0' ? (
+                      null
+                    ) : (
+                        <Badge value={this.state.inbox} status="error" containerStyle={{ position: 'absolute', top: -4, right: -4 }} />
+                      )
+                  }
+
                 </TouchableOpacity>
               </View>
             </View>
@@ -350,8 +380,8 @@ class Home extends React.Component {
                   {i18n.t('orderInfo')}
                 </Text> */}
                       <Text style={{ textAlign: 'center', fontSize: 12, fontFamily: 'Gotham-Black', color: '#838383' }}>
-                      {i18n.t('deliveryinfo')}
-                </Text>
+                        {i18n.t('deliveryinfo')}
+                      </Text>
                       {this.state.indicator == true ? (
                         <ActivityIndicator size="small" color="#c9af6d" />
                       ) : (

view/InboxDetail.js

 import React from 'react';
-import { View, Text, StyleSheet, Alert} from 'react-native';
+import { View, Text, StyleSheet, Alert, BackHandler } from 'react-native';
 import { Image } from 'react-native-elements';
 import Axios from 'axios';
 import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
@@ -12,6 +12,7 @@ import Toast from 'react-native-tiny-toast';
 class InboxDetail extends React.Component {
     constructor(props) {
         super(props);
+        this.handleBackButtonClick = this.handleBackButtonClick.bind(this)
         this.state = {
             title: '',
             subtitle: '',
@@ -23,9 +24,19 @@ class InboxDetail extends React.Component {
     }
 
     componentDidMount() {
+        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
         this.getInboxDetail()
     }
 
+    componentWillUnmount() {
+        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
+    }
+
+    handleBackButtonClick() {
+        this.props.navigation.navigate('Inbox List');
+        return true;
+    }
+
     getInboxDetail() {
         let params = {
             session_id: this.props.session_id,
@@ -57,7 +68,7 @@ class InboxDetail extends React.Component {
         })
     }
 
-    handleDeleteInbox(){
+    handleDeleteInbox() {
         Alert.alert(
             "",
             "Are you sure want to delete this message ?",
@@ -105,7 +116,7 @@ class InboxDetail extends React.Component {
             <View style={styles.container}>
                 <View style={styles.header}>
                     <View style={{ margin: 15, flex: 0.1, alignItems: 'flex-start' }}>
-                        <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
+                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Inbox List')}>
                             <AntDesign name="arrowleft" size={22} color="white" />
                         </TouchableOpacity>
                     </View>

view/InboxList.js

 import React from 'react';
-import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
+import { View, Text, BackHandler, StyleSheet, ScrollView, Alert, TouchableOpacity, ActivityIndicator } from 'react-native';
 import { connect } from 'react-redux';
 import Axios from 'axios';
 import i18n from 'i18n-js';
@@ -10,6 +10,7 @@ class InboxList extends React.Component {
 
     constructor(props) {
         super(props)
+        this.handleBackButtonClick = this.handleBackButtonClick.bind(this)
         this.state = {
             inbox_list: [],
             indicator: true
@@ -17,6 +18,7 @@ class InboxList extends React.Component {
     }
 
     componentDidMount() {
+        BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
         this.getInbox()
         this._unsubscribe = this.props.navigation.addListener('focus', () => {
 
@@ -28,9 +30,15 @@ class InboxList extends React.Component {
     }
 
     componentWillUnmount() {
+        BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
         this._unsubscribe()
     }
 
+    handleBackButtonClick() {
+        this.props.navigation.navigate('Home', { screen: 'HOME' })
+        return true;
+    }
+
     getInbox() {
         let params = {
             session_id: this.props.session_id