subscribingh

src/components/LabPopup.css

+.popup-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.popup-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 600px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.popup-content h2 {
+    margin-top: 0;
+}
+
+.popup-content .close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.primary-button {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin: 4px 6px 0px;
+}
+
+.primary-button:hover {
+    background-color: #0056b3;
+}

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 { 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} = useStudentUserContext();
+
+    if (!lab || !student) return null;
+
+    const handleSubscribe = async () => {
+        const subscriptionData = {
+            studentId: student.id,
+            labId: lab.id,
+        };
+
+        try {
+            const response = await axios.post(`/subscribe`, subscriptionData, {
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            console.log('Subscribed successfully:', response.data);
+            // Optionally, you can add more logic here after successful subscription
+        } catch (error) {
+            console.error('Error subscribing:', error);
+        }
+    };
 
     return (
         <div className="popup-info-overlay">
@@ -32,13 +55,14 @@ const LabPopup: React.FC<LabPopupProps> = ({lab, onClose}) => {
                     <h3>Description:</h3>
                     <p>{lab.description}</p>
                 </div>
-                <div>
-                    <Link to={`${lab.url}`} target="_blank">
-                        <button className="primary-button">
-                            Go to Website
-                        </button>
-                    </Link>
-                </div>
+                <Link to={`${lab.url}`} target="_blank">
+                    <button className="primary-button">
+                    Go to Website
+                    </button>
+                </Link>
+                <button className="primary-button" onClick={handleSubscribe}>
+                    Subscribe
+                </button>
             </div>
         </div>
     );

src/types.ts

@@ -6,6 +6,7 @@ export interface StudentUser {
     year: string;    // Undergraduate or Graduate
     aboutMe: string; // "Actively Seeking Research Opportunities" or "Current Researcher Receiving Credit"
     major: MajorItem;   // Major
+    subscriptions: string[];
 }
 
 export interface ProfessorUser {