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 './LabPopup.css';
+import {subscriptionsAPI} from "../utils.ts";
 import { ResearchLabItem } from '../types';
 import { Link } from 'react-router-dom';
 import axios from 'axios';
@@ -11,26 +12,28 @@ interface LabPopupProps {
 }
 
 const LabPopup: React.FC<LabPopupProps> = ({ lab, onClose }) => {
-    const {student} = useStudentUserContext();
+    const {student, updateStudentSubscriptions} = useStudentUserContext();
 
     if (!lab || !student) return null;
 
-    const handleSubscribe = async () => {
-        const subscriptionData = {
-            studentId: student.id,
-            labId: lab.id,
-        };
+    const isSubscribed = student.subscriptions.includes(lab.name);
 
+    const handleSubscribe = async () => {
         try {
-            const response = await axios.post(`/subscribe`, subscriptionData, {
-                headers: {
-                    'Content-Type': 'application/json'
+            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]);
                 }
-            });
-            console.log('Subscribed successfully:', response.data);
-            // Optionally, you can add more logic here after successful subscription
+            }
+            
         } catch (error) {
-            console.error('Error subscribing:', error);
+            console.error(`Error ${isSubscribed ? 'unsubscribing' : 'subscribing'}:`, error);
         }
     };
 
@@ -61,7 +64,7 @@ const LabPopup: React.FC<LabPopupProps> = ({ lab, onClose }) => {
                     </button>
                 </Link>
                 <button className="primary-button" onClick={handleSubscribe}>
-                    Subscribe
+                    {isSubscribed ? 'Unsubscribe' : 'Subscribe'}
                 </button>
             </div>
         </div>