From 37a27eb2d44af44273ca21837ee9f201c360f925 Mon Sep 17 00:00:00 2001 From: Chetna Singh <138278109+itschetna@users.noreply.github.com> Date: Thu, 31 Jul 2025 20:18:33 +0530 Subject: [PATCH 1/2] Enhance PR section with type badges, state, merged status, and merged date --- src/pages/Home/Home.tsx | 58 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 57 insertions(+), 1 deletion(-) diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index d0ff154..6cfd824 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -25,6 +25,35 @@ import { import { useTheme } from "@mui/material/styles"; import { useGitHubAuth } from "../../hooks/useGitHubAuth"; import { useGitHubData } from "../../hooks/useGitHubData"; +// Helper to extract PR type from title +function getPRType(title: string): string { + const lower = title.toLowerCase(); + if (lower.includes("feature")) return "Feature"; + if (lower.includes("fix")) return "Fix"; + if (lower.includes("cleanup") || lower.includes("refactor")) return "Cleanup"; + if (lower.includes("docs")) return "Docs"; + if (lower.includes("test")) return "Test"; + return "Other"; +} + +// Tailwind class based on PR type +function getBadgeStyle(type: string): string { + switch (type) { + case "Feature": + return "bg-green-100 text-green-800"; + case "Fix": + return "bg-red-100 text-red-800"; + case "Cleanup": + return "bg-yellow-100 text-yellow-800"; + case "Docs": + return "bg-blue-100 text-blue-800"; + case "Test": + return "bg-purple-100 text-purple-800"; + default: + return "bg-gray-100 text-gray-800"; + } +} + const ROWS_PER_PAGE = 10; @@ -51,7 +80,7 @@ const Home: React.FC = () => { getOctokit, } = useGitHubAuth(); - //const octokit = getOctokit(); + //const octokit = getOctokit(); const { issues, @@ -262,9 +291,14 @@ const Home: React.FC = () => { Title Repository State + Type Created + {tab === 1 && Merged} + {tab === 1 && Merged Date} + + {currentFilteredData.map((item) => ( @@ -285,10 +319,32 @@ const Home: React.FC = () => { {item.pull_request?.merged_at ? "merged" : item.state} + + {/* 🆕 PR Type Label */} + + + {getPRType(item.title)} + + + {formatDate(item.created_at)} + + {tab === 1 && ( + + {item.pull_request?.merged_at ? "Yes" : "No"} + + )} + {tab === 1 && ( + + {item.pull_request?.merged_at + ? formatDate(item.pull_request.merged_at) + : "-"} + + )} ))} + Date: Thu, 31 Jul 2025 20:27:14 +0530 Subject: [PATCH 2/2] Delete src/pages/Home/Home.tsx --- src/pages/Home/Home.tsx | 364 ---------------------------------------- 1 file changed, 364 deletions(-) delete mode 100644 src/pages/Home/Home.tsx diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx deleted file mode 100644 index 6cfd824..0000000 --- a/src/pages/Home/Home.tsx +++ /dev/null @@ -1,364 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { - Container, - Box, - TextField, - Button, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableHead, - TableRow, - TablePagination, - Link, - CircularProgress, - Alert, - Tabs, - Tab, - Select, - MenuItem, - FormControl, - InputLabel, -} from "@mui/material"; -import { useTheme } from "@mui/material/styles"; -import { useGitHubAuth } from "../../hooks/useGitHubAuth"; -import { useGitHubData } from "../../hooks/useGitHubData"; -// Helper to extract PR type from title -function getPRType(title: string): string { - const lower = title.toLowerCase(); - if (lower.includes("feature")) return "Feature"; - if (lower.includes("fix")) return "Fix"; - if (lower.includes("cleanup") || lower.includes("refactor")) return "Cleanup"; - if (lower.includes("docs")) return "Docs"; - if (lower.includes("test")) return "Test"; - return "Other"; -} - -// Tailwind class based on PR type -function getBadgeStyle(type: string): string { - switch (type) { - case "Feature": - return "bg-green-100 text-green-800"; - case "Fix": - return "bg-red-100 text-red-800"; - case "Cleanup": - return "bg-yellow-100 text-yellow-800"; - case "Docs": - return "bg-blue-100 text-blue-800"; - case "Test": - return "bg-purple-100 text-purple-800"; - default: - return "bg-gray-100 text-gray-800"; - } -} - - -const ROWS_PER_PAGE = 10; - -interface GitHubItem { - id: number; - title: string; - state: string; - created_at: string; - pull_request?: { merged_at: string | null }; - repository_url: string; - html_url: string; -} - -const Home: React.FC = () => { - - const theme = useTheme(); - - const { - username, - setUsername, - token, - setToken, - error: authError, - getOctokit, - } = useGitHubAuth(); - - //const octokit = getOctokit(); - - 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"); - const [searchTitle, setSearchTitle] = useState(""); - const [selectedRepo, setSelectedRepo] = useState(""); - const [startDate, setStartDate] = useState(""); - const [endDate, setEndDate] = useState(""); - - // Fetch data when username, tab, or page changes - useEffect(() => { - if (username) { - 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); - }; - - const handlePageChange = (_: unknown, newPage: number) => { - setPage(newPage); - }; - - const formatDate = (dateString: string): string => - new Date(dateString).toLocaleDateString(); - - const filterData = (data: GitHubItem[], filterType: string): GitHubItem[] => { - let filtered = [...data]; - if (["open", "closed", "merged"].includes(filterType)) { - filtered = filtered.filter((item) => - filterType === "merged" - ? !!item.pull_request?.merged_at - : item.state === filterType - ); - } - 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; - }; - - // 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; - - 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 }} - /> - - -
- - - {/* 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 }} - /> - - - {/* Tabs + State Filter */} - - { - setTab(v); - setPage(0); - }} - sx={{ flex: 1 }} - > - - - - - State - - - - - {(authError || dataError) && ( - - {authError || dataError} - - )} - - {loading ? ( - - - - ) : ( - - - - - - Title - Repository - State - Type - Created - {tab === 1 && Merged} - {tab === 1 && Merged Date} - - - - - - {currentFilteredData.map((item) => ( - - - - {item.title} - - - - {item.repository_url.split("/").slice(-1)[0]} - - - {item.pull_request?.merged_at ? "merged" : item.state} - - - {/* 🆕 PR Type Label */} - - - {getPRType(item.title)} - - - - {formatDate(item.created_at)} - - {tab === 1 && ( - - {item.pull_request?.merged_at ? "Yes" : "No"} - - )} - {tab === 1 && ( - - {item.pull_request?.merged_at - ? formatDate(item.pull_request.merged_at) - : "-"} - - )} - - ))} - - -
- - - - )} - - ); -}; - -export default Home;