feat: Add cohort fetching in LeaguesPage and update enrollment logic to prioritize available cohorts

Author: chahatkesh

src/components/features/dashboard/LeagueDetailPage.jsx

@@ -423,7 +423,8 @@ const LeagueDetailPage = ({ league, onBack }) => {
     };
 
     loadResources();
-  }, [leagueProgress]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [leagueProgress]); // Intentionally excluding sectionResources to prevent infinite loop
 
   // Set error from SWR
   useEffect(() => {

src/context/AuthContext.jsx

@@ -64,7 +64,8 @@ export const AuthProvider = ({ children }) => {
         clearInterval(tokenRefreshInterval);
       }
     };
-  }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Intentionally empty - only run on mount, startTokenRefresh/tokenRefreshInterval would cause infinite loop
 
   // Start automatic token refresh (refresh every 12 minutes, before 15-min expiry)
   const startTokenRefresh = () => {

src/hooks/useDashboard.js

@@ -44,18 +44,14 @@ export const useUserProfile = () => {
       // Dedupe requests within 5 seconds
       dedupingInterval: 5000,
 
-      // Retry on error
-      shouldRetryOnError: true,
+      // Retry on error (don't retry if unauthorized)
+      shouldRetryOnError: (error) => {
+        return !error.message?.includes('401');
+      },
       errorRetryCount: 2,
 
       // Use cache when available
       revalidateIfStale: true,
-      
-      // Don't revalidate if no token (user not logged in)
-      shouldRetryOnError: (error) => {
-        // Don't retry if unauthorized
-        return !error.message?.includes('401');
-      },
     }
   );
 

src/pages/dashboard/LeaguesPage.jsx

@@ -14,23 +14,37 @@ import {
 } from 'lucide-react';
 import OptimizedDashboardService from '../../utils/api/optimizedDashboardService';
 import ProgressService from '../../utils/api/progressService';
+import DataService from '../../utils/api/dataService';
 import { PageHead } from "../../components/common";
 import { MotionDiv, MotionSection } from '../../components/common/MotionWrapper';
 import { useDashboard } from '../../hooks/useDashboard';
 
 const LeaguesPage = () => {
   const navigate = useNavigate();
+  const [cohorts, setCohorts] = useState([]);
 
   // SWR: Automatic caching, revalidation, and state management
   const { 
     dashboardData, 
     leagues, 
     basicLeagueStats: leagueStatistics,
     isLoading: loading, 
-    error: swrError,
-    mutate: refreshDashboard 
+    error: swrError
   } = useDashboard();
 
+  // Fetch cohorts for enrollment
+  useEffect(() => {
+    const fetchCohorts = async () => {
+      try {
+        const data = await DataService.getCohorts();
+        setCohorts(data.cohorts || []);
+      } catch (err) {
+        console.error('Failed to fetch cohorts:', err);
+      }
+    };
+    fetchCohorts();
+  }, []);
+  
   // Format error message
   const error = swrError ? `Failed to load leagues. Please try again later. (${swrError.message})` : null;
 
@@ -49,14 +63,19 @@ const LeaguesPage = () => {
         return;
       }
 
-      // Get cohort from user's existing enrollments or use first available
-      const cohortId = dashboardData?.enrollments?.[0]?.cohort?.id || 'default';
+      // Get cohort: prioritize user's existing enrollment cohort, else use first available cohort
+      const cohortId = dashboardData?.enrollments?.[0]?.cohort?.id || cohorts[0]?.id;
+      
+      if (!cohortId) {
+        alert('No cohort available for enrollment. Please contact support.');
+        return;
+      }
 
       await ProgressService.enrollUser(cohortId, leagueId);
       alert('Enrollment successful! Welcome to your learning journey!');
 
-      // SWR: Trigger revalidation to refresh data
-      await refreshDashboard();
+      // Reload the page to refresh all data for newly enrolled user
+      window.location.reload();
     } catch (err) {
       console.error('Enrollment error:', err);
       alert(`Enrollment failed: ${err.message}. Please try again.`);
@@ -167,7 +186,7 @@ const LeaguesPage = () => {
                 const stats = enrollment?.progress || leagueStatistics[league.id] || {};
                 const weeksCount = stats.weeksCount || league.weeksCount || league._count?.weeks || 0;
                 const sectionsCount = stats.totalSections || league.sectionsCount || league._count?.sections || 0;
-                const resourcesCount = stats.totalResources || league.totalResources || league._count?.resources || 0;
+                const resourcesCount = stats.totalResources || league.resourcesCount || league._count?.resources || 0;
 
                 return (
                   <MotionDiv

src/utils/api/progressService.js

@@ -58,8 +58,9 @@ class ProgressService {
    */
   static async enrollUser(cohortId, leagueId, userId = null) {
     try {
-      // First, fetch league information to check if enrollment is disabled
-      const leagueResponse = await fetch(`${API_BASE_URL}/leagues/${leagueId}`, {
+      // First, fetch league information from leagues API (not progress API)
+      // to check if enrollment is disabled
+      const leagueResponse = await fetch(`${BASE_URL}/api/leagues/${leagueId}`, {
         headers: getAuthHeaders()
       });