Added summary block#666
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
github-actions
Bot
added
gssoc:approved
level:intermediate
quality:clean
type:accessibility
labels
📝 WalkthroughWalkthroughThis PR introduces a new ChangesDeveloper Summary Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 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 @Pari658 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: 2
🤖 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/DeveloperSummary.tsx`:
- Around line 27-34: The fetch in the useEffect (triggered by username) calls
res.json() unconditionally and passes that result to setProfile, causing error
payloads (e.g. {"message":"Not Found"}) to be treated as a valid profile; update
the fetch chain to check res.ok before setting state: after fetch, inspect
res.ok and if false extract the error message (e.g. await res.json() or
res.text()) and handle it (throw or set an error state) so setProfile only
receives a successful user object; modify the useEffect/fetch block that
references username and setProfile to guard non-OK responses and avoid rendering
error objects as profile data.
- Around line 27-34: The effect in DeveloperSummary (the useEffect that reads
username and calls fetch and setProfile) runs on every keystroke, causes
unauthenticated rate-limit issues, can suffer raced responses, and never clears
stale profile; update it to debounce/defer requests and abort in-flight fetches:
create an AbortController inside the effect and call controller.abort in the
cleanup, start the fetch only after a short debounce timeout (clear the timeout
in cleanup), clear profile immediately when username becomes empty or when
starting a new request, and accept an optional token prop from Tracker to
include an Authorization header for authenticated requests; reference the
useEffect, username, setProfile, and fetch call when making these changes.
🪄 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: 21fdd4b1-15b8-4c60-9c93-cc9f723754f0
📒 Files selected for processing (2)
src/components/DeveloperSummary.tsxsrc/pages/Tracker/Tracker.tsx
| useEffect(() => { | ||
| if (!username) return; | ||
|
|
||
| fetch(`https://api.github.com/users/${username}`) | ||
| .then((res) => res.json()) | ||
| .then((data) => setProfile(data)) | ||
| .catch(console.error); | ||
| }, [username]); |
There was a problem hiding this comment.
Error responses are stored and rendered as profile data.
res.json() is called unconditionally, but the GitHub API returns a JSON body even for failures (e.g. {"message":"Not Found"} on 404, or rate-limit/403). That error object is then passed to setProfile, so the card renders with profile.public_repos etc. as undefined — e.g. "undefined public repositories and undefined followers". Check res.ok before storing.
🛡️ Proposed fix to guard non-OK responses
fetch(`https://api.github.com/users/${username}`)
- .then((res) => res.json())
+ .then((res) => {
+ if (!res.ok) throw new Error(`GitHub API error: ${res.status}`);
+ return res.json();
+ })
.then((data) => setProfile(data))
.catch(console.error);🤖 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/DeveloperSummary.tsx` around lines 27 - 34, The fetch in the
useEffect (triggered by username) calls res.json() unconditionally and passes
that result to setProfile, causing error payloads (e.g. {"message":"Not Found"})
to be treated as a valid profile; update the fetch chain to check res.ok before
setting state: after fetch, inspect res.ok and if false extract the error
message (e.g. await res.json() or res.text()) and handle it (throw or set an
error state) so setProfile only receives a successful user object; modify the
useEffect/fetch block that references username and setProfile to guard non-OK
responses and avoid rendering error objects as profile data.
Fetch fires on every keystroke and is subject to a race condition.
In Tracker.tsx the username prop is bound directly to the input's onChange (live value), so this effect runs on every keystroke. Each run issues an unauthenticated GitHub request, which quickly exhausts the 60 requests/hour anonymous limit. Additionally, with no cleanup/abort, responses can resolve out of order and overwrite newer state, and the previous profile is never cleared when username changes (stale card shown for the new name).
Consider debouncing and aborting in-flight requests. If you also pass the existing token from the Tracker, requests would be authenticated and far less rate-limited.
♻️ Proposed debounce + abort
useEffect(() => {
if (!username) return;
- fetch(`https://api.github.com/users/${username}`)
- .then((res) => res.json())
- .then((data) => setProfile(data))
- .catch(console.error);
- }, [username]);
+ const controller = new AbortController();
+ const timer = setTimeout(() => {
+ fetch(`https://api.github.com/users/${username}`, {
+ signal: controller.signal,
+ })
+ .then((res) => {
+ if (!res.ok) throw new Error(`GitHub API error: ${res.status}`);
+ return res.json();
+ })
+ .then((data) => setProfile(data))
+ .catch((err) => {
+ if (err.name !== "AbortError") console.error(err);
+ });
+ }, 500);
+
+ return () => {
+ clearTimeout(timer);
+ controller.abort();
+ };
+ }, [username]);📝 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.
| useEffect(() => { | |
| if (!username) return; | |
| fetch(`https://api.github.com/users/${username}`) | |
| .then((res) => res.json()) | |
| .then((data) => setProfile(data)) | |
| .catch(console.error); | |
| }, [username]); | |
| useEffect(() => { | |
| if (!username) return; | |
| const controller = new AbortController(); | |
| const timer = setTimeout(() => { | |
| fetch(`https://api.github.com/users/${username}`, { | |
| signal: controller.signal, | |
| }) | |
| .then((res) => { | |
| if (!res.ok) throw new Error(`GitHub API error: ${res.status}`); | |
| return res.json(); | |
| }) | |
| .then((data) => setProfile(data)) | |
| .catch((err) => { | |
| if (err.name !== "AbortError") console.error(err); | |
| }); | |
| }, 500); | |
| return () => { | |
| clearTimeout(timer); | |
| 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/DeveloperSummary.tsx` around lines 27 - 34, The effect in
DeveloperSummary (the useEffect that reads username and calls fetch and
setProfile) runs on every keystroke, causes unauthenticated rate-limit issues,
can suffer raced responses, and never clears stale profile; update it to
debounce/defer requests and abort in-flight fetches: create an AbortController
inside the effect and call controller.abort in the cleanup, start the fetch only
after a short debounce timeout (clear the timeout in cleanup), clear profile
immediately when username becomes empty or when starting a new request, and
accept an optional token prop from Tracker to include an Authorization header
for authenticated requests; reference the useEffect, username, setProfile, and
fetch call when making these changes.
1 participant
Related Issue
Description
Added a Developer Summary section to the Tracker page that displays GitHub profile insights based on the entered username.
Changes Made
Created a new
DeveloperSummarycomponent.Fetched GitHub user profile information using the GitHub API.
Displayed key profile details including:
Integrated the Developer Summary card into the Tracker page.
Added responsive styling using Material UI components.
How Has This Been Tested?
npm run dev.Screenshots
Type of Change
Summary by CodeRabbit