Communication: Update group postings in-place
#10283
Conversation
github-actions
bot
added
the
client
WalkthroughThe pull request refines the grouping logic within the ConversationMessagesComponent by modifying how posts are grouped. The changes include updating comments for clarity, switching from a “groups” array to an “updatedGroups” array, and incorporating a time difference check (using the diff method on creationDateDayjs) for consecutive posts. The grouping process now increments the groupedPosts array efficiently by updating and cleaning up excess groups. No changes were made to exported or public declarations. Changes
Sequence Diagram(s)sequenceDiagram
participant CMP as ConversationMessagesComponent
participant SP as SortedPosts
participant UG as UpdatedGroups
participant GP as GroupedPosts
CMP->>SP: Check for available posts
alt Posts exist
CMP->>UG: Initialize grouping with the first post
loop For each post in SP
CMP->>UG: Compare time diff with previous post (using diff)
alt Time difference within threshold
CMP->>UG: Append post to current group
else
CMP->>UG: Start a new group
end
end
CMP->>GP: Update groupedPosts using updatedGroups (remove excess groups)
else No posts
CMP->>GP: Skip grouping update
end
Possibly related PRs
Suggested labels
Suggested reviewers
Tip 🌐 Web search-backed reviews and chat
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts (2)
284-287: Extract time difference threshold to a constant.The 5-minute threshold for grouping consecutive messages should be defined as a named constant for better maintainability.
+private readonly CONSECUTIVE_MESSAGE_TIME_THRESHOLD_MINUTES = 5; -if (currentPost.author?.id === currentGroup.author?.id && timeDiff < 5 && timeDiff >= 0) { +if (currentPost.author?.id === currentGroup.author?.id && timeDiff < this.CONSECUTIVE_MESSAGE_TIME_THRESHOLD_MINUTES && timeDiff >= 0) {
409-414: Add error handling for scroll operations.The scroll operation could fail if the DOM elements are not ready. Consider adding try-catch blocks for robustness.
scrollToBottomOfMessages() { // Use setTimeout to ensure the scroll happens after the new message is rendered requestAnimationFrame(() => { + try { this.content.nativeElement.scrollTop = this.content.nativeElement.scrollHeight; + } catch (error) { + console.error('Failed to scroll to bottom:', error); + } }); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`src/main/webapp/**/*.ts`: angular_style:https://angular.io/...
src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Call Build Workflow / Build .war artifact
- GitHub Check: Call Build Workflow / Build and Push Docker Image
- GitHub Check: server-tests
- GitHub Check: client-tests
- GitHub Check: Analyse
🔇 Additional comments (3)
src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts (3)
54-55: Consider the implications of ViewEncapsulation.None.Using
ViewEncapsulation.Nonemakes the component's styles global, which could lead to style leaks and unintended side effects in other components. Consider usingViewEncapsulation.Emulated(default) orViewEncapsulation.ShadowDomfor better style encapsulation.
195-200: LGTM! Proper cleanup in ngOnDestroy.The component correctly handles cleanup of subscriptions and event listeners, preventing memory leaks.
311-324: LGTM! Efficient in-place group updates.The implementation efficiently updates groups in-place, preventing unnecessary recreation of post groups and avoiding the ngOnDestroy trigger issue mentioned in PR #10246.
...verview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
Show resolved
Hide resolved
What do you mean? Does the behaviour differ to the video I made? |
| const lastPostInGroup = currentGroup.posts[currentGroup.posts.length - 1]; | ||
| // Build updated groups for non-pinned posts. | ||
| const updatedGroups: PostGroup[] = []; | ||
| if (sortedPosts.length > 0) { |
There was a problem hiding this comment.
| if (sortedPosts.length > 0) { | |
| if (sortedPosts.length) { |
| let timeDiff = Number.MAX_SAFE_INTEGER; | ||
| if (currentDate && lastDate) { | ||
| timeDiff = currentDate.diff(lastDate, 'minute'); | ||
| } |
There was a problem hiding this comment.
| let timeDiff = Number.MAX_SAFE_INTEGER; | |
| if (currentDate && lastDate) { | |
| timeDiff = currentDate.diff(lastDate, 'minute'); | |
| } | |
| const timeDiff = currentDate && lastDate ? currentDate.diff(lastDate, 'minute') : Number.MAX_SAFE_INTEGER; |
|
|
||
| const currentDate = (currentPost as any).creationDateDayjs; | ||
| const lastDate = (lastPostInGroup as any).creationDateDayjs; | ||
| if (pinnedPosts.length > 0) { |
There was a problem hiding this comment.
| if (pinnedPosts.length > 0) { | |
| if (pinnedPosts.length) { |
| const groupsEqual = (groupA: PostGroup, groupB: PostGroup): boolean => { | ||
| if (!groupA.author && !groupB.author) return true; | ||
| if (!groupA.author || !groupB.author) return false; | ||
| return groupA.author.id === groupB.author.id; | ||
| }; |
There was a problem hiding this comment.
Could you transform it into a function and simplify it? Please rename it something the function is actually doing.
function isAuthorEqual(groupA: PostGroup, groupB: PostGroup): boolean {
// Both groups are equal if neither has an author; otherwise, they are not
if (!groupA.author || !groupB.author) {
return !groupA.author && !groupB.author;
}
return groupA.author.id === groupB.author.id;
}
| for (let i = 0; i < updatedGroups.length; i++) { | ||
| if (this.groupedPosts[i] && groupsEqual(this.groupedPosts[i], updatedGroups[i])) { | ||
| this.groupedPosts[i].posts = updatedGroups[i].posts; | ||
| } else { | ||
| groups.push(currentGroup); | ||
| currentGroup = { | ||
| author: currentPost.author, | ||
| posts: [{ ...currentPost, isConsecutive: false }], | ||
| }; | ||
| if (this.groupedPosts[i]) { | ||
| this.groupedPosts[i] = updatedGroups[i]; | ||
| } else { | ||
| this.groupedPosts.push(updatedGroups[i]); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| groups.push(currentGroup); | ||
|
|
||
| // Only add pinned group if pinned posts exist | ||
| if (pinnedPosts.length > 0) { | ||
| groups.unshift({ author: undefined, posts: pinnedPosts }); | ||
| while (this.groupedPosts.length > updatedGroups.length) { | ||
| this.groupedPosts.pop(); | ||
| } |
There was a problem hiding this comment.
It's super hard to grasp what's happening in here.
Can you please improve this? Please use forEach instead of for(...) since there is no need for the for loop. Also, refactor it to avoid the nested if and else structure and avoid using the while loop. Feel free to ping me on Slack, and I'll discuss some ideas for improvement with you.
|
No they disappear together in test server 6.在 07.02.2025，13:01，Julian Gassner ***@***.***> 写道：
The 2 messages are deleted together but not as we want.
What do you mean? Does the behaviour differ to the video I made?
—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>
|
Checklist
General
Client
authoritiesto all new routes and checked the course groups for displaying navigation elements (links, buttons).Changes affecting Programming Exercises
Motivation and Context
Currently when a new post is published all post groupings get updated by completely recreating them. However this triggers the ngOnDestroy hook in the postings which results in the deletion mechanism to not work as expected (Fixes issue #10246).
Description
With this PR we now update groups in place (deletions, additions, new groups) which results in the ngOnDestroy hook not being called.
Steps for Testing
Prerequisites:
Testserver States
You can manage test servers using Helios. Check environment statuses in the environment list. To deploy to a test server, go to the CI/CD page, find your PR or branch, and trigger the deployment.
Review Progress
Performance Review
Code Review
Manual Tests
Exam Mode Test
Performance Tests
Test Coverage
Screenshots
Summary by CodeRabbit