From 90843af4a832ecd5f7b043e71e05ab53d50c0a9a Mon Sep 17 00:00:00 2001 From: "marthajerushamarumudi7@gmail.com" <144675544+Jerusha547@users.noreply.github.com> Date: Thu, 21 May 2026 10:12:10 +0530 Subject: [PATCH 1/3] Added [search-bar]: search bar added to contributions page --- src/pages/Contributors/Contributors.tsx | 182 ++++++++++++++++-------- 1 file changed, 125 insertions(+), 57 deletions(-) diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index d4fee52c..697b43e4 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/src/pages/Contributors/Contributors.tsx @@ -1,4 +1,6 @@ import { useEffect, useState } from "react"; +import { TextField, InputAdornment } from "@mui/material"; +import { FaSearch } from "react-icons/fa"; import { Container, Grid, @@ -28,6 +30,7 @@ const ContributorsPage = () => { const [contributors, setContributors] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [searchTerm, setSearchTerm] = useState(""); // Fetch contributors from GitHub API useEffect(() => { @@ -47,6 +50,10 @@ const ContributorsPage = () => { fetchContributors(); }, []); + const filteredContributors = contributors.filter((contributor) => + contributor.login.toLowerCase().includes(searchTerm.toLowerCase()), + ); + if (loading) { return ( @@ -65,74 +72,135 @@ const ContributorsPage = () => { return (
- + 🤝 Contributors + + setSearchTerm(e.target.value)} + sx={{ + width: { + xs: "100%", + sm: "400px", + }, + maxWidth: "100%", + backgroundColor: "white", + borderRadius: "10px", + }} + InputProps={{ + startAdornment: ( + + + + ), + }} + /> + - - {contributors.map((contributor) => ( - - + {filteredContributors.length === 0 && ( + + No contributors found. + + )} + {filteredContributors.map((contributor) => ( + + + - - - - - {contributor.login} - + + + + {contributor.login} + - - {contributor.contributions} Contributions - - {/* + + {contributor.contributions} Contributions + + {/* Thank you for your valuable contributions to our community! */} - - + + - - - - + + + + ))} From c172e5dcb1b74b9553ffa8c1642a647c8d748d38 Mon Sep 17 00:00:00 2001 From: "marthajerushamarumudi7@gmail.com" <144675544+Jerusha547@users.noreply.github.com> Date: Thu, 21 May 2026 10:24:49 +0530 Subject: [PATCH 2/3] Added [fix]: add rel noopener noreferrer to external contributor links --- src/pages/Contributors/Contributors.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx index 697b43e4..56816ad1 100644 --- a/src/pages/Contributors/Contributors.tsx +++ b/src/pages/Contributors/Contributors.tsx @@ -188,6 +188,7 @@ const ContributorsPage = () => { startIcon={} href={contributor.html_url} target="_blank" + rel="noopener noreferrer" sx={{ backgroundColor: "#333333", textTransform: "none", From 620fa218c8c6b903d6ecc84a99bc592fa65de637 Mon Sep 17 00:00:00 2001 From: "marthajerushamarumudi7@gmail.com" <144675544+Jerusha547@users.noreply.github.com> Date: Thu, 21 May 2026 10:47:58 +0530 Subject: [PATCH 3/3] Added [Feature]: added scroll to top button --- src/App.tsx | 63 ++++++------ src/components/ScrollToTopButton.tsx | 55 ++++++++++ src/pages/Tracker/Tracker.tsx | 145 +++++++++++++-------------- 3 files changed, 162 insertions(+), 101 deletions(-) create mode 100644 src/components/ScrollToTopButton.tsx diff --git a/src/App.tsx b/src/App.tsx index 8eafb448..d6ab9121 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import Footer from "./components/Footer"; import ScrollProgressBar from "./components/ScrollProgressBar"; import { Toaster } from "react-hot-toast"; import Router from "./Routes/Router"; +import ScrollToTopButton from "./components/ScrollToTopButton"; const FULLSCREEN_ROUTES = ["/signup", "/login"]; @@ -12,35 +13,41 @@ function App() { const isFullscreen = FULLSCREEN_ROUTES.includes(location.pathname); return ( -
- {!isFullscreen && } - - {!isFullscreen && } - -
- -
- - {!isFullscreen &&
} - - + {!isFullscreen && } + + {!isFullscreen && } + +
+ +
+ + {!isFullscreen &&
} + {!isFullscreen && } + -
+ }, + }} + /> +
); } diff --git a/src/components/ScrollToTopButton.tsx b/src/components/ScrollToTopButton.tsx new file mode 100644 index 00000000..9d877da6 --- /dev/null +++ b/src/components/ScrollToTopButton.tsx @@ -0,0 +1,55 @@ +import { useEffect, useState } from "react"; +import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; + +const ScrollToTopButton = () => { + const [visible, setVisible] = useState(false); + + useEffect(() => { + const toggleVisibility = () => { + if (window.scrollY > 10) { + setVisible(true); + } else { + setVisible(false); + } + }; + + window.addEventListener("scroll", toggleVisibility); + + return () => { + window.removeEventListener("scroll", toggleVisibility); + }; + }, []); + + const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }; + + return ( + visible && ( + + ) + ); +}; + +export default ScrollToTopButton; diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx index 576f39bf..4c5c19cd 100644 --- a/src/pages/Tracker/Tracker.tsx +++ b/src/pages/Tracker/Tracker.tsx @@ -1,11 +1,11 @@ -import React, { useState, useEffect } from "react" +import React, { useState, useEffect } from "react"; import { IssueOpenedIcon, IssueClosedIcon, GitPullRequestIcon, GitPullRequestClosedIcon, GitMergeIcon, -} from '@primer/octicons-react'; +} from "@primer/octicons-react"; import { Container, Box, @@ -47,7 +47,6 @@ interface GitHubItem { } const Home: React.FC = () => { - const theme = useTheme(); const { @@ -104,69 +103,75 @@ const Home: React.FC = () => { if (["open", "closed", "merged"].includes(filterType)) { filtered = filtered.filter((item) => { if (filterType === "merged") { - return !!item.pull_request?.merged_at - } - else if (filterType === "closed") { - return item.state === "closed" && !item.pull_request?.merged_at - } - else { + return !!item.pull_request?.merged_at; + } else if (filterType === "closed") { + return item.state === "closed" && !item.pull_request?.merged_at; + } else { //open - return item.state === "open" + return item.state === "open"; } }); } if (searchTitle) { filtered = filtered.filter((item) => - item.title.toLowerCase().includes(searchTitle.toLowerCase()) + item.title.toLowerCase().includes(searchTitle.toLowerCase()), ); } if (selectedRepo) { filtered = filtered.filter((item) => - item.repository_url.includes(selectedRepo) + item.repository_url.includes(selectedRepo), ); } if (startDate) { filtered = filtered.filter( - (item) => new Date(item.created_at) >= new Date(startDate) + (item) => new Date(item.created_at) >= new Date(startDate), ); } if (endDate) { filtered = filtered.filter( - (item) => new Date(item.created_at) <= new Date(endDate) + (item) => new Date(item.created_at) <= new Date(endDate), ); } return filtered; }; const getStatusIcon = (item: GitHubItem) => { - if (item.pull_request) { + if (item.pull_request.merged_at) + return ; - if (item.pull_request.merged_at) - return ; - - if (item.state === 'closed') - return ; + if (item.state === "closed") + return ( + + ); - return ; + return ; } - if (item.state === 'closed') - return ; + if (item.state === "closed") + return ; return ; }; - // Current data and filtered data according to tab and filters const currentRawData = tab === 0 ? issues : prs; - const currentFilteredData = filterData(currentRawData, tab === 0 ? issueFilter : prFilter); + const currentFilteredData = filterData( + currentRawData, + tab === 0 ? issueFilter : prFilter, + ); const totalCount = tab === 0 ? totalIssues : totalPrs; return ( - + {/* Auth Form */} - +
{ sx={{ flex: 1, minWidth: 150 }} helperText={ - + > Generate new token - + - + • - + - + > Learn more - + } />
@@ -331,16 +336,13 @@ const Home: React.FC = () => { )} {loading ? ( - + ) : ( - - - Title @@ -353,21 +355,21 @@ const Home: React.FC = () => { {currentFilteredData.map((item) => ( - - - {getStatusIcon(item)} - - {item.title} - + + {getStatusIcon(item)} + + {item.title} + - {item.repository_url.split("/").slice(-1)[0]} @@ -377,11 +379,9 @@ const Home: React.FC = () => { {formatDate(item.created_at)} - ))} -
{ rowsPerPage={ROWS_PER_PAGE} rowsPerPageOptions={[ROWS_PER_PAGE]} /> - )}