Added Live GitHub Activity Feed using GitHub Events API.#276
Added Live GitHub Activity Feed using GitHub Events API.#276aparna24bce11388 wants to merge 1 commit into
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThis PR introduces a live GitHub activity feed feature. It adds an ChangesActivity Feed Feature
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ 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 @aparna24bce11388 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: 4
🤖 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 81-83: The feed currently renders event.repo?.name directly which
can show "undefined • ..." for events without a repo; update the rendering in
ActivityFeed (the <p> block that uses event.repo?.name and getTimeAgo) to avoid
printing undefined by either: a) using a safe fallback like a default label
(e.g., "Unknown repo") when event.repo?.name is falsy, or b) conditionally
rendering the repo segment only when event.repo?.name exists so the time
(getTimeAgo(event.created_at)) still displays correctly; locate the JSX that
references event.repo?.name in ActivityFeed.tsx and replace it with one of these
approaches.
- Around line 33-39: The fetch in the ActivityFeed component should guard non-OK
responses and invalid payloads before calling setEvents: after awaiting
fetch(...) check res.ok and then parse JSON; validate the parsed data is an
array (Array.isArray) and only then call setEvents(data), otherwise
setEvents([]) (and optionally set an error state). Ensure setLoading(false) runs
in all paths (finally-equivalent) so the component doesn't hang, and avoid
passing non-array values that would break events.slice(0, 10).
In `@src/pages/ctivity.tsx`:
- Around line 1-2: The Activity component in src/pages/ctivity.tsx is orphaned
and embeds a hardcoded username "aparna24bce11388"; either delete the Activity
component file or register it in the app router (e.g., add a route path like
"/activity/:username" in Router.tsx) and refactor Activity to read the username
from route params and pass it into ActivityFeed (change ActivityFeed usage to
accept a username prop instead of the hardcoded string); ensure the route
registration uses the same component name Activity and that ActivityFeed’s prop
signature is updated to accept and use the dynamic username.
- Line 10: The ActivityFeed instance is using a hardcoded username
("aparna24bce11388"); update the page to obtain the selected username from
parent or router state instead of hardcoding: replace the literal in the
ActivityFeed JSX with a dynamic value (e.g., a prop like selectedUser or router
query value from useRouter()) and ensure the page component accepts/derives that
username and passes it into ActivityFeed (look for ActivityFeed and the page
component in ctivity.tsx to change the prop wiring).
🪄 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: 5bc6008b-5d28-41a4-b1c5-425bc79d8802
📒 Files selected for processing (2)
src/components/ActivityFeed.tsxsrc/pages/ctivity.tsx
| const res = await fetch( | ||
| `https://api.github.com/users/${username}/events` | ||
| ); | ||
| const data = await res.json(); | ||
|
|
||
| setEvents(data); | ||
| setLoading(false); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python - <<'PY'
import json
from urllib.request import urlopen
from urllib.error import HTTPError
def fetch(url):
try:
with urlopen(url) as r:
return r.status, json.load(r)
except HTTPError as e:
body = e.read().decode("utf-8")
try:
parsed = json.loads(body)
except Exception:
parsed = body
return e.code, parsed
urls = [
"https://api.github.com/users/octocat/events",
"https://api.github.com/users/this-user-should-not-exist-xyz/events",
]
for u in urls:
status, payload = fetch(u)
print(f"{u} -> status={status}, json_type={type(payload).__name__}")
PYRepository: GitMetricsLab/github_tracker
Length of output: 2690
🏁 Script executed:
git ls-files | head -20Repository: GitMetricsLab/github_tracker
Length of output: 567
🏁 Script executed:
fd -t f "ActivityFeed" --case-sensitiveRepository: GitMetricsLab/github_tracker
Length of output: 104
🏁 Script executed:
find . -name "*.tsx" -o -name "*.ts" | grep -i activityRepository: GitMetricsLab/github_tracker
Length of output: 106
🏁 Script executed:
wc -l src/components/ActivityFeed.tsxRepository: GitMetricsLab/github_tracker
Length of output: 107
🏁 Script executed:
cat -n src/components/ActivityFeed.tsxRepository: GitMetricsLab/github_tracker
Length of output: 3146
Guard non-OK and invalid GitHub payloads before setting events.
The code assigns the JSON response directly to events without checking res.ok or validating the payload shape. When GitHub returns an error (e.g., 404, 403), it sends a JSON object, not an event array. This causes a runtime crash when the component later calls events.slice(0, 10).
Proposed fix
- const data = await res.json();
-
- setEvents(data);
- setLoading(false);
+ if (!res.ok) {
+ throw new Error(`GitHub events request failed: ${res.status}`);
+ }
+ const data: unknown = await res.json();
+ setEvents(Array.isArray(data) ? (data as EventType[]) : []);
} catch (err) {
console.error(err);
- setLoading(false);
+ setEvents([]);
+ } finally {
+ setLoading(false);
}🤖 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 33 - 39, The fetch in the
ActivityFeed component should guard non-OK responses and invalid payloads before
calling setEvents: after awaiting fetch(...) check res.ok and then parse JSON;
validate the parsed data is an array (Array.isArray) and only then call
setEvents(data), otherwise setEvents([]) (and optionally set an error state).
Ensure setLoading(false) runs in all paths (finally-equivalent) so the component
doesn't hang, and avoid passing non-array values that would break
events.slice(0, 10).
| <p className="text-xs text-gray-500 mt-1"> | ||
| {event.repo?.name} • {getTimeAgo(event.created_at)} | ||
| </p> |
There was a problem hiding this comment.
Avoid rendering undefined for missing repo names.
Some events may not carry repo.name; current UI can show undefined • ....
Proposed fix
- {event.repo?.name} • {getTimeAgo(event.created_at)}
+ {event.repo?.name ?? "Unknown repository"} • {getTimeAgo(event.created_at)}📝 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.
| <p className="text-xs text-gray-500 mt-1"> | |
| {event.repo?.name} • {getTimeAgo(event.created_at)} | |
| </p> | |
| <p className="text-xs text-gray-500 mt-1"> | |
| {event.repo?.name ?? "Unknown repository"} • {getTimeAgo(event.created_at)} | |
| </p> |
🤖 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 81 - 83, The feed currently
renders event.repo?.name directly which can show "undefined • ..." for events
without a repo; update the rendering in ActivityFeed (the <p> block that uses
event.repo?.name and getTimeAgo) to avoid printing undefined by either: a) using
a safe fallback like a default label (e.g., "Unknown repo") when
event.repo?.name is falsy, or b) conditionally rendering the repo segment only
when event.repo?.name exists so the time (getTimeAgo(event.created_at)) still
displays correctly; locate the JSX that references event.repo?.name in
ActivityFeed.tsx and replace it with one of these approaches.
| import ActivityFeed from "../components/ActivityFeed"; | ||
| export default function Activity() { |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Candidate page/router files =="
fd -i 'ctivity\.tsx|Activity\.tsx|App\.tsx|router\.tsx|routes\.tsx'
echo
echo "== References to activity routes/imports =="
rg -n -C2 --type=tsx 'ctivity|Activity|/activity|Live GitHub Activity'Repository: GitMetricsLab/github_tracker
Length of output: 253
🏁 Script executed:
cat -n src/Routes/Router.tsxRepository: GitMetricsLab/github_tracker
Length of output: 1271
🏁 Script executed:
cat -n src/pages/ctivity.tsxRepository: GitMetricsLab/github_tracker
Length of output: 573
Remove the orphaned Activity component or register it properly in the router.
The file src/pages/ctivity.tsx is not imported or registered in src/Routes/Router.tsx, making the page unreachable. Additionally, the hardcoded username aparna24bce11388 at line 10 prevents dynamic per-user tracking behavior. Either delete the unused component or register the route (e.g., /activity/:username) and refactor ActivityFeed to accept a username prop from the router.
🤖 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/ctivity.tsx` around lines 1 - 2, The Activity component in
src/pages/ctivity.tsx is orphaned and embeds a hardcoded username
"aparna24bce11388"; either delete the Activity component file or register it in
the app router (e.g., add a route path like "/activity/:username" in Router.tsx)
and refactor Activity to read the username from route params and pass it into
ActivityFeed (change ActivityFeed usage to accept a username prop instead of the
hardcoded string); ensure the route registration uses the same component name
Activity and that ActivityFeed’s prop signature is updated to accept and use the
dynamic username.
| Live GitHub Activity | ||
| </h1> | ||
|
|
||
| <ActivityFeed username="aparna24bce11388" /> |
There was a problem hiding this comment.
Remove hardcoded username from the page contract.
This locks the feature to one account instead of tracking the selected user.
Proposed direction (wire username from parent/router state)
-export default function Activity() {
+export default function Activity({ username }: { username: string }) {
return (
@@
- <ActivityFeed username="aparna24bce11388" />
+ <ActivityFeed username={username} />
</div>
</div>
);
}🤖 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/ctivity.tsx` at line 10, The ActivityFeed instance is using a
hardcoded username ("aparna24bce11388"); update the page to obtain the selected
username from parent or router state instead of hardcoding: replace the literal
in the ActivityFeed JSX with a dynamic value (e.g., a prop like selectedUser or
router query value from useRouter()) and ensure the page component
accepts/derives that username and passes it into ActivityFeed (look for
ActivityFeed and the page component in ctivity.tsx to change the prop wiring).
|
All checks are passing and the requested changes have been implemented.
Ready for review and merge . |
1 participant
Related Issue
Description
Added a Live GitHub Activity Feed that displays the latest user activities using the GitHub Events API.
Features implemented:
This enhances the project by transforming it from a static tracker into a dynamic activity dashboard.
How Has This Been Tested?
npm run devScreenshots (if applicable)
Type of Change
Summary by CodeRabbit