fix(news): resolve category filter state desynchronization (#8032)

[suryaff733]

Description

This PR fixes #8032

On /company/news, the category filter buttons (Coverage and Releases) previously relied on module-level variables (coverageFiltered, pressReleaseFiltered) and direct DOM manipulation (classList.toggle("mystyle")). When navigating away from /company/news and returning, the component remounted with fresh DOM elements while the module variables stayed set to their previous states, causing the filter list and button highlights to invert and desynchronize.

Changes Introduced:

• Removed module-level filter flags and direct DOM mutation (classList.toggle).
• Replaced filter handling with React component state (selectedCategory via useState).
• Derived the filtered news list declaratively from queryResults and selectedCategory with useMemo.
• Bound active button styles (mystyle) declaratively to JSX className props.
• Added safe null-checking for data?.allMdx?.nodes.

---

Video / Screen Recording

Screen.Recording.2026-09-09.at.13.50.28.1.mp4

---

Notes for Reviewers

• Tested local site navigation between /company/news and other pages; filter selections and visual button highlights now remain cleanly in sync.
• Tested search input combined with category filtering to ensure query results filter properly.

Signed commits

• Yes, I signed my commits.

Summary by CodeRabbit

• Improvements
  • News articles can now be filtered using a simpler category selection experience.
  • Selecting an active category clearly updates the filter button styling.
  • News content now handles unavailable or empty data gracefully without disrupting the page.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: c68288a2-2906-4d40-99fe-4f8eb207acb8

📥 Commits

Reviewing files that changed from the base of the PR and between 2b1df39 and 7ce5372.

📒 Files selected for processing (1)

• src/sections/Company/News-grid/index.js

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.

---

📝 Walkthrough

Walkthrough

NewsGrid now uses React state and useMemo to manage category filtering. It removes module-level flags and direct DOM updates. Filter button styling reflects the selected category, and missing news data falls back to an empty list.

Changes

NewsGrid filter state

Layer / File(s)	Summary
Derived news filtering src/sections/Company/News-grid/index.js	The component uses useMemo to derive the displayed news list from selectedCategory. News data access uses optional chaining with an empty-array fallback.
Filter controls and active styling src/sections/Company/News-grid/index.js	Filter buttons toggle selectedCategory. The mystyle class now reflects the selected category. Module-level filter flags and colorchange were removed.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to 35a24

The news category filters now keep displayed articles and active button styling synchronized through React state, including after remounting. No merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes satisfy issue #8032. They replace module-level filter flags and imperative DOM updates with React state, derive filtered articles from selectedCategory, and assign active styles declarativ…
Out of Scope Changes check	✅ Passed	All changes support the linked issue. The optional chaining and empty-array fallback provide related null-safe data handling. No unrelated code changes are identified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the category filter state desynchronization fix and matches the primary changes in the pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Preview deployment for PR #8035 removed.

This PR preview was automatically pruned because we keep only the 3 most recently updated previews on GitHub Pages to stay within deployment size limits.

If needed, push a new commit to this PR to generate a fresh preview.

[PARTH-TUSSLE]

Hey could you add this as an agenda item for websites meet on Monday, we could discuss it there, you can find the link to the meeting minutes in the #websites channel on Slack.

[dhruveshmishra]

@suryaff733
Can u also check for the coverage section

[suryaff733]

@dhruveshmishra checked the coverage section as well, works fine. Attached a quick video preview showing the behavior.
https://drive.google.com/file/d/1UhQvUf0pigRb1q4aa9PFwrcwS-M3eM0s/view?usp=sharing

[suryaff733]

Here this Preview Link: https://drive.google.com/file/d/1UhQvUf0pigRb1q4aa9PFwrcwS-M3eM0s/view?usp=sharing