Skip to content

Enhance PR section with type badges, state, merged status, and merged… #163

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
mehul-m-prajapati merged 1 commit into from
Aug 1, 2025
Merged

Enhance PR section with type badges, state, merged status, and merged… #163

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
56 changes: 55 additions & 1 deletion src/pages/Home/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,34 @@ 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;

Expand All @@ -51,7 +79,7 @@ const Home: React.FC = () => {
getOctokit,
} = useGitHubAuth();

//const octokit = getOctokit();
//const octokit = getOctokit();

const {
issues,
Expand Down Expand Up @@ -262,9 +290,13 @@ const Home: React.FC = () => {
<TableCell>Title</TableCell>
<TableCell align="center">Repository</TableCell>
<TableCell align="center">State</TableCell>
<TableCell>Type</TableCell>
<TableCell>Created</TableCell>
{tab === 1 && <TableCell align="center">Merged</TableCell>}
{tab === 1 && <TableCell>Merged Date</TableCell>}
</TableRow>
</TableHead>

<TableBody>
{currentFilteredData.map((item) => (
<TableRow key={item.id}>
Expand All @@ -285,10 +317,32 @@ const Home: React.FC = () => {
<TableCell align="center">
{item.pull_request?.merged_at ? "merged" : item.state}
</TableCell>

{/* 🆕 PR Type Label */}
<TableCell>
<span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}>
{getPRType(item.title)}
</span>
</TableCell>
Comment on lines +321 to +326
Copy link
Contributor

@coderabbitai coderabbitai bot Jul 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider semantic correctness for issue categorization.

The badge is applied to both issues and PRs, but getPRType suggests it's specifically for pull requests. Issues may not follow the same naming conventions, potentially leading to incorrect categorization.

Consider renaming the function or creating separate logic:

-                    {/* 🆕 PR Type Label */}
+                    {/* 🆕 Type Label */}
                     <TableCell>
-                      <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getPRType(item.title))}`}>
-                        {getPRType(item.title)}
+                      <span className={`px-2 py-1 rounded-full text-xs font-semibold ${getBadgeStyle(getItemType(item.title))}`}>
+                        {getItemType(item.title)}
                       </span>
                     </TableCell>

And rename the helper function:

-function getPRType(title: string): string {
+function getItemType(title: string): string {

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In src/pages/Home/Home.tsx around lines 321 to 326, the function getPRType is
used to categorize both issues and pull requests, which may cause incorrect
labeling since issues might not follow PR naming conventions. Rename getPRType
to a more generic name like getIssueOrPRType or create separate functions for
issues and PRs to handle their categorization correctly. Update all references
accordingly to ensure semantic correctness in badge labeling.


<TableCell>{formatDate(item.created_at)}</TableCell>

{tab === 1 && (
<TableCell align="center">
{item.pull_request?.merged_at ? "Yes" : "No"}
</TableCell>
)}
{tab === 1 && (
<TableCell>
{item.pull_request?.merged_at
? formatDate(item.pull_request.merged_at)
: "-"}
</TableCell>
)}
</TableRow>
))}
</TableBody>

</Table>
<TablePagination
component="div"
Expand Down