From c877d3155c03e8aa56c612008b0da44f2bec9986 Mon Sep 17 00:00:00 2001
From: ananyadarna <ananyadarna@gmail.com>
Date: Tue, 26 May 2026 10:58:36 +0530
Subject: [PATCH] Add GitHub API rate limit handling UI

---
 src/components/ActivityFeed.tsx | 73 +++++++++++++++++++++++++--------
 src/pages/Activity.tsx          |  2 +-
 2 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/src/components/ActivityFeed.tsx b/src/components/ActivityFeed.tsx
index d770dfee..5fbf983d 100644
--- a/src/components/ActivityFeed.tsx
+++ b/src/components/ActivityFeed.tsx
@@ -12,6 +12,7 @@ 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) => {
@@ -27,20 +28,53 @@ export default function ActivityFeed({ username }: { username: string }) {
 
   useEffect(() => {
     const fetchEvents = async () => {
-      try {
-        setLoading(true);
-
-        const res = await fetch(
-          `https://api.github.com/users/${username}/events`
-        );
-        const data = await res.json();
-
-        setEvents(data);
-        setLoading(false);
-      } catch (err) {
-        console.error(err);
-        setLoading(false);
-      }
+        try {
+          setLoading(true);
+          setError("");
+
+          const res = await fetch(
+            `https://api.github.com/users/${username}/events`
+          );
+
+          //  Handle GitHub API rate limit
+          if (res.status === 403) {
+            const remaining =
+              res.headers.get("X-RateLimit-Remaining") || "0";
+
+            const reset =
+              res.headers.get("X-RateLimit-Reset");
+
+            const resetTime = reset
+              ? new Date(Number(reset) * 1000).toLocaleTimeString()
+              : "Unknown";
+
+            setError(
+              `GitHub API rate limit exceeded.
+               Please try again after ${resetTime}.
+               Remaining Requests: ${remaining}`
+            );
+
+            setEvents([]);
+            setLoading(false);
+            return;
+          }
+
+          if (!res.ok) {
+            throw new Error("Failed to fetch activity");
+          }
+
+          const data = await res.json();
+
+          setEvents(data);
+        } catch (err) {
+          console.error(err);
+
+          setError(
+            "Something went wrong while fetching GitHub activity."
+          );
+        } finally {
+          setLoading(false);
+        }
     };
 
     fetchEvents();
@@ -51,14 +85,21 @@ export default function ActivityFeed({ username }: { username: string }) {
 
   return (
     <div className="p-4">
-      <h2 className="text-xl font-bold mb-4 text-center">
+      <h2 className="text-xl font-bold mb-4 text-center text-black dark:text-white">
         Activity Feed
       </h2>
+      
+      {error && (
+        <div className="bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded mb-4">
+          {error}
+        </div>
+      )}
+
 
       {loading ? (
         <p className="text-center">Loading...</p>
       ) : events.length === 0 ? (
-        <p className="text-center">No activity found</p>
+        <p className="text-center text-black dark:text-white">No activity found</p>
       ) : (
         events.slice(0, 10).map((event) => (
           <div
diff --git a/src/pages/Activity.tsx b/src/pages/Activity.tsx
index ccc3d207..406fe58d 100644
--- a/src/pages/Activity.tsx
+++ b/src/pages/Activity.tsx
@@ -3,7 +3,7 @@ export default function Activity() {
   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">
+        <h1 className="text-2xl font-bold mb-4 text-center text-black dark:text-white">
           Live GitHub Activity
         </h1>