add PostDetailLive screen to fetch article from server

app/navigation/MainScreens.js

@@ -3,6 +3,7 @@ import { tabBarIcon, BottomTabNavigator } from './BottomTabNavigator'
 import Home from '@screens/Home'
 import NewsCategory from '@screens/NewsCategory'
 import PostDetail from '@screens/PostDetail'
+import PostDetailLive from '@screens/PostDetail/PostDetailLive'
 import Radio from '@screens/Radio'
 import Tweet from '@screens/Tweet'
 import ArticleWeb from '@screens/ArticleWeb'
@@ -49,6 +50,12 @@ export default {
 			title: 'post_detail',
 		},
 	},
+	PostDetailLive: {
+		component: PostDetailLive,
+		options: {
+			title: 'post_detail_live',
+		},
+	},
 	ArticleWeb: {
 		component: ArticleWeb,
 		options: {

app/navigation/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef } from 'react'
 import { useTheme } from '@config'
 import { NavigationContainer } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
@@ -11,24 +11,13 @@ import notificationHandler from '../services/notification-handler'
 import MainScreens from './MainScreens'
 const RootStack = createStackNavigator()
 
-const Navigator = (props) => {
-	const { theme, colors } = useTheme()
+const Navigator = () => {
+	const { theme } = useTheme()
 	const navigationRef = useRef(null)
-	const [loading, setLoading] = useState(false)
 
 	const onNotificationClicked = (notif) => {
-		if (notif.data && notif.data._id && notif.foreground === false) {
-			setLoading(true)
-			notificationHandler
-				.handleNotificationClick(notif.data._id)
-				.then((res) => {
-					navigationRef.current.navigate('PostDetail', { article: res.data.getArticle })
-					setLoading(false)
-				})
-				.catch((err) => {
-					crashlytics().recordError(err)
-					setLoading(false)
-				})
+		if (notif?.data?._id && notif.foreground === false) {
+			navigationRef.current.navigate('PostDetailLive', { articleId: notif.data._id })
 		}
 	}
 

app/screens/Home/index.js

@@ -80,13 +80,6 @@ const Home = (props) => {
 		})
 	}, [fetchNews])
 
-	useEffect(() => {
-		const article = props.route.params?.article
-		if (article && article.source) {
-			props.navigation.navigate('ArticleDetail', { article, articles: [article] })
-		}
-	}, [props.navigation, props.route.params?.article])
-
 	useEffect(() => {
 		if (!loading && data?.getArticles?.length) {
 			const myArticles = data.getArticles

app/screens/PostDetail/GET_ARTICLE_QUERY.js

@@ -0,0 +1,25 @@
+import gql from 'graphql-tag'
+
+const GET_ARTICLE_QUERY = gql`
+	query articleQuery($_id: String!) {
+		getArticle(_id: $_id) {
+			_id
+			title
+			shortDescription
+			content
+			link
+			imageLink
+			createdDate
+			modifiedDate
+			category
+			tags
+			source {
+				_id
+				name
+				logoLink
+			}
+		}
+	}
+`
+
+export default GET_ARTICLE_QUERY

app/screens/PostDetail/Loading.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { View } from 'react-native'
+import { Placeholder, PlaceholderLine } from 'rn-placeholder'
+
+const Loading = () => {
+	const holders = Array.from(Array(5))
+
+	return (
+		<View style={{ paddingTop: 60, padding: 20 }}>
+			<Placeholder>
+				<PlaceholderLine height={20} width={100} />
+				{holders.map((item, index) => (
+					<PlaceholderLine key={index} height={15} width={90} />
+				))}
+			</Placeholder>
+		</View>
+	)
+}
+
+export default Loading

app/screens/PostDetail/PostDetailLive.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { useQuery } from '@apollo/client'
+import PostDetail from './index'
+import GET_ARTICLE_QUERY from './GET_ARTICLE_QUERY'
+import Loading from './Loading'
+
+const PostDetailLive = ({ navigation, route }) => {
+	const articleId = route?.params?.articleId
+
+	const { loading, data } = useQuery(GET_ARTICLE_QUERY, {
+		variables: { _id: articleId },
+	})
+
+	if (loading) return <Loading />
+	else return <PostDetail article={data.getArticle} navigation={navigation} />
+}
+
+export default PostDetailLive

app/screens/PostDetail/index.js

@@ -12,7 +12,7 @@ export const NEPALTODAY_URL = 'https://tinyurl.com/NepalTodayApp'
 const PostDetail = (props) => {
 	const { navigation, route } = props
 	const { colors } = useTheme()
-	const article = route?.params?.article
+	const article = route?.params?.article || props.article
 	const [heightHeader, setHeightHeader] = useState(Utils.heightHeader())
 	const scrollY = useRef(new Animated.Value(0)).current
 	const { imageLink, title, source, createdDate, content } = article

app/screens/Tweet/SingleTweet/Loading.js

@@ -8,7 +8,7 @@ const Loading = (props) => {
 	return (
 		<Placeholder>
 			<View style={[styles.container, style]}>
-				<PlaceholderLine style={styles.imageWishlist} noMargin />
+				<PlaceholderLine style={styles.thumb} noMargin />
 				<View
 					style={{
 						paddingHorizontal: 10,

app/services/notification-handler.js

@@ -9,20 +9,6 @@ class NotificationHandler {
 		this.storeFcmToken(user, token)
 	}
 
-	handleNotificationClick(articleId) {
-		return new Promise((resolve, reject) => {
-			if (articleId) {
-				this.fetchArticle(articleId)
-					.then((res) => {
-						resolve(res)
-					})
-					.catch((err) => reject(err))
-			} else {
-				reject(new Error('FCMToken Not found'))
-			}
-		})
-	}
-
 	storeFcmToken = async (user, token) => {
 		client
 			.mutate({
@@ -39,23 +25,6 @@ class NotificationHandler {
 			})
 			.catch((reason) => crashlytics().recordError(reason))
 	}
-
-	fetchArticle(id) {
-		return new Promise((resolve, reject) => {
-			client
-				.query({
-					query: GET_ARTICLE_QUERY,
-					variables: { _id: id },
-				})
-				.then((res) => {
-					resolve(res)
-				})
-				.catch((error) => {
-					crashlytics().recordError(error)
-					reject(error)
-				})
-		})
-	}
 }
 
 const STORE_FCM_MUTATION = gql`
@@ -66,26 +35,4 @@ const STORE_FCM_MUTATION = gql`
 	}
 `
 
-const GET_ARTICLE_QUERY = gql`
-	query articleQuery($_id: String!) {
-		getArticle(_id: $_id) {
-			_id
-			title
-			shortDescription
-			content
-			link
-			imageLink
-			createdDate
-			modifiedDate
-			category
-			tags
-			source {
-				_id
-				name
-				logoLink
-			}
-		}
-	}
-`
-
 export default new NotificationHandler()