XXXX taking over for Kanishk: Phase 4 - Task Comments Frontend Implementation by kanishkagarwal6101 · Pull Request #4227 · OneCommunityGlobal/HighestGoodNetworkApp

kanishkagarwal6101 · 2025-10-17T18:34:44Z

Description

Implements Phase 4 - Task Comments Frontend feature for the Education Portal. This PR adds comprehensive comment functionality to the WriteTaskUpload component, allowing students to post comments and educators to view them, with full dark mode support and delete functionality.

Related PRS (if any):

This is a standalone frontend feature. No related backend PRs at this time.

Main changes explained:

Create file CommentBox.jsx - Comment input component with validation and character counter
Create file CommentList.jsx - Comment display component with delete functionality for own comments
Create file Toast.jsx - Toast notification system for success/error feedback
Create file useToast.js - Custom hook for managing toast notifications
Create file CommentBox.module.css - Styling for comment input with dark mode support
Create file CommentList.module.css - Styling for comment list with dark mode support
Create file Toast.module.css - Styling for toast notifications
Update file WriteTaskUpload.jsx - Integrated comment components with localStorage persistence
Update file WriteTaskUpload.module.css - Added comprehensive dark mode styling for entire component

How to test:

Check into current branch: git checkout kanishk_task_comments_frontend
Run npm install to install dependencies
Run the app locally: npm run start:local
Clear site data/cache
Navigate to: http://localhost:3000/educationportal/tasks/upload
Test comment submission:
- Type a comment in the "Comments/Queries Section"
- Click "Submit" - should show success toast
- Comment should appear in the list below
Test validation:
- Try submitting empty comment - should show inline error
- Try submitting 1000+ characters - should show character limit error
Test delete functionality:
- Click the red "×" button on your own comments
- Should show success toast and remove comment
Test dark mode:
- Toggle dark mode - all icons, text, and components should be properly styled
- Comments should persist after page refresh

Screenshots or videos of changes:

Comment input with validation and character counter
Comment list with delete buttons for own comments
Toast notifications for success/error feedback
Full dark mode support across all components
Responsive design with proper spacing

Note:

Comments are persisted using localStorage (task-specific storage)
Delete functionality only available for comments posted by current user
All components follow the existing design system and dark mode patterns
Ready for backend integration - API endpoints can be easily connected when available
No breaking changes to existing functionality

netlify · 2025-10-17T18:34:49Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`fd779ba`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/693c93f98db26900071a9e03
😎 Deploy Preview	https://deploy-preview-4227--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sonarqubecloud · 2025-10-17T18:35:38Z

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

Anusha-Gali

Hi Kanishk,

I have reviewed your PR locally - i only have 2 concerns.

Try submitting 1000+ characters - should show character limit error You mentioned character limit error - it only stops me due to character limit inline and doesn't throw any error - is it supposed to inline as if it not then i do not see any error being displayed.
Delete functionality only available for comments posted by current user - I am able to delete someone else's comment as you can see in the below video. I have left my comments as is and have also tested this using other login's and was able to delete comments left at the end of below video.
https://github.com/user-attachments/assets/1350b613-4294-451c-85bf-aecd4c7aa329

SwathiAngadi · 2025-12-09T08:00:41Z

Hi Kanishk,

Able to see the comments made in comment section as Student comments. Dark mode is working. However as mentioned in the above review, I am able to delete others comments along with mine. And I don't see any inline error for empty comment and 1000+ character submission.
Saw your code, Error msg is triggered only when Submit button is clicked , but you are disabling the button itself when there is no character hence error logic wont be triggered. Try enabling the Submit button or need to use different logic to show error message.

Screen.Recording.2025-12-08.234000.mp4

- Fix character limit error: Remove maxLength attribute and show inline error when exceeding 1000 characters - Fix empty comment error: Enable submit button to allow error display on submit - Fix delete security: Use userId comparison instead of name comparison to prevent unauthorized deletions - Add visual feedback: Character count turns red when exceeding limit - Add server-side validation: Double-check userId in handleDeleteComment for additional security

- Add PropTypes validation to all components (CommentBox, CommentList, Toast, Icon, BellIcon) - Improve error handling with development-mode logging - Fix CSS contrast issues (improved text colors for better accessibility) - Remove duplicate CSS selectors (:root and .headerDark) - Extract validation logic to reduce cognitive complexity - Improve code maintainability and reliability

… complexity - Fix contrast issue in CommentBox.module.css by using darker blue (#2563eb) for better WCAG compliance - Reduce cognitive complexity in WriteTaskUpload.jsx by extracting render helpers and event handlers - Extract functions: renderSidebar, renderHeader, renderFormSection, renderHistorySection, renderProgressPane, renderFormGrid - Extract event handlers: handleCommentChange, handleLinkUrlChange, handleShowLink - Extract data management: loadCommentsFromStorage, getDefaultComments, saveCommentsToStorage, createNewComment, formatItemTime - Extract validation: validateDeletePermission

- Change color from 'white' to '#ffffff' for better specificity - Use darker gradient colors (#2563eb, #7c3aed) for better contrast - Update dark mode gradient to even darker shades (#1e40af, #6d28d9)

…eration - Replace Date.now() + Math.random() with crypto.randomUUID() in useToast hook - Use cryptographically secure random number generator to satisfy SonarQube security hotspot - crypto.randomUUID() is available in all modern browsers and provides proper UUIDs

sonarqubecloud · 2025-12-12T22:16:31Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

kanishkagarwal6101 · 2025-12-12T22:17:27Z

Hello All, I have made the changes as requested please I re-request review from all. Your feedback is very helpful.

debadyuti23

Hi @kanishkagarwal6101 I have verified the changes, it works correctly. Couple of observations which I can see:

The submit button and pie chart got removed when I submitted a very long comment.
In dark mode, various functionalities like the progress bar, pie chart does not adjust with proper color.

Test video 1: https://drive.google.com/file/d/1SqTdH3_agCdtP8EZY3ffmN9Uyw_LyCWu/view?usp=sharing

Test video 2: https://github.com/user-attachments/assets/6299a3e1-8eba-48d5-89f3-fa0df0747e78

Since these changes are not related to PR, I have approved it. However please be mindful about these issues in future.

rohanrastogi311

Functionality works well, well done. Need to do dark mode fixes. Lot's of white boxes still showing, check image below.

ShreyaMP1999

Tested the current branch locally following the provided steps. Comment submission, validation (empty and character limit), delete functionality, dark mode styling, and comment persistence after refresh are all working as expected. No issues found.

Screen.Recording.2026-01-03.at.4.07.44.PM.mov

Anusha-Gali

Hi Kanishk,

I have re-reviewed your PR and thanks for implementing the change i had suggested. All requirements works as expected

Shravan-neelamsetty

Hi Kanishk, I tested this PR locally by navigating to /educationportal/tasks/upload and verified the comment functionality. Comment submission works correctly with proper validation for empty comments and character limits. The character counter displays accurately, and comments persist after page refresh as expected. The delete functionality correctly restricts deletion to only the current user's comments. However, I noticed dark mode issues: there are several white boxes visible in dark mode, and some elements like the progress bar and pie chart don't adjust with proper dark mode colors.

@

Vikas-8055

Hi Kanishk,

I have reviewed your PR locally and tested the comment functionality. The main features are working correctly - comment submission with character counter, validation for empty comments and 1000+ character limit, delete functionality for own comments, and comment persistence after refresh all work as expected. I tested in both light and dark modes, and the Comments/Queries Section displays properly with readable text and buttons in both modes.

I noticed some white boxes visible in dark mode (Unit 1 selection button, Choose Trades button, and file upload area), but as other reviewers mentioned, these appear to be part of the existing page layout and outside the scope of this PR which specifically focuses on the comment functionality. The comment components themselves have proper dark mode styling.

Ganesh112001

Hi Kanishk, I tested PR #4227 and verified that the Task Comments feature works perfectly. After navigating to /educationportal/tasks/upload, I confirmed that students can post comments with proper validation and character counter, delete their own comments with the red × button, and receive success/error toast notifications. Dark mode is fully supported with excellent contrast across all components. Comments persist correctly using localStorage after page refresh. No console errors observed. Everything functions perfectly and is ready for merge!

Vikas-8055

Hi Kanishk,

I reviewed your PR locally and all core features work great! Comment submission works smoothly with the character counter, empty comment validation shows inline errors, and the 1000+ character limit displays the proper error message. Delete functionality works correctly I can only delete my own comments and the success toast appears as expected. Comments persist after page refresh.

Regarding @rohanrastogi311's dark mode feedback the Progress Bar and Drag & Drop areas are pre-existing components outside this PR's scope. A separate PR should be raised to address those dark mode issues. This PR focuses on the Task Comments feature, and the Comments/Queries Section is properly styled in both light and dark mode.

roshini1212

Tested the kanishk_task_comments_frontend branch locally and all functionality works perfectly at "/educationportal/tasks/upload". Comment submission displays success toasts and lists correctly, validation properly blocks empty submissions and 1000+ character inputs with clear inline errors, delete removes own comments with confirmation toasts and light mode styling is fully responsive across all components.
The dark mode has some white boxes which felt off. But the basic functionalities according to the PR are working properly.

maithili20 · 2026-02-09T23:52:41Z

Hi @kanishkagarwal6101
I reviewed your PR locally and everything works fine in both dark and light modes. The 1000 character limit and empty error are shown as well. The toast messages seem to work too. I can delete my commnet but I am able to delete comments from others as well.

naznin07

Controlled textarea with validation.

ManojPuttaswamy

Tested all functionality and everything works as expected. One minor fix needed — the submit button should be disabled when the comment exceeds 1000 characters. This can be done by updating the disabled prop on the button.

disabled={disabled || comment.length > 1000}

ManojPuttaswamy · 2026-03-17T02:38:41Z

+          <button
+            type="submit"
+            className={`${styles.submitButton} ${darkMode ? styles.submitButtonDark : ''}`}
+            disabled={disabled}


The button is only disabled when the disabled prop is true, but not when the character limit is exceeded. A user can still submit while the error is showing:

saisandeepkoritala

Hi Kaniskh,

I ran your PR locally and all seems good in light and dark mode, everything works as intended. But i was able to delete other user comment.

SharadhaKasiviswanathan · 2026-03-29T12:02:00Z

Tested this locally and reproduced the issue: when 'currentUserId' is missing, clicking Submit shows the error toast 'Unable to identify user. Please refresh the page and try again', but the text area is still cleared, so the user loses their draft even though nothing was posted. This comes from CommentBox clearing its local state immediately after calling onSubmit(), while handleCommentSubmit() in 'WriteTaskUpload' can early return on failure. Can the flow be updated so that the input is cleared only after the parent confirms a successful submit?
Also, another issue is that a user is able to delete all the other comments as well (attached in the last screenshot).

rajanidi1999

Overall looks good. The components are well-structured and reusable, and the feature implementation is solid. Just a few minor improvements to consider: remove unnecessary Promise.resolve() in async functions, standardize API response/error shapes for consistency, and disable the submit button in CommentBox when validation fails (e.g., character limit exceeded). These are non-blocking and can be addressed in follow-ups.

rajanidi1999

Hi,
i have tested your PR locally and its working well.

rithika-paii

Hi Kanishk,

I reviewed this PR and tested the Task Comments functionality on the upload page in both light and dark modes. The overall feature works as expected, but I found one issue:

Comment deletion permission issue: Currently, it is possible to delete comments posted by other users. The delete option should be restricted so that users can only delete their own comments, as mentioned in the PR description.

PR.4227.mov

saurabhdipte

Hi Vikas,

I tested the changes locally. I’m able to submit a comment and delete it successfully. However, I also noticed that I’m able to delete other students’ comments, which might need to be restricted.

The validation for empty comments is working as expected. For the 1000+ character limit, I’m able to enter more than 1000 characters in the text box, but submission is blocked. It might be better to restrict input beyond 1000 characters at the typing level itself.

In dark mode, there are a few contrast-related issues, particularly with some text boxes, which may need adjustment.

kunchalasireesha

Hi Vikas, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

Add comment functionality with dark mode support and delete feature

2aa4ca7

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Dec 4, 2025

Anusha-Gali suggested changes Dec 4, 2025

View reviewed changes

kanishkagarwal6101 added 5 commits December 12, 2025 12:22

fix: improve contrast in CommentList avatar for WCAG compliance

d6fd553

- Change color from 'white' to '#ffffff' for better specificity - Use darker gradient colors (#2563eb, #7c3aed) for better contrast - Update dark mode gradient to even darker shades (#1e40af, #6d28d9)

kanishkagarwal6101 requested a review from Anusha-Gali December 12, 2025 22:16

debadyuti23 approved these changes Dec 13, 2025

View reviewed changes

rohanrastogi311 suggested changes Dec 21, 2025

View reviewed changes

ShreyaMP1999 approved these changes Jan 3, 2026

View reviewed changes

Anusha-Gali approved these changes Jan 7, 2026

View reviewed changes

Shravan-neelamsetty approved these changes Jan 8, 2026

View reviewed changes

Vikas-8055 reviewed Jan 8, 2026

View reviewed changes

Ganesh112001 approved these changes Jan 18, 2026

View reviewed changes

Vikas-8055 approved these changes Jan 31, 2026

View reviewed changes

roshini1212 approved these changes Feb 7, 2026

View reviewed changes

naznin07 approved these changes Mar 7, 2026

View reviewed changes

ManojPuttaswamy requested changes Mar 17, 2026

View reviewed changes

saisandeepkoritala reviewed Mar 27, 2026

View reviewed changes

one-community changed the title ~~Kanishk: Phase 4 - Task Comments Frontend Implementation~~ Vikas taking over for Kanishk: Phase 4 - Task Comments Frontend Implementation Apr 5, 2026

rajanidi1999 approved these changes Apr 12, 2026

View reviewed changes

rajanidi1999 approved these changes Apr 14, 2026

View reviewed changes

rithika-paii requested changes Apr 21, 2026

View reviewed changes

saurabhdipte requested changes May 2, 2026

View reviewed changes

kunchalasireesha requested changes May 2, 2026

View reviewed changes

one-community changed the title ~~Vikas taking over for Kanishk: Phase 4 - Task Comments Frontend Implementation~~ XXXX taking over for Kanishk: Phase 4 - Task Comments Frontend Implementation May 3, 2026

Uh oh!

Conversation

kanishkagarwal6101 commented Oct 17, 2025

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Note:

Uh oh!

netlify Bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

sonarqubecloud Bot commented Oct 17, 2025

Quality Gate failed

Uh oh!

Anusha-Gali left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

SwathiAngadi commented Dec 9, 2025

Uh oh!

sonarqubecloud Bot commented Dec 12, 2025

Quality Gate passed

Uh oh!

kanishkagarwal6101 commented Dec 12, 2025

Uh oh!

debadyuti23 left a comment

Choose a reason for hiding this comment

Uh oh!

rohanrastogi311 left a comment

Choose a reason for hiding this comment

Uh oh!

ShreyaMP1999 left a comment

Choose a reason for hiding this comment

Uh oh!

Anusha-Gali left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Shravan-neelamsetty left a comment

Choose a reason for hiding this comment

Uh oh!

Vikas-8055 left a comment

Choose a reason for hiding this comment

Uh oh!

Ganesh112001 left a comment

Choose a reason for hiding this comment

Uh oh!

Vikas-8055 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

roshini1212 left a comment

Choose a reason for hiding this comment

Uh oh!

maithili20 commented Feb 9, 2026

Uh oh!

naznin07 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy left a comment

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 17, 2026

Choose a reason for hiding this comment

Uh oh!

saisandeepkoritala left a comment

Choose a reason for hiding this comment

Uh oh!

SharadhaKasiviswanathan commented Mar 29, 2026

Uh oh!

rajanidi1999 left a comment

Choose a reason for hiding this comment

Uh oh!

rajanidi1999 left a comment

Choose a reason for hiding this comment

Uh oh!

netlify Bot commented Oct 17, 2025 •

edited

Loading

Anusha-Gali left a comment •

edited

Loading

Anusha-Gali left a comment •

edited

Loading

Vikas-8055 left a comment •

edited

Loading

naznin07 left a comment •

edited

Loading