Merge pull request #51 from JumboCode/classEnrollment

Class enrollment

.github/pull_request_template.md

@@ -3,7 +3,7 @@
 ## Issue ticket number and link
 
 ## Does your code meet the acceptance criteria?
-- [] Yes
+- [] Yes    # put an x in the brackets to checkmark!
 
 ## Testing done and screenshots (if relevant)
 

api/index.js

@@ -262,4 +262,52 @@ app.get("/api/conversations", async (req, res) => {
   } catch (error) {
     res.status(500).send(err);
   }
-})
+})
+
+// Enroll in a class
+app.put('/api/users/:id/enroll', async (req, res) => {
+  const { classId } = req.body
+  const studentId = new mongoose.Types.ObjectId('671edb6d31e448b23d0dc384') // hardcode userId
+  try {
+    // add class id to user's classes
+    await User.findByIdAndUpdate(
+      studentId,
+      { $addToSet: { enrolledClasses: classId } },
+      { new: true }
+    )
+
+    // add student id to class's roster
+    await Class.findByIdAndUpdate(
+      classId,
+      { $addToSet: { roster: studentId } },
+      { new: true }
+    )
+    res.status(201).json({ message: 'Enrolled successfully!' })
+  } catch (err) {
+    console.error('Error enrolling into class:', err);
+    res.status(500).json({ message: 'Error enrolling into class' })
+  }
+})
+
+// Unenroll in a class
+app.put('/api/users/:id/unenroll', async (req, res) => {
+  const { classId } = req.body
+  const studentId = new mongoose.Types.ObjectId('671edb6d31e448b23d0dc384') // hardcode userId
+  try {
+    // remove class id from user's classes
+    await User.findByIdAndUpdate(
+      studentId,
+      { $pull: { enrolledClasses: classId } },
+    )
+
+    // remove student id from class's roster
+    await Class.findByIdAndUpdate(
+      classId,
+      { $pull: { roster: studentId } },
+    )
+    res.status(201).json({ message: 'Unenrolled successfully!' })
+  } catch (err) {
+    console.error('Error unenrolling into class:', err);
+    res.status(500).json({ message: 'Error unenrolling into class' })
+  }
+})

src/api/class-wrapper.js

@@ -31,8 +31,40 @@ const getConversations = async () => {
   }
 }
 
+const enrollInClass = async (classId, userId) => {
+  try {
+    const response = await fetch(`/api/users/${userId}/enroll`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ classId })
+    })
+    return response
+  } catch (error) {
+    console.error('Enroll endpoint put error:', error);
+  }
+}
+
+const unenrollInClass = async (classId, userId) => {
+  try {
+    const response = await fetch(`/api/users/${userId}/unenroll`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ classId })
+    })
+    return response
+  } catch (error) {
+    console.error('Enroll endpoint put error:', error);
+  }
+}
+
 export {
   getClasses,
   getLevels,
   getConversations,
+  enrollInClass,
+  unenrollInClass
 }

src/components/Button/EnrollButton.jsx

@@ -0,0 +1,17 @@
+import Button from '@/components/Button/Button'
+import { enrollInClass, unenrollInClass } from '../../api/class-wrapper';
+
+const EnrollButton = ({ userId, classId, isEnroll }) => {
+  const handleEnrollOrUnenroll = async () => {
+    if (isEnroll) {
+      await enrollInClass(classId, userId);
+    } else {
+      await unenrollInClass(classId, userId);
+    }
+  }
+  return (
+    <Button label={isEnroll ? "Enroll" : "Unenroll"} isOutline={false} onClick={handleEnrollOrUnenroll}></Button>
+  )
+}
+
+export default EnrollButton;

src/components/Class.jsx

@@ -1,4 +1,4 @@
-import Button from '@/components/Button'
+import EnrollButton from '@/components/Button/EnrollButton'
 
 const Class = ({ classObj }) => {
     const ageGroup = classObj.ageGroup.toString()
@@ -9,7 +9,19 @@ const Class = ({ classObj }) => {
             {classObj.schedule.map((schedule, index) => (
                 <p key={index}>{schedule.day} {schedule.time}</p>
             ))}
-            <Button label={"Register"} />
+            <div className='grid grid-cols-2 gap-3'>
+                <EnrollButton
+                    userId={null}
+                    classId={classObj._id}
+                    isEnroll={true}
+                />
+                <EnrollButton
+                    userId={null}
+                    classId={classObj._id}
+                    isEnroll={false}
+                />
+            </div>
+
         </div>
     )
 };

src/pages/Classes.jsx

@@ -8,7 +8,7 @@ const Classes = () => {
   const [level, setLevel] = useState()
   const [loading, setLoading] = useState(true)
   const queryString = useSearch()
-  const [location, setLocation] = useLocation()
+  const [, setLocation] = useLocation()
   const classFilter = new URLSearchParams(queryString)
 
   useEffect(() => {

src/pages/Home.jsx

@@ -1,6 +1,6 @@
 
-import dummyBg from '../assets/dummy-bg.png';
-import Button from '../components/Button';
+import dummyBg from '@/assets/dummy-bg.png';
+import Button from '@/components/Button/Button';
 
 const sections = [
     {