Honglin fixed blank page problem in some accounts

[honglinchen0524]

Description

This PR addresses an issue where some user accounts were experiencing blank page when viewing their profile page and viewing dashboard. The root cause was unsafe property access on potentially null or undefined badge objects. The changes include updates to both the component logic and the corresponding test cases.

Main changes explained:

In Badges.jsx:

• Added null checks and filtering to the badge sorting logic
• Ensured only valid badge objects are processed

In FeaturedBadges.jsx:

• Implemented null checking
• Added a check to ensure the input is an array before processing
• Improved sorting logic to handle potential undefined values

In BadgeSummaryViz.jsx:

• Updated the useEffect hook to filter out null or undefined badges before sorting
• Added null checks in the rendering logic for both desktop and tablet versions
• Implemented fallback options for key props in list rendering
• Added checks for imageUrl existence before rendering img tags

In BadgeHistory.jsx:

• Added null checks in the filterBadges function
• Implemented more error handling in the sorting logic
• Updated the rendering logic to handle potentially null or undefined badge objects

In Badges.test.jsx:

• Updated mock badge objects to reflect the actual data structure
• Modified test cases to account for the new null checks and filtering in badge counting logic

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as Owner user
5. go to dashboard→ profiles→
6. Verify your dashboard and profile page can properly load, and the badge functionality work as expected
7. go to localhost:3000/userprofile/646234ce50b6624774ad46a1
8. Verify this profile page can load

Note:

The error message showed in the blank page console log suggested the issue might be due to inconsistent or unexpected data structures. So I adjusted the Badges.jsx implementation to also handle a potentially nested badge structure. This approach aims to make the component more robust by accounting for different possible data formats, including both flat and nested structures. I also add additional null checks, using optional chaining, and ensuring the code can handle various badge object shapes, to prevent crashes caused by attempting to access properties on undefined objects.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	377cdbf
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/679d42f88fe2d4000853e004
😎 Deploy Preview	https://deploy-preview-3100--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.