From 286b724c8c203d309f84c09c9f7e835306227040 Mon Sep 17 00:00:00 2001
From: AnishCoder2006 <anishhhh2006@gmail.com>
Date: Wed, 27 May 2026 09:02:08 +0530
Subject: [PATCH] feat: Enhanced GitHub username input page,added loading
 state,handled error conditions and Improved Activity page spacing  tracking

---
 src/components/ActivityFeed.tsx | 115 +++++++++++++++++++++++---------
 src/pages/Activity.tsx          |  46 +++++++++++--
 2 files changed, 125 insertions(+), 36 deletions(-)

diff --git a/src/components/ActivityFeed.tsx b/src/components/ActivityFeed.tsx
index d770dfee..d4558523 100644
--- a/src/components/ActivityFeed.tsx
+++ b/src/components/ActivityFeed.tsx
@@ -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
@@ -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`
         );
+
+        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);
       }
     };
@@ -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>
   );
diff --git a/src/pages/Activity.tsx b/src/pages/Activity.tsx
index ccc3d207..a2a33138 100644
--- a/src/pages/Activity.tsx
+++ b/src/pages/Activity.tsx
@@ -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>
   );