Subscribing

Implemented showing subscriptions on profile page, and allowing subscribe and unsubscribe on the lab page'

src/components/LabPopup.tsx

 import React from 'react';
-import './Popup.css';
-import {ResearchLabItem} from '../types';
-import {Link} from 'react-router-dom';
+import './LabPopup.css';
+import {subscriptionsAPI} from "../utils.ts";
+import { ResearchLabItem } from '../types';
+import { Link } from 'react-router-dom';
+import axios from 'axios';
+import {useStudentUserContext} from "../contexts/StudentUserContext.tsx";
 
 interface LabPopupProps {
     lab: ResearchLabItem | null;
     onClose: () => void;
 }
 
-const LabPopup: React.FC<LabPopupProps> = ({lab, onClose}) => {
-    if (!lab) return null;
+const LabPopup: React.FC<LabPopupProps> = ({ lab, onClose }) => {
+    const {student, updateStudentSubscriptions} = useStudentUserContext();
+
+    if (!lab || !student) return null;
+
+    const isSubscribed = student.subscriptions.includes(lab.name);
+
+    const handleSubscribe = async () => {
+        try {
+            const endpoint = isSubscribed ? 'unsubscribe' : 'subscribe';
+            const response = await axios.post(`${subscriptionsAPI}/${endpoint}?studentId=${student.id}&labName=${lab.name}`);
+            console.log(`${isSubscribed ? 'Unsubscribed' : 'Subscribed'} successfully:`, response.data);
+            // Update the local subscriptions list
+            if (response.status === 200) {
+                if (isSubscribed) {
+                    updateStudentSubscriptions(student.subscriptions.filter(name => name !== lab.name));
+                } else {
+                    updateStudentSubscriptions([...student.subscriptions, lab.name]);
+                }
+            }
+            
+        } catch (error) {
+            console.error(`Error ${isSubscribed ? 'unsubscribing' : 'subscribing'}:`, error);
+        }
+    };
 
     return (
         <div className="popup-info-overlay">
@@ -32,13 +58,14 @@ const LabPopup: React.FC<LabPopupProps> = ({lab, onClose}) => {
                     <h3>Description:</h3>
                     <p>{lab.description}</p>
                 </div>
-                <section>
-                    <Link to={`${lab.url}`} target="_blank">
-                        <button className="primary-button">
-                            Go to Website
-                        </button>
-                    </Link>
-                </section>
+                <Link to={`${lab.url}`} target="_blank">
+                    <button className="primary-button">
+                    Go to Website
+                    </button>
+                </Link>
+                <button className="primary-button" onClick={handleSubscribe}>
+                    {isSubscribed ? 'Unsubscribe' : 'Subscribe'}
+                </button>
             </div>
         </div>
     );