forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Move visual display logic out of PostThread generators (#2862)
* Split skeleton gen into replies and parents
Co-authored-by: Hailey <me@haileyok.com>
* Move REPLY_PROMPT out of the generator
* Move the rest of visual logic out of gen
---------
Co-authored-by: Hailey <me@haileyok.com>
+55
-28
+55
-28
src/view/com/post-thread/PostThread.tsx
+55
-28
src/view/com/post-thread/PostThread.tsx
···
55
55
const LOAD_MORE = {_reactKey: '__load_more__'}
56
56
const BOTTOM_COMPONENT = {_reactKey: '__bottom_component__'}
57
57
58
-
type YieldedItem = ThreadPost | typeof TOP_COMPONENT | typeof REPLY_PROMPT
58
+
type YieldedItem = ThreadPost | ThreadBlocked | ThreadNotFound
59
+
type RowItem =
60
+
| YieldedItem
61
+
// TODO: TS doesn't actually enforce it's one of these, it only enforces matching shape.
62
+
| typeof TOP_COMPONENT
63
+
| typeof REPLY_PROMPT
64
+
| typeof CHILD_SPINNER
65
+
| typeof LOAD_MORE
66
+
| typeof BOTTOM_COMPONENT
59
67
60
68
export function PostThread({
61
69
uri,
···
160
168
161
169
// construct content
162
170
const posts = React.useMemo(() => {
163
-
let arr = Array.from(
164
-
flattenThreadSkeleton(
165
-
sortThread(thread, threadViewPrefs),
166
-
hasSession,
167
-
treeView,
168
-
),
169
-
)
171
+
const root = sortThread(thread, threadViewPrefs)
172
+
let arr: RowItem[] = []
173
+
if (root.type === 'post') {
174
+
if (!root.ctx.isParentLoading) {
175
+
arr.push(TOP_COMPONENT)
176
+
for (const parent of flattenThreadParents(root, hasSession)) {
177
+
arr.push(parent)
178
+
}
179
+
}
180
+
arr.push(root)
181
+
if (!root.post.viewer?.replyDisabled) {
182
+
arr.push(REPLY_PROMPT)
183
+
}
184
+
if (root.ctx.isChildLoading) {
185
+
arr.push(CHILD_SPINNER)
186
+
} else {
187
+
for (const reply of flattenThreadReplies(root, hasSession, treeView)) {
188
+
arr.push(reply)
189
+
}
190
+
arr.push(BOTTOM_COMPONENT)
191
+
}
192
+
}
170
193
if (arr.length > maxVisible) {
171
194
arr = arr.slice(0, maxVisible).concat([LOAD_MORE])
172
-
}
173
-
if (arr.indexOf(CHILD_SPINNER) === -1) {
174
-
arr.push(BOTTOM_COMPONENT)
175
195
}
176
196
return arr
177
197
}, [thread, treeView, maxVisible, threadViewPrefs, hasSession])
···
239
259
}, [setIsPTRing, onRefresh])
240
260
241
261
const renderItem = React.useCallback(
242
-
({item, index}: {item: YieldedItem; index: number}) => {
262
+
({item, index}: {item: RowItem; index: number}) => {
243
263
if (item === TOP_COMPONENT) {
244
264
return isTabletOrMobile ? (
245
265
<ViewHeader
···
489
509
return !!v && typeof v === 'object' && 'type' in v && v.type === 'blocked'
490
510
}
491
511
492
-
function* flattenThreadSkeleton(
512
+
function* flattenThreadParents(
513
+
node: ThreadNode,
514
+
hasSession: boolean,
515
+
): Generator<YieldedItem, void> {
516
+
if (node.type === 'post') {
517
+
if (node.parent) {
518
+
yield* flattenThreadParents(node.parent, hasSession)
519
+
}
520
+
if (!node.ctx.isHighlightedPost) {
521
+
yield node
522
+
}
523
+
} else if (node.type === 'not-found') {
524
+
yield node
525
+
} else if (node.type === 'blocked') {
526
+
yield node
527
+
}
528
+
}
529
+
530
+
function* flattenThreadReplies(
493
531
node: ThreadNode,
494
532
hasSession: boolean,
495
533
treeView: boolean,
496
-
isTraversingReplies: boolean = false,
497
534
): Generator<YieldedItem, void> {
498
535
if (node.type === 'post') {
499
-
if (!node.ctx.isParentLoading) {
500
-
if (node.parent) {
501
-
yield* flattenThreadSkeleton(node.parent, hasSession, treeView, false)
502
-
} else if (!isTraversingReplies) {
503
-
yield TOP_COMPONENT
504
-
}
505
-
}
506
-
if (!hasSession && node.ctx.depth > 0 && hasPwiOptOut(node)) {
536
+
if (!hasSession && hasPwiOptOut(node)) {
507
537
return
508
538
}
509
-
yield node
510
-
if (node.ctx.isHighlightedPost && !node.post.viewer?.replyDisabled) {
511
-
yield REPLY_PROMPT
539
+
if (!node.ctx.isHighlightedPost) {
540
+
yield node
512
541
}
513
542
if (node.replies?.length) {
514
543
for (const reply of node.replies) {
515
-
yield* flattenThreadSkeleton(reply, hasSession, treeView, true)
544
+
yield* flattenThreadReplies(reply, hasSession, treeView)
516
545
if (!treeView && !node.ctx.isHighlightedPost) {
517
546
break
518
547
}
519
548
}
520
-
} else if (node.ctx.isChildLoading) {
521
-
yield CHILD_SPINNER
522
549
}
523
550
} else if (node.type === 'not-found') {
524
551
yield node