fix: handle link preview error

src/components/Embed/DevEmbed.tsx

@@ -0,0 +1,70 @@
+import { HELP_TEXT } from "../../utils/const";
+import { getAbsURLFromAnchorMarkdown } from "../../utils/markdown";
+import { LinkPreview, PreviewData } from "@flyerhq/react-native-link-preview";
+import { FunctionComponent, memo, useState } from "react";
+import { StyleSheet } from "react-native";
+import { Surface, Text, useTheme } from "react-native-paper";
+
+interface DevEmbedProps {
+	url: string;
+}
+
+const DevEmbed: FunctionComponent<DevEmbedProps> = ({ url }) => {
+	const theme = useTheme();
+	const [previewData, setPreviewData] = useState<PreviewData | undefined>();
+
+	const renderText = (url: string) => (
+		<Text variant="bodySmall" numberOfLines={2}>
+			{url}
+		</Text>
+	);
+
+	const renderTitle = (title: string) => (
+		<Text
+			variant="titleMedium"
+			style={[styles.title, { color: theme.colors.primary }]}
+			numberOfLines={2}
+		>
+			{title}
+		</Text>
+	);
+
+	const noRender = () => null;
+
+	const handlePreviewDataFetched = (data: PreviewData) => {
+		if (!data.title) {
+			// has error
+			setPreviewData({ ...data, title: HELP_TEXT.EXTERNAL_LINK });
+		} else {
+			setPreviewData(data);
+		}
+	};
+
+	return (
+		<Surface style={styles.container} mode="flat" elevation={2}>
+			<LinkPreview
+				text={getAbsURLFromAnchorMarkdown(url)}
+				requestTimeout={1500}
+				onPreviewDataFetched={handlePreviewDataFetched}
+				previewData={previewData}
+				renderText={renderText}
+				renderTitle={renderTitle}
+				renderImage={noRender}
+				renderDescription={noRender}
+			/>
+		</Surface>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		borderRadius: 4,
+		marginVertical: 8,
+		height: 130,
+	},
+	title: {
+		marginBottom: 8,
+	},
+});
+
+export default memo(DevEmbed);

src/components/MD/renderer.tsx

@@ -3,7 +3,7 @@ import { isStringOf } from "../../utils/typeof";
 import CTAButton from "../CTAButton";
 import FitFastImage from "../FitFastImage";
 import SyntaxHighlighter from "../SyntaxHighlighter";
-import DevEmbed from "./../Embed/Dev";
+import DevEmbed from "./../Embed/DevEmbed";
 import { ReactNode } from "react";
 import { ImageStyle, TextStyle, ViewStyle } from "react-native";
 import { Renderer, RendererInterface } from "react-native-marked";

src/utils/const.ts

@@ -9,6 +9,7 @@ export const HELP_TEXT = {
 		MAX_ERR: "Maxmimum number of bookmarks reached",
 		COMMON_ERR: "Error while saving bookmark",
 	},
+	EXTERNAL_LINK: "External Link",
 };
 export const LANG_ALIAS_MAP: Record<string, string> = {
 	js: "javascript",

todos.md

@@ -7,6 +7,6 @@
 - [x] Full screen video page, custom icons for video player controls [87398de](https://github.com/gmsgowtham/dev-to-unofficial/commit/87398de7a72fc739480bbc6b65e802746bc130c2), [3a971a3](https://github.com/gmsgowtham/dev-to-unofficial/commit/3a971a37414b3f4254e5d16045eafe4ae3187e54),  [b858130](https://github.com/gmsgowtham/dev-to-unofficial/commit/b858130e2f1456d23f6cb4fcecd8a9f3655ee75b)
 - [x] Loading placeholder for feeds [#71](https://github.com/gmsgowtham/dev-to-unofficial/pull/71)
 - [x] Image component loading behaviour [5196ec6](https://github.com/gmsgowtham/dev-to-unofficial/commit/5196ec677ef4bbc234734b075923a1303af51980)
-- [ ] Link preview error handling
+- [x] Link preview error handling [#75](https://github.com/gmsgowtham/dev-to-unofficial/pull/75)
 - [x] About page [c634e9e](https://github.com/gmsgowtham/dev-to-unofficial/commit/c634e9e7fedf7295fd27c0bf94f4c4d5c697dec7)
 - [x] Hook to get user selected color scheme [#73](https://github.com/gmsgowtham/dev-to-unofficial/pull/73)