Implement language selection and filter repositories #142

[mspandey]

Resolves #142

Description

Implemented language selection and repository filtering for the user profile page.

Changes Made:

• Added a dynamic language filter tab list in ProfileView.tsx.
• Implemented state to automatically filter the displayed repositories based on the selected language.
• Added standard GitHub language colors to the UI.
• Fixed accessibility issues (aria-pressed and type="button") and resolved React scope build warnings.

[coderabbitai]

📝 Walkthrough

Walkthrough

ProfileView's "Popular repositories" section gains a language filter button row above the repository grid. Buttons are rendered from availableLanguages, reflect the active selection via selectedLang, and update it via setSelectedLang. The grid iterates over filteredRepos instead of repos.

Changes

Language Filter for Popular Repositories

Layer / File(s)	Summary
Language filter buttons and filtered grid src/components/profile/ProfileView.tsx	Updates React import to include useRef. Inserts an availableLanguages.map(...) button row above the repo grid; each button uses selectedLang for active styling and calls setSelectedLang(lang) on click. Switches the grid from repos.map(...) to filteredRepos.map(...).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related issues

• [FEAT] Add language filter tabs to the Popular Repositories section #142 — This PR directly implements the requested feature of adding language filter tabs above the Popular Repositories grid, with client-side filtering driven by the selected language state.

Suggested reviewers

• PRODHOSH

Poem

🐇 Hop hop, the repos align,
Filtered by language, neat and fine!
A button row appears with glee,
selectedLang decides what we see.
The grid now follows filteredRepos true —
A tidy feature, fresh and new! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main feature being implemented: language selection and repository filtering, with a reference to the related issue.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/profile/ProfileView.tsx`:
- Around line 339-372: The language filter buttons in the ProfileView component
are missing accessibility attributes for assistive technologies. Add the
aria-pressed attribute to the button element that maps through
availableLanguages, and set its value to a boolean expression that evaluates to
true when selectedLang equals the current lang being rendered, and false
otherwise. This will expose the selected state to screen readers so users can
identify which language filter is currently active.
- Around line 341-343: The button element in the language filter controls lacks
an explicit type attribute, which defaults to "submit" behavior and could
trigger accidental form submissions if nested in a form. Add `type="button"` to
the button element that contains the onClick handler for setSelectedLang to
explicitly prevent form submission behavior and ensure it only functions as a
clickable language filter control.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b54e1d37-4d52-451b-8008-9f3c75cc3149

📥 Commits

Reviewing files that changed from the base of the PR and between c802435 and ff9828e.

📒 Files selected for processing (1)

• src/components/profile/ProfileView.tsx

[PRODHOSH]

@mspandey once again same build issue
and fix all the coderabbit comments and then tag me
fix the pr description

[PRODHOSH]

@mspandey

[mspandey]

Hi @PRODHOSH! I have fixed the build issue by importing React, resolved all of the CodeRabbit accessibility comments, and updated the PR description. It should be good for another review!

[PRODHOSH]

Hi, thanks @mspandey
still thiss pr has merge conflicts pls fix that

and the pr template we follow here is the below one pls check
https://github.com/PRODHOSH/ossfolio/blob/main/.github/PULL_REQUEST_TEMPLATE.md

any doubts, ask in discord #34