updated notification texts, added support for navigation

src/components/foregroundNotification/foregroundNotification.tsx

@@ -1,44 +1,84 @@
+import { get, isEmpty, some } from 'lodash';
 import React, { useEffect, useRef, useState} from 'react';
-import { Animated, Text, View } from 'react-native';
+import { Animated, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { IconButton } from '..';
 import { toastNotification } from '../../redux/actions/uiAction';
 import UserAvatar from '../userAvatar';
+import ROUTES from '../../constants/routeNames';
 
 // Styles
 import styles, { CONTAINER_HEIGHT } from './styles';
+import { navigate } from '../../navigation/service';
+import { useIntl } from 'react-intl';
+
+interface RemoteMessage {
+  data:{
+    id:string;
+    source:string;
+    target:string;
+    permlink1:string;
+    permlink2:string;
+    permlink3:string;
+    type:'reblog'|'reply';
+  };
+  notification:{
+    body:string;
+    title:string;
+  }
+
+}
 
 interface Props {
-  title:string;
-  text:string;
-  usename:string;
+  remoteMessage:RemoteMessage
 }
 
 
-const ForegroundNotification = ({text, title, username }:Props) => {
+const ForegroundNotification = ({remoteMessage}:Props) => {
     let hideTimeout = null;
     const dispatch = useDispatch();
+    const intl = useIntl();
 
-    const [duration] = useState(4000);
-    const [curText, setCurText] = useState(text);
+    const [duration] = useState(5000);
+    const [activeId, setActiveId] = useState('');
     const [isVisible, setIsVisible] = useState(false);
+    const [username, setUsername] = useState('');
+    const [title, setTitle] = useState('');
+    const [body, setBody] = useState('');
     
 
     const animatedValue = useRef(new Animated.Value(-CONTAINER_HEIGHT)).current;
 
 
-
     useEffect(() => {
-      if(text !== curText && text !== ''){
-        setCurText(text);
-        show();
+
+      if(remoteMessage){
+        const {source, target, type, id} = remoteMessage.data;
+
+        if(activeId !== id){
+          switch(type){
+            case 'reply':
+              setTitle(`${intl.formatMessage({id:'notification.reply_on'})} @${target}`);
+              setBody(intl.formatMessage({id:'notification.reply_body'}));
+              break;
+            case 'reblog':
+              setTitle(`${intl.formatMessage({id:'notification.post_on'})} @${target} ${intl.formatMessage({id:'notification.reblog'})}`);
+              setBody(intl.formatMessage({id:'notification.reblog_body'}));
+              break;
+          }
+          
+          setActiveId(id);
+          setUsername(source);
+          show();
+        }
       }
+
       return ()=>{
         if(hideTimeout){
           clearTimeout(hideTimeout);
         }
       }
-    }, [text]);
+    }, [remoteMessage]);
 
     const show = () => {
       // Will change fadeAnim value to 1 in 5 seconds
@@ -71,6 +111,43 @@ const ForegroundNotification = ({text, title, username }:Props) => {
     };
 
 
+    const _onPress = () => {
+      const {data} = remoteMessage;
+      const fullPermlink =
+        get(data, 'permlink1', '') + get(data, 'permlink2', '') + get(data, 'permlink3', '');
+
+      let params:any = {};
+      let key = '';
+      let routeName = '';
+      switch(data.type){
+        case 'reblog':
+          params = {
+            author: get(remoteMessage, 'target', ''),
+            permlink: fullPermlink,
+          };
+          key = fullPermlink;
+          routeName =  ROUTES.SCREENS.POST;
+          break;
+        case 'reply':
+          params = {
+            author: get(remoteMessage, 'source', ''),
+            permlink: fullPermlink,
+          };
+          key = fullPermlink;
+          routeName = ROUTES.SCREENS.POST;
+          break;
+        }
+
+        if (!some(params, isEmpty)) {
+          navigate({
+            routeName,
+            params,
+            key,
+          });
+        }
+    }
+
+
 
   return (
     <Animated.View
@@ -81,15 +158,18 @@ const ForegroundNotification = ({text, title, username }:Props) => {
     >
       <View style={{flexDirection:'row', justifyContent:'space-between', alignItems:'center', paddingBottom:16, paddingHorizontal:16}}>
         
-        <View style={{flexDirection:'row'}}>
-          <UserAvatar username={username}/>
+        <TouchableOpacity onPress={_onPress}>
+          <View style={{flexDirection:'row', flex:1, marginRight:24}}>
+            <UserAvatar username={username}/>
+
+            <View>
+              <Text style={styles.text} numberOfLines={1}>{title}</Text>
+              <Text style={styles.text} numberOfLines={1}>{body}</Text>
+            </View>
 
-          <View>
-            <Text style={styles.text}>{title}</Text>
-            <Text style={styles.text}>{text}</Text>
           </View>
+        </TouchableOpacity>
 
-        </View>
        
      
         <IconButton 

src/components/foregroundNotification/styles.ts

@@ -1,3 +1,4 @@
+import { Dimensions } from 'react-native';
 import EStyleSheet from 'react-native-extended-stylesheet';
 
 export const CONTAINER_HEIGHT = 108;
@@ -10,7 +11,7 @@ export default EStyleSheet.create({
     maxWidth: '$deviceWidth',
     minWidth: '$deviceWidth / 1.9',
     height: CONTAINER_HEIGHT,
-    width:'100%',
+    width:Dimensions.get('screen').width,
     backgroundColor: '$primaryDarkText',
     shadowOffset: {
       height: 5,
@@ -21,10 +22,10 @@ export default EStyleSheet.create({
     top:0,
   },
   text: {
+    flex:1,
     color: 'white',
     fontWeight: 'bold',
     fontSize: 14,
-    paddingRight: 10,
     paddingLeft:16,
   },
 });

src/config/locales/en-US.json

@@ -134,7 +134,11 @@
     "replies": "Replies",
     "mentions": "Mentions",
     "reblogs": "Reblogs",
-    "noactivity": "No recent activity"
+    "noactivity": "No recent activity",
+    "post_on":"Post on",
+    "reply_on":"New reply on",
+    "reblog_body":"Yay! tap to check all post reblogs...",
+    "reply_body":"Tap to continue conversation..."
   },
   "leaderboard": {
     "daily": "DAILY",

src/screens/application/container/applicationContainer.js

@@ -113,6 +113,7 @@ class ApplicationContainer extends Component {
       isThemeReady: false,
       appState: AppState.currentState,
       showWelcomeModal: false,
+      foregroundNotificationData: null,
     };
   }
 
@@ -453,6 +454,7 @@ class ApplicationContainer extends Component {
       markActivityAsRead(username, activity_id).then((result) => {
         dispatch(updateUnreadActivityCount(result.unread));
       });
+
       if (!some(params, isEmpty)) {
         navigate({
           routeName,
@@ -480,7 +482,10 @@ class ApplicationContainer extends Component {
 
     firebaseOnMessageListener = messaging().onMessage((remoteMessage) => {
       console.log('Notification Received: foreground', remoteMessage);
-      this._showNotificationToast(remoteMessage);
+      // this._showNotificationToast(remoteMessage);
+      this.setState({
+        foregroundNotificationData: remoteMessage,
+      });
       this._pushNavigate(remoteMessage);
     });
 
@@ -816,7 +821,13 @@ class ApplicationContainer extends Component {
       isPinCodeRequire,
       rcOffer,
     } = this.props;
-    const { isRenderRequire, isReady, isThemeReady, showWelcomeModal } = this.state;
+    const {
+      isRenderRequire,
+      isReady,
+      isThemeReady,
+      showWelcomeModal,
+      foregroundNotificationData,
+    } = this.state;
 
     return (
       children &&
@@ -831,6 +842,7 @@ class ApplicationContainer extends Component {
         rcOffer,
         toastNotification,
         showWelcomeModal,
+        foregroundNotificationData,
         handleWelcomeModalButtonPress: this._handleWelcomeModalButtonPress,
       })
     );

src/screens/application/index.js

@@ -35,6 +35,7 @@ const Application = () => {
         toastNotification,
         showWelcomeModal,
         handleWelcomeModalButtonPress,
+        foregroundNotificationData,
       }) => {
         const _isAppReady = !showAnimation && isReady && isRenderRequire && isThemeReady;
 
@@ -68,6 +69,7 @@ const Application = () => {
                 isReady={isReady}
                 isDarkTheme={isDarkTheme}
                 rcOffer={rcOffer}
+                foregroundNotificationData={foregroundNotificationData}
               />
             )}
             {!_isAppReady && <LaunchScreen />}

src/screens/application/screen/applicationScreen.js

@@ -107,7 +107,13 @@ class ApplicationScreen extends Component {
   }
 
   render() {
-    const { isConnected, isDarkTheme, toastNotification, isReady } = this.props;
+    const {
+      isConnected,
+      isDarkTheme,
+      toastNotification,
+      isReady,
+      foregroundNotificationData,
+    } = this.props;
     const { isShowToastNotification, showWelcomeModal } = this.state;
     const barStyle = isDarkTheme ? 'light-content' : 'dark-content';
     const barColor = isDarkTheme ? '#1e2835' : '#fff';
@@ -162,7 +168,7 @@ class ApplicationScreen extends Component {
           />
         )}
 
-        <ForegroundNotification title="New Apvote" text="" username="demo.com" />
+        <ForegroundNotification remoteMessage={foregroundNotificationData} />
         <AccountsBottomSheet />
         <ActionModal />
       </View>