WIP
This commit is contained in:
Eric Bailey
@@ -46,7 +46,13 @@ export interface ThreadCtx {
|
||||
depth: number
|
||||
isHighlightedPost?: boolean
|
||||
hasMore?: boolean
|
||||
/**
|
||||
* Means the loading state has parents
|
||||
*/
|
||||
isParentLoading?: boolean
|
||||
/**
|
||||
* Means the loading state has replies
|
||||
*/
|
||||
isChildLoading?: boolean
|
||||
isSelfThread?: boolean
|
||||
hasMoreSelfThread?: boolean
|
||||
@@ -108,6 +114,7 @@ export function usePostThreadQuery(uri: string | undefined) {
|
||||
depth: REPLY_TREE_DEPTH,
|
||||
})
|
||||
if (res.success) {
|
||||
await new Promise(y => setTimeout(y, 3e3)) // wait for the next tick
|
||||
const thread = responseToThreadNodes(res.data.thread)
|
||||
annotateSelfThread(thread)
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,373 @@
|
||||
import {useCallback} from 'react'
|
||||
import {
|
||||
$Typed,
|
||||
AtUri,
|
||||
AppBskyFeedDefs,
|
||||
AppBskyFeedThreadgate,
|
||||
AppBskyFeedGetPostThreadV2,
|
||||
ModerationOpts,
|
||||
BskyThreadViewPreference,
|
||||
moderatePost,
|
||||
ModerationDecision,
|
||||
AppBskyEmbedRecord,
|
||||
AppBskyFeedPost,
|
||||
} from '@atproto/api'
|
||||
import {useQuery, useQueryClient, QueryClient} from '@tanstack/react-query'
|
||||
|
||||
import {useAgent, useSession} from '#/state/session'
|
||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||
import {useMergeThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
|
||||
import * as bsky from '#/types/bsky'
|
||||
import {
|
||||
didOrHandleUriMatches,
|
||||
embedViewRecordToPostView,
|
||||
getEmbeddedPost,
|
||||
} from './util'
|
||||
import {
|
||||
findAllPostsInQueryData as findAllPostsInExploreFeedPreviewsQueryData,
|
||||
findAllProfilesInQueryData as findAllProfilesInExploreFeedPreviewsQueryData,
|
||||
} from '#/state/queries/explore-feed-previews'
|
||||
import {findAllPostsInQueryData as findAllPostsInQuoteQueryData} from '#/state/queries/post-quotes'
|
||||
import {type UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
|
||||
import {
|
||||
findAllPostsInQueryData as findAllPostsInSearchQueryData,
|
||||
findAllProfilesInQueryData as findAllProfilesInSearchQueryData,
|
||||
} from '#/state/queries/search-posts'
|
||||
import {
|
||||
findAllPostsInQueryData as findAllPostsInNotifsQueryData,
|
||||
findAllProfilesInQueryData as findAllProfilesInNotifsQueryData,
|
||||
} from './notifications/feed'
|
||||
import {
|
||||
findAllPostsInQueryData as findAllPostsInFeedQueryData,
|
||||
findAllProfilesInQueryData as findAllProfilesInFeedQueryData,
|
||||
} from './post-feed'
|
||||
|
||||
export type PostThreadV2Options = {
|
||||
view: 'tree' | 'linear'
|
||||
sort: 'hotness' | 'oldest' | 'newest' | 'most-likes' | 'random' | string
|
||||
prioritizeFollows: BskyThreadViewPreference['prioritizeFollowedUsers']
|
||||
}
|
||||
|
||||
export const getPostThreadV2QueryKeyRoot = 'getPostThreadV2' as const
|
||||
export const createGetPostThreadV2QueryKey = (
|
||||
props: Pick<GetPostThreadV2Params, 'uri' | 'options'>,
|
||||
) => [getPostThreadV2QueryKeyRoot, props] as const
|
||||
|
||||
export type GetPostThreadV2Params = {
|
||||
uri?: string
|
||||
enabled?: boolean
|
||||
options: PostThreadV2Options
|
||||
}
|
||||
|
||||
export type GetPostThreadV2QueryData = {
|
||||
slices: Slice[]
|
||||
threadgate?: AppBskyFeedDefs.ThreadgateView
|
||||
}
|
||||
|
||||
export function useGetPostThreadV2({
|
||||
uri,
|
||||
enabled: isEnabled,
|
||||
options,
|
||||
}: GetPostThreadV2Params) {
|
||||
const qc = useQueryClient()
|
||||
const agent = useAgent()
|
||||
const {hasSession} = useSession()
|
||||
const moderationOpts = useModerationOpts()
|
||||
const mergeThreadgateHiddenReplies = useMergeThreadgateHiddenReplies()
|
||||
|
||||
const enabled = isEnabled !== false && !!uri && !!moderationOpts
|
||||
|
||||
const select = useCallback(
|
||||
(data: AppBskyFeedGetPostThreadV2.OutputSchema) => {
|
||||
const threadgate = getThreadgate(data.threadgate)
|
||||
return {
|
||||
slices: buildSlices(data.thread, {
|
||||
hasSession,
|
||||
options,
|
||||
threadgateHiddenReplies: mergeThreadgateHiddenReplies(threadgate),
|
||||
moderationOpts: moderationOpts!,
|
||||
}),
|
||||
threadgate: {
|
||||
...data.threadgate,
|
||||
record: threadgate,
|
||||
},
|
||||
}
|
||||
},
|
||||
[hasSession, options, moderationOpts, mergeThreadgateHiddenReplies],
|
||||
)
|
||||
|
||||
return useQuery({
|
||||
enabled,
|
||||
queryKey: createGetPostThreadV2QueryKey({
|
||||
uri,
|
||||
options,
|
||||
}),
|
||||
async queryFn() {
|
||||
const {data} = await agent.app.bsky.feed.getPostThreadV2({
|
||||
uri: uri!,
|
||||
depth: 10,
|
||||
})
|
||||
return data
|
||||
},
|
||||
placeholderData() {
|
||||
if (!uri) return
|
||||
const placeholder = getSlicePlaceholder(qc, uri)
|
||||
if (placeholder) {
|
||||
return {thread: [placeholder]}
|
||||
}
|
||||
return
|
||||
},
|
||||
select,
|
||||
})
|
||||
}
|
||||
|
||||
export type Slice =
|
||||
| {
|
||||
type: 'threadSlice'
|
||||
key: string
|
||||
slice: Omit<AppBskyFeedDefs.ThreadItemPost, 'post'> & {
|
||||
post: Omit<AppBskyFeedDefs.PostView, 'record'> & {
|
||||
record: AppBskyFeedPost.Record
|
||||
}
|
||||
}
|
||||
moderation: ModerationDecision
|
||||
ui: {
|
||||
isAnchor: boolean
|
||||
showParentReplyLine: boolean
|
||||
showChildReplyLine: boolean
|
||||
}
|
||||
}
|
||||
| {
|
||||
type: 'threadSliceNoUnauthenticated'
|
||||
key: string
|
||||
slice: AppBskyFeedDefs.ThreadItemNoUnauthenticated
|
||||
}
|
||||
| {
|
||||
type: 'threadSliceNotFound'
|
||||
key: string
|
||||
slice: AppBskyFeedDefs.ThreadItemNotFound
|
||||
}
|
||||
| {
|
||||
type: 'threadSliceBlocked'
|
||||
key: string
|
||||
slice: AppBskyFeedDefs.ThreadItemBlocked
|
||||
}
|
||||
| {
|
||||
type: 'replyComposer'
|
||||
key: string
|
||||
}
|
||||
| {
|
||||
type: 'showHiddenReplies'
|
||||
key: string
|
||||
}
|
||||
| {
|
||||
// TODO needed?
|
||||
type: 'showMutedReplies'
|
||||
key: string
|
||||
}
|
||||
|
||||
export function buildSlices(
|
||||
thread: AppBskyFeedGetPostThreadV2.OutputSchema['thread'],
|
||||
{
|
||||
hasSession,
|
||||
options,
|
||||
threadgateHiddenReplies,
|
||||
moderationOpts,
|
||||
}: {
|
||||
hasSession: boolean
|
||||
options: PostThreadV2Options
|
||||
threadgateHiddenReplies: Set<string>
|
||||
moderationOpts: ModerationOpts
|
||||
},
|
||||
): Slice[] {
|
||||
const slices: Slice[] = []
|
||||
|
||||
for (let i = 0; i < thread.length; i++) {
|
||||
const prev = thread[i - 1]
|
||||
const slice = thread[i]
|
||||
const next = thread[i + 1]
|
||||
|
||||
if (AppBskyFeedDefs.isThreadItemNoUnauthenticated(slice)) {
|
||||
slices.push({
|
||||
type: 'threadSliceNoUnauthenticated',
|
||||
key: slice.uri,
|
||||
slice,
|
||||
})
|
||||
} else if (AppBskyFeedDefs.isThreadItemNotFound(slice)) {
|
||||
slices.push({
|
||||
type: 'threadSliceNotFound',
|
||||
key: slice.uri,
|
||||
slice,
|
||||
})
|
||||
} else if (AppBskyFeedDefs.isThreadItemBlocked(slice)) {
|
||||
slices.push({
|
||||
type: 'threadSliceBlocked',
|
||||
key: slice.uri,
|
||||
slice,
|
||||
})
|
||||
} else if (AppBskyFeedDefs.isThreadItemPost(slice)) {
|
||||
slices.push({
|
||||
type: 'threadSlice',
|
||||
key: slice.uri,
|
||||
slice: {
|
||||
...slice,
|
||||
post: {
|
||||
...slice.post,
|
||||
record: slice.post.record as AppBskyFeedPost.Record,
|
||||
}
|
||||
},
|
||||
moderation: moderatePost(slice.post, moderationOpts),
|
||||
ui: {
|
||||
isAnchor: slice.depth === 0,
|
||||
showParentReplyLine:
|
||||
!!prev &&
|
||||
AppBskyFeedDefs.isThreadItemPost(prev) &&
|
||||
prev.depth < slice.depth,
|
||||
showChildReplyLine:
|
||||
!!next &&
|
||||
AppBskyFeedDefs.isThreadItemPost(next) &&
|
||||
next.depth > slice.depth,
|
||||
},
|
||||
})
|
||||
|
||||
if (slice.depth === 0 && hasSession) {
|
||||
slices.push({
|
||||
type: 'replyComposer',
|
||||
key: 'replyComposer',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return slices
|
||||
}
|
||||
|
||||
function getThreadgate(
|
||||
view: AppBskyFeedGetPostThreadV2.OutputSchema['threadgate'],
|
||||
) {
|
||||
return bsky.dangerousIsType<AppBskyFeedThreadgate.Record>(
|
||||
view?.record,
|
||||
AppBskyFeedThreadgate.isRecord,
|
||||
)
|
||||
? view?.record
|
||||
: undefined
|
||||
}
|
||||
|
||||
function getSlicePlaceholder(
|
||||
queryClient: QueryClient,
|
||||
uri: string,
|
||||
): $Typed<AppBskyFeedDefs.ThreadItemPost> | void {
|
||||
let partial
|
||||
for (let item of yieldPlaceholdersFromQueryCache(queryClient, uri)) {
|
||||
/*
|
||||
* Currently, the backend doesn't send full post info in some cases (for
|
||||
* example, for quoted posts). We use missing `likeCount` as a way to
|
||||
* detect that. In the future, we should fix this on the backend, which
|
||||
* will let us always stop on the first result.
|
||||
*
|
||||
* TODO can we send in feeds and quotes?
|
||||
*/
|
||||
const hasAllInfo = item.post.likeCount != null
|
||||
if (hasAllInfo) {
|
||||
return item
|
||||
} else {
|
||||
// Keep searching, we might still find a full post in the cache.
|
||||
partial = item
|
||||
}
|
||||
}
|
||||
return partial
|
||||
}
|
||||
|
||||
export function* yieldPlaceholdersFromQueryCache(
|
||||
queryClient: QueryClient,
|
||||
uri: string,
|
||||
): Generator<$Typed<AppBskyFeedDefs.ThreadItemPost>, void> {
|
||||
const atUri = new AtUri(uri)
|
||||
|
||||
/*
|
||||
* Check this thread in the cache first.
|
||||
* TODO extract just this for shadowing
|
||||
*/
|
||||
const queryDatas =
|
||||
queryClient.getQueriesData<AppBskyFeedGetPostThreadV2.OutputSchema>({
|
||||
queryKey: [getPostThreadV2QueryKeyRoot],
|
||||
})
|
||||
for (const [_queryKey, queryData] of queryDatas) {
|
||||
if (!queryData) continue
|
||||
|
||||
const {thread} = queryData
|
||||
|
||||
for (const item of thread) {
|
||||
if (AppBskyFeedDefs.isThreadItemPost(item)) {
|
||||
if (didOrHandleUriMatches(atUri, item.post)) {
|
||||
yield {
|
||||
...item,
|
||||
depth: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const qp = getEmbeddedPost(item.post.embed)
|
||||
if (qp && didOrHandleUriMatches(atUri, qp)) {
|
||||
yield embedViewToSlicePlaceholder(qp)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Check notifications first. If you have a post in notifications, it's
|
||||
* often due to a like or a repost, and we want to prioritize a post object
|
||||
* with >0 likes/reposts over a stale version with no metrics in order to
|
||||
* avoid a notification->post scroll jump.
|
||||
*/
|
||||
for (let post of findAllPostsInNotifsQueryData(queryClient, uri)) {
|
||||
yield postViewToSlicePlaceholder(post)
|
||||
}
|
||||
for (let post of findAllPostsInFeedQueryData(queryClient, uri)) {
|
||||
yield postViewToSlicePlaceholder(post)
|
||||
}
|
||||
for (let post of findAllPostsInQuoteQueryData(queryClient, uri)) {
|
||||
yield postViewToSlicePlaceholder(post)
|
||||
}
|
||||
for (let post of findAllPostsInSearchQueryData(queryClient, uri)) {
|
||||
yield postViewToSlicePlaceholder(post)
|
||||
}
|
||||
for (let post of findAllPostsInExploreFeedPreviewsQueryData(
|
||||
queryClient,
|
||||
uri,
|
||||
)) {
|
||||
yield postViewToSlicePlaceholder(post)
|
||||
}
|
||||
}
|
||||
|
||||
function postViewToSlicePlaceholder(
|
||||
post: AppBskyFeedDefs.PostView,
|
||||
): $Typed<AppBskyFeedDefs.ThreadItemPost> {
|
||||
return {
|
||||
$type: 'app.bsky.feed.defs#threadItemPost',
|
||||
uri: post.uri,
|
||||
post,
|
||||
depth: 0, // reset to 0 for highlighted post
|
||||
isOPThread: false, // unknown
|
||||
hasOPLike: false, // unknown
|
||||
hasUnhydratedReplies: false, // unknown
|
||||
// TODO test
|
||||
hasUnhydratedParents: !!(post.record as AppBskyFeedPost.Record).reply, // unknown
|
||||
}
|
||||
}
|
||||
|
||||
function embedViewToSlicePlaceholder(
|
||||
record: AppBskyEmbedRecord.ViewRecord,
|
||||
): $Typed<AppBskyFeedDefs.ThreadItemPost> {
|
||||
return {
|
||||
$type: 'app.bsky.feed.defs#threadItemPost',
|
||||
uri: record.uri,
|
||||
post: embedViewRecordToPostView(record),
|
||||
depth: 0, // reset to 0 for highlighted post
|
||||
isOPThread: false, // unknown
|
||||
hasOPLike: false, // unknown
|
||||
hasUnhydratedReplies: false, // unknown
|
||||
// TODO test
|
||||
hasUnhydratedParents: !!(record.value as AppBskyFeedPost.Record).reply, // unknown
|
||||
}
|
||||
}
|
||||
@@ -83,3 +83,17 @@ export function useMergedThreadgateHiddenReplies({
|
||||
return set
|
||||
}, [uris, recentlyUnhiddenUris, threadgateRecord])
|
||||
}
|
||||
|
||||
export function useMergeThreadgateHiddenReplies() {
|
||||
const {uris, recentlyUnhiddenUris} = useThreadgateHiddenReplyUris()
|
||||
return React.useCallback(
|
||||
(threadgate?: AppBskyFeedThreadgate.Record) => {
|
||||
const set = new Set([...(threadgate?.hiddenReplies || []), ...uris])
|
||||
for (const uri of recentlyUnhiddenUris) {
|
||||
set.delete(uri)
|
||||
}
|
||||
return set
|
||||
},
|
||||
[uris, recentlyUnhiddenUris],
|
||||
)
|
||||
}
|
||||
|
||||
@@ -90,6 +90,7 @@ type ThreadSkeletonParts = {
|
||||
}
|
||||
|
||||
const keyExtractor = (item: RowItem) => {
|
||||
console.log(item._reactKey)
|
||||
return item._reactKey
|
||||
}
|
||||
|
||||
@@ -257,6 +258,7 @@ export function PostThread({uri}: {uri: string | undefined}) {
|
||||
fetchedAt,
|
||||
randomCache,
|
||||
])
|
||||
console.log({thread, skeleton})
|
||||
|
||||
const error = React.useMemo(() => {
|
||||
if (AppBskyFeedDefs.isNotFoundPost(thread)) {
|
||||
@@ -338,8 +340,11 @@ export function PostThread({uri}: {uri: string | undefined}) {
|
||||
const headerNode = headerRef.current
|
||||
if (postNode && headerNode) {
|
||||
let pageY = (postNode as any as Element).getBoundingClientRect().top
|
||||
console.log({pageY})
|
||||
pageY -= (headerNode as any as Element).getBoundingClientRect().height
|
||||
console.log({pageY})
|
||||
pageY = Math.max(0, pageY)
|
||||
console.log({pageY})
|
||||
ref.current?.scrollToOffset({
|
||||
animated: false,
|
||||
offset: pageY,
|
||||
@@ -561,6 +566,9 @@ export function PostThread({uri}: {uri: string | undefined}) {
|
||||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={2}
|
||||
onScrollToTop={onScrollToTop}
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition
|
||||
*/
|
||||
maintainVisibleContentPosition={
|
||||
isNative && hasParents
|
||||
? MAINTAIN_VISIBLE_CONTENT_POSITION
|
||||
|
||||
@@ -0,0 +1,899 @@
|
||||
import React, {memo, useRef, useState} from 'react'
|
||||
import {StyleSheet, useWindowDimensions, View} from 'react-native'
|
||||
import {runOnJS} from 'react-native-reanimated'
|
||||
import Animated from 'react-native-reanimated'
|
||||
import {useSafeAreaInsets} from 'react-native-safe-area-context'
|
||||
import {
|
||||
AppBskyFeedDefs,
|
||||
AppBskyFeedThreadgate,
|
||||
moderatePost,
|
||||
} from '@atproto/api'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
|
||||
import {HITSLOP_10} from '#/lib/constants'
|
||||
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
|
||||
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
|
||||
import {useSetTitle} from '#/lib/hooks/useSetTitle'
|
||||
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
|
||||
import {clamp} from '#/lib/numbers'
|
||||
import {ScrollProvider} from '#/lib/ScrollContext'
|
||||
import {sanitizeDisplayName} from '#/lib/strings/display-names'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
import {isAndroid, isNative, isWeb} from '#/platform/detection'
|
||||
import {useModerationOpts} from '#/state/preferences/moderation-opts'
|
||||
import {
|
||||
fillThreadModerationCache,
|
||||
sortThread,
|
||||
ThreadBlocked,
|
||||
ThreadModerationCache,
|
||||
ThreadNode,
|
||||
ThreadNotFound,
|
||||
ThreadPost,
|
||||
usePostThreadQuery,
|
||||
} from '#/state/queries/post-thread'
|
||||
import {useSetThreadViewPreferencesMutation} from '#/state/queries/preferences'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import {useSession} from '#/state/session'
|
||||
import {useComposerControls} from '#/state/shell'
|
||||
import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
|
||||
import {List, ListMethods} from '#/view/com/util/List'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
|
||||
import {Header} from '#/components/Layout'
|
||||
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
|
||||
import * as Menu from '#/components/Menu'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {PostThreadComposePrompt} from './PostThreadComposePrompt'
|
||||
import {PostThreadItem} from './PostThreadItem'
|
||||
import {PostThreadLoadMore} from './PostThreadLoadMore'
|
||||
import {PostThreadShowHiddenReplies} from './PostThreadShowHiddenReplies'
|
||||
|
||||
// FlatList maintainVisibleContentPosition breaks if too many items
|
||||
// are prepended. This seems to be an optimal number based on *shrug*.
|
||||
const PARENTS_CHUNK_SIZE = 15
|
||||
|
||||
const MAINTAIN_VISIBLE_CONTENT_POSITION = {
|
||||
// We don't insert any elements before the root row while loading.
|
||||
// So the row we want to use as the scroll anchor is the first row.
|
||||
minIndexForVisible: 0,
|
||||
}
|
||||
|
||||
const REPLY_PROMPT = {_reactKey: '__reply__'}
|
||||
const LOAD_MORE = {_reactKey: '__load_more__'}
|
||||
const SHOW_HIDDEN_REPLIES = {_reactKey: '__show_hidden_replies__'}
|
||||
const SHOW_MUTED_REPLIES = {_reactKey: '__show_muted_replies__'}
|
||||
|
||||
enum HiddenRepliesState {
|
||||
Hide,
|
||||
Show,
|
||||
ShowAndOverridePostHider,
|
||||
}
|
||||
|
||||
type YieldedItem =
|
||||
| ThreadPost
|
||||
| ThreadBlocked
|
||||
| ThreadNotFound
|
||||
| typeof SHOW_HIDDEN_REPLIES
|
||||
| typeof SHOW_MUTED_REPLIES
|
||||
type RowItem =
|
||||
| YieldedItem
|
||||
// TODO: TS doesn't actually enforce it's one of these, it only enforces matching shape.
|
||||
| typeof REPLY_PROMPT
|
||||
| typeof LOAD_MORE
|
||||
|
||||
type ThreadSkeletonParts = {
|
||||
parents: YieldedItem[]
|
||||
highlightedPost: ThreadNode
|
||||
replies: YieldedItem[]
|
||||
}
|
||||
|
||||
const keyExtractor = (item: RowItem) => {
|
||||
return item._reactKey
|
||||
}
|
||||
|
||||
export function PostThread({uri}: {uri: string | undefined}) {
|
||||
const {hasSession, currentAccount} = useSession()
|
||||
const {_} = useLingui()
|
||||
const t = useTheme()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const initialNumToRender = useInitialNumToRender()
|
||||
const {height: windowHeight} = useWindowDimensions()
|
||||
const [hiddenRepliesState, setHiddenRepliesState] = React.useState(
|
||||
HiddenRepliesState.Hide,
|
||||
)
|
||||
const headerRef = React.useRef<View | null>(null)
|
||||
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const {
|
||||
isFetching,
|
||||
isError: isThreadError,
|
||||
error: threadError,
|
||||
refetch,
|
||||
data: {thread, threadgate} = {},
|
||||
dataUpdatedAt: fetchedAt,
|
||||
} = usePostThreadQuery(uri)
|
||||
|
||||
// The original source of truth for these are the server settings.
|
||||
const serverPrefs = preferences?.threadViewPrefs
|
||||
const serverPrioritizeFollowedUsers =
|
||||
serverPrefs?.prioritizeFollowedUsers ?? true
|
||||
const serverTreeViewEnabled = serverPrefs?.lab_treeViewEnabled ?? false
|
||||
const serverSortReplies = serverPrefs?.sort ?? 'hotness'
|
||||
|
||||
// However, we also need these to work locally for PWI (without persistence).
|
||||
// So we're mirroring them locally.
|
||||
const prioritizeFollowedUsers = serverPrioritizeFollowedUsers
|
||||
const [treeViewEnabled, setTreeViewEnabled] = useState(serverTreeViewEnabled)
|
||||
const [sortReplies, setSortReplies] = useState(serverSortReplies)
|
||||
|
||||
// We'll reset the local state if new server state flows down to us.
|
||||
const [prevServerPrefs, setPrevServerPrefs] = useState(serverPrefs)
|
||||
if (prevServerPrefs !== serverPrefs) {
|
||||
setPrevServerPrefs(serverPrefs)
|
||||
setTreeViewEnabled(serverTreeViewEnabled)
|
||||
setSortReplies(serverSortReplies)
|
||||
}
|
||||
|
||||
// And we'll update the local state when mutating the server prefs.
|
||||
const {mutate: mutateThreadViewPrefs} = useSetThreadViewPreferencesMutation()
|
||||
function updateTreeViewEnabled(newTreeViewEnabled: boolean) {
|
||||
setTreeViewEnabled(newTreeViewEnabled)
|
||||
if (hasSession) {
|
||||
mutateThreadViewPrefs({lab_treeViewEnabled: newTreeViewEnabled})
|
||||
}
|
||||
}
|
||||
function updateSortReplies(newSortReplies: string) {
|
||||
setSortReplies(newSortReplies)
|
||||
if (hasSession) {
|
||||
mutateThreadViewPrefs({sort: newSortReplies})
|
||||
}
|
||||
}
|
||||
|
||||
const treeView = React.useMemo(
|
||||
() => treeViewEnabled && hasBranchingReplies(thread),
|
||||
[treeViewEnabled, thread],
|
||||
)
|
||||
|
||||
const rootPost = thread?.type === 'post' ? thread.post : undefined
|
||||
const rootPostRecord = thread?.type === 'post' ? thread.record : undefined
|
||||
const threadgateRecord = threadgate?.record as
|
||||
| AppBskyFeedThreadgate.Record
|
||||
| undefined
|
||||
const threadgateHiddenReplies = useMergedThreadgateHiddenReplies({
|
||||
threadgateRecord,
|
||||
})
|
||||
|
||||
const moderationOpts = useModerationOpts()
|
||||
const isNoPwi = React.useMemo(() => {
|
||||
const mod =
|
||||
rootPost && moderationOpts
|
||||
? moderatePost(rootPost, moderationOpts)
|
||||
: undefined
|
||||
return !!mod
|
||||
?.ui('contentList')
|
||||
.blurs.find(
|
||||
cause =>
|
||||
cause.type === 'label' &&
|
||||
cause.labelDef.identifier === '!no-unauthenticated',
|
||||
)
|
||||
}, [rootPost, moderationOpts])
|
||||
|
||||
// Values used for proper rendering of parents
|
||||
const ref = useRef<ListMethods>(null)
|
||||
const highlightedPostRef = useRef<View | null>(null)
|
||||
const [maxParents, setMaxParents] = React.useState(
|
||||
isWeb ? Infinity : PARENTS_CHUNK_SIZE,
|
||||
)
|
||||
const [maxReplies, setMaxReplies] = React.useState(50)
|
||||
|
||||
useSetTitle(
|
||||
rootPost && !isNoPwi
|
||||
? `${sanitizeDisplayName(
|
||||
rootPost.author.displayName || `@${rootPost.author.handle}`,
|
||||
)}: "${rootPostRecord!.text}"`
|
||||
: '',
|
||||
)
|
||||
|
||||
// On native, this is going to start out `true`. We'll toggle it to `false` after the initial render if flushed.
|
||||
// This ensures that the first render contains no parents--even if they are already available in the cache.
|
||||
// We need to delay showing them so that we can use maintainVisibleContentPosition to keep the main post on screen.
|
||||
// On the web this is not necessary because we can synchronously adjust the scroll in onContentSizeChange instead.
|
||||
const [deferParents, setDeferParents] = React.useState(isNative)
|
||||
|
||||
const currentDid = currentAccount?.did
|
||||
const threadModerationCache = React.useMemo(() => {
|
||||
const cache: ThreadModerationCache = new WeakMap()
|
||||
if (thread && moderationOpts) {
|
||||
fillThreadModerationCache(cache, thread, moderationOpts)
|
||||
}
|
||||
return cache
|
||||
}, [thread, moderationOpts])
|
||||
|
||||
const [justPostedUris, setJustPostedUris] = React.useState(
|
||||
() => new Set<string>(),
|
||||
)
|
||||
|
||||
const [fetchedAtCache] = React.useState(() => new Map<string, number>())
|
||||
const [randomCache] = React.useState(() => new Map<string, number>())
|
||||
const skeleton = React.useMemo(() => {
|
||||
if (!thread) return null
|
||||
return createThreadSkeleton(
|
||||
sortThread(
|
||||
thread,
|
||||
{
|
||||
// Prefer local state as the source of truth.
|
||||
sort: sortReplies,
|
||||
lab_treeViewEnabled: treeViewEnabled,
|
||||
prioritizeFollowedUsers,
|
||||
},
|
||||
threadModerationCache,
|
||||
currentDid,
|
||||
justPostedUris,
|
||||
threadgateHiddenReplies,
|
||||
fetchedAtCache,
|
||||
fetchedAt,
|
||||
randomCache,
|
||||
),
|
||||
currentDid,
|
||||
treeView,
|
||||
threadModerationCache,
|
||||
hiddenRepliesState !== HiddenRepliesState.Hide,
|
||||
threadgateHiddenReplies,
|
||||
)
|
||||
}, [
|
||||
thread,
|
||||
prioritizeFollowedUsers,
|
||||
sortReplies,
|
||||
treeViewEnabled,
|
||||
currentDid,
|
||||
treeView,
|
||||
threadModerationCache,
|
||||
hiddenRepliesState,
|
||||
justPostedUris,
|
||||
threadgateHiddenReplies,
|
||||
fetchedAtCache,
|
||||
fetchedAt,
|
||||
randomCache,
|
||||
])
|
||||
console.log({thread, skeleton})
|
||||
|
||||
const error = React.useMemo(() => {
|
||||
if (AppBskyFeedDefs.isNotFoundPost(thread)) {
|
||||
return {
|
||||
title: _(msg`Post not found`),
|
||||
message: _(msg`The post may have been deleted.`),
|
||||
}
|
||||
} else if (skeleton?.highlightedPost.type === 'blocked') {
|
||||
return {
|
||||
title: _(msg`Post hidden`),
|
||||
message: _(
|
||||
msg`You have blocked the author or you have been blocked by the author.`,
|
||||
),
|
||||
}
|
||||
} else if (threadError?.message.startsWith('Post not found')) {
|
||||
return {
|
||||
title: _(msg`Post not found`),
|
||||
message: _(msg`The post may have been deleted.`),
|
||||
}
|
||||
} else if (isThreadError) {
|
||||
return {
|
||||
message: threadError ? cleanError(threadError) : undefined,
|
||||
}
|
||||
}
|
||||
|
||||
return null
|
||||
}, [thread, skeleton?.highlightedPost, isThreadError, _, threadError])
|
||||
|
||||
// construct content
|
||||
const posts = React.useMemo(() => {
|
||||
if (!skeleton) return []
|
||||
|
||||
const {parents, highlightedPost, replies} = skeleton
|
||||
let arr: RowItem[] = []
|
||||
if (highlightedPost.type === 'post') {
|
||||
// We want to wait for parents to load before rendering.
|
||||
// If you add something here, you'll need to update both
|
||||
// maintainVisibleContentPosition and onContentSizeChange
|
||||
// to "hold onto" the correct row instead of the first one.
|
||||
|
||||
if (!highlightedPost.ctx.isParentLoading && !deferParents) {
|
||||
// When progressively revealing parents, rendering a placeholder
|
||||
// here will cause scrolling jumps. Don't add it unless you test it.
|
||||
// QT'ing this thread is a great way to test all the scrolling hacks:
|
||||
// https://bsky.app/profile/www.mozzius.dev/post/3kjqhblh6qk2o
|
||||
|
||||
// Everything is loaded
|
||||
let startIndex = Math.max(0, parents.length - maxParents)
|
||||
for (let i = startIndex; i < parents.length; i++) {
|
||||
arr.push(parents[i])
|
||||
}
|
||||
}
|
||||
arr.push(highlightedPost)
|
||||
if (!highlightedPost.post.viewer?.replyDisabled) {
|
||||
arr.push(REPLY_PROMPT)
|
||||
}
|
||||
for (let i = 0; i < replies.length; i++) {
|
||||
arr.push(replies[i])
|
||||
if (i === maxReplies) {
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
return arr
|
||||
}, [skeleton, deferParents, maxParents, maxReplies])
|
||||
|
||||
// This is only used on the web to keep the post in view when its parents load.
|
||||
// On native, we rely on `maintainVisibleContentPosition` instead.
|
||||
const didAdjustScrollWeb = useRef<boolean>(false)
|
||||
const onContentSizeChangeWeb = React.useCallback(() => {
|
||||
// only run once
|
||||
if (didAdjustScrollWeb.current) {
|
||||
return
|
||||
}
|
||||
// wait for loading to finish
|
||||
if (thread?.type === 'post' && !!thread.parent) {
|
||||
// Measure synchronously to avoid a layout jump.
|
||||
const postNode = highlightedPostRef.current
|
||||
const headerNode = headerRef.current
|
||||
if (postNode && headerNode) {
|
||||
let pageY = (postNode as any as Element).getBoundingClientRect().top
|
||||
pageY -= (headerNode as any as Element).getBoundingClientRect().height
|
||||
pageY = Math.max(0, pageY)
|
||||
ref.current?.scrollToOffset({
|
||||
animated: false,
|
||||
offset: pageY,
|
||||
})
|
||||
}
|
||||
didAdjustScrollWeb.current = true
|
||||
}
|
||||
}, [thread])
|
||||
|
||||
// On native, we reveal parents in chunks. Although they're all already
|
||||
// loaded and FlatList already has its own virtualization, unfortunately FlatList
|
||||
// has a bug that causes the content to jump around if too many items are getting
|
||||
// prepended at once. It also jumps around if items get prepended during scroll.
|
||||
// To work around this, we prepend rows after scroll bumps against the top and rests.
|
||||
const needsBumpMaxParents = React.useRef(false)
|
||||
const onStartReached = React.useCallback(() => {
|
||||
if (skeleton?.parents && maxParents < skeleton.parents.length) {
|
||||
needsBumpMaxParents.current = true
|
||||
}
|
||||
}, [maxParents, skeleton?.parents])
|
||||
const bumpMaxParentsIfNeeded = React.useCallback(() => {
|
||||
if (!isNative) {
|
||||
return
|
||||
}
|
||||
if (needsBumpMaxParents.current) {
|
||||
needsBumpMaxParents.current = false
|
||||
setMaxParents(n => n + PARENTS_CHUNK_SIZE)
|
||||
}
|
||||
}, [])
|
||||
const onScrollToTop = bumpMaxParentsIfNeeded
|
||||
const onMomentumEnd = React.useCallback(() => {
|
||||
'worklet'
|
||||
runOnJS(bumpMaxParentsIfNeeded)()
|
||||
}, [bumpMaxParentsIfNeeded])
|
||||
|
||||
const onEndReached = React.useCallback(() => {
|
||||
if (isFetching || posts.length < maxReplies) return
|
||||
setMaxReplies(prev => prev + 50)
|
||||
}, [isFetching, maxReplies, posts.length])
|
||||
|
||||
const onPostReply = React.useCallback(
|
||||
(postUri: string | undefined) => {
|
||||
refetch()
|
||||
if (postUri) {
|
||||
setJustPostedUris(set => {
|
||||
const nextSet = new Set(set)
|
||||
nextSet.add(postUri)
|
||||
return nextSet
|
||||
})
|
||||
}
|
||||
},
|
||||
[refetch],
|
||||
)
|
||||
|
||||
const {openComposer} = useComposerControls()
|
||||
const onPressReply = React.useCallback(() => {
|
||||
if (thread?.type !== 'post') {
|
||||
return
|
||||
}
|
||||
openComposer({
|
||||
replyTo: {
|
||||
uri: thread.post.uri,
|
||||
cid: thread.post.cid,
|
||||
text: thread.record.text,
|
||||
author: thread.post.author,
|
||||
embed: thread.post.embed,
|
||||
moderation: threadModerationCache.get(thread),
|
||||
},
|
||||
onPost: onPostReply,
|
||||
})
|
||||
}, [openComposer, thread, onPostReply, threadModerationCache])
|
||||
|
||||
const canReply = !error && rootPost && !rootPost.viewer?.replyDisabled
|
||||
const hasParents =
|
||||
skeleton?.highlightedPost?.type === 'post' &&
|
||||
(skeleton.highlightedPost.ctx.isParentLoading ||
|
||||
Boolean(skeleton?.parents && skeleton.parents.length > 0))
|
||||
|
||||
const renderItem = ({item, index}: {item: RowItem; index: number}) => {
|
||||
if (item === REPLY_PROMPT && hasSession) {
|
||||
return (
|
||||
<View>
|
||||
{!isMobile && (
|
||||
<PostThreadComposePrompt onPressCompose={onPressReply} />
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
} else if (item === SHOW_HIDDEN_REPLIES || item === SHOW_MUTED_REPLIES) {
|
||||
return (
|
||||
<PostThreadShowHiddenReplies
|
||||
type={item === SHOW_HIDDEN_REPLIES ? 'hidden' : 'muted'}
|
||||
onPress={() =>
|
||||
setHiddenRepliesState(
|
||||
item === SHOW_HIDDEN_REPLIES
|
||||
? HiddenRepliesState.Show
|
||||
: HiddenRepliesState.ShowAndOverridePostHider,
|
||||
)
|
||||
}
|
||||
hideTopBorder={index === 0}
|
||||
/>
|
||||
)
|
||||
} else if (isThreadNotFound(item)) {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.p_lg,
|
||||
index !== 0 && a.border_t,
|
||||
t.atoms.border_contrast_low,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
|
||||
<Trans>Deleted post.</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
} else if (isThreadBlocked(item)) {
|
||||
return (
|
||||
<View
|
||||
style={[
|
||||
a.p_lg,
|
||||
index !== 0 && a.border_t,
|
||||
t.atoms.border_contrast_low,
|
||||
t.atoms.bg_contrast_25,
|
||||
]}>
|
||||
<Text style={[a.font_bold, a.text_md, t.atoms.text_contrast_medium]}>
|
||||
<Trans>Blocked post.</Trans>
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
} else if (isThreadPost(item)) {
|
||||
const prev = isThreadPost(posts[index - 1])
|
||||
? (posts[index - 1] as ThreadPost)
|
||||
: undefined
|
||||
const next = isThreadPost(posts[index + 1])
|
||||
? (posts[index + 1] as ThreadPost)
|
||||
: undefined
|
||||
const showChildReplyLine = (next?.ctx.depth || 0) > item.ctx.depth
|
||||
const showParentReplyLine =
|
||||
(item.ctx.depth < 0 && !!item.parent) || item.ctx.depth > 1
|
||||
const hasUnrevealedParents =
|
||||
index === 0 && skeleton?.parents && maxParents < skeleton.parents.length
|
||||
|
||||
if (!treeView && prev && item.ctx.hasMoreSelfThread) {
|
||||
return <PostThreadLoadMore post={prev.post} />
|
||||
}
|
||||
|
||||
return (
|
||||
<View
|
||||
ref={item.ctx.isHighlightedPost ? highlightedPostRef : undefined}
|
||||
onLayout={deferParents ? () => setDeferParents(false) : undefined}>
|
||||
<PostThreadItem
|
||||
post={item.post}
|
||||
record={item.record}
|
||||
threadgateRecord={threadgateRecord ?? undefined}
|
||||
moderation={threadModerationCache.get(item)}
|
||||
treeView={treeView}
|
||||
depth={item.ctx.depth}
|
||||
prevPost={prev}
|
||||
nextPost={next}
|
||||
isHighlightedPost={item.ctx.isHighlightedPost}
|
||||
hasMore={item.ctx.hasMore}
|
||||
showChildReplyLine={showChildReplyLine}
|
||||
showParentReplyLine={showParentReplyLine}
|
||||
hasPrecedingItem={showParentReplyLine || !!hasUnrevealedParents}
|
||||
overrideBlur={
|
||||
hiddenRepliesState ===
|
||||
HiddenRepliesState.ShowAndOverridePostHider &&
|
||||
item.ctx.depth > 0
|
||||
}
|
||||
onPostReply={onPostReply}
|
||||
hideTopBorder={index === 0 && !item.ctx.isParentLoading}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
if (!thread || !preferences || error) {
|
||||
return (
|
||||
<ListMaybePlaceholder
|
||||
isLoading={!error}
|
||||
isError={Boolean(error)}
|
||||
noEmpty
|
||||
onRetry={refetch}
|
||||
errorTitle={error?.title}
|
||||
errorMessage={error?.message}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header.Outer headerRef={headerRef}>
|
||||
<Header.BackButton />
|
||||
<Header.Content>
|
||||
<Header.TitleText>
|
||||
<Trans context="description">Post</Trans>
|
||||
</Header.TitleText>
|
||||
</Header.Content>
|
||||
<Header.Slot>
|
||||
<ThreadMenu
|
||||
sortReplies={sortReplies}
|
||||
treeViewEnabled={treeViewEnabled}
|
||||
setSortReplies={updateSortReplies}
|
||||
setTreeViewEnabled={updateTreeViewEnabled}
|
||||
/>
|
||||
</Header.Slot>
|
||||
</Header.Outer>
|
||||
|
||||
<ScrollProvider onMomentumEnd={onMomentumEnd}>
|
||||
<List
|
||||
ref={ref}
|
||||
data={posts}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={keyExtractor}
|
||||
onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
|
||||
onStartReached={onStartReached}
|
||||
onEndReached={onEndReached}
|
||||
onEndReachedThreshold={2}
|
||||
onScrollToTop={onScrollToTop}
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition
|
||||
*/
|
||||
maintainVisibleContentPosition={
|
||||
isNative && hasParents
|
||||
? MAINTAIN_VISIBLE_CONTENT_POSITION
|
||||
: undefined
|
||||
}
|
||||
desktopFixedHeight
|
||||
removeClippedSubviews={isAndroid ? false : undefined}
|
||||
ListFooterComponent={
|
||||
<ListFooter
|
||||
// Using `isFetching` over `isFetchingNextPage` is done on purpose here so we get the loader on
|
||||
// initial render
|
||||
isFetchingNextPage={isFetching}
|
||||
error={cleanError(threadError)}
|
||||
onRetry={refetch}
|
||||
// 300 is based on the minimum height of a post. This is enough extra height for the `maintainVisPos` to
|
||||
// work without causing weird jumps on web or glitches on native
|
||||
height={windowHeight - 200}
|
||||
/>
|
||||
}
|
||||
initialNumToRender={initialNumToRender}
|
||||
windowSize={11}
|
||||
sideBorders={false}
|
||||
/>
|
||||
</ScrollProvider>
|
||||
{isMobile && canReply && hasSession && (
|
||||
<MobileComposePrompt onPressReply={onPressReply} />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
let ThreadMenu = ({
|
||||
sortReplies,
|
||||
treeViewEnabled,
|
||||
setSortReplies,
|
||||
setTreeViewEnabled,
|
||||
}: {
|
||||
sortReplies: string
|
||||
treeViewEnabled: boolean
|
||||
setSortReplies: (newValue: string) => void
|
||||
setTreeViewEnabled: (newValue: boolean) => void
|
||||
}): React.ReactNode => {
|
||||
const {_} = useLingui()
|
||||
return (
|
||||
<Menu.Root>
|
||||
<Menu.Trigger label={_(msg`Thread options`)}>
|
||||
{({props}) => (
|
||||
<Button
|
||||
label={_(msg`Thread options`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="round"
|
||||
hitSlop={HITSLOP_10}
|
||||
{...props}>
|
||||
<ButtonIcon icon={SettingsSlider} size="md" />
|
||||
</Button>
|
||||
)}
|
||||
</Menu.Trigger>
|
||||
<Menu.Outer>
|
||||
<Menu.LabelText>
|
||||
<Trans>Show replies as</Trans>
|
||||
</Menu.LabelText>
|
||||
<Menu.Group>
|
||||
<Menu.Item
|
||||
label={_(msg`Linear`)}
|
||||
onPress={() => {
|
||||
setTreeViewEnabled(false)
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Linear</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={!treeViewEnabled} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Threaded`)}
|
||||
onPress={() => {
|
||||
setTreeViewEnabled(true)
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Threaded</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={treeViewEnabled} />
|
||||
</Menu.Item>
|
||||
</Menu.Group>
|
||||
<Menu.Divider />
|
||||
<Menu.LabelText>
|
||||
<Trans>Reply sorting</Trans>
|
||||
</Menu.LabelText>
|
||||
<Menu.Group>
|
||||
<Menu.Item
|
||||
label={_(msg`Hot replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('hotness')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Hot replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'hotness'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Oldest replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('oldest')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Oldest replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'oldest'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Newest replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('newest')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Newest replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'newest'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Most-liked replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('most-likes')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Most-liked replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'most-likes'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Random (aka "Poster's Roulette")`)}
|
||||
onPress={() => {
|
||||
setSortReplies('random')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Random (aka "Poster's Roulette")</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'random'} />
|
||||
</Menu.Item>
|
||||
</Menu.Group>
|
||||
</Menu.Outer>
|
||||
</Menu.Root>
|
||||
)
|
||||
}
|
||||
ThreadMenu = memo(ThreadMenu)
|
||||
|
||||
function MobileComposePrompt({onPressReply}: {onPressReply: () => unknown}) {
|
||||
const safeAreaInsets = useSafeAreaInsets()
|
||||
const fabMinimalShellTransform = useMinimalShellFabTransform()
|
||||
return (
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.prompt,
|
||||
fabMinimalShellTransform,
|
||||
{
|
||||
bottom: clamp(safeAreaInsets.bottom, 13, 60),
|
||||
},
|
||||
]}>
|
||||
<PostThreadComposePrompt onPressCompose={onPressReply} />
|
||||
</Animated.View>
|
||||
)
|
||||
}
|
||||
|
||||
function isThreadPost(v: unknown): v is ThreadPost {
|
||||
return !!v && typeof v === 'object' && 'type' in v && v.type === 'post'
|
||||
}
|
||||
|
||||
function isThreadNotFound(v: unknown): v is ThreadNotFound {
|
||||
return !!v && typeof v === 'object' && 'type' in v && v.type === 'not-found'
|
||||
}
|
||||
|
||||
function isThreadBlocked(v: unknown): v is ThreadBlocked {
|
||||
return !!v && typeof v === 'object' && 'type' in v && v.type === 'blocked'
|
||||
}
|
||||
|
||||
function createThreadSkeleton(
|
||||
node: ThreadNode,
|
||||
currentDid: string | undefined,
|
||||
treeView: boolean,
|
||||
modCache: ThreadModerationCache,
|
||||
showHiddenReplies: boolean,
|
||||
threadgateRecordHiddenReplies: Set<string>,
|
||||
): ThreadSkeletonParts | null {
|
||||
if (!node) return null
|
||||
|
||||
return {
|
||||
parents: Array.from(flattenThreadParents(node, !!currentDid)),
|
||||
highlightedPost: node,
|
||||
replies: Array.from(
|
||||
flattenThreadReplies(
|
||||
node,
|
||||
currentDid,
|
||||
treeView,
|
||||
modCache,
|
||||
showHiddenReplies,
|
||||
threadgateRecordHiddenReplies,
|
||||
),
|
||||
),
|
||||
}
|
||||
}
|
||||
|
||||
function* flattenThreadParents(
|
||||
node: ThreadNode,
|
||||
hasSession: boolean,
|
||||
): Generator<YieldedItem, void> {
|
||||
if (node.type === 'post') {
|
||||
if (node.parent) {
|
||||
yield* flattenThreadParents(node.parent, hasSession)
|
||||
}
|
||||
if (!node.ctx.isHighlightedPost) {
|
||||
yield node
|
||||
}
|
||||
} else if (node.type === 'not-found') {
|
||||
yield node
|
||||
} else if (node.type === 'blocked') {
|
||||
yield node
|
||||
}
|
||||
}
|
||||
|
||||
// The enum is ordered to make them easy to merge
|
||||
enum HiddenReplyType {
|
||||
None = 0,
|
||||
Muted = 1,
|
||||
Hidden = 2,
|
||||
}
|
||||
|
||||
function* flattenThreadReplies(
|
||||
node: ThreadNode,
|
||||
currentDid: string | undefined,
|
||||
treeView: boolean,
|
||||
modCache: ThreadModerationCache,
|
||||
showHiddenReplies: boolean,
|
||||
threadgateRecordHiddenReplies: Set<string>,
|
||||
): Generator<YieldedItem, HiddenReplyType> {
|
||||
if (node.type === 'post') {
|
||||
// dont show pwi-opted-out posts to logged out users
|
||||
if (!currentDid && hasPwiOptOut(node)) {
|
||||
return HiddenReplyType.None
|
||||
}
|
||||
|
||||
// handle blurred items
|
||||
if (node.ctx.depth > 0) {
|
||||
const modui = modCache.get(node)?.ui('contentList')
|
||||
if (modui?.blur || modui?.filter) {
|
||||
if (!showHiddenReplies || node.ctx.depth > 1) {
|
||||
if ((modui.blurs[0] || modui.filters[0]).type === 'muted') {
|
||||
return HiddenReplyType.Muted
|
||||
}
|
||||
return HiddenReplyType.Hidden
|
||||
}
|
||||
}
|
||||
|
||||
if (!showHiddenReplies) {
|
||||
const hiddenByThreadgate = threadgateRecordHiddenReplies.has(
|
||||
node.post.uri,
|
||||
)
|
||||
const authorIsViewer = node.post.author.did === currentDid
|
||||
if (hiddenByThreadgate && !authorIsViewer) {
|
||||
return HiddenReplyType.Hidden
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!node.ctx.isHighlightedPost) {
|
||||
yield node
|
||||
}
|
||||
|
||||
if (node.replies?.length) {
|
||||
let hiddenReplies = HiddenReplyType.None
|
||||
for (const reply of node.replies) {
|
||||
let hiddenReply = yield* flattenThreadReplies(
|
||||
reply,
|
||||
currentDid,
|
||||
treeView,
|
||||
modCache,
|
||||
showHiddenReplies,
|
||||
threadgateRecordHiddenReplies,
|
||||
)
|
||||
if (hiddenReply > hiddenReplies) {
|
||||
hiddenReplies = hiddenReply
|
||||
}
|
||||
if (!treeView && !node.ctx.isHighlightedPost) {
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// show control to enable hidden replies
|
||||
if (node.ctx.depth === 0) {
|
||||
if (hiddenReplies === HiddenReplyType.Muted) {
|
||||
yield SHOW_MUTED_REPLIES
|
||||
} else if (hiddenReplies === HiddenReplyType.Hidden) {
|
||||
yield SHOW_HIDDEN_REPLIES
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (node.type === 'not-found') {
|
||||
yield node
|
||||
} else if (node.type === 'blocked') {
|
||||
yield node
|
||||
}
|
||||
return HiddenReplyType.None
|
||||
}
|
||||
|
||||
function hasPwiOptOut(node: ThreadPost) {
|
||||
return !!node.post.author.labels?.find(l => l.val === '!no-unauthenticated')
|
||||
}
|
||||
|
||||
function hasBranchingReplies(node?: ThreadNode) {
|
||||
if (!node) {
|
||||
return false
|
||||
}
|
||||
if (node.type !== 'post') {
|
||||
return false
|
||||
}
|
||||
if (!node.replies) {
|
||||
return false
|
||||
}
|
||||
if (node.replies.length === 1) {
|
||||
return hasBranchingReplies(node.replies[0])
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
prompt: {
|
||||
// @ts-ignore web-only
|
||||
position: isWeb ? 'fixed' : 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
})
|
||||
@@ -1,11 +1,39 @@
|
||||
import React from 'react'
|
||||
import {useCallback, useMemo, useRef, useState} from 'react'
|
||||
import {StyleSheet, useWindowDimensions, View} from 'react-native'
|
||||
import {useFocusEffect} from '@react-navigation/native'
|
||||
import {msg, Trans} from '@lingui/macro'
|
||||
import {useLingui} from '@lingui/react'
|
||||
import {AppBskyFeedDefs} from '@atproto/api'
|
||||
|
||||
import {isNative} from '#/platform/detection'
|
||||
import {cleanError} from '#/lib/strings/errors'
|
||||
import {HITSLOP_10} from '#/lib/constants'
|
||||
import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
|
||||
import {makeRecordUri} from '#/lib/strings/url-helpers'
|
||||
import {useSetMinimalShellMode} from '#/state/shell'
|
||||
import {PostThread as PostThreadComponent} from '#/view/com/post-thread/PostThread'
|
||||
import * as Layout from '#/components/Layout'
|
||||
import {useSession} from '#/state/session'
|
||||
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
|
||||
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
|
||||
import {useGetPostThreadV2, Slice} from '#/state/queries/useGetPostThreadV2'
|
||||
import * as Menu from '#/components/Menu'
|
||||
import {Button, ButtonIcon} from '#/components/Button'
|
||||
import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from '#/components/icons/SettingsSlider'
|
||||
import {Text} from '#/components/Typography'
|
||||
import {ScrollProvider} from '#/lib/ScrollContext'
|
||||
import {List, ListMethods} from '#/view/com/util/List'
|
||||
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
|
||||
import {PostThreadItem} from '#/view/com/post-thread/PostThreadItem'
|
||||
import {PostThreadComposePrompt} from '#/view/com/post-thread/PostThreadComposePrompt'
|
||||
import {usePreferencesQuery} from '#/state/queries/preferences'
|
||||
import {useComposerControls} from '#/state/shell'
|
||||
|
||||
const MAINTAIN_VISIBLE_CONTENT_POSITION = {
|
||||
// We don't insert any elements before the root row while loading.
|
||||
// So the row we want to use as the scroll anchor is the first row.
|
||||
minIndexForVisible: 1,
|
||||
}
|
||||
|
||||
type Props = NativeStackScreenProps<CommonNavigatorParams, 'PostThread'>
|
||||
export function PostThreadScreen({route}: Props) {
|
||||
@@ -15,14 +43,419 @@ export function PostThreadScreen({route}: Props) {
|
||||
const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
|
||||
|
||||
useFocusEffect(
|
||||
React.useCallback(() => {
|
||||
useCallback(() => {
|
||||
setMinimalShellMode(false)
|
||||
}, [setMinimalShellMode]),
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout.Screen testID="postThreadScreen">
|
||||
<PostThreadComponent uri={uri} />
|
||||
{/* <PostThreadComponent uri={uri} /> */}
|
||||
<Inner uri={uri} />
|
||||
</Layout.Screen>
|
||||
)
|
||||
}
|
||||
|
||||
function useThreadPreferences() {
|
||||
const {data: preferences} = usePreferencesQuery()
|
||||
const nextThreadPreferences = preferences?.threadViewPrefs
|
||||
|
||||
/*
|
||||
* Create local state representations of server state
|
||||
*/
|
||||
const [sortReplies, setSortReplies] = useState(
|
||||
nextThreadPreferences?.sort ?? 'hotness',
|
||||
)
|
||||
const [prioritizeFollowedUsers, setPrioritizeFollowedUsers] = useState(
|
||||
!!nextThreadPreferences?.prioritizeFollowedUsers,
|
||||
)
|
||||
const [treeViewEnabled, setTreeViewEnabled] = useState(
|
||||
!!nextThreadPreferences?.lab_treeViewEnabled,
|
||||
)
|
||||
|
||||
/**
|
||||
* Cache existing and if we get a server update, reset local state
|
||||
*/
|
||||
const [prevServerPrefs, setPrevServerPrefs] = useState(nextThreadPreferences)
|
||||
if (nextThreadPreferences && prevServerPrefs !== nextThreadPreferences) {
|
||||
setPrevServerPrefs(nextThreadPreferences)
|
||||
|
||||
/*
|
||||
* Reset
|
||||
*/
|
||||
setSortReplies(nextThreadPreferences.sort)
|
||||
setPrioritizeFollowedUsers(nextThreadPreferences.prioritizeFollowedUsers)
|
||||
setTreeViewEnabled(!!nextThreadPreferences.lab_treeViewEnabled)
|
||||
}
|
||||
|
||||
const isLoaded = !!prevServerPrefs
|
||||
|
||||
return useMemo(() => ({
|
||||
isLoaded,
|
||||
sortReplies,
|
||||
setSortReplies,
|
||||
prioritizeFollowedUsers,
|
||||
setPrioritizeFollowedUsers,
|
||||
treeViewEnabled,
|
||||
setTreeViewEnabled,
|
||||
}), [
|
||||
isLoaded,
|
||||
sortReplies,
|
||||
setSortReplies,
|
||||
prioritizeFollowedUsers,
|
||||
setPrioritizeFollowedUsers,
|
||||
treeViewEnabled,
|
||||
setTreeViewEnabled,
|
||||
])
|
||||
}
|
||||
|
||||
export function Inner({uri}: {uri: string | undefined}) {
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const {gtPhone} = useBreakpoints()
|
||||
// const {hasSession, currentAccount} = useSession()
|
||||
const initialNumToRender = useInitialNumToRender()
|
||||
const {height: windowHeight} = useWindowDimensions()
|
||||
|
||||
const {
|
||||
isLoaded: isThreadPreferencesLoaded,
|
||||
sortReplies,
|
||||
setSortReplies,
|
||||
prioritizeFollowedUsers,
|
||||
treeViewEnabled,
|
||||
setTreeViewEnabled,
|
||||
} = useThreadPreferences()
|
||||
|
||||
const {isFetching, isPlaceholderData, error, data, refetch} = useGetPostThreadV2({
|
||||
uri,
|
||||
enabled: isThreadPreferencesLoaded,
|
||||
options: {
|
||||
sort: sortReplies,
|
||||
view: treeViewEnabled ? 'tree' : 'linear',
|
||||
prioritizeFollows: prioritizeFollowedUsers,
|
||||
},
|
||||
})
|
||||
|
||||
const ref = useRef<ListMethods>(null)
|
||||
const layoutHeaderRef = useRef<View | null>(null)
|
||||
const anchorPostRef = useRef<View | null>(null)
|
||||
const anchorPost = data?.slices.find(slice => slice.type === 'threadSlice' && slice.ui.isAnchor)
|
||||
// TODO
|
||||
const [justPostedUris, setJustPostedUris] = useState(
|
||||
() => new Set<string>(),
|
||||
)
|
||||
|
||||
const onPostReply = useCallback(
|
||||
(postUri: string | undefined) => {
|
||||
refetch()
|
||||
if (postUri) {
|
||||
setJustPostedUris(set => {
|
||||
const nextSet = new Set(set)
|
||||
nextSet.add(postUri)
|
||||
return nextSet
|
||||
})
|
||||
}
|
||||
},
|
||||
[refetch],
|
||||
)
|
||||
|
||||
const {openComposer} = useComposerControls()
|
||||
const onReplyToAnchor = () => {
|
||||
if (anchorPost?.type !== 'threadSlice') {
|
||||
return
|
||||
}
|
||||
const post = anchorPost.slice.post
|
||||
openComposer({
|
||||
replyTo: {
|
||||
uri: anchorPost.slice.uri,
|
||||
cid: post.cid,
|
||||
text: post.record.text,
|
||||
author: post.author,
|
||||
embed: post.embed,
|
||||
moderation: anchorPost.moderation,
|
||||
},
|
||||
onPost: onPostReply,
|
||||
})
|
||||
}
|
||||
|
||||
const renderItem = ({item, index}: {item: Slice; index: number}) => {
|
||||
if (item.type === 'threadSlice') {
|
||||
return (
|
||||
<View ref={item.ui.isAnchor ? anchorPostRef : undefined}>
|
||||
<PostThreadItem
|
||||
post={item.slice.post}
|
||||
record={item.slice.post.record}
|
||||
threadgateRecord={data?.threadgate?.record ?? undefined}
|
||||
moderation={item.moderation}
|
||||
treeView={treeViewEnabled}
|
||||
depth={item.slice.depth}
|
||||
// TODO
|
||||
// prevPost={prev}
|
||||
// nextPost={next}
|
||||
isHighlightedPost={item.ui.isAnchor}
|
||||
hasMore={item.slice.hasUnhydratedReplies}
|
||||
showChildReplyLine={item.ui.showChildReplyLine}
|
||||
showParentReplyLine={item.ui.showParentReplyLine}
|
||||
hasPrecedingItem={
|
||||
item.ui.showParentReplyLine || !!item.slice.hasUnhydratedParents
|
||||
} // !!hasUnrevealedParents // TODO
|
||||
// overrideBlur={
|
||||
// hiddenRepliesState ===
|
||||
// HiddenRepliesState.ShowAndOverridePostHider &&
|
||||
// item.ctx.depth > 0
|
||||
// }
|
||||
onPostReply={onPostReply}
|
||||
hideTopBorder={index === 0} // && !item.slice.isParentLoading} // TODO
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
} else if (item.type === 'replyComposer') {
|
||||
return (
|
||||
<View>
|
||||
{gtPhone && <PostThreadComposePrompt onPressCompose={onReplyToAnchor} />}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/*
|
||||
* This is only used on the web to keep the post in view when its parents
|
||||
* load. On native, we rely on `maintainVisibleContentPosition` instead.
|
||||
*
|
||||
* This runs synchronously before layout, meaning by the time the page
|
||||
* paints, we've already measured and adjusted the scroll position of the
|
||||
* list.
|
||||
*/
|
||||
const didAdjustScrollWeb = useRef<boolean>(false)
|
||||
const onContentSizeChangeWeb = () => {
|
||||
// only run once
|
||||
if (didAdjustScrollWeb.current) return
|
||||
if (!isPlaceholderData) {
|
||||
// Measure synchronously to avoid a layout jump.
|
||||
const anchorPost = anchorPostRef.current as any as Element
|
||||
const headerNode = layoutHeaderRef.current as any as Element
|
||||
if (anchorPost && headerNode) {
|
||||
// get new scroll position
|
||||
let pageY = anchorPost.getBoundingClientRect().top
|
||||
// subtract header height
|
||||
pageY -= headerNode.getBoundingClientRect().height
|
||||
// don't scroll past 0
|
||||
pageY = Math.max(0, pageY)
|
||||
ref.current?.scrollToOffset({
|
||||
animated: false,
|
||||
offset: pageY,
|
||||
})
|
||||
didAdjustScrollWeb.current = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Layout.Header.Outer headerRef={layoutHeaderRef}>
|
||||
<Layout.Header.BackButton />
|
||||
<Layout.Header.Content>
|
||||
<Layout.Header.TitleText>
|
||||
<Trans context="description">Post</Trans>
|
||||
</Layout.Header.TitleText>
|
||||
</Layout.Header.Content>
|
||||
<Layout.Header.Slot>
|
||||
<ThreadMenu
|
||||
sortReplies={sortReplies}
|
||||
treeViewEnabled={treeViewEnabled}
|
||||
setSortReplies={setSortReplies}
|
||||
setTreeViewEnabled={setTreeViewEnabled}
|
||||
/>
|
||||
</Layout.Header.Slot>
|
||||
</Layout.Header.Outer>
|
||||
|
||||
{error ? (
|
||||
<PostThreadError error={error} />
|
||||
) : (
|
||||
<ScrollProvider
|
||||
// onMomentumEnd={onMomentumEnd}
|
||||
>
|
||||
<List
|
||||
ref={ref}
|
||||
data={data?.slices ?? []}
|
||||
renderItem={renderItem}
|
||||
keyExtractor={keyExtractor}
|
||||
onContentSizeChange={isNative ? undefined : onContentSizeChangeWeb}
|
||||
// onStartReached={onStartReached}
|
||||
// onEndReached={onEndReached}
|
||||
onEndReachedThreshold={2}
|
||||
// onScrollToTop={onScrollToTop}
|
||||
/**
|
||||
* @see https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition
|
||||
*/
|
||||
maintainVisibleContentPosition={
|
||||
isNative // && hasParents // TODO not sure we need this
|
||||
? MAINTAIN_VISIBLE_CONTENT_POSITION
|
||||
: undefined
|
||||
}
|
||||
desktopFixedHeight
|
||||
// removeClippedSubviews={isAndroid ? false : undefined}
|
||||
ListFooterComponent={
|
||||
<ListFooter
|
||||
/*
|
||||
* Using `isFetching` over `isFetchingNextPage` is done on
|
||||
* purpose here so we get the loader on initial render
|
||||
*/
|
||||
isFetchingNextPage={isFetching}
|
||||
error={cleanError(error)}
|
||||
onRetry={refetch}
|
||||
/*
|
||||
* 200 is based on the minimum height of a post. This is enough
|
||||
* extra height for the `maintainVisPos` to work without
|
||||
* causing weird jumps on web or glitches on native
|
||||
*/
|
||||
height={windowHeight - 200}
|
||||
/>
|
||||
}
|
||||
initialNumToRender={initialNumToRender}
|
||||
windowSize={11}
|
||||
sideBorders={false}
|
||||
/>
|
||||
</ScrollProvider>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function PostThreadError({error}: {error: Error}) {
|
||||
const {_} = useLingui()
|
||||
|
||||
// TODO use new cleanError hook
|
||||
const {title, message} = useMemo(() => {
|
||||
let title = _(msg`An error occurred`)
|
||||
let message = cleanError(error)
|
||||
|
||||
if (error.message.startsWith('Post not found')) {
|
||||
title = _(msg`Post not found`)
|
||||
message = _(msg`The post may have been deleted.`)
|
||||
}
|
||||
return {title, message}
|
||||
}, [_, error])
|
||||
|
||||
return <View />
|
||||
}
|
||||
|
||||
function ThreadMenu({
|
||||
sortReplies,
|
||||
treeViewEnabled,
|
||||
setSortReplies,
|
||||
setTreeViewEnabled,
|
||||
}: {
|
||||
sortReplies: string
|
||||
treeViewEnabled: boolean
|
||||
setSortReplies: (newValue: string) => void
|
||||
setTreeViewEnabled: (newValue: boolean) => void
|
||||
}): React.ReactNode {
|
||||
const {_} = useLingui()
|
||||
return (
|
||||
<Menu.Root>
|
||||
<Menu.Trigger label={_(msg`Thread options`)}>
|
||||
{({props}) => (
|
||||
<Button
|
||||
label={_(msg`Thread options`)}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
shape="round"
|
||||
hitSlop={HITSLOP_10}
|
||||
{...props}>
|
||||
<ButtonIcon icon={SettingsSlider} size="md" />
|
||||
</Button>
|
||||
)}
|
||||
</Menu.Trigger>
|
||||
<Menu.Outer>
|
||||
<Menu.LabelText>
|
||||
<Trans>Show replies as</Trans>
|
||||
</Menu.LabelText>
|
||||
<Menu.Group>
|
||||
<Menu.Item
|
||||
label={_(msg`Linear`)}
|
||||
onPress={() => {
|
||||
setTreeViewEnabled(false)
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Linear</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={!treeViewEnabled} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Threaded`)}
|
||||
onPress={() => {
|
||||
setTreeViewEnabled(true)
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Threaded</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={treeViewEnabled} />
|
||||
</Menu.Item>
|
||||
</Menu.Group>
|
||||
<Menu.Divider />
|
||||
<Menu.LabelText>
|
||||
<Trans>Reply sorting</Trans>
|
||||
</Menu.LabelText>
|
||||
<Menu.Group>
|
||||
<Menu.Item
|
||||
label={_(msg`Hot replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('hotness')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Hot replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'hotness'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Oldest replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('oldest')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Oldest replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'oldest'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Newest replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('newest')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Newest replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'newest'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Most-liked replies first`)}
|
||||
onPress={() => {
|
||||
setSortReplies('most-likes')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Most-liked replies first</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'most-likes'} />
|
||||
</Menu.Item>
|
||||
<Menu.Item
|
||||
label={_(msg`Random (aka "Poster's Roulette")`)}
|
||||
onPress={() => {
|
||||
setSortReplies('random')
|
||||
}}>
|
||||
<Menu.ItemText>
|
||||
<Trans>Random (aka "Poster's Roulette")</Trans>
|
||||
</Menu.ItemText>
|
||||
<Menu.ItemRadio selected={sortReplies === 'random'} />
|
||||
</Menu.Item>
|
||||
</Menu.Group>
|
||||
</Menu.Outer>
|
||||
</Menu.Root>
|
||||
)
|
||||
}
|
||||
|
||||
const keyExtractor = (item: Slice) => {
|
||||
return item.key
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user