Feature/Real time updates and feedback alert message after adding new comments

[Ashish-Ranjan007]

Description

This pull request aims to enhance the commenting feature by adding real time comment updates and feedback. When user posts a comment they can see the changes in real time without refreshing the page. And, they will be provided with a alert message indicating the success or failure of the action.

1. CommentBox component used to pass only comment_ids into the Comment components where the comments were being fetched. Now, CommentBox fetches the comments and passes it into Comment.jsx which only renders them further.
2. state.tutorialPage.comment.data used to hold all the comments and replies in the same state and state.tutorialPage.comment.replies contained only the id of replies which where being fetched inside Comment component. Now, comment are put into state.tutorialPage.comment.data and replies are put into state.tutorialPage.comment.replies.
3. Both comments on a post and reply to a comment were being added by using the same addComment function in tutorialPageActions.js. Now, comments are being added using addComment and replies are added using addReply.
4. Three more action types are added into actionTypes.js for tracking the start, success and failure of the addReply action.
5. Now, in the case where addReply successfully adds a reply to a comment there is a handler in commentReducer.js which first gets the comment from state.tutorialPage.comment.replies and adds a new reply into that array.
6. Finally, created a new component called AddCommentFeedback which notifies the user of the success and failure of the action.

Related Issue

Fixes/Implementation #996

Motivation and Context

Commenting feature is now enhanced greatly as the inconvenience of refreshing the page is eliminated and user is notified of the result of adding new comments.

How Has This Been Tested?

The changes were test locally on Brave browser.

Development Environment

• Windows 11 Home
• Node v20.10.0
• Brave Browser

Screenshots or GIF (In case of UI changes):

issue_996_pr_demo.mp4

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.