added the drop course section on the account Page

Author: SameepK

devU-client/src/components/pages/users/userDetailPage.scss

@@ -1,4 +1,67 @@
-.container {
+.userPageLayout {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 2rem;
+  flex-wrap: wrap;
+}
+
+.userFormSection {
+  flex: 1;
+  min-width: 300px;
+}
+
+.dropCoursesSection {
+  flex: 1;
+  max-width: 500px;
+  max-height: 300px;
+  background: #f4f4f4;
+  padding: 2.7rem;
+  border-radius: 8px;
+  overflow-y: auto;
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #aaa;
+    border-radius: 3px;
+  }
+}
+
+.courseList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.courseItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #ddd;
+  color: #222;
+  font-size: 1rem;
+}
+
+.courseTitle {
+  flex: 1;
+  word-break: break-word;
+}
+
+.trashIcon {
+  cursor: pointer;
+  font-size: 1.2rem;
+
+  &:hover {
+    color: red;
+  }
 }

devU-client/src/components/pages/users/userDetailPage.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
-import { User } from 'devu-shared-modules'
-
+import { Course, User } from 'devu-shared-modules'
 import { useActionless } from 'redux/hooks'
 import { UPDATE_USER } from 'redux/types/user.types'
+import { SET_ALERT } from 'redux/types/active.types'
 
 import RequestService from 'services/request.service'
 
@@ -20,26 +20,106 @@ type UrlParams = {
 }
 
 const UserDetailPage = ({}) => {
-  const { userId } = useParams() as UrlParams
+  const { userId } = useParams<UrlParams>()
   const [updateUser] = useActionless(UPDATE_USER)
+  const [setAlert] = useActionless(SET_ALERT)
 
   const [loading, setLoading] = useState(true)
   const [user, setUser] = useState({} as User)
   const [error, setError] = useState(null)
+  const [courses, setCourses] = useState<Course[]>([])
 
   useEffect(() => {
+    // Fetch user info
     RequestService.get<User>(`/api/users/${userId}`)
       .then(setUser)
       .catch(setError)
+
+    // Get activeCourses first
+    RequestService.get<{
+      instructorCourses: { id: number }[];
+      activeCourses: { id: number }[];
+      pastCourses: { id: number }[];
+      upcomingCourses: { id: number }[];
+    }>(`/api/courses/user/${userId}`)
+      .then(async (data) => {
+        const activeCourses = data.activeCourses
+
+        const courseFetches = await Promise.all(
+          activeCourses.map(async (c) => {
+            try {
+              const courseDetails = await RequestService.get<Course>(`/api/courses/${c.id}`)
+              return courseDetails
+            } catch {
+              return {
+                id: c.id,
+                name: '[No title]',
+                semester: '',
+                number: '',
+                startDate: '',
+                endDate: ''
+              } as Course
+            }
+          })
+        )
+
+        setCourses(courseFetches)
+      })
+      .catch((err) => {
+        setAlert({ autoDelete: false, type: 'error', message: 'Failed to load courses' })
+        console.error('Course fetch error:', err)
+      })
       .finally(() => setLoading(false))
   }, [])
 
+  const handleDropCourse = (courseId: number) => {
+    const confirmDrop = window.confirm("Are you sure you want to drop?");
+    if (confirmDrop) {
+      RequestService.delete(`/api/course/${courseId}/user-courses`)
+        .then(() => {
+          setAlert({ autoDelete: true, type: 'success', message: 'Course Dropped' })
+          setCourses((prev) => prev.filter((c) => c.id !== courseId))
+        })
+        .catch((error: Error) => {
+          setAlert({ autoDelete: false, type: 'error', message: error.message })
+        });
+    }
+  }
+
   if (loading) return <LoadingOverlay delay={250} />
   if (error) return <ErrorPage error={error} />
 
   return (
     <PageWrapper className={styles.container}>
-      <EditUserForm user={user} onSubmit={updateUser} />
+      <div className={styles.userPageLayout}>
+        <div className={styles.userFormSection}>
+          <EditUserForm user={user} onSubmit={updateUser} />
+        </div>
+
+        <div className={styles.dropCoursesSection}>
+          <h2>Drop Course</h2>
+          <ul className={styles.courseList}>
+            {courses.length > 0 ? (
+              courses.map((course) => (
+                <li key={course.id} className={styles.courseItem}>
+                  <span className={styles.courseTitle}>
+                    {course.name} {course.number && `(${course.number})`}
+                  </span>
+                  <span
+                    className={styles.trashIcon}
+                    onClick={() => handleDropCourse(course.id!)}
+                    title="Drop Course"
+                  >
+                    🗑️
+                  </span>
+                </li>
+              ))
+            ) : (
+              <p>No enrolled courses.</p>
+            )}
+          </ul>
+        </div>
+      </div>
     </PageWrapper>
   )
 }