diff --git a/src/components/Embed/Dev.tsx b/src/components/Embed/Dev.tsx deleted file mode 100644 index a3188661..00000000 --- a/src/components/Embed/Dev.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { getAbsURLFromAnchorMarkdown } from "../../utils/markdown"; -import { LinkPreview } from "@flyerhq/react-native-link-preview"; -import { FunctionComponent, memo } from "react"; -import { StyleSheet } from "react-native"; -import { Surface, Text, useTheme } from "react-native-paper"; - -interface DevEmbedProps { - url: string; -} - -// TODO: handle errors -const DevEmbed: FunctionComponent = ({ url }) => { - const theme = useTheme(); - - const renderText = (url: string) => { - return ( - - {url} - - ); - }; - - const renderTitle = (title: string) => { - return ( - - {title} - - ); - }; - - const renderDescription = () => { - return null; - }; - - const renderImage = () => null; - - return ( - - - - ); -}; - -const styles = StyleSheet.create({ - container: { - borderRadius: 4, - marginVertical: 8, - height: 130, - }, - title: { - marginBottom: 8, - }, -}); - -export default memo(DevEmbed); diff --git a/src/components/Embed/DevEmbed.tsx b/src/components/Embed/DevEmbed.tsx new file mode 100644 index 00000000..64efb563 --- /dev/null +++ b/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 = ({ url }) => { + const theme = useTheme(); + const [previewData, setPreviewData] = useState(); + + const renderText = (url: string) => ( + + {url} + + ); + + const renderTitle = (title: string) => ( + + {title} + + ); + + const noRender = () => null; + + const handlePreviewDataFetched = (data: PreviewData) => { + if (!data.title) { + // has error + setPreviewData({ ...data, title: HELP_TEXT.EXTERNAL_LINK }); + } else { + setPreviewData(data); + } + }; + + return ( + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + borderRadius: 4, + marginVertical: 8, + height: 130, + }, + title: { + marginBottom: 8, + }, +}); + +export default memo(DevEmbed); diff --git a/src/components/MD/renderer.tsx b/src/components/MD/renderer.tsx index c4a5e7d9..1335ab63 100644 --- a/src/components/MD/renderer.tsx +++ b/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"; diff --git a/src/utils/const.ts b/src/utils/const.ts index 5148f934..5a735ea4 100644 --- a/src/utils/const.ts +++ b/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 = { js: "javascript", diff --git a/todos.md b/todos.md index 472aaf85..f3b66834 100644 --- a/todos.md +++ b/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)