Skip to content

feat: add filter by college to friends network and leaderboard (#380) #468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
indresh404 merged 1 commit into from
Jun 12, 2026
+28 −6
Merged

feat: add filter by college to friends network and leaderboard (#380) #468

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 28 additions & 6 deletions src/pages/Friends.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import DeveloperCard from "../components/friends/DeveloperCard";
import Loader from "../components/ui/Loader";
import { useAuth } from "../context/AuthContext";
import collegesList from "../data/colleges.json";
import {
fetchDevelopers,
hydrateConnections,
Expand Down Expand Up @@ -45,6 +46,7 @@
following: [],
suggested: []
});
const [selectedCollege, setSelectedCollege] = useState("All");

// 1. Initial Load & Setup Listeners
useEffect(() => {
Expand Down Expand Up @@ -119,6 +121,7 @@
username: userData?.githubUsername || currentUser.uid,
avatar: userData?.avatar || userData?.photoURL || currentUser.photoURL || `https://ui-avatars.com/api/?name=You&background=random`,
role: userData?.role || "Developer",
college: userData?.college || "Unknown",
bio: userData?.bio || "That's you!",
tags: userData?.skills || ["Developer"],
mutualFriends: 0,
Expand All @@ -132,7 +135,13 @@
return Array.from(networkMap.values()).sort((a, b) => (b.totalPoints || 0) - (a.totalPoints || 0));
}, [connections.followers, connections.following, currentUser, userData]);

const activeDevelopers = activeTab === "leaderboard" ? leaderboardStandings : connections[activeTab] || [];

Check warning on line 138 in src/pages/Friends.jsx

View workflow job for this annotation

GitHub Actions / Lint Check 

The 'activeDevelopers' conditional could make the dependencies of useMemo Hook (at line 144) change on every render. Move it inside the useMemo callback. Alternatively, wrap the initialization of 'activeDevelopers' in its own useMemo() Hook
const filteredDevelopers = React.useMemo(() => {
return activeDevelopers.filter(dev => {
if (selectedCollege === "All") return true;
return dev.college === selectedCollege;
});
}, [activeDevelopers, selectedCollege]);

const tabCopy = {
friends: "Developers who follow you back and collaborate with you across RankerHub.",
Expand Down Expand Up @@ -211,7 +220,7 @@

<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
<div className="xl:col-span-2 space-y-4">
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-2">
<div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<h2 className="text-xl font-black text-slate-900 dark:text-white my-0 capitalize">
{activeTab}
Expand All @@ -220,14 +229,27 @@
{tabCopy[activeTab]}
</p>
</div>
<span className="text-xs font-bold text-slate-400 bg-white/70 dark:bg-slate-900/70 border border-slate-200/50 dark:border-slate-800/50 px-3 py-1.5 rounded-full self-start sm:self-auto">
{activeDevelopers.length} developers
</span>

<div className="flex flex-row items-center gap-2 self-start sm:self-auto w-full sm:w-auto">
<select
value={selectedCollege}
onChange={(e) => setSelectedCollege(e.target.value)}
className="w-full sm:w-48 px-3 py-1.5 text-xs font-bold rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-300 focus:outline-none focus:ring-2 focus:ring-violet-500/50 transition-colors"
>
<option value="All">All Colleges</option>
{collegesList.map(college => (
<option key={college} value={college}>{college}</option>
))}
</select>
<span className="text-xs font-bold text-slate-400 bg-white/70 dark:bg-slate-900/70 border border-slate-200/50 dark:border-slate-800/50 px-3 py-1.5 rounded-full whitespace-nowrap">
{filteredDevelopers.length} devs
</span>
</div>
</div>

{activeDevelopers.length > 0 ? (
{filteredDevelopers.length > 0 ? (
<div className={activeTab === "leaderboard" ? "space-y-3" : "grid grid-cols-1 lg:grid-cols-2 gap-4"}>
{activeDevelopers.map((developer, index) => (
{filteredDevelopers.map((developer, index) => (
<div key={developer.id} className={activeTab === "leaderboard" ? "flex items-stretch gap-3" : ""}>
{activeTab === "leaderboard" && (
<div className={`flex-shrink-0 w-10 flex flex-col items-center justify-center rounded-xl font-black text-sm ${
Expand Down
Loading