import React, {memo, useCallback} from 'react' import { StyleProp, StyleSheet, TouchableOpacity, View, ViewStyle, } from 'react-native' import { AppBskyFeedDefs, AppBskyFeedPost, RichText as RichTextAPI, } from '@atproto/api' import {Text} from '../text/Text' import {PostDropdownBtn} from '../forms/PostDropdownBtn' import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons' import {s} from 'lib/styles' import {pluralize} from 'lib/strings/helpers' import {useTheme} from 'lib/ThemeContext' import {RepostButton} from './RepostButton' import {Haptics} from 'lib/haptics' import {HITSLOP_10, HITSLOP_20} from 'lib/constants' import {useModalControls} from '#/state/modals' import { usePostLikeMutation, usePostUnlikeMutation, usePostRepostMutation, usePostUnrepostMutation, } from '#/state/queries/post' import {useComposerControls} from '#/state/shell/composer' import {Shadow} from '#/state/cache/types' import {useRequireAuth} from '#/state/session' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' let PostCtrls = ({ big, post, record, richText, showAppealLabelItem, style, onPressReply, }: { big?: boolean post: Shadow record: AppBskyFeedPost.Record richText: RichTextAPI showAppealLabelItem?: boolean style?: StyleProp onPressReply: () => void }): React.ReactNode => { const theme = useTheme() const {_} = useLingui() const {openComposer} = useComposerControls() const {closeModal} = useModalControls() const postLikeMutation = usePostLikeMutation() const postUnlikeMutation = usePostUnlikeMutation() const postRepostMutation = usePostRepostMutation() const postUnrepostMutation = usePostUnrepostMutation() const requireAuth = useRequireAuth() const defaultCtrlColor = React.useMemo( () => ({ color: theme.palette.default.postCtrl, }), [theme], ) as StyleProp const onPressToggleLike = React.useCallback(async () => { if (!post.viewer?.like) { Haptics.default() postLikeMutation.mutate({ uri: post.uri, cid: post.cid, likeCount: post.likeCount || 0, }) } else { postUnlikeMutation.mutate({ postUri: post.uri, likeUri: post.viewer.like, likeCount: post.likeCount || 0, }) } }, [ post.viewer?.like, post.uri, post.cid, post.likeCount, postLikeMutation, postUnlikeMutation, ]) const onRepost = useCallback(() => { closeModal() if (!post.viewer?.repost) { Haptics.default() postRepostMutation.mutate({ uri: post.uri, cid: post.cid, repostCount: post.repostCount || 0, }) } else { postUnrepostMutation.mutate({ postUri: post.uri, repostUri: post.viewer.repost, repostCount: post.repostCount || 0, }) } }, [ post.uri, post.cid, post.viewer?.repost, post.repostCount, closeModal, postRepostMutation, postUnrepostMutation, ]) const onQuote = useCallback(() => { closeModal() openComposer({ quote: { uri: post.uri, cid: post.cid, text: record.text, author: post.author, indexedAt: post.indexedAt, }, }) Haptics.default() }, [ post.uri, post.cid, post.author, post.indexedAt, record.text, openComposer, closeModal, ]) return ( { if (!post.viewer?.replyDisabled) { requireAuth(() => onPressReply()) } }} accessibilityRole="button" accessibilityLabel={`Reply (${post.replyCount} ${ post.replyCount === 1 ? 'reply' : 'replies' })`} accessibilityHint="" hitSlop={big ? HITSLOP_20 : HITSLOP_10}> {typeof post.replyCount !== 'undefined' ? ( {post.replyCount} ) : undefined} { requireAuth(() => onPressToggleLike()) }} accessibilityRole="button" accessibilityLabel={`${ post.viewer?.like ? _(msg`Unlike`) : _(msg`Like`) } (${post.likeCount} ${pluralize(post.likeCount || 0, 'like')})`} accessibilityHint="" hitSlop={big ? HITSLOP_20 : HITSLOP_10}> {post.viewer?.like ? ( ) : ( )} {typeof post.likeCount !== 'undefined' ? ( {post.likeCount} ) : undefined} {big ? undefined : ( )} {/* used for adding pad to the right side */} ) } PostCtrls = memo(PostCtrls) export {PostCtrls} const styles = StyleSheet.create({ ctrls: { flexDirection: 'row', justifyContent: 'space-between', }, ctrl: { flexDirection: 'row', alignItems: 'center', }, ctrlPad: { paddingTop: 5, paddingBottom: 5, paddingLeft: 5, paddingRight: 5, }, mt1: { marginTop: 1, }, })