From cbd86757aac70889e1103f60df6df8b0c11b2e43 Mon Sep 17 00:00:00 2001
From: Ayush R Kumar <ayushrkumar2006@gmail.com>
Date: Mon, 1 Jun 2026 19:27:06 +0530
Subject: [PATCH 1/4] feat: add search and sort filter for contributors

---
 src/pages/Contributors/Contributors.tsx | 153 ++++++++++++++----------
 1 file changed, 91 insertions(+), 62 deletions(-)

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index d4fee52c..fcd9562e 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -10,6 +10,11 @@ import {
   Box,
   CircularProgress,
   Alert,
+  TextField,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel,
 } from "@mui/material";
 import { FaGithub } from "react-icons/fa";
 import { Link } from "react-router-dom";
@@ -28,8 +33,9 @@ const ContributorsPage = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+  const [sortOrder, setSortOrder] = useState("desc");
 
-  // Fetch contributors from GitHub API
   useEffect(() => {
     const fetchContributors = async () => {
       try {
@@ -43,10 +49,17 @@ const ContributorsPage = () => {
         setLoading(false);
       }
     };
-
     fetchContributors();
   }, []);
 
+  const filtered = contributors
+    .filter((c) => c.login.toLowerCase().includes(search.toLowerCase()))
+    .sort((a, b) =>
+      sortOrder === "desc"
+        ? b.contributions - a.contributions
+        : a.contributions - b.contributions
+    );
+
   if (loading) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
@@ -70,69 +83,85 @@ const ContributorsPage = () => {
           🤝 Contributors
         </Typography>
 
+        <Box sx={{ display: "flex", gap: 2, mb: 4, flexWrap: "wrap" }}>
+          <TextField
+            label="Search by username"
+            variant="outlined"
+            size="small"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            sx={{ flex: 1, minWidth: 200 }}
+          />
+          <FormControl size="small" sx={{ minWidth: 180 }}>
+            <InputLabel>Sort by Contributions</InputLabel>
+            <Select
+              value={sortOrder}
+              label="Sort by Contributions"
+              onChange={(e) => setSortOrder(e.target.value)}
+            >
+              <MenuItem value="desc">Most to Least</MenuItem>
+              <MenuItem value="asc">Least to Most</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
+
+        <Typography variant="body2" sx={{ mb: 2 }} color="text.secondary">
+          Showing {filtered.length} of {contributors.length} contributors
+        </Typography>
+
         <Grid container spacing={4}>
-          {contributors.map((contributor) => (
+          {filtered.map((contributor) => (
             <Grid item xs={12} sm={6} md={3} key={contributor.id}>
-                <Card
-                  sx={{
-                    textAlign: "center",
-                    p: 2,
-                    borderRadius: "10px",
-                    border: "1px solid #E0E0E0",
-                    boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
-                    transition: "transform 0.3s ease-in-out",
-                    "&:hover": {
-                      transform: "scale(1.05)",
-                      boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
-                      borderColor: "#C0C0C0",
-                      outlineColor: "#B3B3B3",
-                    },
-                  }}
+              <Card
+                sx={{
+                  textAlign: "center",
+                  p: 2,
+                  borderRadius: "10px",
+                  border: "1px solid #E0E0E0",
+                  boxShadow: "0 4px 10px rgba(0,0,0,0.1)",
+                  transition: "transform 0.3s ease-in-out",
+                  "&:hover": {
+                    transform: "scale(1.05)",
+                    boxShadow: "0 8px 15px rgba(0,0,0,0.2)",
+                    borderColor: "#C0C0C0",
+                  },
+                }}
+              >
+                <Link
+                  to={`/contributor/${contributor.login}`}
+                  style={{ textDecoration: "none" }}
                 >
-                    <Link
-                        to={`/contributor/${contributor.login}`}
-                        style={{ textDecoration: "none" }}
-                    >
-                    <Avatar
-                        src={contributor.avatar_url}
-                        alt={contributor.login}
-                        sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
-                    />
-                    <CardContent>
-                        <Typography variant="h6" sx={{ fontWeight: "bold" }}>
-                        {contributor.login}
-                        </Typography>
-
-                        <Typography variant="body2" color="text.secondary">
-                        {contributor.contributions} Contributions
-                        </Typography>
-                        {/*
-                        <Typography variant="body2" sx={{ mt: 2 }}>
-                        Thank you for your valuable contributions to our
-                        community!
-                        </Typography> */}
-                    </CardContent>
-                    </Link>
-
-                    <Box sx={{ mt: 2 }}>
-                        <Button
-                            variant="contained"
-                            startIcon={<FaGithub />}
-                            href={contributor.html_url}
-                            target="_blank"
-                            sx={{
-                                backgroundColor: "#333333",
-                                textTransform: "none",
-                                color: "#FFFFFF",
-                                "&:hover": {
-                                backgroundColor: "#555555",
-                                },
-                            }}
-                            >
-                            GitHub
-                        </Button>
-                    </Box>
-                </Card>
+                  <Avatar
+                    src={contributor.avatar_url}
+                    alt={contributor.login}
+                    sx={{ width: 100, height: 100, mx: "auto", mb: 2 }}
+                  />
+                  <CardContent>
+                    <Typography variant="h6" sx={{ fontWeight: "bold" }}>
+                      {contributor.login}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {contributor.contributions} Contributions
+                    </Typography>
+                  </CardContent>
+                </Link>
+                <Box sx={{ mt: 2 }}>
+                  <Button
+                    variant="contained"
+                    startIcon={<FaGithub />}
+                    href={contributor.html_url}
+                    target="_blank"
+                    sx={{
+                      backgroundColor: "#333333",
+                      textTransform: "none",
+                      color: "#FFFFFF",
+                      "&:hover": { backgroundColor: "#555555" },
+                    }}
+                  >
+                    GitHub
+                  </Button>
+                </Box>
+              </Card>
             </Grid>
           ))}
         </Grid>

From 54296e549fd74cf3b21b89b2ed3c49474b0b11d1 Mon Sep 17 00:00:00 2001
From: Ayush R Kumar <ayushrkumar2006@gmail.com>
Date: Mon, 1 Jun 2026 19:47:06 +0530
Subject: [PATCH 2/4] perf: memoize filtered contributors list with useMemo

---
 src/pages/Contributors/Contributors.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index fcd9562e..ed6538eb 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import {
   Container,
   Grid,
@@ -52,13 +52,17 @@ const ContributorsPage = () => {
     fetchContributors();
   }, []);
 
-  const filtered = contributors
-    .filter((c) => c.login.toLowerCase().includes(search.toLowerCase()))
-    .sort((a, b) =>
-      sortOrder === "desc"
-        ? b.contributions - a.contributions
-        : a.contributions - b.contributions
-    );
+  const filtered = useMemo(
+    () =>
+      contributors
+        .filter((c) => c.login.toLowerCase().includes(search.toLowerCase()))
+        .sort((a, b) =>
+          sortOrder === "desc"
+            ? b.contributions - a.contributions
+            : a.contributions - b.contributions
+        ),
+    [contributors, search, sortOrder]
+  );
 
   if (loading) {
     return (

From e4adcecc95cc386b66c60efca72b4d4f640a73f9 Mon Sep 17 00:00:00 2001
From: Ayush R Kumar <ayushrkumar2006@gmail.com>
Date: Mon, 1 Jun 2026 19:49:24 +0530
Subject: [PATCH 3/4] feat: complete remaining filters and clear button
 requirements

---
 src/pages/Contributors/Contributors.tsx | 72 ++++++++++++++++++++-----
 1 file changed, 58 insertions(+), 14 deletions(-)

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index ed6538eb..bf62ddb0 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -27,6 +27,7 @@ interface Contributor {
   avatar_url: string;
   contributions: number;
   html_url: string;
+  type?: string; 
 }
 
 const ContributorsPage = () => {
@@ -35,6 +36,8 @@ const ContributorsPage = () => {
   const [error, setError] = useState<string | null>(null);
   const [search, setSearch] = useState("");
   const [sortOrder, setSortOrder] = useState("desc");
+  const [minPRs, setMinPRs] = useState<string>("");
+  const [prType, setPrType] = useState<string>("all");
 
   useEffect(() => {
     const fetchContributors = async () => {
@@ -46,23 +49,34 @@ const ContributorsPage = () => {
       } catch {
         setError("Failed to fetch contributors. Please try again later.");
       } finally {
-        setLoading(false);
+        loading && setLoading(false);
       }
     };
     fetchContributors();
   }, []);
 
-  const filtered = useMemo(
-    () =>
-      contributors
-        .filter((c) => c.login.toLowerCase().includes(search.toLowerCase()))
-        .sort((a, b) =>
-          sortOrder === "desc"
-            ? b.contributions - a.contributions
-            : a.contributions - b.contributions
-        ),
-    [contributors, search, sortOrder]
-  );
+  const handleClearFilters = () => {
+    setSearch("");
+    setSortOrder("desc");
+    setMinPRs("");
+    setPrType("all");
+  };
+
+  const filtered = useMemo(() => {
+    return contributors
+      .filter((c) => {
+        const matchesSearch = c.login.toLowerCase().includes(search.toLowerCase());
+        const matchesMinPR = minPRs === "" || c.contributions >= parseInt(minPRs, 10);
+        const matchesType = prType === "all" || (c.type && c.type.toLowerCase() === prType.toLowerCase());
+        return matchesSearch && matchesMinPR && matchesType;
+      })
+      .sort((a, b) => {
+        if (sortOrder === "desc") {
+          return b.contributions - a.contributions;
+        }
+        return a.contributions - b.contributions;
+      });
+  }, [contributors, search, sortOrder, minPRs, prType]);
 
   if (loading) {
     return (
@@ -87,7 +101,7 @@ const ContributorsPage = () => {
           🤝 Contributors
         </Typography>
 
-        <Box sx={{ display: "flex", gap: 2, mb: 4, flexWrap: "wrap" }}>
+        <Box sx={{ display: "flex", gap: 2, mb: 4, flexWrap: "wrap", alignItems: "center" }}>
           <TextField
             label="Search by username"
             variant="outlined"
@@ -96,6 +110,28 @@ const ContributorsPage = () => {
             onChange={(e) => setSearch(e.target.value)}
             sx={{ flex: 1, minWidth: 200 }}
           />
+          <TextField
+            label="Min PR Count"
+            type="number"
+            variant="outlined"
+            size="small"
+            value={minPRs}
+            onChange={(e) => setMinPRs(e.target.value)}
+            sx={{ width: 130 }}
+          />
+          <FormControl size="small" sx={{ minWidth: 150 }}>
+            <InputLabel>PR Type</InputLabel>
+            <Select
+              value={prType}
+              label="PR Type"
+              onChange={(e) => setPrType(e.target.value)}
+            >
+              <MenuItem value="all">All Types</MenuItem>
+              <MenuItem value="merged">Merged</MenuItem>
+              <MenuItem value="open">Open</MenuItem>
+              <MenuItem value="closed">Closed</MenuItem>
+            </Select>
+          </FormControl>
           <FormControl size="small" sx={{ minWidth: 180 }}>
             <InputLabel>Sort by Contributions</InputLabel>
             <Select
@@ -107,6 +143,14 @@ const ContributorsPage = () => {
               <MenuItem value="asc">Least to Most</MenuItem>
             </Select>
           </FormControl>
+          <Button 
+            variant="outlined" 
+            color="secondary" 
+            onClick={handleClearFilters}
+            sx={{ textTransform: "none", height: 40 }}
+          >
+            Clear Filters
+          </Button>
         </Box>
 
         <Typography variant="body2" sx={{ mb: 2 }} color="text.secondary">
@@ -159,7 +203,7 @@ const ContributorsPage = () => {
                       backgroundColor: "#333333",
                       textTransform: "none",
                       color: "#FFFFFF",
-                      "&:hover": { backgroundColor: "#555555" },
+                      &amp;:hover: { backgroundColor: "#555555" },
                     }}
                   >
                     GitHub

From 8c5724ae0d82332293b8b903125c598da2546ba4 Mon Sep 17 00:00:00 2001
From: Ayush R Kumar <ayushrkumar2006@gmail.com>
Date: Mon, 1 Jun 2026 19:51:04 +0530
Subject: [PATCH 4/4] fix: resolve syntax build error on card hover state

---
 src/pages/Contributors/Contributors.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
index bf62ddb0..a801e9a1 100644
--- a/src/pages/Contributors/Contributors.tsx
+++ b/src/pages/Contributors/Contributors.tsx
@@ -49,7 +49,7 @@ const ContributorsPage = () => {
       } catch {
         setError("Failed to fetch contributors. Please try again later.");
       } finally {
-        loading && setLoading(false);
+        setLoading(false);
       }
     };
     fetchContributors();
@@ -203,7 +203,7 @@ const ContributorsPage = () => {
                       backgroundColor: "#333333",
                       textTransform: "none",
                       color: "#FFFFFF",
-                      &amp;:hover: { backgroundColor: "#555555" },
+                      "&:hover": { backgroundColor: "#555555" },
                     }}
                   >
                     GitHub