fix(comment): keep pagination state after replying to a comment#996
Merged
Conversation
Contributor
Reviewer's Guide在回复评论后，通过跟踪已加载的页数并重新获取这些页面，以及将“滚动到最新回复”的行为延迟到刷新后的 DOM 渲染完成之后，来在刷新评论列表时保留当前已经展开的评论分页页面。 在回复评论后保留分页和滚动行为的时序图sequenceDiagram
actor User
participant TkComment
participant TkComments
User->>TkComment: onReplyReply
TkComment->>TkComment: onLoad
TkComment->>TkComments: emit load
TkComments->>TkComments: refreshPreservingState
TkComments->>TkComments: getComments(url, sort)
loop for each extra loaded page
TkComments->>TkComments: getComments(url, before, sort)
end
TkComments->>TkComment: emit refreshed
TkComment->>TkComment: onRefreshed
TkComment->>TkComment: $nextTick
TkComment->>TkComment: scrollIntoView(lastElementChild)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your Experience访问你的 dashboard 以：
Getting HelpOriginal review guide in EnglishReviewer's GuidePreserve the currently expanded comment pages when refreshing the comment list after replying, by tracking how many pages are loaded and re-fetching them, and by deferring scroll-to-latest-reply behavior until after the refreshed DOM is rendered. Sequence diagram for preserving pagination and scrolling after replying to a commentsequenceDiagram
actor User
participant TkComment
participant TkComments
User->>TkComment: onReplyReply
TkComment->>TkComment: onLoad
TkComment->>TkComments: emit load
TkComments->>TkComments: refreshPreservingState
TkComments->>TkComments: getComments(url, sort)
loop for each extra loaded page
TkComments->>TkComments: getComments(url, before, sort)
end
TkComments->>TkComment: emit refreshed
TkComment->>TkComment: onRefreshed
TkComment->>TkComment: $nextTick
TkComment->>TkComment: scrollIntoView(lastElementChild)
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
Contributor
There was a problem hiding this comment.
Hey - 我发现了 1 个问题，并给出了一些整体反馈：
- 在
refreshPreservingState中，分页逻辑（推导before并调用getComments）与onExpand中的逻辑重复；可以考虑抽取一个用于加载下一页的共享辅助函数，这样两条代码路径可以保持一致，也更易于维护。 - 在
refreshPreservingState中计算before时，会反复对所有非置顶评论进行排序（.sort((a, b) => a - b)[0]）；可以通过对created值使用Math.min，或者在加载分页时跟踪最早的created值，使其更高效且更易读。 - 在
refreshPreservingState循环中，如果没有非置顶评论，before将会是undefined；在这种情况下，最好提前短路或跳过请求，而不是依赖后续逻辑来处理一个undefined的before。
给 AI 代理的提示
Please address the comments from this code review:
## Overall Comments
- 在 `refreshPreservingState` 中，分页逻辑（推导 `before` 并调用 `getComments`）与 `onExpand` 中的逻辑重复；可以考虑抽取一个用于加载下一页的共享辅助函数，这样两条代码路径可以保持一致，也更易于维护。
- 在 `refreshPreservingState` 中计算 `before` 时，会反复对所有非置顶评论进行排序（`.sort((a, b) => a - b)[0]`）；可以通过对 `created` 值使用 `Math.min`，或者在加载分页时跟踪最早的 `created` 值，使其更高效且更易读。
- 在 `refreshPreservingState` 循环中，如果没有非置顶评论，`before` 将会是 `undefined`；在这种情况下，最好提前短路或跳过请求，而不是依赖后续逻辑来处理一个 `undefined` 的 `before`。
## Individual Comments
### Comment 1
<location path="src/client/view/components/TkComments.vue" line_range="104-113" />
<code_context>
+ this.loadedPages = 1
this.initComments()
},
+ async refreshPreservingState () {
+ this.loading = true
+ const url = getUrl(this.$twikoo.path)
+ await this.getComments({ url, sort: this.currentSort })
+ for (let i = 1; i < this.loadedPages; i++) {
+ const before = this.comments
+ .filter((item) => !item.top)
+ .map((item) => item.created)
+ .sort((a, b) => a - b)[0]
+ await this.getComments({ url, before, sort: this.currentSort })
+ }
+ this.loading = false
+ this.$emit('refreshed')
+ },
setSort (sort) {
</code_context>
<issue_to_address>
**issue (bug_risk):** 考虑使用 try/finally 来保护 `loading`，以确保在出现错误时也能重置。
如果 `getComments` 抛出异常或被拒绝，`this.loading` 将不会被重置为 `false`，从而导致 UI 卡在加载状态。可以将方法主体包裹在 `try { ... } finally { this.loading = false }` 中（可选地添加 `catch` 进行错误处理），以确保该标志始终会被重置。
</issue_to_address>帮我变得更有用！请在每条评论上点 👍 或 👎，我会根据这些反馈改进以后的代码审查。
Original comment in English
Hey - I've found 1 issue, and left some high level feedback:
- In
refreshPreservingState, the pagination logic (derivingbeforeand callinggetComments) duplicates whatonExpandis doing; consider extracting a shared helper for loading the next page so the two code paths stay consistent and easier to maintain. - The computation of
beforeinrefreshPreservingStaterepeatedly sorts all non-top comments (.sort((a, b) => a - b)[0]); this could be made more efficient and readable by usingMath.minover thecreatedvalues or by tracking the oldestcreatedvalue as you load pages. - In the
refreshPreservingStateloop, if there are no non-top comments,beforewill beundefined; it would be safer to short-circuit or skip the request in that case to avoid relying on downstream handling of an undefinedbefore.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- In `refreshPreservingState`, the pagination logic (deriving `before` and calling `getComments`) duplicates what `onExpand` is doing; consider extracting a shared helper for loading the next page so the two code paths stay consistent and easier to maintain.
- The computation of `before` in `refreshPreservingState` repeatedly sorts all non-top comments (`.sort((a, b) => a - b)[0]`); this could be made more efficient and readable by using `Math.min` over the `created` values or by tracking the oldest `created` value as you load pages.
- In the `refreshPreservingState` loop, if there are no non-top comments, `before` will be `undefined`; it would be safer to short-circuit or skip the request in that case to avoid relying on downstream handling of an undefined `before`.
## Individual Comments
### Comment 1
<location path="src/client/view/components/TkComments.vue" line_range="104-113" />
<code_context>
+ this.loadedPages = 1
this.initComments()
},
+ async refreshPreservingState () {
+ this.loading = true
+ const url = getUrl(this.$twikoo.path)
+ await this.getComments({ url, sort: this.currentSort })
+ for (let i = 1; i < this.loadedPages; i++) {
+ const before = this.comments
+ .filter((item) => !item.top)
+ .map((item) => item.created)
+ .sort((a, b) => a - b)[0]
+ await this.getComments({ url, before, sort: this.currentSort })
+ }
+ this.loading = false
+ this.$emit('refreshed')
+ },
setSort (sort) {
</code_context>
<issue_to_address>
**issue (bug_risk):** Consider guarding `loading` with try/finally so it is always reset on errors.
If `getComments` throws or rejects, `this.loading` never returns to `false`, leaving the UI stuck in a loading state. Wrapping the method body in `try { ... } finally { this.loading = false }` (with an optional `catch` for error handling) ensures the flag is always reset.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
… for loading state
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
在回复其他页的评论后，评论列表会重载回第一页，丢失已展开的分页状态。
原因
TkComment的onLoad()在回复成功后 emit'load'事件，TkComments收到后调用initComments()，该方法总是加载第一页（无before参数），导致已加载的后续页被丢弃。修改内容
TkComments.vue
loadedPages跟踪已展开页数refreshPreservingState()方法，刷新时保持分页状态@load改为调用refreshPreservingState（顶层提交仍用initComments）TkComment.vue
onLoad()移除无效的scrollIntoView（刷新前 DOM 未更新）onRefreshed()，在刷新完成后滚动到最新回复"Summary by Sourcery
在回复评论并刷新线程时，保留评论列表的分页和滚动行为。
Bug 修复：
功能增强：
Original summary in English
Summary by Sourcery
Preserve comment list pagination and scroll behavior when replying to comments and refreshing the thread.
Bug Fixes:
Enhancements: