diff --git a/src/hooks/useGitHubRepos.ts b/src/hooks/useGitHubRepos.ts new file mode 100644 index 00000000..fa3295d7 --- /dev/null +++ b/src/hooks/useGitHubRepos.ts @@ -0,0 +1,78 @@ +import { useState, useCallback } from 'react'; +import { Octokit } from '@octokit/core'; + +export interface GitHubRepo { + id: number; + name: string; + full_name: string; + html_url: string; + description: string | null; + language: string | null; + stargazers_count: number; + forks_count: number; + open_issues_count: number; + visibility: string; + fork: boolean; + pushed_at: string; + created_at: string; + updated_at: string; + topics: string[]; + license: { name: string } | null; + default_branch: string; + size: number; +} + +export const useGitHubRepos = (getOctokit: () => Octokit | null) => { + const [repos, setRepos] = useState([]); + const [totalRepos, setTotalRepos] = useState(0); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(''); + + const fetchRepos = useCallback( + async (username: string, page = 1, perPage = 12) => { + const octokit = getOctokit(); + if (!octokit || !username.trim()) return; + + setLoading(true); + setError(''); + + try { + const response = await octokit.request('GET /users/{username}/repos', { + username, + per_page: perPage, + page, + sort: 'pushed', + direction: 'desc', + type: 'owner', + }); + + const linkHeader = (response.headers as any)?.link ?? ''; + const lastMatch = linkHeader.match(/page=(\d+)>; rel="last"/); + const total = lastMatch + ? parseInt(lastMatch[1], 10) * perPage + : (page - 1) * perPage + response.data.length; + + setRepos(response.data as GitHubRepo[]); + setTotalRepos(total); + } catch (err: any) { + const status = err?.status; + const message = err?.message?.toLowerCase() ?? ''; + + if (status === 403) { + setError('GitHub API rate limit exceeded. Please provide a PAT to continue.'); + } else if (status === 404 || message.includes('not found')) { + setError('User not found. Please check the GitHub username.'); + } else if (status === 401) { + setError('Invalid token. Please check your Personal Access Token.'); + } else { + setError('Unable to fetch repositories. Please verify the username or network connection.'); + } + } finally { + setLoading(false); + } + }, + [getOctokit] + ); + + return { repos, totalRepos, loading, error, fetchRepos }; +}; \ No newline at end of file diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx index 576f39bf..494814e1 100644 --- a/src/pages/Tracker/Tracker.tsx +++ b/src/pages/Tracker/Tracker.tsx @@ -1,16 +1,41 @@ -import React, { useState, useEffect } from "react" +/** + * Tracker.tsx — Improved UI/UX + * Changes from original (minimal): + * + Added RepoIcon, RepoForkedIcon, StarIcon, LockIcon imports + * + Added BookOpen, GitFork, Star imports from lucide-react + * + Added useGitHubRepos hook + * + Added GitHubRepo type import + * + Added REPOS_PER_PAGE constant + * + Added LANG_COLORS, timeAgo, fmtNum helpers + * + Added RepoCard component + * + Added ReposSection component + * + tab type extended to include "repos" + * + Added repoPage state + * + Added useEffect for repo tab pagination + * + handleSubmit now also calls fetchRepos + * + Added 2 new stat cards (Repositories, Total Stars) + * + Tab list now includes Repositories tab + * + ReposSection rendered when tab === "repos" + * Everything else is IDENTICAL to your original code + */ + +import React, { useState, useEffect, useCallback, useRef } from "react"; +import type { GitHubRepo } from "../../hooks/useGitHubRepos"; import { IssueOpenedIcon, IssueClosedIcon, GitPullRequestIcon, GitPullRequestClosedIcon, GitMergeIcon, -} from '@primer/octicons-react'; + RepoIcon, + RepoForkedIcon, + StarIcon, + LockIcon, +} from "@primer/octicons-react"; +import { useTheme } from "@mui/material/styles"; import { Container, Box, - TextField, - Button, Paper, Table, TableBody, @@ -19,22 +44,38 @@ import { TableHead, TableRow, TablePagination, + TableSortLabel, Link, - CircularProgress, Alert, - Tabs, - Tab, - Select, - MenuItem, - FormControl, - InputLabel, + Skeleton, + Chip, + Tooltip, + IconButton, + Collapse, + TextField, } from "@mui/material"; -import { useTheme } from "@mui/material/styles"; +import { + Search, + Key, + SlidersHorizontal, + Download, + ChevronDown, + ChevronUp, + AlertCircle, + GitPullRequest, + CircleDot, + XCircle, + CheckCircle2, + BookOpen, + GitFork, + Star, +} from "lucide-react"; +import toast from "react-hot-toast"; import { useGitHubAuth } from "../../hooks/useGitHubAuth"; import { useGitHubData } from "../../hooks/useGitHubData"; -import { KeyIcon } from "lucide-react"; +import { useGitHubRepos } from "../../hooks/useGitHubRepos"; -const ROWS_PER_PAGE = 10; +// ─── types ──────────────────────────────────────────────────────────────────── interface GitHubItem { id: number; @@ -46,358 +87,1015 @@ interface GitHubItem { html_url: string; } -const Home: React.FC = () => { +type SortKey = "title" | "repository_url" | "state" | "created_at"; +type SortDir = "asc" | "desc"; +type RepoSort = "pushed_at" | "stargazers_count" | "forks_count" | "name" | "open_issues_count"; + +// ─── constants ──────────────────────────────────────────────────────────────── + +const ROWS_PER_PAGE = 10; +const REPOS_PER_PAGE = 12; + +// Language colour map +const LANG_COLORS: Record = { + TypeScript: "#3178c6", JavaScript: "#f1e05a", Python: "#3572A5", + Java: "#b07219", "C++": "#f34b7d", C: "#555555", "C#": "#178600", + Go: "#00ADD8", Rust: "#dea584", Ruby: "#701516", PHP: "#4F5D95", + Swift: "#F05138", Kotlin: "#A97BFF", Shell: "#89e051", + HTML: "#e34c26", CSS: "#563d7c", Dart: "#00B4AB", Scala: "#c22d40", + R: "#198CE7", Vue: "#41b883", Svelte: "#ff3e00", +}; + +// ─── helpers ────────────────────────────────────────────────────────────────── + +const formatDate = (d: string) => + new Date(d).toLocaleDateString(undefined, { + year: "numeric", + month: "short", + day: "numeric", + }); + +// NEW helper — relative time for repo cards +const timeAgo = (d: string) => { + const days = Math.floor((Date.now() - new Date(d).getTime()) / 86400000); + if (days === 0) return "today"; + if (days === 1) return "yesterday"; + if (days < 30) return `${days}d ago`; + if (days < 365) return `${Math.floor(days / 30)}mo ago`; + return `${Math.floor(days / 365)}y ago`; +}; + +// NEW helper — compact number format +const fmtNum = (n: number) => + n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n); + +const getRepoName = (url: string) => url.split("/").slice(-1)[0]; + +const getItemState = (item: GitHubItem): string => { + if (item.pull_request?.merged_at) return "merged"; + return item.state; +}; + +function exportCSV(data: GitHubItem[], filename = "tracker-export.csv") { + const header = ["Title", "Repository", "State", "Created", "URL"]; + const rows = data.map((item) => [ + `"${item.title.replace(/"/g, '""')}"`, + getRepoName(item.repository_url), + getItemState(item), + formatDate(item.created_at), + item.html_url, + ]); + const csv = [header, ...rows].map((r) => r.join(",")).join("\n"); + const blob = new Blob([csv], { type: "text/csv" }); + const url = URL.createObjectURL(blob); + const a = document.createElement("a"); + a.href = url; + a.download = filename; + a.click(); + URL.revokeObjectURL(url); +} + +// ─── StatCard — UNCHANGED ───────────────────────────────────────────────────── + +const StatCard: React.FC<{ + label: string; + value: number; + icon: React.ReactNode; + color: string; + bg: string; +}> = ({ label, value, icon, color, bg }) => ( + + + {icon} + + + + {value.toLocaleString()} + + + {label} + + + +); + +// ─── SkeletonRow — UNCHANGED ────────────────────────────────────────────────── + +const SkeletonRow: React.FC = () => ( + + {[180, 100, 70, 90].map((w, i) => ( + + + + ))} + +); + +// ─── StatusIcon — UNCHANGED (with aria-label fix) ──────────────────────────── + +const StatusIcon: React.FC<{ item: GitHubItem }> = ({ item }) => { + if (item.pull_request) { + if (item.pull_request.merged_at) + return ; + if (item.state === "closed") + return ; + return ; + } + if (item.state === "closed") + return ; + return ; +}; + +// ─── StateBadge — UNCHANGED ─────────────────────────────────────────────────── + +const StateBadge: React.FC<{ state: string }> = ({ state }) => { + const map: Record = { + open: { color: "success", label: "Open" }, + closed: { color: "error", label: "Closed" }, + merged: { color: "secondary", label: "Merged" }, + }; + const cfg = map[state] ?? { color: "default", label: state }; + return ( + + ); +}; + +// ─── EmptyState — UNCHANGED ─────────────────────────────────────────────────── + +const EmptyState: React.FC<{ searched: boolean }> = ({ searched }) => ( + + + + + + {searched ? "No results match your filters" : "Track a GitHub user"} + + + {searched + ? "Try adjusting the filters or clearing the date range." + : "Enter a GitHub username above and click Fetch Data to see their issues and pull requests."} + + +); + +// ─── NEW: RepoCard ──────────────────────────────────────────────────────────── + +const RepoCard: React.FC<{ repo: GitHubRepo; borderCol: string }> = ({ repo, borderCol }) => { + const langColor = repo.language ? (LANG_COLORS[repo.language] ?? "#8b949e") : null; + + return ( + + {/* Header */} + + + + {repo.fork ? : } + + + {repo.name} + + + + {repo.visibility === "private" && ( + + + + )} + + + + + {/* Description */} + + {repo.description ?? ( + No description + )} + + + {/* Topics */} + {repo.topics.length > 0 && ( + + {repo.topics.slice(0, 4).map((t) => ( + + ))} + {repo.topics.length > 4 && ( + + )} + + )} + + {/* Footer stats */} + + {repo.language && ( + + + {repo.language} + + )} + + + {fmtNum(repo.stargazers_count)} + + + + + {fmtNum(repo.forks_count)} + + + {repo.open_issues_count > 0 && ( + + + {fmtNum(repo.open_issues_count)} + + + )} + {repo.license && ( + {repo.license.name} + )} + + Updated {timeAgo(repo.pushed_at)} + + + + ); +}; + +// ─── NEW: ReposSection ──────────────────────────────────────────────────────── + +const ReposSection: React.FC<{ + repos: GitHubRepo[]; + totalRepos: number; + loading: boolean; + error: string; + page: number; + onPageChange: (page: number) => void; + borderCol: string; +}> = ({ repos, totalRepos, loading, error, page, onPageChange, borderCol }) => { + + const [search, setSearch] = useState(""); + const [langFilter, setLangFilter] = useState("All"); + const [sort, setSort] = useState("pushed_at"); + const [sortDir, setSortDir] = useState("desc"); + const [showForks, setShowForks] = useState(true); + + const languages = [ + "All", + ...Array.from(new Set(repos.map((r) => r.language).filter((l): l is string => l !== null))), + ]; + + const sortOptions: { key: RepoSort; label: string }[] = [ + { key: "pushed_at", label: "Last updated" }, + { key: "stargazers_count", label: "Stars" }, + { key: "forks_count", label: "Forks" }, + { key: "open_issues_count", label: "Open issues" }, + { key: "name", label: "Name" }, + ]; + + const filtered = repos + .filter((r) => { + if (!showForks && r.fork) return false; + if (langFilter !== "All" && r.language !== langFilter) return false; + if (search && + !r.name.toLowerCase().includes(search.toLowerCase()) && + !(r.description ?? "").toLowerCase().includes(search.toLowerCase())) return false; + return true; + }) + .sort((a, b) => { + const av = (a as any)[sort] ?? 0; + const bv = (b as any)[sort] ?? 0; + const cmp = typeof av === "string" ? av.localeCompare(bv) : av < bv ? -1 : av > bv ? 1 : 0; + return sortDir === "asc" ? cmp : -cmp; + }); + + const totalStars = repos.reduce((s, r) => s + r.stargazers_count, 0); + const totalForks = repos.reduce((s, r) => s + r.forks_count, 0); + + return ( + + {/* Mini stat row */} + {!loading && repos.length > 0 && ( + + {[ + { icon: , label: `${totalRepos} repositories` }, + { icon: , label: `${fmtNum(totalStars)} stars total` }, + { icon: , label: `${fmtNum(totalForks)} forks total` }, + ].map(({ icon, label }) => ( + + {icon} {label} + + ))} + + )} + + {/* Toolbar */} + + {/* Search */} + + + + {/* Error */} + {error && ( + } sx={{ mb: 2, borderRadius: 2 }}> + {error} + + )} + + {/* Card grid */} + {loading ? ( + + {Array.from({ length: 6 }).map((_, i) => ( + + + + + + + + + + + ))} + + ) : filtered.length === 0 ? ( + + + + No repositories found + Try adjusting your filters. + + + ) : ( + <> + + Showing {filtered.length} of {repos.length} repositories on this page + + + {filtered.map((repo) => ( + + ))} + + + )} + + {/* Pagination */} + {!loading && totalRepos > REPOS_PER_PAGE && ( + + onPageChange(page - 1)} + aria-label="Previous page" sx={{ border: `1px solid ${borderCol}`, borderRadius: 2 }}> + + + + Page {page + 1} of {Math.ceil(totalRepos / REPOS_PER_PAGE)} + + = totalRepos} + onClick={() => onPageChange(page + 1)} aria-label="Next page" + sx={{ border: `1px solid ${borderCol}`, borderRadius: 2 }}> + + + + )} + + ); +}; + +// ─── main component ─────────────────────────────────────────────────────────── +const Tracker: React.FC = () => { const theme = useTheme(); + const isDark = theme.palette.mode === "dark"; + + const { username, setUsername, token, setToken, getOctokit } = useGitHubAuth(); + const { issues, prs, totalIssues, totalPrs, loading, error: dataError, fetchData } = + useGitHubData(getOctokit); - const { - username, - setUsername, - token, - setToken, - error: authError, - getOctokit, - } = useGitHubAuth(); - - const { - issues, - prs, - totalIssues, - totalPrs, - loading, - error: dataError, - fetchData, - } = useGitHubData(getOctokit); - - const [tab, setTab] = useState(0); - const [page, setPage] = useState(0); - - const [issueFilter, setIssueFilter] = useState("all"); - const [prFilter, setPrFilter] = useState("all"); + // NEW: repos hook + const { repos, totalRepos, loading: reposLoading, error: reposError, fetchRepos } = + useGitHubRepos(getOctokit); + + // tab now includes "repos" + const [tab, setTab] = useState<"issues" | "prs" | "repos">("issues"); + const [page, setPage] = useState(0); + const [repoPage, setRepoPage] = useState(0); // NEW + const [showFilters, setShowFilters] = useState(false); + const [hasFetched, setHasFetched] = useState(false); + + const [stateFilter, setStateFilter] = useState("all"); const [searchTitle, setSearchTitle] = useState(""); const [selectedRepo, setSelectedRepo] = useState(""); - const [startDate, setStartDate] = useState(""); - const [endDate, setEndDate] = useState(""); + const [startDate, setStartDate] = useState(""); + const [endDate, setEndDate] = useState(""); + + const [sortKey, setSortKey] = useState("created_at"); + const [sortDir, setSortDir] = useState("desc"); - // Fetch data when username, tab, or page changes + const prevFetched = useRef(false); + + // UNCHANGED: re-fetch issues/prs on tab or page change useEffect(() => { - if (username) { + if (prevFetched.current && username && tab !== "repos") { fetchData(username, page + 1, ROWS_PER_PAGE); } - }, [tab, page]); - - const handleSubmit = (e: React.FormEvent): void => { - e.preventDefault(); - setPage(0); - fetchData(username, 1, ROWS_PER_PAGE); - }; + }, [tab, page]); // eslint-disable-line react-hooks/exhaustive-deps - const handlePageChange = (_: unknown, newPage: number) => { - setPage(newPage); - }; - - const formatDate = (dateString: string): string => - new Date(dateString).toLocaleDateString(); + // NEW: re-fetch repos on repoPage change + useEffect(() => { + if (prevFetched.current && username && tab === "repos") { + fetchRepos(username, repoPage + 1, REPOS_PER_PAGE); + } + }, [repoPage]); // eslint-disable-line react-hooks/exhaustive-deps - const filterData = (data: GitHubItem[], filterType: string): GitHubItem[] => { - let filtered = [...data]; - 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 { - //open - return item.state === "open" + const handleSubmit = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + if (!username.trim()) return; + setPage(0); + setRepoPage(0); // NEW + prevFetched.current = true; + setHasFetched(true); + // fetch both simultaneously + const p1 = fetchData(username, 1, ROWS_PER_PAGE); + const p2 = fetchRepos(username, 1, REPOS_PER_PAGE); // NEW + toast.promise( + Promise.all([p1 ?? Promise.resolve(), p2 ?? Promise.resolve()]), + { + loading: `Fetching data for @${username}…`, + success: `Loaded activity for @${username}`, + error: "Fetch failed — check the error below", } - }); - } - if (searchTitle) { - filtered = filtered.filter((item) => - item.title.toLowerCase().includes(searchTitle.toLowerCase()) - ); - } - if (selectedRepo) { - filtered = filtered.filter((item) => - item.repository_url.includes(selectedRepo) - ); - } - if (startDate) { - filtered = filtered.filter( - (item) => new Date(item.created_at) >= new Date(startDate) - ); - } - if (endDate) { - filtered = filtered.filter( - (item) => new Date(item.created_at) <= new Date(endDate) ); - } - return filtered; - }; + }, + [username, fetchData, fetchRepos] + ); - const getStatusIcon = (item: GitHubItem) => { + const handleSort = (key: SortKey) => { + if (sortKey === key) setSortDir((d) => (d === "asc" ? "desc" : "asc")); + else { setSortKey(key); setSortDir("asc"); } + }; - if (item.pull_request) { + // ── filter + sort pipeline — UNCHANGED ─────────────────────────────────── - if (item.pull_request.merged_at) - return ; + const rawData = tab === "issues" ? issues : prs; - if (item.state === 'closed') - return ; + const filtered = rawData + .filter((item) => { + if (stateFilter !== "all" && getItemState(item) !== stateFilter) return false; + if (searchTitle && !item.title.toLowerCase().includes(searchTitle.toLowerCase())) return false; + if (selectedRepo && !item.repository_url.includes(selectedRepo)) return false; + if (startDate && new Date(item.created_at) < new Date(startDate)) return false; + if (endDate && new Date(item.created_at) > new Date(endDate)) return false; + return true; + }) + .sort((a, b) => { + let av: string, bv: string; + if (sortKey === "repository_url") { av = getRepoName(a.repository_url); bv = getRepoName(b.repository_url); } + else if (sortKey === "state") { av = getItemState(a); bv = getItemState(b); } + else { av = (a as any)[sortKey] ?? ""; bv = (b as any)[sortKey] ?? ""; } + const cmp = av < bv ? -1 : av > bv ? 1 : 0; + return sortDir === "asc" ? cmp : -cmp; + }); - return ; - } + const totalCount = tab === "issues" ? totalIssues : totalPrs; + const openIssues = issues.filter((i) => i.state === "open").length; + const closedIssues = issues.filter((i) => i.state === "closed").length; + const totalStars = repos.reduce((s, r) => s + r.stargazers_count, 0); // NEW - if (item.state === 'closed') - return ; + const stateOptions = tab === "prs" + ? ["all", "open", "closed", "merged"] + : ["all", "open", "closed"]; - return ; + const stateChipIcon: Record = { + all: , + open: , + closed: , + merged: , }; + const surfaceBg = isDark ? "#161b22" : "#f6f8fa"; + const cardBg = isDark ? "#0d1117" : "#ffffff"; + const borderCol = isDark ? "#30363d" : "#d0d7de"; - // 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 totalCount = tab === 0 ? totalIssues : totalPrs; + // ── render ──────────────────────────────────────────────────────────────── return ( - - {/* Auth Form */} - -
- - setUsername(e.target.value)} - required - sx={{ flex: 1, minWidth: 150 }} - /> - setToken(e.target.value)} - type="password" - required - sx={{ flex: 1, minWidth: 150 }} - helperText={ - - - - Generate new token - - - - • - - - - Learn more - - - } - /> - - -
- + - {/* Filters */} - - setSearchTitle(e.target.value)} - sx={{ minWidth: 200 }} - /> - setSelectedRepo(e.target.value)} - sx={{ minWidth: 200 }} - /> - setStartDate(e.target.value)} - InputLabelProps={{ shrink: true }} - sx={{ minWidth: 150 }} - /> - setEndDate(e.target.value)} - InputLabelProps={{ shrink: true }} - sx={{ minWidth: 150 }} - /> + {/* Page header — UNCHANGED */} + + + GitHub Activity Tracker + + + Search issues and pull requests for any GitHub user + - {/* Tabs + State Filter */} - - { - setTab(v); - setPage(0); - }} - sx={{ flex: 1 }} - > - - - - - State - - - + {loading || reposLoading ? "Fetching…" : "Fetch Data"} + + + - {(authError || dataError) && ( - - {authError || dataError} + {/* Error alerts — UNCHANGED + repos error added */} + {dataError && ( + } sx={{ mb: 3, borderRadius: 2 }} role="alert"> + {dataError} + + )} + {reposError && ( + } sx={{ mb: 3, borderRadius: 2 }} role="alert"> + {reposError} )} - {loading ? ( - - + {/* ── Stat cards — original 4 UNCHANGED + 2 new ones ──────────────── */} + {hasFetched && ( + + } color={isDark ? "#79c0ff" : "#0969da"} bg={isDark ? "rgba(121,192,255,.12)" : "rgba(9,105,218,.08)"} /> + } color={isDark ? "#56d364" : "#1a7f37"} bg={isDark ? "rgba(86,211,100,.12)" : "rgba(26,127,55,.08)"} /> + } color={isDark ? "#ff7b72" : "#cf222e"} bg={isDark ? "rgba(255,123,114,.12)" : "rgba(207,34,46,.08)"} /> + } color={isDark ? "#d2a8ff" : "#8250df"} bg={isDark ? "rgba(210,168,255,.12)" : "rgba(130,80,223,.08)"} /> + {/* NEW */} + } color={isDark ? "#ffa657" : "#bc4c00"} bg={isDark ? "rgba(255,166,87,.12)" : "rgba(188,76,0,.08)"} /> + } color={isDark ? "#e3b341" : "#9a6700"} bg={isDark ? "rgba(227,179,65,.12)" : "rgba(154,103,0,.08)"} /> - ) : ( - + )} + + {/* ── Tabs — original 2 UNCHANGED + Repositories tab added ────────── */} + {hasFetched && ( + + + + {([ + { key: "issues" as const, label: `Issues (${totalIssues})` }, + { key: "prs" as const, label: `Pull Requests (${totalPrs})` }, + { key: "repos" as const, label: `Repositories (${totalRepos})` }, // NEW + ]).map(({ key, label }) => ( + { setTab(key); setPage(0); setStateFilter("all"); }} + onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { setTab(key); setPage(0); setStateFilter("all"); } }} + sx={{ + px: 2.5, py: 0.875, borderRadius: 5, + fontSize: "0.82rem", fontWeight: 600, cursor: "pointer", + transition: "background .15s, color .15s", + bgcolor: tab === key ? (isDark ? "rgba(88,166,255,.2)" : "rgba(9,105,218,.1)") : "transparent", + color: tab === key ? "primary.main" : "text.secondary", + border: `1px solid ${tab === key ? "primary.main" : "transparent"}`, + "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: "2px" }, + "&:hover": { bgcolor: isDark ? "rgba(88,166,255,.1)" : "rgba(9,105,218,.06)" }, + }} + > + {label} + + ))} + - + - + {/* Filter + CSV — hidden on repos tab, UNCHANGED otherwise */} + {tab !== "repos" && ( + <> + + setShowFilters((v) => !v)} + aria-expanded={showFilters} + aria-controls="advanced-filters" + aria-label="Toggle advanced filters" + sx={{ border: `1px solid ${borderCol}`, borderRadius: 2, px: 1.5, py: 0.75, gap: 0.75, fontSize: "0.78rem", color: "text.secondary" }} + > + + + + + { exportCSV(filtered, `github-${username}-${tab}.csv`); toast.success("CSV downloaded"); }} + aria-label="Export results as CSV" + disabled={filtered.length === 0} + sx={{ border: `1px solid ${borderCol}`, borderRadius: 2, px: 1.5, py: 0.75 }} + > + + + + + )} + + )} + {/* ── Quick filter chips — UNCHANGED, hidden on repos tab ─────────── */} + {hasFetched && tab !== "repos" && ( + + {stateOptions.map((opt) => ( + } + onClick={() => setStateFilter(opt)} + variant={stateFilter === opt ? "filled" : "outlined"} + color={stateFilter === opt ? "primary" : "default"} + size="small" + aria-pressed={stateFilter === opt} + sx={{ cursor: "pointer", fontWeight: stateFilter === opt ? 600 : 400 }} + /> + ))} + {(searchTitle || selectedRepo || startDate || endDate) && ( + { setSearchTitle(""); setSelectedRepo(""); setStartDate(""); setEndDate(""); setStateFilter("all"); }} + aria-label="Clear all filters" + sx={{ cursor: "pointer" }} + /> + )} + + )} + + {/* ── Advanced filters — UNCHANGED, hidden on repos tab ───────────── */} + {tab !== "repos" && ( + + + + setSearchTitle(e.target.value)} aria-label="Filter by title keyword" /> + setSelectedRepo(e.target.value)} aria-label="Filter by repository name" /> + setStartDate(e.target.value)} InputLabelProps={{ shrink: true }} aria-label="Start date filter" /> + setEndDate(e.target.value)} InputLabelProps={{ shrink: true }} aria-label="End date filter" /> + + + + )} + + {/* ── NEW: Repositories tab content ───────────────────────────────── */} + {hasFetched && tab === "repos" && ( + + )} + + {/* ── Results table — UNCHANGED, hidden on repos tab ──────────────── */} + {hasFetched && tab !== "repos" && ( + <> + {!loading && ( + + Showing {filtered.length} {filtered.length === 1 ? "result" : "results"} + {stateFilter !== "all" || searchTitle || selectedRepo ? " (filtered)" : ` of ${totalCount} total`} + + )} + + +
- - Title - Repository - State - Created + + {([ + { key: "title", label: "Title", align: "left" }, + { key: "repository_url", label: "Repository", align: "center" }, + { key: "state", label: "State", align: "center" }, + { key: "created_at", label: "Created", align: "left" }, + ] as { key: SortKey; label: string; align: "left" | "center" }[]).map(({ key, label, align }) => ( + + handleSort(key)} aria-label={`Sort by ${label}`}> + {label} + + + ))} - {currentFilteredData.map((item) => ( - - - - {getStatusIcon(item)} - ) + : filtered.length === 0 + ? ( + + + + + + ) + : filtered.map((item) => ( + + + + + + + sx={{ + fontSize: "0.82rem", fontWeight: 500, color: "text.primary", + overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", + "&:hover": { color: "primary.main" }, + "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: "2px", borderRadius: 0.5 }, + }} + title={item.title} + aria-label={`${item.title} (opens in new tab)`} + > {item.title} - - - + + + - - {item.repository_url.split("/").slice(-1)[0]} - + + + - - {item.pull_request?.merged_at ? "merged" : item.state} - + + + - {formatDate(item.created_at)} + + {formatDate(item.created_at)} + - - ))} + + ))} -
- - + {!loading && filtered.length > 0 && ( + setPage(newPage)} + rowsPerPage={ROWS_PER_PAGE} + rowsPerPageOptions={[ROWS_PER_PAGE]} + aria-label="Table pagination" + sx={{ borderTop: `1px solid ${borderCol}` }} + /> + )} - + )} + + {/* Pre-search prompt — UNCHANGED */} + {!hasFetched && !loading && ( + + + + )} + ); }; -export default Home; +export default Tracker; \ No newline at end of file