Enhance Tracker Page Appearance#696
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 45 minutes and 5 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThis PR modernizes the Tracker page UI by introducing a Card-based layout structure, new MUI components for visual chips and grid organization, status color/label helpers, and icon-adorned filter inputs. The refactored results section now displays repository and state information via colored Chips while maintaining pagination and filter functionality. ChangesTracker Page UI/UX Redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
gssoc:approved
level:intermediate
quality:clean
type:accessibility
labels
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/pages/Tracker/Tracker.tsx (1)
89-93:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winAdd missing dependencies to useEffect.
The effect references
usernameandfetchDatabut only includes[tab, page]in the dependency array. This creates a stale closure where changes tousernameorfetchDatawon't trigger a refetch, potentially causing the UI to display outdated data or skip necessary fetches.🔧 Proposed fix
useEffect(() => { if (username) { fetchData(username, page + 1, ROWS_PER_PAGE); } - }, [tab, page]); + }, [tab, page, username, fetchData]);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 89 - 93, The useEffect that calls fetchData references username and fetchData but only depends on [tab, page], causing stale closures; update the dependency array to include username and fetchData (e.g., useEffect(..., [tab, page, username, fetchData])) or alternatively wrap fetchData in useCallback so it is stable and then include it and username in the deps; ensure ROWS_PER_PAGE can remain a constant or is also included if it can change.
🧹 Nitpick comments (2)
src/pages/Tracker/Tracker.tsx (2)
531-536: ⚡ Quick winConsider displaying owner/repo for better clarity.
The repository Chip currently displays only the repo name by extracting the last URL segment. For better clarity and to avoid confusion between repos with the same name from different owners, consider displaying the full "owner/repo" format.
🎨 Proposed enhancement
<TableCell align="center" sx={{ py: 2 }}> <Chip - label={item.repository_url.split("/").slice(-1)[0]} + label={item.repository_url.split("/").slice(-2).join("/")} size="small" variant="outlined" /> </TableCell>This would display "owner/repo" instead of just "repo", making it clearer which repository the item belongs to.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 531 - 536, The repository Chip currently shows only the repo name by using item.repository_url.split(...); update the label to show "owner/repo" instead: parse the owner and repo from item.repository_url (e.g., take the last two path segments) or, if the item already has owner/name fields, use those; replace the label expression in the Chip inside Tracker component (the <Chip ... label=... /> usage) so it renders `${owner}/${repo}` for clarity.
108-145: ⚡ Quick winConsider memoizing filtered data for better performance.
The
filterDatafunction is called on every render (line 169), performing multiple array filter operations each time. For large datasets, this could impact performance. Consider usinguseMemoto cache the filtered results.⚡ Proposed optimization
+ const currentFilteredData = useMemo(() => { + return filterData( + currentRawData, + tab === 0 ? issueFilter : prFilter + ); + }, [currentRawData, tab, issueFilter, prFilter, searchTitle, selectedRepo, startDate, endDate]); + - const currentRawData = tab === 0 ? issues : prs; - const currentFilteredData = filterData(currentRawData, tab === 0 ? issueFilter : prFilter); - const totalCount = tab === 0 ? totalIssues : totalPrs; + const currentRawData = tab === 0 ? issues : prs; + const totalCount = tab === 0 ? totalIssues : totalPrs;Also applies to: 169-169
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/pages/Tracker/Tracker.tsx` around lines 108 - 145, filterData is being recomputed on every render which hurts performance for large datasets; wrap the filtered results in a useMemo so the expensive array filtering only runs when inputs change. Replace the direct call pattern (where filterData(...) is invoked) with a memoized value computed via useMemo that depends on the source list plus searchTitle, selectedRepo, startDate, endDate and the current filterType (or any other props/state used inside filterData); you can keep filterData as a pure helper or inline its logic inside the useMemo, but ensure the dependency array includes the unique symbols: filterData (or the source array), searchTitle, selectedRepo, startDate, endDate and filterType. Ensure the rest of the component reads from that memoized value instead of calling filterData each render.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 317-378: The filter inputs (searchTitle, selectedRepo, startDate,
endDate) only update local state but are not passed to fetchData, so server-side
filtering via the useGitHubData hook is never used; modify the component to
build a filters object from those state vars and pass it into fetchData (the
fetchData(filters) parameter used by useGitHubData) instead of relying solely on
client-side filterData, include those filter state vars in the useEffect
dependency array that calls fetchData so changes trigger a refetch, and
optionally wire an "Apply Filters" button or add debouncing to avoid excessive
API calls when typing.
- Line 239: Remove the HTML required attribute from the token input in the
Tracker component so the Personal Access Token is optional (remove "required" on
the token <input> inside Tracker.tsx). Also update any client-side form
validation or schema related to the token field (e.g., validation logic in
handleSubmit/validateToken or the form's validation rules in Tracker component)
to treat token as optional consistent with useGitHubAuth behavior.
---
Outside diff comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 89-93: The useEffect that calls fetchData references username and
fetchData but only depends on [tab, page], causing stale closures; update the
dependency array to include username and fetchData (e.g., useEffect(..., [tab,
page, username, fetchData])) or alternatively wrap fetchData in useCallback so
it is stable and then include it and username in the deps; ensure ROWS_PER_PAGE
can remain a constant or is also included if it can change.
---
Nitpick comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Around line 531-536: The repository Chip currently shows only the repo name by
using item.repository_url.split(...); update the label to show "owner/repo"
instead: parse the owner and repo from item.repository_url (e.g., take the last
two path segments) or, if the item already has owner/name fields, use those;
replace the label expression in the Chip inside Tracker component (the <Chip ...
label=... /> usage) so it renders `${owner}/${repo}` for clarity.
- Around line 108-145: filterData is being recomputed on every render which
hurts performance for large datasets; wrap the filtered results in a useMemo so
the expensive array filtering only runs when inputs change. Replace the direct
call pattern (where filterData(...) is invoked) with a memoized value computed
via useMemo that depends on the source list plus searchTitle, selectedRepo,
startDate, endDate and the current filterType (or any other props/state used
inside filterData); you can keep filterData as a pure helper or inline its logic
inside the useMemo, but ensure the dependency array includes the unique symbols:
filterData (or the source array), searchTitle, selectedRepo, startDate, endDate
and filterType. Ensure the rest of the component reads from that memoized value
instead of calling filterData each render.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4703cc4e-d298-4e3b-a4f0-84eae7f8a736
📒 Files selected for processing (1)
src/pages/Tracker/Tracker.tsx
1 participant
Related Issue
Description
Refreshed the Tracker page UI/UX to provide a more modern, professional, and user-friendly experience while preserving all existing functionality.
Changes made:
Added a visually improved header with better hierarchy and typography
Reorganized content into responsive card-based sections
Enhanced authentication and filter forms with improved layouts, labels, and placeholders
Improved table design with:
Added loading states with spinner and descriptive messaging
Added user-friendly empty state and error handling
Implemented responsive layouts for mobile, tablet, and desktop screens
Ensured full dark mode compatibility
Improved accessibility through clearer labels, helper text, and focus states
The update follows the project's TailwindCSS and Material UI design patterns and improves overall usability without changing existing behavior.
How Has This Been Tested?
Screenshots (if applicable)
Add screenshots/GIFs demonstrating the updated Tracker page UI here.
Type of Change
Summary by CodeRabbit
New Features
Style