Skip to content
Snippets Groups Projects
Commit ce643939 authored by Johann Ruiz's avatar Johann Ruiz
Browse files

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'
parent 96f11c54
No related branches found
No related tags found
1 merge request!2Subscribing
Pipeline #10794 canceled
This commit is part of merge request !2. Comments created here will be created in the context of that merge request.
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>
......
......@@ -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) {
......
......@@ -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>
......
......@@ -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 = '/';
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment