Jaden Taking Over For Peterson: Implement Improvements in 404 Page (DONE Jaden) by peterson337 · Pull Request #3286 · OneCommunityGlobal/HighestGoodNetworkApp

peterson337 · 2025-03-18T22:13:49Z

Jaden Taking Over For Peterson: Implement Improvements in 404 Page (DONE Jaden) #3286

Description

This pull request improves the 404 Not Found page and resolves all SonarQube quality gate failures.

The 404 page now displays dynamic messages and styles based on authentication state. All new and modified components follow project code standards (CSS Modules, no inline styles, WCAG contrast compliance).

Related PRs (if any):

None

Main changes explained:

NotFoundPage - Removed all inline styles and injected <style> tag; replaced with CSS module classes. Dynamic messaging for logged-in vs logged-out users.
NotFoundPage.module.css - Added classes for light/dark theming, responsive layout, and link spacing.
UserProfile - Removed unused imports, unused state, and dead functions. Fixed infringements spread bug. Converted <span role="button"> elements to proper <button> elements.
UserProfile.module.css - Created new CSS module for styles previously inline.
SummaryBar - Refactored to resolve SonarQube cognitive complexity violations. Extracted all inner functions, render helpers, and JSX sections (BadgeIcons, SuggestionModal, BugReportModal) to module-level. Reduced cognitive complexity to within the 15-point limit.
notificationCard - Re-added missing CSS module import, fixed className template literal.
Logout - Removed duplicate useHistory declaration.

How to test:

cd HighestGoodNetworkApp
git checkout Peterson_implement_improvements_in_404_page2
npm install
npm start

Go to any invalid URL e.g. http://localhost:3000/doesnotexist
Logged out - one link should appear redirecting to the login page
Logged in - two links should appear: one redirects to the dashboard, the second redirects to the dashboard and opens the suggestions/feedback modal

Note:

SonarQube quality gate passes with 0 new issues, 0 security hotspots, and 1.1% duplication on new code.

netlify · 2025-03-18T22:14:18Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`ac77e0c`
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67ec1eee7486020008d38e43
😎 Deploy Preview	https://deploy-preview-3286--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 site configuration.

…4_page2

…e user's login state.

vaibhavkoladiya

Everything works as expected. I checked out the current branch, ran the PR locally after npm install, and tested both logged-in and logged-out states. When logged in, the error page correctly shows two links—one redirects to the dashboard, and the other opens the same route with the suggestions/development modal. When not logged in, the error page displays a link that properly redirects to the login page. Looks good to me—approved! ✅

Screen.Recording.2025-04-04.182506.mp4

rsripathi2906

Tested the 404 error page implementation — everything works as expected.
Tested both logged-in and logged-out scenarios.
Links and modal behave correctly. Approving the PR.

Screen.Recording.2025-04-04.223938_1.mp4

sravankumarbodakonda

Verified the error page behavior based on user authentication. Logged-in users see two links—one to the dashboard and another that opens the suggestions/development modal. Unauthenticated users are correctly redirected to the login page. Everything is working as expected, i am approving the PR.

pavanputti

I tested the fix by checking out the current branch, running npm install, and starting the app locally. I logged in as a user, navigated to a nonexistent URL, and confirmed that the error page showed two links: one redirecting to the dashboard and another opening the suggestions modal while also redirecting to the dashboard. I then logged out, revisited the invalid URL, and verified that the error page displayed a single link redirecting to the login page.

Screen.Recording.2025-04-10.at.5.07.22.PM.mov

KH07 · 2025-04-11T19:46:20Z

It has been tested and functions as intended. I checked out to the current branch, did an npm install, started the app locally, and tried to access a page that did not exist. When not logged in, the error page shows a redirect link to the login page. When logged in, the error page shows two redirect links, both to the home page, and the second one opens a modal.

nikhilpittala16

I have tested the PR and everything works as expected.

PR.vid.21.mp4

JuliaHa0902

I have checked out the branch and followed the instructions to test the branch. It works as intended.
When not login:

When login

I clicked on the modal and the pop up showed

Just a suggestion, maybe we should remove the white part at the end of the page containing "Back to Top" button, or change the background to match the dark theme.

gopikalakshmia

Checked out the branch.
Verified the "Not Found" page behavior before and after login.
Before login

After login (Home and User Suggestions pop-up available):

Works as intended .Approving the PR.

Ram-blip

I checked the PR and confirmed that the new error page correctly shows a single “Login” link for unauthenticated users, and for logged-in users it displays both a “Go to Dashboard” link and a “Send Feedback” link that opens the suggestions modal -everything navigates and behaves exactly as intended.

aayushshetty12

Working as expected.
When user is logged in, two links appear on the error page: the first redirects to the dashboard, and the second redirects to same dashboard with the modal for suggestions and development.

When user is not logged in, link appears on the error page that redirects to the login page.

rohanrastogi311

Hi Peterson,

Error launch due to incorrect node version. 14 instead of 20.

… resolve conflicts

netlify · 2026-07-25T04:39:00Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`d28e4d2`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a6ffd8789f679000831cba1
😎 Deploy Preview	https://deploy-preview-3286--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

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

…ificationCard - Move section border, heading color, link margin, and p margin to CSS module classes - Remove injected style tag from NotFoundPage JSX - Restore notificationCard.module.css import and use module classes for card layout - Fix pre-existing stylelint errors in NotFoundPage.module.css

- Remove unused imports: useId, Col, convertDateFormatToMMMDDYY, ProfileImageModal, CREATED_DATE_CRITERIA - Remove unused state: didLinkUpdate, setDidLinkUpdate - Remove unused vars: result, isStartDateValid, isEndDateValid and their dead functions - Fix two bugs: spread of optional chain now uses nullish coalescing to avoid TypeError - Fix for loop to for-of, findIndex !== -1 to .some, typeof check to direct undefined compare - Fix optional chaining on err.response and nested ternary for canEditUserProfile - Convert 6 span role=button elements to proper button elements - Remove duplicate useHistory call in Logout - Fix nested template literal in notificationCard - Move all new inline styles to CSS module classes in UserProfile and SummaryBar

- Remove unused isModalOpen state and toggleModal function - Fix nested template literal in profilePicture className - Replace double && checks with optional chaining in SummaryBar getInfringements and getBadges

- Extract getCategoryDescription, getDraggedNextElement, applyEditMode, applyDraggableMode, readFormData, and applyFieldUpdate to module level - Replace remaining inline style in renderSummaryMessage with btnResetInherit CSS module class

…nitive complexity - Extract getInfringements, getBadges, getWeeklySummary, canEditData, getContainerClass, and getPlaceholderText to module level - Update all call sites to pass required params

- Extract loadUserProfile, getUserTasks, openSuggestionModal, editField, sendUserSuggestion to module level - Update all call sites to pass required params explicitly

…to module level Extract editRadioButtonSelected, onTaskClick, onBadgeClick, renderSummary, renderSummaryMessage, openReport, sendBugReport, closeSuggestionModal, onDragToggleDraggingClass, onSortableDragOver, and handleEditClick from the component body to module-level functions. Update all call sites to pass required state and props as explicit parameters. Also fix editField to use a fieldState object to stay within the 7-parameter SonarQube limit.

Reduce renderSummary from 9 params to 6 by pre-computing canEdit in the component and passing it directly. Replace all repeated isAuthUser || canEditData(...) ternaries in JSX with the single canEdit boolean, eliminating 5 duplicate branch expressions from the component body.

…tive complexity Move the suggestion and bug report modal JSX into separate module-level function components, removing their branch logic from the SummaryBar component body to bring cognitive complexity within the allowed limit.

…complexity Extract badge icon section into BadgeIcons component removing 5 canEdit ternaries from SummaryBar. Extract handleLoadEvent to module level. Convert useEffect && shortcut to explicit if statement.

kzou55

Hi Jaden,

I ran and tested the PR locally.

Verified

Page not found when logged in
- Clicking "Home" goes to the dashboard
- Clicking "Here" goes to the dashboard and opens up the User Suggestion form
Only one Link at the Page not Found page where it takes the user to the login page.

Issues

Could you clarify if this is the intended behavior. If the user is logged out, at the Page not Found page, it still shows the nav bar and its associated drop down(Hello, View profile, update password, light/dark mode toggle, and logout).

iAbhi001

Local Testing & PR Review

I checked out the branch and performed local testing across both logged-in and logged-out states.

✅ Verified Functionality:

Logged-in state: Navigating to an invalid route displays the updated 404 page with two functional links—one pointing to the Dashboard, and the other opening the User Suggestion/Development modal as expected.
Logged-out state: The 404 page correctly shows a single link redirecting to the Login page.

⚠️ Issue Found / Question for Author:

Navbar visibility when logged out: As noted by @kzou55, when navigating to a non-existent route as an unauthenticated/logged-out user, the authenticated top navbar (with options like Hello, View Profile, Update Password, and Logout) is still rendered.

Expected Behavior: When a user is logged out, the top navigation header should not display logged-in user controls/dropdowns. Could you please check the auth wrapper or route guarding on the 404 page to ensure the navbar reflects the correct logged-out state?

DeepighaJ

Hi @Jaden300 Tested the PR locally. The mentioned behaviors working as expected but need clarity before approving on the header part during log out scenario. Otherwise its good to go. Will approve once its confirmed.
When LoggedIn: Two links appear "Home" and "here".
On clicking on Home redirects to dashboard page
On clicking on here redirects to dashboard page with model appears and submitting feedback shows success toast "Email sent successfully"

Clicking on home:

Clicking on here model appears:

When Logged out : Only one link appears for login page

Kept all existing routes from HEAD and all new routes from development, with NotFoundPage catch-all placed after all new ProtectedRoutes.

iAbhi001

I tested the PR locally on the Peterson_implement_improvements_in_404_page2 branch after running npm install and npm start.

🛠️ Verification Results:

Logged-out State: Navigating to an invalid URL correctly shows a single link redirecting to the login page.
Logged-in State: Navigating to an invalid URL displays two functional links—one pointing to the Dashboard, and the other redirecting to the Dashboard while opening the Feedback/Suggestions modal.
Modal Functionality: Submitting feedback inside the modal works as expected with a success toast notification.
UI & Styling: The 404 page styling renders cleanly without console errors or inline style issues.

Everything works as expected on my end! LGTM! 🚀

…and Inventory routes from development

sonarqubecloud · 2026-08-03T02:32:27Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

Peterson_implement_improvements_in_404_page2

2233c23

peterson337 added the do not review Do not review or look at code without full context label Mar 18, 2025

peterson337 added 4 commits March 26, 2025 11:48

Merge branch 'development' into Peterson_implement_improvements_in_40…

f445b5b

…4_page2

Improve the 404 page with new styles and dynamic messages based on th…

9617b88

…e user's login state.

Improve the 404 page with new styles and dynamic messages based on th…

3c09654

…e user's login state.

Improve the 404 page with new styles and dynamic messages based on th…

ac77e0c

…e user's login state.

peterson337 added High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible and removed do not review Do not review or look at code without full context labels Apr 1, 2025

peterson337 mentioned this pull request Apr 3, 2025

Peterson implement improvements in 404 page #2962

Closed

vaibhavkoladiya approved these changes Apr 5, 2025

View reviewed changes

rsripathi2906 approved these changes Apr 5, 2025

View reviewed changes

sravankumarbodakonda approved these changes Apr 9, 2025

View reviewed changes

pavanputti reviewed Apr 10, 2025

View reviewed changes

pavanputti approved these changes Apr 10, 2025

View reviewed changes

KH07 approved these changes Apr 11, 2025

View reviewed changes

nikhilpittala16 approved these changes Apr 11, 2025

View reviewed changes

JuliaHa0902 approved these changes Apr 18, 2025

View reviewed changes

gopikalakshmia approved these changes May 3, 2025

View reviewed changes

Ram-blip approved these changes May 30, 2025

View reviewed changes

aayushshetty12 approved these changes Jul 12, 2025

View reviewed changes

rohanrastogi311 suggested changes Jan 24, 2026

View reviewed changes

Jaden300 changed the title ~~Peterson_implement_improvements_in_404_page~~ Jaden Taking Over For Peterson: Implement Improvements in 404 Page Jul 25, 2026

Merge development into Peterson_implement_improvements_in_404_page2 -…

4431968

… resolve conflicts

Jaden300 added 10 commits July 25, 2026 13:35

Fix remaining SonarQube issues in UserProfile and SummaryBar

d6b2357

- Remove unused isModalOpen state and toggleModal function - Fix nested template literal in profilePicture className - Replace double && checks with optional chaining in SummaryBar getInfringements and getBadges

Extract more SummaryBar inner functions to module level to reduce cog…

859a151

…nitive complexity - Extract getInfringements, getBadges, getWeeklySummary, canEditData, getContainerClass, and getPlaceholderText to module level - Update all call sites to pass required params

Extract remaining SummaryBar inner functions to module level

e6e43d1

- Extract loadUserProfile, getUserTasks, openSuggestionModal, editField, sendUserSuggestion to module level - Update all call sites to pass required params explicitly

Extract BadgeIcons component and further reduce SummaryBar cognitive …

eeb66a0

…complexity Extract badge icon section into BadgeIcons component removing 5 canEdit ternaries from SummaryBar. Extract handleLoadEvent to module level. Convert useEffect && shortcut to explicit if statement.

kzou55 requested changes Jul 27, 2026

View reviewed changes

iAbhi001 self-requested a review July 28, 2026 01:38

iAbhi001 previously approved these changes Jul 28, 2026

View reviewed changes

DeepighaJ requested changes Jul 28, 2026

View reviewed changes

Resolve merge conflict in routes.jsx with development branch

0001cab

Kept all existing routes from HEAD and all new routes from development, with NotFoundPage catch-all placed after all new ProtectedRoutes.

Jaden300 dismissed iAbhi001’s stale review via 0001cab August 1, 2026 22:23

Jaden300 added 3 commits August 1, 2026 18:46

Remove unused imports from routes.jsx flagged by SonarQube

60122d9

Add missing ApplicantSourceDonutChart import to routes.jsx

d167bf9

Add missing PlannedCostDonutChart import to routes.jsx

00810e3

Jaden300 changed the title ~~Jaden Taking Over For Peterson: Implement Improvements in 404 Page~~ Jaden Taking Over For Peterson: Implement Improvements in 404 Page (DONE Jaden) Aug 1, 2026

Jaden300 requested review from DeepighaJ and kzou55 August 1, 2026 22:55

iAbhi001 self-requested a review August 2, 2026 20:38

iAbhi001 previously approved these changes Aug 2, 2026

View reviewed changes

resolve merge conflicts in routes.jsx - add LB Dashboard and Kitchen …

ffe2015

…and Inventory routes from development

Jaden300 dismissed iAbhi001’s stale review via ffe2015 August 3, 2026 02:26

Jaden300 added 3 commits August 2, 2026 22:29

remove unused imports from routes.jsx flagged by SonarQube

722ad21

restore missing MaterialSummary import in routes.jsx

d6bc7c8

add missing AnimalManagement and OrdersPage imports to routes.jsx

d28e4d2

Uh oh!

Uh oh!

Conversation

peterson337 commented Mar 18, 2025 • edited by Jaden300 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRs (if any):

Main changes explained:

How to test:

Note:

Uh oh!

netlify Bot commented Mar 18, 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!

vaibhavkoladiya left a comment

Choose a reason for hiding this comment

Uh oh!

rsripathi2906 left a comment

Choose a reason for hiding this comment

Uh oh!

sravankumarbodakonda left a comment

Choose a reason for hiding this comment

Uh oh!

pavanputti left a comment

Choose a reason for hiding this comment

Uh oh!

KH07 commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nikhilpittala16 left a comment

Choose a reason for hiding this comment

Uh oh!

JuliaHa0902 left a comment

Choose a reason for hiding this comment

Uh oh!

gopikalakshmia left a comment

Choose a reason for hiding this comment

Uh oh!

Ram-blip left a comment

Choose a reason for hiding this comment

Uh oh!

aayushshetty12 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!

netlify Bot commented Jul 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

kzou55 left a comment

Choose a reason for hiding this comment

Verified

Issues

Uh oh!

iAbhi001 left a comment

Choose a reason for hiding this comment

Local Testing & PR Review

✅ Verified Functionality:

⚠️ Issue Found / Question for Author:

Uh oh!

DeepighaJ left a comment

Choose a reason for hiding this comment

Uh oh!

iAbhi001 left a comment

Choose a reason for hiding this comment

🛠️ Verification Results:

Uh oh!

sonarqubecloud Bot commented Aug 3, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

peterson337 commented Mar 18, 2025 •

edited by Jaden300

Loading

netlify Bot commented Mar 18, 2025 •

edited

Loading

KH07 commented Apr 11, 2025 •

edited

Loading

netlify Bot commented Jul 25, 2026 •

edited

Loading