Merge pull request #48 from nitishchaubeyy/feat/rate-limit-banner

feat: add global rate limit interceptor and warning banner

Author: indresh404

src/App.jsx

@@ -2,21 +2,26 @@ import React from "react";
 import { HashRouter } from "react-router-dom";
 import { ThemeProvider } from "./context/ThemeContext";
 import { AuthProvider } from "./context/AuthContext";
+import { RateLimitProvider } from "./context/RateLimitContext";
 import AppRoutes from "./routes/AppRoutes";
 import ErrorBoundary from "./components/ui/ErrorBoundary";
+import RateLimitBanner from "./components/ui/RateLimitBanner";
 
 function App() {
   return (
     <ErrorBoundary>
       <ThemeProvider>
         <AuthProvider>
-          <HashRouter>
-            <AppRoutes />
-          </HashRouter>
+          <RateLimitProvider>
+            <HashRouter>
+              <RateLimitBanner />
+              <AppRoutes />
+            </HashRouter>
+          </RateLimitProvider>
         </AuthProvider>
       </ThemeProvider>
     </ErrorBoundary>
   );
 }
 
-export default App;
+export default App;

src/components/ui/RateLimitBanner.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { AlertTriangle, X } from 'lucide-react';
+import { useRateLimit } from '../../context/RateLimitContext';
+
+const RateLimitBanner = () => {
+  const { isRateLimited, resetRateLimit } = useRateLimit();
+
+  if (!isRateLimited) return null;
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-[9999] bg-rose-500 text-white p-3 shadow-lg flex items-center justify-between transition-all duration-300">
+      <div className="flex items-center gap-3 max-w-7xl mx-auto w-full px-4">
+        <AlertTriangle size={20} className="shrink-0" />
+        <p className="text-sm md:text-base font-medium">
+          GitHub API rate limit exceeded! Please wait a while or authenticate to continue tracking stats.
+        </p>
+      </div>
+      <button
+        onClick={resetRateLimit}
+        className="shrink-0 p-1.5 hover:bg-rose-600 rounded-md transition-colors mr-2 sm:mr-6"
+        aria-label="Close warning"
+      >
+        <X size={18} />
+      </button>
+    </div>
+  );
+};
+
+export default RateLimitBanner;

src/context/RateLimitContext.jsx

@@ -0,0 +1,38 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import axios from 'axios';
+
+const RateLimitContext = createContext();
+
+export const useRateLimit = () => useContext(RateLimitContext);
+
+export const RateLimitProvider = ({ children }) => {
+  const [isRateLimited, setIsRateLimited] = useState(false);
+
+  useEffect(() => {
+    const interceptor = axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (
+          error.response &&
+          error.response.status === 403 &&
+          error.response.headers['x-ratelimit-remaining'] === '0'
+        ) {
+          setIsRateLimited(true);
+        }
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.response.eject(interceptor);
+    };
+  }, []);
+
+  const resetRateLimit = () => setIsRateLimited(false);
+
+  return (
+    <RateLimitContext.Provider value={{ isRateLimited, resetRateLimit }}>
+      {children}
+    </RateLimitContext.Provider>
+  );
+};