feat: Enhanced GitHub username input page,added loading state,handled…#557
feat: Enhanced GitHub username input page,added loading state,handled…#557AnishCoder2006 wants to merge 1 commit into
Conversation
… error conditions and Improved Activity page spacing tracking
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughActivity page gains a controlled username input form that trims and validates user entries before passing the username to ActivityFeed. ActivityFeed now validates non-empty usernames, checks GitHub API response status codes with 404/403 differentiation, guards against non-array JSON, and renders loading, error, and capped event-list states with updated styling. ChangesActivity Tracking with User Input
Sequence DiagramsequenceDiagram
participant User
participant ActivityForm as Activity Page Form
participant ActivityFeed as ActivityFeed Component
participant GitHubAPI as GitHub API
participant UIRender as UI Render
User->>ActivityForm: Enters username and submits
ActivityForm->>ActivityForm: Validate & trim input
ActivityForm->>ActivityFeed: Pass trackedUsername prop
ActivityFeed->>ActivityFeed: Check username non-empty
alt Empty Username
ActivityFeed->>UIRender: Set error state
else Valid Username
ActivityFeed->>GitHubAPI: Fetch user events
alt Success (res.ok)
GitHubAPI->>ActivityFeed: Array of events
ActivityFeed->>ActivityFeed: Validate is array
ActivityFeed->>UIRender: Set events, cap to 10
else 404 Not Found
ActivityFeed->>UIRender: Show "User not found" error
else 403 Forbidden
ActivityFeed->>UIRender: Show "Access forbidden" error
else Network/Other Error
ActivityFeed->>UIRender: Show "Connection failed" error
end
end
UIRender->>User: Render loading/error/event list
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related issues
Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 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]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @AnishCoder2006 for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ActivityFeed.tsx (1)
28-82:⚠️ Potential issue | 🟠 Major | ⚡ Quick winPrevent stale async responses from overwriting the latest username state.
Line 28–82 can commit out-of-order results: a previous
fetchEventscall may resolve after a username change and replace current state with stale data. Add request cancellation (or request-id guard) in this effect.Suggested fix
useEffect(() => { - const fetchEvents = async () => { + const controller = new AbortController(); + const fetchEvents = async () => { if (!username.trim()) { setEvents([]); setError("Please enter a GitHub username to get started."); setLoading(false); return; } try { setLoading(true); setError(""); const res = await fetch( - `https://api.github.com/users/${username}/events` + `https://api.github.com/users/${encodeURIComponent(username)}/events`, + { signal: controller.signal } ); @@ - } catch (err) { + } catch (err) { + if ((err as DOMException).name === "AbortError") return; console.error(err); setError("Unable to fetch activity. Check your connection and try again."); setEvents([]); } finally { setLoading(false); } }; fetchEvents(); const interval = setInterval(fetchEvents, 30000); - return () => clearInterval(interval); + return () => { + clearInterval(interval); + controller.abort(); + }; }, [username]);🤖 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/components/ActivityFeed.tsx` around lines 28 - 82, This effect can apply stale responses when a prior fetchEvents resolves after username changes; add a request-id guard or AbortController to cancel/outdate previous requests: inside the useEffect create a local token (e.g., let currentRequestId or const controller = new AbortController()), pass it to the fetch call, and before updating state in fetchEvents verify the request is still current (compare requestId or check !controller.signal.aborted) — only call setEvents, setError and setLoading if the token matches and not aborted; also abort the controller or increment the requestId in the cleanup returned by useEffect to prevent out-of-order updates for fetchEvents/username updates.
🤖 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/components/ActivityFeed.tsx`:
- Around line 41-43: The fetch call in ActivityFeed.tsx building the GitHub URL
uses the raw username variable; instead use encodeURIComponent(username) when
constructing the URL for the request (the const res = await fetch(...) call) to
prevent malformed requests from unexpected characters — update the template
string to wrap username with encodeURIComponent before calling fetch.
---
Outside diff comments:
In `@src/components/ActivityFeed.tsx`:
- Around line 28-82: This effect can apply stale responses when a prior
fetchEvents resolves after username changes; add a request-id guard or
AbortController to cancel/outdate previous requests: inside the useEffect create
a local token (e.g., let currentRequestId or const controller = new
AbortController()), pass it to the fetch call, and before updating state in
fetchEvents verify the request is still current (compare requestId or check
!controller.signal.aborted) — only call setEvents, setError and setLoading if
the token matches and not aborted; also abort the controller or increment the
requestId in the cleanup returned by useEffect to prevent out-of-order updates
for fetchEvents/username updates.
🪄 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: 5f64c048-4a33-41f2-a150-457eda5929f9
📒 Files selected for processing (2)
src/components/ActivityFeed.tsxsrc/pages/Activity.tsx
| const res = await fetch( | ||
| `https://api.github.com/users/${username}/events` | ||
| ); |
There was a problem hiding this comment.
Encode username before building the GitHub API URL.
Line 42 uses raw input in the path; use encodeURIComponent(username) to avoid malformed requests when users paste unexpected characters.
Suggested fix
-`https://api.github.com/users/${username}/events`
+`https://api.github.com/users/${encodeURIComponent(username)}/events`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const res = await fetch( | |
| `https://api.github.com/users/${username}/events` | |
| ); | |
| const res = await fetch( | |
| `https://api.github.com/users/${encodeURIComponent(username)}/events` | |
| ); |
🤖 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/components/ActivityFeed.tsx` around lines 41 - 43, The fetch call in
ActivityFeed.tsx building the GitHub URL uses the raw username variable; instead
use encodeURIComponent(username) when constructing the URL for the request (the
const res = await fetch(...) call) to prevent malformed requests from unexpected
characters — update the template string to wrap username with encodeURIComponent
before calling fetch.
|
Now all my 5 checks have have been successfully passed .Please accept my PR which I have raised. |
|
Please accept my pr for this.5 checks have been successfully passed. Screenshot is also attached with pr description. Please accept this change @mehul-m-prajapati |
1 participant
Closes: #519
Description:
Added interactive GitHub username tracking to the Activity page.
Changes in src/pages/Activity.tsx:
Added username input field
Added “Track Activity” button
Improved responsive input layout and page spacing
Tracks submitted GitHub username instead of fixed demo user
Changes in src/components/ActivityFeed.tsx:
Added loading state UI
Added empty state and error state handling
Improved activity card layout and consistency with existing theme
Testing:
Verified both updated files compile without TypeScript/JSX errors
Confirmed Activity page renders correctly and responds to username submissions
Type of Change:
New feature
UI/UX improvement
Summary by CodeRabbit
New Features
Bug Fixes
Style