first commit

components/CourseGrid.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { CourseRow } from './CourseRow';
 import { Section, Course } from '../types';
-import { initDB, getCourses } from '../services/db';
+import { getCourses } from '../services/db';
+import { useAuth } from '../context/AuthContext';
 import { Loader2, ChevronLeft, ChevronRight } from 'lucide-react';
 import { CATEGORIES } from '../constants';
 
@@ -17,6 +18,7 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
   const [courses, setCourses] = useState<Course[]>([]);
   const [loading, setLoading] = useState(true);
   const [activeCategory, setActiveCategory] = useState<string>('all');
+  const { user } = useAuth();
 
   // Slider State & Refs for Categories
   const categoryScrollRef = useRef<HTMLDivElement>(null);
@@ -37,14 +39,15 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
 
   useEffect(() => {
     const loadData = async () => {
-      await initDB();
-      const allCourses = await getCourses();
-      setCourses(allCourses);
-      setLoading(false);
+      try {
+        setCourses(await getCourses());
+      } finally {
+        setLoading(false);
+      }
     };
 
     loadData();
-  }, []);
+  }, [user]);
 
   useEffect(() => {
     checkCategoryBoundaries();
@@ -225,4 +228,3 @@ export const CourseGrid: React.FC<CourseGridProps> = ({
     </section>
   );
 };
-