From 96f11c54b63b5920a2e9a9cfc689e0136e18dadb Mon Sep 17 00:00:00 2001
From: Johann Ruiz <johannruiz176@vt.edu>
Date: Fri, 26 Jul 2024 18:45:21 -0400
Subject: [PATCH] subscribingh
---
src/components/LabPopup.css | 47 ++++++++++++++++++++++++++++++++++++
src/components/LabPopup.tsx | 48 +++++++++++++++++++++++++++----------
src/types.ts | 1 +
3 files changed, 84 insertions(+), 12 deletions(-)
create mode 100644 src/components/LabPopup.css
diff --git a/src/components/LabPopup.css b/src/components/LabPopup.css
new file mode 100644
index 0000000..4e5890b
--- /dev/null
+++ b/src/components/LabPopup.css
@@ -0,0 +1,47 @@
+.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;
+}
diff --git a/src/components/LabPopup.tsx b/src/components/LabPopup.tsx
index 168dad3..f9ee15d 100644
--- a/src/components/LabPopup.tsx
+++ b/src/components/LabPopup.tsx
@@ -1,15 +1,38 @@
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>
);
diff --git a/src/types.ts b/src/types.ts
index fac3055..738ec41 100644
--- a/src/types.ts
+++ b/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 {
--
GitLab