Implemented showing subscriptions on profile page, and allowing subscribe and...

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>

src/contexts/StudentUserContext.tsx

@@ -6,10 +6,12 @@ import {NO_EMAIL} from "../utils.ts";
 
 interface StudentUserContextType {
     student: StudentUser | null;
+    updateStudentSubscriptions: (subscriptions: string[]) => void;
 }
 
 const StudentUserContext = createContext<StudentUserContextType>({
-        student: null
+        student: null,
+        updateStudentSubscriptions: () => {} // Default no-op function
     }
 );
 
@@ -32,13 +34,18 @@ export const StudentUserProvider = ({children}: React.PropsWithChildren) => {
         }
     }, [email, token]);
 
+    const updateStudentSubscriptions = (subscriptions: string[]) => {
+        setStudent(prevStudent => prevStudent ? { ...prevStudent, subscriptions } : null);
+    };
+
     return (
-        <StudentUserContext.Provider value={{student}}>
+        <StudentUserContext.Provider value={{student, updateStudentSubscriptions}}>
             {children}
         </StudentUserContext.Provider>
     );
 }
 
+
 export const useStudentUserContext = () => {
     const context = useContext(StudentUserContext);
     if (!context) {

src/pages/ProfilePage.tsx

@@ -14,6 +14,7 @@ interface ProfileUser {
     year?: string;  // STUDENT
     aboutMe?: string;   // STUDENT
     major?: MajorItem; // STUDENT
+    subscriptions?: string[];
     college?: string; // PROFESSOR
     isPending?: boolean; // PROFESSOR
     lab?: ResearchLabItem; // PROFESSOR
@@ -96,6 +97,18 @@ export default function ProfilePage() {
                             </div>
                         </>
                     )}
+                    {role === STUDENT_ROLE && profileUser.subscriptions && (
+                        <>
+                            <div className='profile-section'>
+                                <h2>Subscriptions</h2>
+                                <ul>
+                                    {profileUser.subscriptions.map((sub, index) => (
+                                        <li key={index}>{sub}</li>
+                                    ))}
+                                </ul>
+                            </div>
+                        </>
+                    )}
                     {role === PROFESSOR_ROLE && (
                         <div className='profile-section'>
                             <h2>Academic Information</h2>

src/utils.ts

@@ -10,6 +10,8 @@ export const collegesAPI = `${baseUrl}/colleges`;
 export const majorsAPI = `${baseUrl}/majors`;
 export const studentsAPI = `${baseUrl}/students`;
 export const professorsAPI = `${baseUrl}/professors`;
+export const subscriptionsAPI = `${baseUrl}/subscriptions`;
+
 
 // ROUTES
 export const welcomePagePath = '/';