From 628d8773255d403347b0cbb98afa6681768d428e Mon Sep 17 00:00:00 2001 From: Ollie H Date: Mon, 15 May 2023 13:18:39 -0700 Subject: [PATCH] Use dropdown for web reposting and quote posting (#607) * Use dropdown for web reposting and quote posting * Remove collateral damage * Tune the repost dropdown positioning * Move postctrls into their own folder * Factor out repost button into native/web build --------- Co-authored-by: Paul Frazee --- src/view/com/post-thread/PostThreadItem.tsx | 2 +- src/view/com/post/Post.tsx | 2 +- src/view/com/posts/FeedItem.tsx | 2 +- .../com/util/{ => post-ctrls}/PostCtrls.tsx | 90 +++++------------- src/view/com/util/post-ctrls/RepostButton.tsx | 95 +++++++++++++++++++ .../com/util/post-ctrls/RepostButton.web.tsx | 86 +++++++++++++++++ 6 files changed, 210 insertions(+), 67 deletions(-) rename src/view/com/util/{ => post-ctrls}/PostCtrls.tsx (78%) create mode 100644 src/view/com/util/post-ctrls/RepostButton.tsx create mode 100644 src/view/com/util/post-ctrls/RepostButton.web.tsx diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 563a3ead..084e30a2 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/src/view/com/post-thread/PostThreadItem.tsx @@ -21,7 +21,7 @@ import {pluralize} from 'lib/strings/helpers' import {useStores} from 'state/index' import {PostMeta} from '../util/PostMeta' import {PostEmbeds} from '../util/post-embeds' -import {PostCtrls} from '../util/PostCtrls' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {PostHider} from '../util/moderation/PostHider' import {ContentHider} from '../util/moderation/ContentHider' import {ImageHider} from '../util/moderation/ImageHider' diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index 0b49995f..614c5ea7 100644 --- a/src/view/com/post/Post.tsx +++ b/src/view/com/post/Post.tsx @@ -20,7 +20,7 @@ import {Link} from '../util/Link' import {UserInfoText} from '../util/UserInfoText' import {PostMeta} from '../util/PostMeta' import {PostEmbeds} from '../util/post-embeds' -import {PostCtrls} from '../util/PostCtrls' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {PostHider} from '../util/moderation/PostHider' import {ContentHider} from '../util/moderation/ContentHider' import {ImageHider} from '../util/moderation/ImageHider' diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 1084fb6f..fa6131d6 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/src/view/com/posts/FeedItem.tsx @@ -13,7 +13,7 @@ import {Link, DesktopWebTextLink} from '../util/Link' import {Text} from '../util/text/Text' import {UserInfoText} from '../util/UserInfoText' import {PostMeta} from '../util/PostMeta' -import {PostCtrls} from '../util/PostCtrls' +import {PostCtrls} from '../util/post-ctrls/PostCtrls' import {PostEmbeds} from '../util/post-embeds' import {PostHider} from '../util/moderation/PostHider' import {ContentHider} from '../util/moderation/ContentHider' diff --git a/src/view/com/util/PostCtrls.tsx b/src/view/com/util/post-ctrls/PostCtrls.tsx similarity index 78% rename from src/view/com/util/PostCtrls.tsx rename to src/view/com/util/post-ctrls/PostCtrls.tsx index 11b73cea..5c0296e2 100644 --- a/src/view/com/util/PostCtrls.tsx +++ b/src/view/com/util/post-ctrls/PostCtrls.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useCallback} from 'react' import { StyleProp, StyleSheet, @@ -18,18 +18,14 @@ import ReactNativeHapticFeedback, { // TriggerableAnimated, // TriggerableAnimatedRef, // } from './anim/TriggerableAnimated' -import {Text} from './text/Text' -import {PostDropdownBtn} from './forms/DropdownButton' -import { - HeartIcon, - HeartIconSolid, - RepostIcon, - CommentBottomArrow, -} from 'lib/icons' +import {Text} from '../text/Text' +import {PostDropdownBtn} from '../forms/DropdownButton' +import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' import {s, colors} from 'lib/styles' import {useTheme} from 'lib/ThemeContext' import {useStores} from 'state/index' -import {isIOS} from 'platform/detection' +import {isIOS, isNative} from 'platform/detection' +import {RepostButton} from './RepostButton' interface PostCtrlsOpts { itemUri: string @@ -112,10 +108,12 @@ export function PostCtrls(opts: PostCtrlsOpts) { // DISABLED see #135 // const repostRef = React.useRef(null) // const likeRef = React.useRef(null) - const onRepost = () => { + const onRepost = useCallback(() => { store.shell.closeModal() if (!opts.isReposted) { - ReactNativeHapticFeedback.trigger(hapticImpact) + if (isNative) { + ReactNativeHapticFeedback.trigger(hapticImpact) + } opts.onPressToggleRepost().catch(_e => undefined) // DISABLED see #135 // repostRef.current?.trigger( @@ -128,9 +126,9 @@ export function PostCtrls(opts: PostCtrlsOpts) { } else { opts.onPressToggleRepost().catch(_e => undefined) } - } + }, [opts, store.shell]) - const onQuote = () => { + const onQuote = useCallback(() => { store.shell.closeModal() store.shell.openComposer({ quote: { @@ -141,17 +139,18 @@ export function PostCtrls(opts: PostCtrlsOpts) { indexedAt: opts.indexedAt, }, }) - ReactNativeHapticFeedback.trigger(hapticImpact) - } - const onPressToggleRepostWrapper = () => { - store.shell.openModal({ - name: 'repost', - onRepost: onRepost, - onQuote: onQuote, - isReposted: opts.isReposted, - }) - } + if (isNative) { + ReactNativeHapticFeedback.trigger(hapticImpact) + } + }, [ + opts.author, + opts.indexedAt, + opts.itemCid, + opts.itemUri, + opts.text, + store.shell, + ]) const onPressToggleLikeWrapper = async () => { if (!opts.isLiked) { @@ -181,7 +180,7 @@ export function PostCtrls(opts: PostCtrlsOpts) { onPress={opts.onPressReply} accessibilityRole="button" accessibilityLabel="Reply" - accessibilityHint="Opens reply composer"> + accessibilityHint="reply composer"> ) : undefined} - - ) - : defaultCtrlColor - } - strokeWidth={2.4} - size={opts.big ? 24 : 20} - /> - {typeof opts.repostCount !== 'undefined' ? ( - - {opts.repostCount} - - ) : undefined} - + {opts.isLiked ? ( void + onQuote: () => void +} + +export const RepostButton = ({ + isReposted, + repostCount, + big, + onRepost, + onQuote, +}: Props) => { + const store = useStores() + const theme = useTheme() + + const defaultControlColor = React.useMemo( + () => ({ + color: theme.palette.default.postCtrl, + }), + [theme], + ) + + const onPressToggleRepostWrapper = useCallback(() => { + store.shell.openModal({ + name: 'repost', + onRepost: onRepost, + onQuote: onQuote, + isReposted, + }) + }, [onRepost, onQuote, isReposted, store.shell]) + + return ( + + ) + : defaultControlColor + } + strokeWidth={2.4} + size={big ? 24 : 20} + /> + {typeof repostCount !== 'undefined' ? ( + + {repostCount} + + ) : undefined} + + ) +} + +const styles = StyleSheet.create({ + control: { + flexDirection: 'row', + alignItems: 'center', + padding: 5, + margin: -5, + }, + reposted: { + color: colors.green3, + }, + repostCount: { + color: 'currentColor', + }, +}) diff --git a/src/view/com/util/post-ctrls/RepostButton.web.tsx b/src/view/com/util/post-ctrls/RepostButton.web.tsx new file mode 100644 index 00000000..66cc0d12 --- /dev/null +++ b/src/view/com/util/post-ctrls/RepostButton.web.tsx @@ -0,0 +1,86 @@ +import React, {useMemo} from 'react' +import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native' +import {RepostIcon} from 'lib/icons' +import {DropdownButton} from '../forms/DropdownButton' +import {colors} from 'lib/styles' +import {useTheme} from 'lib/ThemeContext' +import {Text} from '../text/Text' + +interface Props { + isReposted: boolean + repostCount?: number + big?: boolean + onRepost: () => void + onQuote: () => void +} + +export const RepostButton = ({ + isReposted, + repostCount, + big, + onRepost, + onQuote, +}: Props) => { + const theme = useTheme() + + const defaultControlColor = React.useMemo( + () => ({ + color: theme.palette.default.postCtrl, + }), + [theme], + ) + + const items = useMemo( + () => [ + { + label: isReposted ? 'Undo repost' : 'Repost', + icon: 'retweet' as const, + onPress: onRepost, + }, + {label: 'Quote post', icon: 'quote-left' as const, onPress: onQuote}, + ], + [isReposted, onRepost, onQuote], + ) + + return ( + + , + ]}> + + {typeof repostCount !== 'undefined' ? ( + + {repostCount ?? 0} + + ) : undefined} + + + ) +} + +const styles = StyleSheet.create({ + control: { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: 4, + }, + reposted: { + color: colors.green3, + }, + repostCount: { + color: 'currentColor', + }, +})