feat: add react native comments#392
Draft
nossila wants to merge 6 commits into
Draft
Conversation
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
**Description** **Acceptance Criteria** **Basic Comment Creation** Since we wont have flat pages in React native and the Content feeds is not ready yet. We need a place to "host" comments in order to test them. So we will create a comment route on the RN application to do so. **Business Rules** - Create a "Comment" route where we will be able to test the comment component and its functionalities - Recreate the comment component for React Native - Users should be able to create a comment via an input box. **Comment Component Behavior** - Given a user clicks on the input box, the mobile keyboard should slide up in order for the user to type in the content. - The input box will slide up with the keyboard, and it should remain visible. - Given a user presses on the Enter Key in the keyboard, it should create a line break in the content. - Given a user has finished creating a comment, when they press the "send button", then the comment should be created. - Given the comment has been created, then the new comment should appear at the top of the comment list. **Reaction Component Behavior** - Each comment should display the user’s avatar, name, and timestamp - Users should be able to react to the comment by pression the heart icon. - Given the user presses the Reaction Icon, the count should increase by 1 - Given the same user presses the reaction icon again after having already reacted to the comment., the count should decrease by 1. **Guardrails** - Threads wont be implemented for now. - Load only the first 5 comments. Pagination will be handled later - Design Link: https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=942-18665&t=jbYKzqIHwPMDjdiS-0 **Notes** - create a temporary model and inherit the Commentable model - we can reuse the reply logic (e.g. `useCommentReply`) and the queries on the web **Approvd** [https://app.approvd.io/silverlogic/BA/stories/39781](https://app.approvd.io/silverlogic/BA/stories/39781) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> * **New Features** * Introduced a complete set of native comment components, including comment creation, display, reaction, and reply functionality. * Added customizable social input components with keyboard-aware drawers and enhanced input experiences. * Added new design system icons: Emoji, Favorite, Favorite Selected, Reply, and Send Message. * Added a timestamp component for displaying human-readable dates. * Provided context and hooks for managing social text input state. * **Enhancements** * Streamlined exports for shared and native components, making types and components more accessible. * Improved modularity and customization options for comment and input components. * **Chores** * Added `react-native-safe-area-context` as a peer dependency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
✅ RN - Edit a Comment
Key details
Description
Acceptance Criteria
Given that a user has created a comment, when they press and hold the
comment, then a drawer should slide up from the bottom displaying the
comment options menu.
Implement a backdrop when the drawer comes up.
When the user selects the Edit Comment option from the menu, then an
input box should open, pre-filled with the current comment content.
The input box should label informing the user that they are editing an
existing comment.
Given that the user is editing a comment, when they click the "X" on the
label, then the edit should be canceled, and the comment should remain
unchanged.
Given that the user has finished editing the comment, when they press
the send button, then the updated comment should be saved.
When a comment has been edited and saved, then an "Edited" label should
appear next to it, indicating that the original content has been
modified.
Design Link:
https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=7245-44177&t=pkyMShfd1d7IXixb-0
Approvd
https://app.approvd.io/silverlogic/BA/stories/39784
Demo: https://www.loom.com/share/76dd3129d79a4a0fa2b35973b38ad3cd
---------
Co-authored-by: Lúcio BJ <lb@tsl.io>
✅ RN - Replying to Comments
Key details
Description
Acceptance Criteria
User Story
As a user I want to reply to a comment, so that I can engage in
discussions and respond directly to specific comments
Business rules
Given a comment has already been created, a reply button should appear
next to the reactions button.
Given the user clicks on the reply button, the mobile keyboard should
slide up in order for the user to type in the content.
The input box will slide up with the keyboard, and it should remain
visible.
A label should be displayed communicating that you are replying to the
owner of the comment.
Given I click the X button in the label, then we should cancel the reply
creation.
Given a user has finished creating a reply, when they press the "send
button", then the reply should be created and appear at the top of the
reply list.
Each reply should display the user’s avatar, name, and timestamp
Each reply should also display the reaction button.
Given the reply has been published successfully, then expand the reply
list up to 5 most recent additional replies (6 in total = 5 most recent
+ the 1 new reply).
Design Link:
https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=7220-109867&t=jbYKzqIHwPMDjdiS-0
Approvd
https://app.approvd.io/silverlogic/BA/stories/39782
Demo: https://www.loom.com/share/5a4c3a6c021b4866a72bc137d68006fe
---------
Co-authored-by: Lúcio BJ <lb@tsl.io>
✅ RN - Nested Threads Lv1
Key details
Description
Acceptance Criteria
Given a comment has nested replies, the user should see a "Show Replies
button" at the bottom of the comment.
The button should display the count of replies for that comment.
Given the user clicks on the button, the Reply List should be expanded
to show the latest 5 nested replies.
Given the user has expanded the reply list and other replies are still
in the thread, the "Show Replies" button should persist and the count of
replies should be updated.
Given all replies have been displayed, the "Show Replies" button should
no longer appear.
The reply list should be sorted from Newest to Oldest reply.
Each nested reply shifts slightly to the right to indicate its level in
the conversation.
A thin vertical line is displayed to the left of nested replies to
visually connect them with their parent comment.
The line should extend from the parent comment down through all child
replies.
Create a limit for the amount of thread levels, it should be
configurable from the Backend.
Guardrails
At this point only 1 nested level will be available.
*Nested Replies Multi Levels
Users can reply to comments or replies, creating a multi-level thread.
Each reply/comment components should have the reaction, reply, name,
avatar and timestamp information.
Each nested level gets an additional vertical line indentation.
Hide Reply interaction
Design Link:
https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=7233-167121&t=jbYKzqIHwPMDjdiS-0
Approvd
https://app.approvd.io/silverlogic/BA/stories/39783
Demo:
https://www.loom.com/share/ee85c099a92f48478e7e21fa119093db
---------
Co-authored-by: Lúcio BJ <lb@tsl.io>
Integration fixes after rebasing onto origin/master, where shared APIs the epic depends on had changed: - PostReactionButton: import ReactionButton from __shared__/common (#246 moved it out of __shared__/web; master still imported from web) - design-system icons: drop duplicate SendMessageIcon export (added by both master and the epic during the merge) - native CommentReactionButton: adapt onPress to master's new handleReaction(e: MouseEvent) render-prop signature Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
nossila
force-pushed
the
epic/BA-2239-react-native-comments
branch
from
37b9187 to
a73e110
Compare
As a user who owns a comment or has permission to moderate, I want to be able to delete a comment in the mobile app, So that I can manage and clean up content I no longer want to be visible, just like I can on the web. Description: This feature enables users to delete their own comments (or comments they have permission to moderate) directly from the mobile app. The delete action should be accessible through an overlay drawer.We already have this functionality on web. Scenario: Display delete option for a comment in the app Given the user is viewing a comment in the mobile app, and holds press over it, the overlay drawer displays the message "Delete Comment" in red. Scenario: Show delete confirmation dialog before deleting comment Given the user taps the delete action for a comment, when the system triggers the deletion flow, then a confirmation dialog appears with the message “Are you sure you want to delete this comment? This action cannot be undone.” And the dialog includes two buttons: “Cancel” and “Delete” And the “Delete” button is styled as a destructive action in red Scenario: Cancel deletion from confirmation dialog Given the confirmation dialog is visible, when the user taps “Cancel” or closes the dialog, then the system dismisses the dialog and no changes are made Scenario: Confirm deletion from confirmation dialog Given the confirmation dialog is visible, when the user taps “Delete”, then the system deletes the comment and removes it from the thread And the comment is no longer visible in the comment list Scenario: Ensure parity with web behavior Given the delete feature works on web, when the same user attempts to delete a comment in the app, then the app provides the same functionality and confirmation flow as the web version https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=9612-33758&t=PQHECmyjd8eFKcVb-1 https://www.figma.com/design/z5ZdVlKEMmGIX4GVnjwfxA/BaseApp---NATIVE?node-id=9612-33049&t=PQHECmyjd8eFKcVb-1 Approvd https://app.approvd.io/silverlogic/BA/stories/44378
|
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
4 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.
No description provided.