diff --git a/src/screens/PostThread/components/ReadMore.tsx b/src/screens/PostThread/components/ReadMore.tsx new file mode 100644 index 0000000000..4df5e45a7a --- /dev/null +++ b/src/screens/PostThread/components/ReadMore.tsx @@ -0,0 +1,96 @@ +import {View} from 'react-native' +import {msg, Trans, Plural} from '@lingui/macro' +import {useLingui} from '@lingui/react' + +import {makeProfileLink} from '#/lib/routes/links' +import {type Slice, PostThreadParams} from '#/state/queries/usePostThread' +import {atoms as a, useTheme} from '#/alf' +import {CirclePlus_Stroke2_Corner0_Rounded as CirclePlus} from '#/components/icons/CirclePlus' +import {Link} from '#/components/Link' +import {Text} from '#/components/Typography' + +export function ReadMore({ + item, + view, +}: { + item: Extract + view: PostThreadParams['view'] +}) { + const t = useTheme() + const {_} = useLingui() + const isTreeView = view === 'tree' + const indentCount = item.indent - 1 + + const treeIndents = isTreeView ? ( + Array.from(Array(indentCount)).map((_, n: number) => ( + + )) + ) : indentCount > 0 ? ( + + ) : null + + return ( + + {treeIndents} + + + + + {({hovered, pressed}) => { + return ( + <> + + + + Read {item.replyCount} more{' '} + + + + + ) + }} + + + ) +} diff --git a/src/state/queries/usePostThread/traversal.ts b/src/state/queries/usePostThread/traversal.ts index 0eb9089bb2..e3a7f0fa27 100644 --- a/src/state/queries/usePostThread/traversal.ts +++ b/src/state/queries/usePostThread/traversal.ts @@ -56,8 +56,7 @@ export function flatten( i + 1 + (pi - parents.length), 0, views.readMore({ - item, - parent: parent, + parent, }), ) parents.pop() @@ -94,8 +93,7 @@ export function flatten( i + 2 + (pi - parents.length), 0, views.readMore({ - item, - parent: parent, + parent, }), ) parents.pop() @@ -116,6 +114,8 @@ export function flatten( } } + console.log(flattened) + /* * Insert hidden items and buttons to show them */ diff --git a/src/state/queries/usePostThread/views.ts b/src/state/queries/usePostThread/views.ts index fcfaf4a643..d4e31c4028 100644 --- a/src/state/queries/usePostThread/views.ts +++ b/src/state/queries/usePostThread/views.ts @@ -101,16 +101,14 @@ export function threadPost({ } export function readMore({ - item, parent, }: { - item: Extract parent: Extract }) { return { type: 'readMore' as const, key: `readMore:${parent.uri}`, - indent: parent.depth + (item.depth < parent.depth ? -1 : 0), + indent: parent.depth, replyCount: parent.value.moreReplies, nextAnchor: parent, nextAnchorUri: new AtUri(parent.uri), diff --git a/src/view/screens/PostThread.tsx b/src/view/screens/PostThread.tsx index f3dccfbd03..6a5f2a0c76 100644 --- a/src/view/screens/PostThread.tsx +++ b/src/view/screens/PostThread.tsx @@ -39,6 +39,7 @@ import {Link} from '#/components/Link' import {ListFooter} from '#/components/Lists' import * as Menu from '#/components/Menu' import {Text} from '#/components/Typography' +import {ReadMore} from '#/screens/PostThread/components/ReadMore' type Props = NativeStackScreenProps export function PostThreadScreen({route}: Props) { @@ -499,96 +500,3 @@ function ThreadMenu({ const keyExtractor = (item: Slice) => { return item.key } - -function ReadMore({ - item, - view, -}: { - item: Extract - view: PostThreadParams['view'] -}) { - const t = useTheme() - const {_} = useLingui() - const isTreeView = view === 'tree' - const indentCount = item.indent - 1 - - const treeIndents = isTreeView ? ( - Array.from(Array(indentCount)).map((_, n: number) => ( - - )) - ) : indentCount > 0 ? ( - - ) : null - - return ( - - {treeIndents} - - - - - {({hovered, pressed}) => { - return ( - <> - - - - Read {item.replyCount} more{' '} - - - - - ) - }} - - - ) -}