diff options
Diffstat (limited to 'src/view/com/threadgate/WhoCanReply.tsx')
| -rw-r--r-- | src/view/com/threadgate/WhoCanReply.tsx | 426 |
1 files changed, 294 insertions, 132 deletions
diff --git a/src/view/com/threadgate/WhoCanReply.tsx b/src/view/com/threadgate/WhoCanReply.tsx index 3ffbaa7ae..3f9970f5f 100644 --- a/src/view/com/threadgate/WhoCanReply.tsx +++ b/src/view/com/threadgate/WhoCanReply.tsx @@ -1,16 +1,20 @@ import React from 'react' import {Keyboard, StyleProp, View, ViewStyle} from 'react-native' -import {AppBskyFeedDefs, AppBskyGraphDefs, AtUri} from '@atproto/api' +import { + AppBskyFeedDefs, + AppBskyFeedGetPostThread, + AppBskyGraphDefs, + AtUri, + BskyAgent, +} from '@atproto/api' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {useQueryClient} from '@tanstack/react-query' -import {useAnalytics} from '#/lib/analytics/analytics' import {createThreadgate} from '#/lib/api' -import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle' -import {usePalette} from '#/lib/hooks/usePalette' +import {until} from '#/lib/async/until' +import {HITSLOP_10} from '#/lib/constants' import {makeListLink, makeProfileLink} from '#/lib/routes/links' -import {colors} from '#/lib/styles' import {logger} from '#/logger' import {isNative} from '#/platform/detection' import {useModalControls} from '#/state/modals' @@ -21,84 +25,88 @@ import { } from '#/state/queries/threadgate' import {useAgent} from '#/state/session' import * as Toast from 'view/com/util/Toast' +import {atoms as a, useTheme} from '#/alf' import {Button} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' +import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe' +import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' +import {Text} from '#/components/Typography' import {TextLink} from '../util/Link' -import {Text} from '../util/text/Text' -export function WhoCanReply({ - post, - isThreadAuthor, - style, -}: { +interface WhoCanReplyProps { post: AppBskyFeedDefs.PostView isThreadAuthor: boolean style?: StyleProp<ViewStyle> -}) { - const {track} = useAnalytics() +} + +export function WhoCanReplyInline({ + post, + isThreadAuthor, + style, +}: WhoCanReplyProps) { const {_} = useLingui() - const pal = usePalette('default') - const agent = useAgent() - const queryClient = useQueryClient() - const {openModal} = useModalControls() - const containerStyles = useColorSchemeStyle( - { - backgroundColor: pal.colors.unreadNotifBg, - }, - { - backgroundColor: pal.colors.unreadNotifBg, - }, - ) - const textStyles = useColorSchemeStyle( - {color: colors.blue5}, - {color: colors.blue1}, - ) - const hoverStyles = useColorSchemeStyle( - { - backgroundColor: colors.white, - }, - { - backgroundColor: pal.colors.background, - }, - ) - const settings = React.useMemo( - () => threadgateViewToSettings(post.threadgate), - [post], - ) - const isRootPost = !('reply' in post.record) + const t = useTheme() + const infoDialogControl = useDialogControl() + const {settings, isRootPost, onPressEdit} = useWhoCanReply(post) - const onPressEdit = () => { - track('Post:EditThreadgateOpened') - if (isNative && Keyboard.isVisible()) { - Keyboard.dismiss() - } - openModal({ - name: 'threadgate', - settings, - async onConfirm(newSettings: ThreadgateSetting[]) { - try { - if (newSettings.length) { - await createThreadgate(agent, post.uri, newSettings) - } else { - await agent.api.com.atproto.repo.deleteRecord({ - repo: agent.session!.did, - collection: 'app.bsky.feed.threadgate', - rkey: new AtUri(post.uri).rkey, - }) - } - Toast.show('Thread settings updated') - queryClient.invalidateQueries({ - queryKey: [POST_THREAD_RQKEY_ROOT], - }) - track('Post:ThreadgateEdited') - } catch (err) { - Toast.show( - 'There was an issue. Please check your internet connection and try again.', - ) - logger.error('Failed to edit threadgate', {message: err}) - } - }, - }) + if (!isRootPost) { + return null } + if (!settings.length && !isThreadAuthor) { + return null + } + + const isEverybody = settings.length === 0 + const isNobody = !!settings.find(gate => gate.type === 'nobody') + const description = isEverybody + ? _(msg`Everybody can reply`) + : isNobody + ? _(msg`Replies disabled`) + : _(msg`Some people can reply`) + + return ( + <> + <Button + label={ + isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`) + } + onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open} + hitSlop={HITSLOP_10}> + {({hovered}) => ( + <View style={[a.flex_row, a.align_center, a.gap_xs, style]}> + <Icon + color={t.palette.contrast_400} + width={16} + settings={settings} + /> + <Text + style={[ + a.text_sm, + a.leading_tight, + t.atoms.text_contrast_medium, + hovered && a.underline, + ]}> + {description} + </Text> + </View> + )} + </Button> + <InfoDialog control={infoDialogControl} post={post} settings={settings} /> + </> + ) +} + +export function WhoCanReplyBlock({ + post, + isThreadAuthor, + style, +}: WhoCanReplyProps) { + const {_} = useLingui() + const t = useTheme() + const infoDialogControl = useDialogControl() + const {settings, isRootPost, onPressEdit} = useWhoCanReply(post) if (!isRootPost) { return null @@ -107,65 +115,144 @@ export function WhoCanReply({ return null } + const isEverybody = settings.length === 0 + const isNobody = !!settings.find(gate => gate.type === 'nobody') + const description = isEverybody + ? _(msg`Everybody can reply`) + : isNobody + ? _(msg`Replies on this thread are disabled`) + : _(msg`Some people can reply`) + return ( - <View - style={[ - { - flexDirection: 'row', - alignItems: 'center', - gap: 10, - paddingLeft: 18, - paddingRight: 14, - paddingVertical: 10, - borderTopWidth: 1, - }, - pal.border, - containerStyles, - style, - ]}> - <View style={{flex: 1, paddingVertical: 6}}> - <Text type="sm" style={[{flexWrap: 'wrap'}, textStyles]}> - {!settings.length ? ( - <Trans>Everybody can reply.</Trans> - ) : settings[0].type === 'nobody' ? ( - <Trans>Replies to this thread are disabled.</Trans> - ) : ( - <Trans> - Only{' '} - {settings.map((rule, i) => ( - <> - <Rule - key={`rule-${i}`} - rule={rule} - post={post} - lists={post.threadgate!.lists} - /> - <Separator key={`sep-${i}`} i={i} length={settings.length} /> - </> - ))}{' '} - can reply. - </Trans> - )} + <> + <Button + label={ + isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`) + } + onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open} + hitSlop={HITSLOP_10}> + {({hovered}) => ( + <View + style={[ + a.flex_1, + a.flex_row, + a.align_center, + a.py_sm, + a.pr_lg, + style, + ]}> + <View style={[{paddingLeft: 25, paddingRight: 18}]}> + <Icon color={t.palette.contrast_300} settings={settings} /> + </View> + <Text + style={[ + a.text_sm, + a.leading_tight, + t.atoms.text_contrast_medium, + hovered && a.underline, + ]}> + {description} + </Text> + </View> + )} + </Button> + <InfoDialog control={infoDialogControl} post={post} settings={settings} /> + </> + ) +} + +function Icon({ + color, + width, + settings, +}: { + color: string + width?: number + settings: ThreadgateSetting[] +}) { + const isEverybody = settings.length === 0 + const isNobody = !!settings.find(gate => gate.type === 'nobody') + const IconComponent = isEverybody ? Earth : isNobody ? CircleBanSign : Group + return <IconComponent fill={color} width={width} /> +} + +function InfoDialog({ + control, + post, + settings, +}: { + control: Dialog.DialogControlProps + post: AppBskyFeedDefs.PostView + settings: ThreadgateSetting[] +}) { + return ( + <Dialog.Outer control={control}> + <Dialog.Handle /> + <InfoDialogInner post={post} settings={settings} /> + </Dialog.Outer> + ) +} + +function InfoDialogInner({ + post, + settings, +}: { + post: AppBskyFeedDefs.PostView + settings: ThreadgateSetting[] +}) { + const {_} = useLingui() + return ( + <Dialog.ScrollableInner + label={_(msg`Who can reply dialog`)} + style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}> + <View style={[a.gap_sm]}> + <Text style={[a.font_bold, a.text_xl]}> + <Trans>Who can reply?</Trans> </Text> + <Rules post={post} settings={settings} /> </View> - {isThreadAuthor && ( - <View> - <Button label={_(msg`Edit`)} onPress={onPressEdit}> - {({hovered}) => ( - <View - style={[ - hovered && hoverStyles, - {paddingVertical: 6, paddingHorizontal: 8, borderRadius: 8}, - ]}> - <Text type="sm" style={pal.link}> - <Trans>Edit</Trans> - </Text> - </View> - )} - </Button> - </View> + </Dialog.ScrollableInner> + ) +} + +function Rules({ + post, + settings, +}: { + post: AppBskyFeedDefs.PostView + settings: ThreadgateSetting[] +}) { + const t = useTheme() + return ( + <Text + style={[ + a.text_md, + a.leading_tight, + a.flex_wrap, + t.atoms.text_contrast_medium, + ]}> + {!settings.length ? ( + <Trans>Everybody can reply</Trans> + ) : settings[0].type === 'nobody' ? ( + <Trans>Replies to this thread are disabled</Trans> + ) : ( + <Trans> + Only{' '} + {settings.map((rule, i) => ( + <> + <Rule + key={`rule-${i}`} + rule={rule} + post={post} + lists={post.threadgate!.lists} + /> + <Separator key={`sep-${i}`} i={i} length={settings.length} /> + </> + ))}{' '} + can reply + </Trans> )} - </View> + </Text> ) } @@ -178,7 +265,7 @@ function Rule({ post: AppBskyFeedDefs.PostView lists: AppBskyGraphDefs.ListViewBasic[] | undefined }) { - const pal = usePalette('default') + const t = useTheme() if (rule.type === 'mention') { return <Trans>mentioned users</Trans> } @@ -190,7 +277,7 @@ function Rule({ type="sm" href={makeProfileLink(post.author)} text={`@${post.author.handle}`} - style={pal.link} + style={{color: t.palette.primary_500}} /> </Trans> ) @@ -205,7 +292,7 @@ function Rule({ type="sm" href={makeListLink(listUrip.hostname, listUrip.rkey)} text={list.name} - style={pal.link} + style={{color: t.palette.primary_500}} />{' '} members </Trans> @@ -227,3 +314,78 @@ function Separator({i, length}: {i: number; length: number}) { } return <>, </> } + +function useWhoCanReply(post: AppBskyFeedDefs.PostView) { + const agent = useAgent() + const queryClient = useQueryClient() + const {openModal} = useModalControls() + + const settings = React.useMemo( + () => threadgateViewToSettings(post.threadgate), + [post], + ) + const isRootPost = !('reply' in post.record) + + const onPressEdit = () => { + if (isNative && Keyboard.isVisible()) { + Keyboard.dismiss() + } + openModal({ + name: 'threadgate', + settings, + async onConfirm(newSettings: ThreadgateSetting[]) { + try { + if (newSettings.length) { + await createThreadgate(agent, post.uri, newSettings) + } else { + await agent.api.com.atproto.repo.deleteRecord({ + repo: agent.session!.did, + collection: 'app.bsky.feed.threadgate', + rkey: new AtUri(post.uri).rkey, + }) + } + await whenAppViewReady(agent, post.uri, res => { + const thread = res.data.thread + if (AppBskyFeedDefs.isThreadViewPost(thread)) { + const fetchedSettings = threadgateViewToSettings( + thread.post.threadgate, + ) + return ( + JSON.stringify(fetchedSettings) === JSON.stringify(newSettings) + ) + } + return false + }) + Toast.show('Thread settings updated') + queryClient.invalidateQueries({ + queryKey: [POST_THREAD_RQKEY_ROOT], + }) + } catch (err) { + Toast.show( + 'There was an issue. Please check your internet connection and try again.', + ) + logger.error('Failed to edit threadgate', {message: err}) + } + }, + }) + } + + return {settings, isRootPost, onPressEdit} +} + +async function whenAppViewReady( + agent: BskyAgent, + uri: string, + fn: (res: AppBskyFeedGetPostThread.Response) => boolean, +) { + await until( + 5, // 5 tries + 1e3, // 1s delay between tries + fn, + () => + agent.app.bsky.feed.getPostThread({ + uri, + depth: 0, + }), + ) +} |