Skip to content

feat: Enhanced GitHub username input page,added loading state,handled… #557

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

Open
AnishCoder2006 wants to merge 1 commit into
base: main
Choose a base branch
from
+125 −36
Open

feat: Enhanced GitHub username input page,added loading state,handled… #557

Show file tree
Hide file tree
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
115 changes: 83 additions & 32 deletions src/components/ActivityFeed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ interface EventType {
export default function ActivityFeed({ username }: { username: string }) {
const [events, setEvents] = useState<EventType[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState("");

// 🕒 time ago function
const getTimeAgo = (dateString: string) => {
const diff = Math.floor(
(Date.now() - new Date(dateString).getTime()) / 1000
Expand All @@ -27,18 +27,50 @@ export default function ActivityFeed({ username }: { username: string }) {

useEffect(() => {
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`
);
Comment on lines 41 to 43
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot May 27, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

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.

Suggested change
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.


if (!res.ok) {
let message = "Unable to load activity. Please try again.";
if (res.status === 404) {
message = "GitHub user not found. Please check the username.";
} else if (res.status === 403) {
message =
"GitHub rate limit exceeded. Wait a moment and try again.";
}
setEvents([]);
setError(message);
setLoading(false);
return;
}

const data = await res.json();

if (!Array.isArray(data)) {
setError("Unexpected response from GitHub. Please try again.");
setEvents([]);
setLoading(false);
return;
}

setEvents(data);
setLoading(false);
} catch (err) {
console.error(err);
setError("Unable to fetch activity. Check your connection and try again.");
setEvents([]);
} finally {
setLoading(false);
}
};
Expand All @@ -49,40 +81,59 @@ export default function ActivityFeed({ username }: { username: string }) {
return () => clearInterval(interval);
}, [username]);

const currentEvents = events.slice(0, 10);

return (
<div className="p-4">
<h2 className="text-xl font-bold mb-4 text-center">
Activity Feed
</h2>
<div className="rounded-[2rem] border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 p-6 shadow-lg">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-5">
<div>
<h2 className="text-2xl font-bold">Activity Feed</h2>
<p className="text-sm text-gray-500 dark:text-gray-400">
Tracking <span className="font-semibold text-gray-900 dark:text-white">{username}</span>
</p>
</div>
<p className="text-xs uppercase tracking-[0.2em] text-gray-400">
Refreshes every 30s
</p>
</div>

{loading ? (
<p className="text-center">Loading...</p>
) : events.length === 0 ? (
<p className="text-center">No activity found</p>
<div className="rounded-3xl border border-dashed border-indigo-300 bg-indigo-50/70 p-6 text-center text-indigo-700 dark:border-indigo-500/50 dark:bg-indigo-950/40 dark:text-indigo-200">
Loading GitHub activity...
</div>
) : error ? (
<div className="rounded-3xl border border-red-200 bg-red-50 p-6 text-center text-red-700 dark:border-red-600/40 dark:bg-red-950/20 dark:text-red-200">
{error}
</div>
) : currentEvents.length === 0 ? (
<div className="rounded-3xl border border-gray-200 bg-gray-50 p-6 text-center text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300">
No recent public activity found for this user.
</div>
) : (
events.slice(0, 10).map((event) => (
<div
key={event.id}
className="border rounded-lg p-3 mb-3 shadow-sm bg-white dark:bg-gray-700"
>
<p className="text-sm font-semibold">
{event.type === "PushEvent" && "🚀 Commit pushed"}
{event.type === "PullRequestEvent" && "🔀 Pull Request"}
{event.type === "IssuesEvent" && "🐛 Issue"}
{event.type === "WatchEvent" && "⭐ Starred repo"}
{![
"PushEvent",
"PullRequestEvent",
"IssuesEvent",
"WatchEvent",
].includes(event.type) && event.type}
</p>

<p className="text-xs text-gray-500 mt-1">
{event.repo?.name} • {getTimeAgo(event.created_at)}
</p>
</div>
))
<div className="space-y-3">
{currentEvents.map((event) => (
<div
key={event.id}
className="rounded-3xl border border-gray-200 bg-gray-50 p-4 shadow-sm transition hover:border-indigo-300 dark:border-gray-700 dark:bg-gray-800"
>
<p className="text-sm font-semibold text-gray-900 dark:text-white">
{event.type === "PushEvent" && "🚀 Commit pushed"}
{event.type === "PullRequestEvent" && "🔀 Pull request event"}
{event.type === "IssuesEvent" && "🐛 Issue event"}
{event.type === "WatchEvent" && "⭐ Starred repository"}
{![
"PushEvent",
"PullRequestEvent",
"IssuesEvent",
"WatchEvent",
].includes(event.type) && event.type}
</p>
<p className="mt-2 text-sm text-gray-500 dark:text-gray-400">
{event.repo?.name || "Unknown repository"} • {getTimeAgo(event.created_at)}
</p>
</div>
))}
</div>
)}
</div>
);
Expand Down
46 changes: 42 additions & 4 deletions src/pages/Activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,51 @@
import { FormEvent, useState } from "react";
import ActivityFeed from "../components/ActivityFeed";

export default function Activity() {
const [query, setQuery] = useState("octocat");
const [trackedUsername, setTrackedUsername] = useState("octocat");

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const sanitized = query.trim();
if (!sanitized) return;
setTrackedUsername(sanitized);
};

return (
<div className="w-full h-full p-6 bg-gray-50 dark:bg-gray-800">
<div className="max-w-2xl mx-auto">
<h1 className="text-2xl font-bold mb-4 text-center">
<div className="w-full min-h-full p-6 bg-gray-50 dark:bg-gray-800">
<div className="max-w-3xl mx-auto">
<h1 className="text-3xl font-bold mb-4 text-center">
Live GitHub Activity
</h1>

<ActivityFeed username="octocat" />
<div className="rounded-[2rem] border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 p-6 shadow-lg mb-8">
<p className="text-sm text-gray-500 dark:text-gray-400 text-center mb-5">
Enter any GitHub username below to track recent public activity in real time.
</p>

<form onSubmit={handleSubmit} className="grid gap-3 sm:grid-cols-[1fr_auto] items-center">
<label htmlFor="github-username" className="sr-only">
GitHub username
</label>
<input
id="github-username"
type="text"
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder="e.g. octocat"
className="w-full min-w-0 rounded-3xl border border-gray-300 bg-gray-50 px-4 py-3 text-sm text-gray-900 transition duration-200 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 dark:focus:ring-indigo-500"
/>
<button
type="submit"
className="rounded-3xl bg-indigo-600 px-6 py-3 text-sm font-semibold text-white transition duration-200 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400"
>
Track Activity
</button>
</form>
</div>

<ActivityFeed username={trackedUsername} />
</div>
</div>
);
Expand Down
Loading