feat: Add User Courses in Profile

apps/web/app/orgs/[orgslug]/(withmenu)/user/[username]/UserProfileClient.tsx

@@ -15,9 +15,14 @@ import {
   Users,
   Calendar,
   Lightbulb,
-  X
+  X,
+  ExternalLink
 } from 'lucide-react'
 import { getUserAvatarMediaDirectory } from '@services/media/media'
+import { getCoursesByUser } from '@services/users/users'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { Button } from "@components/ui/button"
+import CourseThumbnailLanding from '@components/Objects/Thumbnails/CourseThumbnailLanding'
 
 interface UserProfileClientProps {
   userData: any;
@@ -67,7 +72,31 @@ const ImageModal: React.FC<{
 };
 
 function UserProfileClient({ userData, profile }: UserProfileClientProps) {
+  const session = useLHSession() as any
+  const access_token = session?.data?.tokens?.access_token
   const [selectedImage, setSelectedImage] = React.useState<{ url: string; caption?: string } | null>(null);
+  const [userCourses, setUserCourses] = React.useState<any[]>([]);
+  const [isLoadingCourses, setIsLoadingCourses] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchUserCourses = async () => {
+      if (userData.id && access_token) {
+        try {
+          setIsLoadingCourses(true);
+          const coursesData = await getCoursesByUser(userData.id, access_token);
+          if (coursesData.data) {
+            setUserCourses(coursesData.data);
+          }
+        } catch (error) {
+          console.error('Error fetching user courses:', error);
+        } finally {
+          setIsLoadingCourses(false);
+        }
+      }
+    };
+
+    fetchUserCourses();
+  }, [userData.id, access_token]);
 
   const IconComponent = ({ iconName }: { iconName: string }) => {
     const IconElement = ICON_MAP[iconName as keyof typeof ICON_MAP]
@@ -273,6 +302,31 @@ function UserProfileClient({ userData, profile }: UserProfileClientProps) {
                           ))}
                         </div>
                       )}
+
+                      {section.type === 'courses' && (
+                        <div>
+                          {isLoadingCourses ? (
+                            <div className="flex items-center justify-center py-8">
+                              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+                            </div>
+                          ) : userCourses.length > 0 ? (
+                            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">
+                              {userCourses.map((course) => (
+                                <div key={course.id} className="flex">
+                                  <CourseThumbnailLanding
+                                    course={course}
+                                    orgslug={userData.org_slug || course.org_slug}
+                                  />
+                                </div>
+                              ))}
+                            </div>
+                          ) : (
+                            <div className="text-center py-8 text-gray-500">
+                              No courses found
+                            </div>
+                          )}
+                        </div>
+                      )}
                     </div>
                   ))}
                 </div>