Subscribe page has new profile layout, added hook for github repos

src/components/profile/progress/UserProgress.js

@@ -15,7 +15,7 @@ const allTasks = [
         tier: 'Pleb', 
         courseId: null,
         subTasks: [
-            { status: 'Create Your First GitHub Repo', completed: false },
+            { status: 'Connect your GitHub account', completed: false },
         ]
     },
     {
@@ -35,7 +35,7 @@ const allTasks = [
         courseId: 'f73c37f4-df2e-4f7d-a838-dce568c76136',
         subTasks: [
             { status: 'Complete the course', completed: false },
-            { status: 'Select your completed project', completed: false },
+            // { status: 'Select your completed project', completed: false },
         ]
     },
     {
@@ -45,7 +45,7 @@ const allTasks = [
         courseId: 'f6825391-831c-44da-904a-9ac3d149b7be',
         subTasks: [
             { status: 'Complete the course', completed: false },
-            { status: 'Select your completed project', completed: false },
+            // { status: 'Select your completed project', completed: false },
         ]
     },
 ];

src/components/profile/subscription/UserSubscription.js

@@ -5,13 +5,11 @@ import { useToast } from '@/hooks/useToast';
 import axios from 'axios';
 import { Card } from 'primereact/card';
 import useWindowWidth from '@/hooks/useWindowWidth';
-import { Menu } from "primereact/menu";
 import { Message } from "primereact/message";
 import { ProgressSpinner } from 'primereact/progressspinner';
 import SubscriptionPaymentButtons from '@/components/bitcoinConnect/SubscriptionPaymentButton';
 import Image from 'next/image';
 import NostrIcon from '../../../../public/images/nostr.png';
-import { Badge } from 'primereact/badge';
 import GenericButton from '@/components/buttons/GenericButton';
 import CancelSubscription from '@/components/profile/subscription/CancelSubscription';
 import CalendlyEmbed from '@/components/profile/subscription/CalendlyEmbed';
@@ -100,7 +98,11 @@ const UserSubscription = () => {
             {windowWidth < 768 && (
                 <h1 className="text-3xl font-bold mb-6">Subscription Management</h1>
             )}
-            <div className="mb-4 p-4 bg-gray-800 rounded-lg w-fit">
+            <div className="w-full flex flex-row max-lap:flex-col">
+                {/* Left Column - 22% */}
+                <div className="w-[21%] h-full max-lap:w-full">
+                    <div className="p-4 bg-gray-800 rounded-lg">
+                        {/* Subscription Status Messages */}
                         {subscribed && !user?.role?.nwc && (
                             <div className="flex flex-col">
                                 <Message className="w-fit" severity="success" text="Subscribed!" />
@@ -126,6 +128,10 @@ const UserSubscription = () => {
                             </div>
                         )}
                     </div>
+                </div>
+
+                {/* Right Column - 78% */}
+                <div className="w-[78%] flex flex-col justify-center mx-auto max-lap:w-full">
                     {!subscribed && (
                         <Card title="Subscribe to PlebDevs" className="mb-4">
                             {isProcessing ? (
@@ -172,6 +178,7 @@ const UserSubscription = () => {
                             )}
                         </Card>
                     )}
+                    
                     {subscribed && (
                         <>
                             <Card title="Subscription Benefits" className="mb-4">
@@ -224,6 +231,8 @@ const UserSubscription = () => {
                             {/* Add more FAQ items as needed */}
                         </div>
                     </Card>
+                </div>
+            </div>
 
             <CalendlyEmbed
                 visible={calendlyVisible}

src/hooks/githubQueries/useFetchGithubRepos.js

@@ -0,0 +1,33 @@
+import { useQuery } from '@tanstack/react-query';
+import { Octokit } from "@octokit/rest";
+import { throttling } from "@octokit/plugin-throttling";
+
+const ThrottledOctokit = Octokit.plugin(throttling);
+
+export function useFetchGithubRepos(accessToken) {
+  return useQuery({
+    queryKey: ['githubRepos', accessToken],
+    queryFn: async () => {
+      if (!accessToken) return [];
+      
+      const octokit = new ThrottledOctokit({
+        auth: accessToken,
+        throttle: {
+          onRateLimit: (retryAfter, options, octokit, retryCount) => {
+            if (retryCount < 2) return true;
+          },
+          onSecondaryRateLimit: (retryAfter, options, octokit) => true,
+        },
+      });
+
+      const { data } = await octokit.repos.listForAuthenticatedUser({
+        sort: 'updated',
+        per_page: 100
+      });
+
+      return data;
+    },
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    enabled: !!accessToken
+  });
+}