diff --git a/native/markdown/markdown-link.react.js b/native/markdown/markdown-link.react.js index 6fd126b06..c632f6a06 100644 --- a/native/markdown/markdown-link.react.js +++ b/native/markdown/markdown-link.react.js @@ -1,108 +1,35 @@ // @flow -import invariant from 'invariant'; import * as React from 'react'; -import { Text, Linking } from 'react-native'; - -import { inviteLinkURL } from 'lib/facts/links.js'; +import { Text } from 'react-native'; import { - MarkdownContext, - type MarkdownContextType, -} from './markdown-context.js'; -import { MarkdownSpoilerContext } from './markdown-spoiler-context.js'; -import { MessagePressResponderContext } from '../chat/message-press-responder-context.js'; -import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context.js'; -import { DeepLinksContext } from '../navigation/deep-links-context-provider.react.js'; -import Alert from '../utils/alert.js'; -import { normalizeURL } from '../utils/url-utils.js'; - -function useHandleLinkClick( - inputURL: string, - markdownContext: MarkdownContextType, - messageKey: ?string, -) { - const { setLinkModalActive } = markdownContext; - const onDismiss = React.useCallback(() => { - messageKey && setLinkModalActive({ [messageKey]: false }); - }, [setLinkModalActive, messageKey]); - - const url = normalizeURL(inputURL); - const onConfirm = React.useCallback(() => { - onDismiss(); - Linking.openURL(url); - }, [url, onDismiss]); - - let displayURL = url.substring(0, 64); - if (url.length > displayURL.length) { - displayURL += '…'; - } - - const deepLinksContext = React.useContext(DeepLinksContext); - return React.useCallback(() => { - if (url.startsWith(inviteLinkURL(''))) { - deepLinksContext?.setCurrentLinkUrl(url); - return; - } - messageKey && setLinkModalActive({ [messageKey]: true }); - Alert.alert( - 'External link', - `You sure you want to open this link?\n\n${displayURL}`, - [ - { text: 'Cancel', style: 'cancel', onPress: onDismiss }, - { text: 'Open', onPress: onConfirm }, - ], - { cancelable: true, onDismiss }, - ); - }, [ - url, - messageKey, - setLinkModalActive, - displayURL, - onDismiss, - onConfirm, - deepLinksContext, - ]); -} + useMarkdownOnPressUtils, + useHandleLinkClick, +} from './markdown-utils.js'; type TextProps = React.ElementConfig; type Props = { +target: string, +children: React.Node, ...TextProps, }; function MarkdownLink(props: Props): React.Node { const { target, ...rest } = props; - - const markdownContext = React.useContext(MarkdownContext); - invariant(markdownContext, 'MarkdownContext should be set'); - - const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext); - // Since MarkdownSpoilerContext may not be set, we need - // to default isRevealed to true for when - // we use the ternary operator in the onPress - const isRevealed = markdownSpoilerContext?.isRevealed ?? true; - - const textMessageMarkdownContext = React.useContext( - TextMessageMarkdownContext, - ); - const messageKey = textMessageMarkdownContext?.messageKey; - - const messagePressResponderContext = React.useContext( - MessagePressResponderContext, + const { markdownContext, messageKey, isRevealed, onLongPressHandler } = + useMarkdownOnPressUtils(); + const onPressHandler = useHandleLinkClick( + target, + markdownContext, + messageKey, ); - - const onPressMessage = messagePressResponderContext?.onPressMessage; - - const onPressLink = useHandleLinkClick(target, markdownContext, messageKey); - return ( ); } export default MarkdownLink; diff --git a/native/markdown/markdown-link.react.js b/native/markdown/markdown-utils.js similarity index 81% copy from native/markdown/markdown-link.react.js copy to native/markdown/markdown-utils.js index 6fd126b06..a73e381ec 100644 --- a/native/markdown/markdown-link.react.js +++ b/native/markdown/markdown-utils.js @@ -1,108 +1,102 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; -import { Text, Linking } from 'react-native'; +import { Linking } from 'react-native'; import { inviteLinkURL } from 'lib/facts/links.js'; import { MarkdownContext, type MarkdownContextType, } from './markdown-context.js'; import { MarkdownSpoilerContext } from './markdown-spoiler-context.js'; import { MessagePressResponderContext } from '../chat/message-press-responder-context.js'; import { TextMessageMarkdownContext } from '../chat/text-message-markdown-context.js'; import { DeepLinksContext } from '../navigation/deep-links-context-provider.react.js'; import Alert from '../utils/alert.js'; import { normalizeURL } from '../utils/url-utils.js'; +function useMarkdownOnPressUtils(): { + markdownContext: MarkdownContextType, + isRevealed: boolean, + messageKey: ?string, + onLongPressHandler: ?() => void, +} { + const markdownContext = React.useContext(MarkdownContext); + invariant(markdownContext, 'MarkdownContext should be set'); + + const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext); + // Since MarkdownSpoilerContext may not be set, we need + // to default isRevealed to true for when + // we use the ternary operator in the onPress + const isRevealed = markdownSpoilerContext?.isRevealed ?? true; + + const textMessageMarkdownContext = React.useContext( + TextMessageMarkdownContext, + ); + const messageKey = textMessageMarkdownContext?.messageKey; + + const messagePressResponderContext = React.useContext( + MessagePressResponderContext, + ); + + const onLongPressHandler = messagePressResponderContext?.onPressMessage; + + return { + markdownContext, + isRevealed, + messageKey, + onLongPressHandler, + }; +} + function useHandleLinkClick( inputURL: string, markdownContext: MarkdownContextType, messageKey: ?string, -) { +): () => void { const { setLinkModalActive } = markdownContext; const onDismiss = React.useCallback(() => { messageKey && setLinkModalActive({ [messageKey]: false }); }, [setLinkModalActive, messageKey]); const url = normalizeURL(inputURL); const onConfirm = React.useCallback(() => { onDismiss(); Linking.openURL(url); }, [url, onDismiss]); let displayURL = url.substring(0, 64); if (url.length > displayURL.length) { displayURL += '…'; } const deepLinksContext = React.useContext(DeepLinksContext); return React.useCallback(() => { if (url.startsWith(inviteLinkURL(''))) { deepLinksContext?.setCurrentLinkUrl(url); return; } messageKey && setLinkModalActive({ [messageKey]: true }); Alert.alert( 'External link', `You sure you want to open this link?\n\n${displayURL}`, [ { text: 'Cancel', style: 'cancel', onPress: onDismiss }, { text: 'Open', onPress: onConfirm }, ], { cancelable: true, onDismiss }, ); }, [ url, messageKey, setLinkModalActive, displayURL, onDismiss, onConfirm, deepLinksContext, ]); } -type TextProps = React.ElementConfig; -type Props = { - +target: string, - +children: React.Node, - ...TextProps, -}; -function MarkdownLink(props: Props): React.Node { - const { target, ...rest } = props; - - const markdownContext = React.useContext(MarkdownContext); - invariant(markdownContext, 'MarkdownContext should be set'); - - const markdownSpoilerContext = React.useContext(MarkdownSpoilerContext); - // Since MarkdownSpoilerContext may not be set, we need - // to default isRevealed to true for when - // we use the ternary operator in the onPress - const isRevealed = markdownSpoilerContext?.isRevealed ?? true; - - const textMessageMarkdownContext = React.useContext( - TextMessageMarkdownContext, - ); - const messageKey = textMessageMarkdownContext?.messageKey; - - const messagePressResponderContext = React.useContext( - MessagePressResponderContext, - ); - - const onPressMessage = messagePressResponderContext?.onPressMessage; - - const onPressLink = useHandleLinkClick(target, markdownContext, messageKey); - - return ( - - ); -} - -export default MarkdownLink; +export { useMarkdownOnPressUtils, useHandleLinkClick };