feat: Add functionalities to improve Tutorial page. Replied messages state, Comment numbers, Proper User Details.

[muntaxir4]

Includes various enhancements and bug fixes across multiple components in the TutorialPage. The most important changes include adding user-specific data handling, improving comment and reply functionality, and adding a snackbar for user feedback. Also, improved the Date of posting to include hh:mm::ss.

Description

Enhancements to user-specific data handling:

• UserDetails.jsx: The previous logic uses getuserProfileData which updates user state for every fetch, hence only a single user can be stored in profile store. Updated the component to check for edge cases and properly show user details.
• Comment.jsx: Added userHandle to fetch the current user's handle and updated handleSubmit to use userHandle instead of a hardcoded user ID.
• TutorialPage/index.jsx: Added userHandle to fetch the current user's handle and updated handleAddComment to use userHandle instead of a hardcoded codelabzuser.

Improvements to comment and reply functionality:

• Comment.jsx: Updated handleSubmit to handle replies and dispatch an action to update the replies array.
• tutorialPageActions.js: Added logic to fetch the number of comments and replies and included this data in the tutorial and comment objects.

User feedback enhancements:

• InfoSnackBar.jsx: Added a new reusable InfoSnackBar component to display feedback messages to the user.
• PostDetails.jsx: Integrated InfoSnackBar to show a "Copied to clipboard" message when the share button is clicked and also copy the current URL.

Additional changes:

• Textbox.jsx: Replaced AccountCircle with Avatar and included the user's profile picture or initial to maintain uniformity of user picture shown at different places.
• actionTypes.js: Added a new action type ADD_REPLIES_SUCCESS for handling replies.

Related Issue

Fixes #207
Fixes #218
Fixes #219

Motivation and Context

There were several issues with viewing an existing Tutorial, causing huge degradation in user experience.

How Has This Been Tested?

Tested many edge cases through Browser and logging as a creator or viewer user.

Videos:

• Previous Tutorial page with comment, replies and user issues:

Screencast.from.2025-02-22.05-32-51.mp4

• Fixed all the bugs and improved the page by 40%:

Screencast.from.2025-02-22.05-27-26.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.