Handle GitHub API deprecations + Contributors/Profile fix

package.json

@@ -16,6 +16,9 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.6",
     "@mui/material": "^5.15.6",
+    "@octokit/core": "^6.1.6",
+    "@octokit/plugin-paginate-rest": "^11.6.0",
+    "@octokit/plugin-throttling": "^9.6.1",
     "@primer/octicons-react": "^19.15.5",
     "@vitejs/plugin-react": "^4.3.3",
     "axios": "^1.7.7",

src/App.tsx

@@ -1,24 +1,32 @@
+import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";
+import { lazy, Suspense } from "react";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from "./components/ScrollProgressBar";
 import { Toaster } from "react-hot-toast";
-import Router from "./Routes/Router";
 import ThemeWrapper from "./context/ThemeContext";
 
-function App() {
+const Home = lazy(() => import("./pages/Home/Home.tsx"));
+const Tracker = lazy(() => import("./pages/Tracker/Tracker.tsx"));
+const About = lazy(() => import("./pages/About/About"));
+const Contact = lazy(() => import("./pages/Contact/Contact"));
+const Contributors = lazy(() => import("./pages/Contributors/Contributors"));
+const Signup = lazy(() => import("./pages/Signup/Signup.tsx"));
+const Login = lazy(() => import("./pages/Login/Login.tsx"));
+const ContributorProfile = lazy(() => import("./pages/ContributorProfile/ContributorProfile.tsx"));
+
+function RootLayout() {
   return (
     <ThemeWrapper>
       <div className="relative flex flex-col min-h-screen">
         <ScrollProgressBar />
-
         <Navbar />
-
         <main className="flex-grow bg-gray-50 dark:bg-gray-800 flex justify-center items-center">
-          <Router />
+          <Suspense fallback={<div className="p-6">Loading…</div>}>
+            <Outlet />
+          </Suspense>
         </main>
-
         <Footer />
-
         <Toaster
           position="top-center"
           reverseOrder={false}
@@ -27,18 +35,36 @@ function App() {
           toastOptions={{
             className: "bg-white dark:bg-gray-800 text-black dark:text-white",
             duration: 5000,
-            success: {
-              duration: 3000,
-              iconTheme: {
-                primary: "green",
-                secondary: "white",
-              },
-            },
+            success: { duration: 3000, iconTheme: { primary: "green", secondary: "white" } },
           }}
         />
       </div>
     </ThemeWrapper>
   );
 }
 
-export default App;
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <RootLayout />,
+    errorElement: <div className="p-6">Something went wrong loading this page.</div>,
+    children: [
+      { index: true, element: <Home /> },
+      { path: "track", element: <Tracker /> },
+      { path: "signup", element: <Signup /> },
+      { path: "login", element: <Login /> },
+      { path: "about", element: <About /> },
+      { path: "contact", element: <Contact /> },
+      { path: "contributors", element: <Contributors /> },
+      { path: "contributor/:username", element: <ContributorProfile /> },
+    ],
+  },
+]);
+
+export default function AppRouter() {
+  return (
+    <RouterProvider
+      router={router}
+    />
+  );
+}

src/Routes/Router.tsx

@@ -1,4 +1,4 @@
-import { Routes, Route } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Tracker from "../pages/Tracker/Tracker.tsx";
 import About from "../pages/About/About";
 import Contact from "../pages/Contact/Contact";
@@ -8,19 +8,17 @@ import Login from "../pages/Login/Login.tsx";
 import ContributorProfile from "../pages/ContributorProfile/ContributorProfile.tsx";
 import Home from "../pages/Home/Home.tsx";
 
-const Router = () => {
-  return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/track" element={<Tracker />} />
-      <Route path="/signup" element={<Signup />} />
-      <Route path="/login" element={<Login />} />
-      <Route path="/about" element={<About />} />
-      <Route path="/contact" element={<Contact />} />
-      <Route path="/contributors" element={<Contributors />} />
-      <Route path="/contributor/:username" element={<ContributorProfile />} />
-    </Routes>
-  );
-};
+const router = createBrowserRouter([
+  { path: "/", element: <Home /> },
+  { path: "/track", element: <Tracker /> },
+  { path: "/signup", element: <Signup /> },
+  { path: "/login", element: <Login /> },
+  { path: "/about", element: <About /> },
+  { path: "/contact", element: <Contact /> },
+  { path: "/contributors", element: <Contributors /> },
+  { path: "/contributor/:username", element: <ContributorProfile /> },
+]);
 
-export default Router;
+export default function AppRouter() {
+  return <RouterProvider router={router} />;
+}

src/hooks/useGitHubData.ts

@@ -10,18 +10,41 @@ export const useGitHubData = (getOctokit: () => any) => {
   const [rateLimited, setRateLimited] = useState(false);
 
   const fetchPaginated = async (octokit: any, username: string, type: string, page = 1, per_page = 10) => {
-    const q = `author:${username} is:${type}`;
-    const response = await octokit.request('GET /search/issues', {
-      q,
-      sort: 'created',
-      order: 'desc',
-      per_page,
-      page,
+    const query = `
+      query ($queryString: String!, $first: Int!, $after: String) {
+        search(query: $queryString, type: ISSUE, first: $first, after: $after) {
+          issueCount
+          edges {
+            cursor
+            node {
+              ... on Issue {
+                id
+                title
+                url
+                createdAt
+              }
+              ... on PullRequest {
+                id
+                title
+                url
+                createdAt
+              }
+            }
+          }
+        }
+      }
+    `;
+
+    const queryString = `author:${username} is:${type}`;
+    const response = await octokit.graphql(query, {
+      queryString,
+      first: per_page,
+      after: page > 1 ? btoa(`cursor:${(page - 1) * per_page}`) : null,
     });
 
     return {
-      items: response.data.items,
-      total: response.data.total_count,
+      items: response.search.edges.map((edge: any) => edge.node),
+      total: response.search.issueCount,
     };
   };
 

src/lib/githubFetch.ts

@@ -0,0 +1,33 @@
+// src/lib/githubFetch.ts
+export const GITHUB_API_VERSION = "2022-11-28";
+
+export async function ghFetch(
+  path: string,
+  token: string,
+  init: RequestInit = {}
+) {
+  const base = "https://api.github.com";
+  const headers = new Headers(init.headers || {});
+  if (token) {
+    headers.set("Authorization", `Bearer ${token}`); // or `token ${token}`
+  }
+  headers.set("Accept", "application/vnd.github+json");
+  headers.set("X-GitHub-Api-Version", GITHUB_API_VERSION);
+
+  return fetch(`${base}${path}`, { ...init, headers });
+}
+
+export async function ghJson<T>(
+  path: string,
+  token: string,
+  init: RequestInit = {}
+): Promise<T> {
+  const res = await ghFetch(path, token, init);
+  if (!res.ok) {
+    const text = await res.text().catch(() => "");
+    throw new Error(
+      `GitHub API ${res.status} ${res.statusText}${text ? `: ${text}` : ""}`
+    );
+  }
+  return res.json() as Promise<T>;
+}

src/lib/octokit.ts

@@ -0,0 +1,22 @@
+import { Octokit } from "@octokit/core";
+import { paginateRest } from "@octokit/plugin-paginate-rest";
+import { throttling } from "@octokit/plugin-throttling";
+
+const MyOctokit = Octokit.plugin(paginateRest, throttling);
+
+export const makeOctokit = (token: string) =>
+  new MyOctokit({
+    auth: token,
+    userAgent: "github-tracker/1.0",
+    request: {
+      // IMPORTANT: stops “deprecated / unversioned” warnings
+      headers: { "X-GitHub-Api-Version": "2022-11-28" },
+    },
+    throttle: {
+      onRateLimit: (retryAfter, options, octokit) => {
+        console.warn(`Rate limit hit for ${options.method} ${options.url}. Retrying in ${retryAfter}s.`);
+        return true; // auto-retry once
+      },
+      onSecondaryRateLimit: () => true,
+    },
+  });

src/main.tsx

@@ -2,15 +2,12 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { BrowserRouter } from "react-router-dom";
 import ThemeWrapper from "./context/ThemeContext.tsx";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <ThemeWrapper>
-    <BrowserRouter>
       <App />
-    </BrowserRouter>
     </ThemeWrapper>
   </StrictMode>
 );