Fix the incorrect function of assigning a new badge

[ShraddhaShahari]

Description

Fixed the incorrect function of assigning a new badge, previously it was showing blank page after clicking on "Assign Badge".
Fixes # (bug priority: medium)

Main changes explained:

• Implemented Optional Chaining (?.) - To prevent runtime errors when accessing properties of potentially null or undefined objects.
• Added filter() to Validate Data - This ensures only valid badge.badge objects are processed before calling map()
• Enhanced Error Handling
• Improved Data Integrity & Reliability

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 View Profile→ Assign Badge
6. verify after clicking on Assign badge it should show list of badges
7. verify that it should not show a blank page after clicking on Assign Badge

Screenshots or videos of changes:

Before fix: screen recording with an error:

Screen.Recording-before.fix.mov

After fix: screen recording:

Screen.Recording-after.fix.mov

Note:

Include the information the reviewers need to know.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	6fa47ac
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67ca56c71fe58700081d432e
😎 Deploy Preview	https://deploy-preview-3237--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.

[aaryaneil]

Tested the PR and while assigning the badge on submitting the badge I am getting a PUT error and the badge is not assigned.

Screen.Recording.2025-03-08.at.2.45.40.AM.mov

[rnavyaprabha]

i have checked the code changes and also verified if the badge list is correctly displayed or not. It functionality and the code look good to me.
I am approving this PR.
Here is the screenshot 👍

[ShraddhaShahari]

Tested the PR and while assigning the badge on submitting the badge I am getting a PUT error and the badge is not assigned.

Screen.Recording.2025-03-08.at.2.45.40.AM.mov

@aaryaneil, The error you getting while assigning a badge is not related to my changes. Please go through the code again and double check.
Thank you!

[rsripathi2906]

Tested the PR by following these steps: logged in as an owner user, and navigated to View Profile → Assign Badge. Verified that after clicking on Assign Badge, the list of badges appears and that it does not show a blank page. Everything works as expected. Approving the PR.

[guthaVamshi]

Tested the PR as per the provided steps, and everything is working as expected. However, I noticed that when switching to dark mode, Name , Badge info (i) button above the checkbox remains unchanged(color), making it difficult to see. Aside from that, everything else looks good.

[one-community]

Redone with this: #5194