Pushing up subscription work

src/App.tsx

 import AppHeader from "./components/AppHeader";
 import AppFooter from "./components/AppFooter";
-import WelcomePage from "./pages/WelcomePage.tsx";
-import SignUpStudentPage from "./pages/SignUpStudentPage.tsx";
-import SignUpProfessorPage from "./pages/SignUpProfessorPage.tsx";
-import LoginPage from "./pages/LoginPage.tsx";
-import LabsPage from "./pages/LabsPage.tsx";
-import OpeningsPage from "./pages/OpeningsPage.tsx";
-import DiscussionPage from "./pages/DiscussionPage.tsx";
-import ProfilePage from "./pages/ProfilePage.tsx";
-import './App.css'
-import {Route, Routes} from "react-router-dom";
+import WelcomePage from "./pages/WelcomePage";
+import SignUpStudentPage from "./pages/SignUpStudentPage";
+import SignUpProfessorPage from "./pages/SignUpProfessorPage";
+import LoginPage from "./pages/LoginPage";
+import LabsPage from "./pages/LabsPage";
+import OpeningsPage from "./pages/OpeningsPage";
+import DiscussionPage from "./pages/DiscussionPage";
+import ProfilePage from "./pages/ProfilePage";
+import './App.css';
+import { Route, Routes } from "react-router-dom";
 import {
+    ADMIN_ROLE,
     adminPagePath,
     discussionPagePath,
     labsPagePath,
     loginPagePath,
-    openingsPagePath, profilePagePath, signupConfirmationPagePath,
+    openingsPagePath,
+    PROFESSOR_ROLE,
+    profilePagePath,
+    signupConfirmationPagePath,
     signUpProfessorPagePath,
     signUpStudentPagePath,
+    STUDENT_ROLE,
     welcomePagePath
-} from "./utils.ts";
-import DiscussionItemPage from "./pages/DiscussionItemPage.tsx";
-import AdminPage from "./pages/AdminPage.tsx";
-import SignUpConfirmationPage from "./pages/SignUpConfirmationPage.tsx";
+} from "./utils";
+import DiscussionItemPage from "./pages/DiscussionItemPage";
+import AdminPage from "./pages/AdminPage";
+import SignUpConfirmationPage from "./pages/SignUpConfirmationPage";
+import ProtectedRoute from "./components/ProtectedRoute.tsx";
+
 
 export default function App() {
     return (
         <div className="app">
-            <AppHeader/>
+            <AppHeader />
             <Routes>
-                <Route path={welcomePagePath} element={<WelcomePage/>}/>
-                <Route path={signUpStudentPagePath} element={<SignUpStudentPage/>}/>
-                <Route path={signUpProfessorPagePath} element={<SignUpProfessorPage/>}/>
-                <Route path={loginPagePath} element={<LoginPage/>}/>
-                <Route path={signupConfirmationPagePath} element={<SignUpConfirmationPage/>}/>
-                <Route path={adminPagePath} element={<AdminPage/>}/>
-                <Route path={labsPagePath} element={<LabsPage/>}/>
-                <Route path={`${labsPagePath}/:collegeName`} element={<LabsPage/>}/>
-                <Route path={`${labsPagePath}/:collegeName/:majorName`} element={<LabsPage/>}/>
-                <Route path={openingsPagePath} element={<OpeningsPage/>}/>
-                <Route path={discussionPagePath} element={<DiscussionPage/>}/>
-                <Route path={`${discussionPagePath}/:id`} element={<DiscussionItemPage/>}/>
-                <Route path={`${profilePagePath}/:role/:fullName`} element={<ProfilePage/>}/>
+                <Route path={welcomePagePath} element={<WelcomePage />} />
+                <Route path={signUpStudentPagePath} element={<SignUpStudentPage />} />
+                <Route path={signUpProfessorPagePath} element={<SignUpProfessorPage />} />
+                <Route path={loginPagePath} element={<LoginPage />} />
+                <Route path={signupConfirmationPagePath} element={<SignUpConfirmationPage />} />
+                <Route
+                    path={adminPagePath}
+                    element={<ProtectedRoute component={AdminPage} roles={[ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={labsPagePath}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${labsPagePath}/:collegeName`}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${labsPagePath}/:collegeName/:majorName`}
+                    element={<ProtectedRoute component={LabsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={openingsPagePath}
+                    element={<ProtectedRoute component={OpeningsPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={discussionPagePath}
+                    element={<ProtectedRoute component={DiscussionPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${discussionPagePath}/:id`}
+                    element={<ProtectedRoute component={DiscussionItemPage} roles={[STUDENT_ROLE, PROFESSOR_ROLE, ADMIN_ROLE]} />}
+                />
+                <Route
+                    path={`${profilePagePath}/:role/:fullName`}
+                    element={<ProtectedRoute component={ProfilePage} roles={[STUDENT_ROLE, PROFESSOR_ROLE]} />}
+                />
             </Routes>
-            <AppFooter/>
+            <AppFooter />
         </div>
     );
 }

src/components/OpeningListItem.tsx

-import {OpeningsItem, ResearchLabItem} from "../types.ts";
+import {OpeningsItem} from "../types.ts";
 import "./OpeningListItem.css"
-import {fetchResearchLabById} from "../services.ts";
-import {useUserContext} from "../contexts/UserContext.tsx";
-import {useEffect, useState} from "react";
+import { useState} from "react";
 import OpeningPopup from "./OpeningPopup.tsx";
 
 export default function OpeningListItem(props: { opening: OpeningsItem }) {
-    const {token} = useUserContext();
     const id = props.opening.id;
     const name = props.opening.name;
     const type = props.opening.type;
-    const lab_id = props.opening.labId;
-
-    const [lab, setLab] = useState<ResearchLabItem>();
-    useEffect(() => {
-        fetchResearchLabById(lab_id, token)
-            .then((data) => setLab(data))
-            .catch((error) => console.error(error));
-    }, [lab_id, token]);
-    const labName = lab?.name;
+    const labName = props.opening.labName;
 
     const [showPopup, setShowPopup] = useState(false);
     const togglePopup = () => {
@@ -33,7 +22,7 @@ export default function OpeningListItem(props: { opening: OpeningsItem }) {
                 <p className="opening-type">{type}</p>
             </li>
             {showPopup && (
-                <OpeningPopup opening={props.opening} onClose={togglePopup} labName={labName}/>
+                <OpeningPopup opening={props.opening} onClose={togglePopup}/>
             )}
         </>
     );

src/components/OpeningPopup.tsx

@@ -5,12 +5,12 @@ import "./Popup.css"
 
 interface OpeningPopupProps {
     opening: OpeningsItem | null;
-    labName?: string
     onClose: () => void;
 }
 
-const OpeningPopup: React.FC<OpeningPopupProps> = ({opening, onClose, labName}) => {
+const OpeningPopup: React.FC<OpeningPopupProps> = ({opening, onClose}) => {
     if (!opening) return null;
+    console.log(opening)
 
     return (
         <div className="popup-info-overlay">
@@ -27,13 +27,18 @@ const OpeningPopup: React.FC<OpeningPopupProps> = ({opening, onClose, labName})
                 </div>
                 <div>
                     <h3>Research Lab</h3>
-                    <p>{labName}</p>
+                    <p>{opening.labName}</p>
                 </div>
                 <div>
+                    <h3>Posted By</h3>
+                    <p>{opening.professor.firstName} {opening.professor.lastName}</p>
+                    <p>{opening.professor.email}</p>
+                </div>
+                <section>
                     <Link to={`${opening.url}`} target="_blank">
                         <button className="primary-button">Go to Application</button>
                     </Link>
-                </div>
+                </section>
             </div>
         </div>
     );

src/components/OpeningsPopupForm.tsx

-import {number, object, string, ValidationError} from "yup";
+import {object, string, ValidationError} from "yup";
 import {useResearchLabContext} from "../contexts/ResearchLabContext.tsx";
 import {Form, Formik, FormikHelpers} from "formik";
 import TextInput from "./form/TextInput.tsx";
@@ -6,6 +6,8 @@ import {SelectInput} from "./form/SelectInput.tsx";
 import './PopupForm.css';
 import React from "react";
 import {RadioInput} from "./form/RadioInput.tsx";
+import {useProfessorUserContext} from "../contexts/ProfessorUserContext.tsx";
+import {ProfessorUser} from "../types.ts";
 
 interface FormPopupProps {
     onClose: () => void;
@@ -17,7 +19,8 @@ interface FormData {
     description: string;
     type: 'Credit' | 'Paid' | 'Volunteer';
     url: string;
-    labId: number;
+    labName: string;
+    professor: ProfessorUser;
 }
 
 const initialValues: FormData = {
@@ -25,29 +28,33 @@ const initialValues: FormData = {
     description: '',
     type: 'Credit',
     url: '',
-    labId: 1
+    labName: '',
+    professor: {} as ProfessorUser
 }
 
-const validationSchema = object({
-    name: string()
-        .required("The name of the Opening is required."),
-    description: string()
-        .required("The description of the Opening is required."),
-    type: string()
-        .oneOf(['Credit', 'Paid', 'Volunteer'], 'Invalid Opening Type')
-        .required("The Opening type is required."),
-    url: string()
-        .required("The URL to the opening is required.")
-        .url("Please enter a valid URL."),
-    labId: number()
-        .integer("Lab ID must be an integer")
-        .required("The name of the research lab this opening is for is required.")
-})
-
 const OpeningsPopupForm: React.FC<FormPopupProps> = ({onClose, onCreate}) => {
 
+    const {professor} = useProfessorUserContext();
     const {labs} = useResearchLabContext();
 
+    const validationSchema = object({
+        name: string()
+            .required("The name of the Opening is required."),
+        description: string()
+            .required("The description of the Opening is required."),
+        type: string()
+            .oneOf(['Credit', 'Paid', 'Volunteer'], 'Invalid Opening Type')
+            .required("The Opening type is required."),
+        url: string()
+            .required("The URL to the opening is required.")
+            .url("Please enter a valid URL."),
+        labName: string()
+            .required("You can only add an opening for your lab!")
+            .test('is-professor-lab', 'You can only add an opening for your lab!', function (value) {
+                return value === professor?.lab?.name;
+            })
+    })
+
     const handleSubmit = async (
         values: FormData,
         actions: FormikHelpers<FormData>
@@ -56,7 +63,20 @@ const OpeningsPopupForm: React.FC<FormPopupProps> = ({onClose, onCreate}) => {
         if (result instanceof ValidationError) {
             actions.setSubmitting(false);
         } else {
-            onCreate(values);
+            const selectedLab = labs.find(lab => lab.name === values.labName)
+            if (professor) {
+                const sendingData = {
+                    name: values.name,
+                    description: values.description,
+                    type: values.type,
+                    url: values.url,
+                    labName: selectedLab ? selectedLab.name : '',
+                    professor: professor
+                }
+                onCreate(sendingData);
+            } else {
+                console.log("professor is null")
+            }
         }
     }
 
@@ -84,8 +104,7 @@ const OpeningsPopupForm: React.FC<FormPopupProps> = ({onClose, onCreate}) => {
                         </div>
 
                         <TextInput label="URL to Apply" name="url"/>
-                        <SelectInput label="Research Lab:" name="labId"
-                                     options={labs}></SelectInput>
+                        <SelectInput label="Research Lab:" name="labName" options={labs} valueKey="name"></SelectInput>
                         <button type="submit" className="primary-button">CREATE</button>
                     </Form>
                 </Formik>

src/components/Popup.css

@@ -23,6 +23,7 @@
 
 .popup-info-content h2 {
     margin-top: 0;
+    margin-bottom: 10px;
 }
 
 .popup-info-content .close {
@@ -44,7 +45,7 @@
     text-decoration: underline;
 }
 
-.popup-info-content div a button {
-
+.popup-info-content section {
+    padding-top: 10px;
 }
 

src/components/PopupForm.css

@@ -77,7 +77,8 @@
     height: 100px;
 }
 
-.field-error {
+.field-error,
+.checkout-field-error {
     color: var(--error-text-color);
     font-size: smaller;
     font-style: italic;

src/components/ProtectedRoute.tsx

+import React from 'react';
+import {Navigate} from 'react-router-dom';
+import {useUserContext} from "../contexts/UserContext.tsx";
+import {loginPagePath, NO_TOKEN} from "../utils.ts";
+
+interface ProtectedRouteProps {
+    component: React.ComponentType<any>;
+    roles: string[];
+}
+
+const ProtectedRoute: React.FC<ProtectedRouteProps> = ({component: Component, roles}) => {
+    const {token, role} = useUserContext();
+
+    if (token === NO_TOKEN || !roles.includes(role)) {
+        return <Navigate to={loginPagePath}/>;
+    }
+
+    return <Component/>;
+};
+
+export default ProtectedRoute;

src/components/form/SelectInput.tsx

+// Update SelectInput component in `src/components/form/SelectInput.tsx`
 import {Field, ErrorMessage} from 'formik';
 import React from 'react';
 import {CollegeItem, MajorItem, ResearchLabItem} from "../../types.ts";
@@ -6,15 +7,16 @@ interface SelectInputProps {
     label: string;
     name: string;
     options: MajorItem[] | CollegeItem[] | ResearchLabItem[];
+    valueKey?: 'id' | 'name';
 }
 
-export const SelectInput: React.FC<SelectInputProps> = ({label, name, options}) => {
+export const SelectInput: React.FC<SelectInputProps> = ({label, name, options, valueKey = 'id'}) => {
     return (
         <div>
             <label htmlFor={name}>{label}</label>
             <Field as="select" name={name}>
                 {options.map((option: MajorItem | CollegeItem | ResearchLabItem) => (
-                    <option key={option.id} value={option.id}>
+                    <option key={option.id} value={valueKey === 'id' ? option.id : option.name}>
                         {option.name}
                     </option>
                 ))}
@@ -22,4 +24,4 @@ export const SelectInput: React.FC<SelectInputProps> = ({label, name, options})
             <ErrorMessage className="checkout-field-error" name={name} component="span"/>
         </div>
     );
-};
+};
\ No newline at end of file

src/pages/OpeningsPage.tsx

@@ -6,6 +6,7 @@ import axios from "axios";
 import OpeningsPopupForm from "../components/OpeningsPopupForm.tsx";
 import OpeningsList from "../components/OpeningsList.tsx";
 import {useOpeningsContext} from "../contexts/OpeningsContext.tsx";
+import {ProfessorUser} from "../types.ts";
 
 export default function OpeningsPage() {
 
@@ -23,8 +24,10 @@ export default function OpeningsPage() {
         description: string;
         type: string;
         url: string;
-        labId: number;
+        labName: string;
+        professor: ProfessorUser;
     }) => {
+        console.log(formData);
         axios.post(`${openingsAPI}`, formData, {
             headers: {
                 'Authorization': `Bearer ${token}`,

src/pages/ProfilePage.css

@@ -41,4 +41,70 @@
 .profile-section ul li {
     margin: 5px 0;
     font-size: var(--default-font-size);
-}
+}
\ No newline at end of file
+
+/* Additional Styles */
+
+/* Ensure input and textarea text is black */
+.profile-page .text-input {
+    color: black; /* Set text color to black */
+    background-color: white; /* Ensure background is white for better contrast */
+    border: 1px solid #ccc; /* Add border for better visibility */
+    padding: 8px; /* Add padding for better user experience */
+    font-size: 14px; /* Set font size */
+    width: 100%; /* Make input take full width */
+    box-sizing: border-box; /* Include padding in width */
+}
+
+/* Button styling */
+.profile-page .call-to-action-button {
+    background-color: var(--primary-color); /* Use primary color for button */
+    color: white; /* Button text color */
+    border: none; /* Remove border */
+    padding: 10px 20px; /* Add padding */
+    font-size: 16px; /* Set font size */
+    cursor: pointer; /* Change cursor to pointer on hover */
+    margin-top: 10px; /* Add margin to separate from other elements */
+}
+
+/* Button hover effect */
+.profile-page .call-to-action-button:hover {
+    background-color: darken(var(--primary-color), 10%); /* Darken button background on hover */
+}
+
+/* Label styling */
+.profile-page .edit-section label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+/* Input and textarea styling */
+.profile-page .edit-section input,
+.profile-page .edit-section textarea {
+    width: 100%; /* Full width input */
+    margin-top: 5px; /* Space between label and input */
+    margin-bottom: 15px; /* Space between inputs */
+    box-sizing: border-box; /* Ensure padding is included in width calculation */
+}
+
+/* Textarea specific styling */
+.profile-page .edit-section textarea {
+    height: 100px; /* Set height for textarea */
+    resize: vertical; /* Allow vertical resizing */
+}
+
+/* Profile header styling */
+.profile-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1em;
+}
+
+/* Edit section styling */
+.profile-page .edit-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 600px;
+}

src/pages/ProfilePage.tsx

-import './ProfilePage.css'
-import {useParams} from "react-router-dom";
-import {NO_TOKEN, PROFESSOR_ROLE, STUDENT_ROLE} from "../utils.ts";
-import {useUserContext} from "../contexts/UserContext.tsx";
-import {useEffect, useState} from "react";
-import {fetchProfessorByFullName, fetchStudentByFullName} from "../services.ts";
-import {MajorItem, ResearchLabItem} from "../types.ts";
+import './ProfilePage.css';
+import { useParams } from "react-router-dom";
+import { NO_TOKEN, PROFESSOR_ROLE, STUDENT_ROLE } from "../utils.ts";
+import { useUserContext } from "../contexts/UserContext.tsx";
+import { useEffect, useState } from "react";
+import { fetchProfessorByFullName, fetchStudentByFullName, updateProfessorProfile, updateStudentProfile } from "../services.ts";
+import { MajorItem, ResearchLabItem } from "../types.ts";
 
 interface ProfileUser {
     id: number;
@@ -37,32 +37,62 @@ const situationLabelMap: { [key: string]: string } = {
 };
 
 export default function ProfilePage() {
-    const {role, fullName} = useParams();
-    const {token} = useUserContext();
+    const { role, fullName } = useParams();
+    const { token } = useUserContext();
     const [profileUser, setProfileUser] = useState<ProfileUser>();
+    const [isEditing, setIsEditing] = useState(false);
+    const [editData, setEditData] = useState<Partial<ProfileUser>>({});
 
     useEffect(() => {
         const fetchProfileDetails = async () => {
-            if (token !== NO_TOKEN) {
-                if (fullName) {
-                    try {
-                        if (role === PROFESSOR_ROLE) {
-                            const result = await fetchProfessorByFullName(fullName, token);
-                            setProfileUser(result);
-                        }
-                        if (role === STUDENT_ROLE) {
-                            const result = await fetchStudentByFullName(fullName, token);
-                            setProfileUser(result);
-                        }
-                    } catch (error) {
-                        console.error("Failed to load user with name: " + fullName, error);
+            if (token !== NO_TOKEN && fullName) {
+                try {
+                    if (role === PROFESSOR_ROLE) {
+                        const result = await fetchProfessorByFullName(fullName, token);
+                        setProfileUser(result);
+                    } else if (role === STUDENT_ROLE) {
+                        const result = await fetchStudentByFullName(fullName, token);
+                        setProfileUser(result);
                     }
+                } catch (error) {
+                    console.error("Failed to load user with name: " + fullName, error);
                 }
             }
-        }
+        };
         fetchProfileDetails();
     }, [fullName, role, token]);
 
+    const handleEditChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        if (name.startsWith("lab.")) {
+            const labName = name.split(".")[1];
+            setEditData(prevData => ({
+                ...prevData,
+                lab: {
+                    ...prevData.lab,
+                    [labName]: value
+                } as ResearchLabItem
+            }));
+        } else {
+            setEditData({ ...editData, [name]: value });
+        }
+    };
+
+    const handleEditSave = async () => {
+        try {
+            if (role === PROFESSOR_ROLE && profileUser?.id && editData.lab) {
+                await updateProfessorProfile(profileUser.id, { lab: editData.lab }, token);
+                setProfileUser(prev => prev ? ({ ...prev, lab: { ...prev.lab, ...editData.lab } }) : undefined);
+            } else if (role === STUDENT_ROLE && profileUser?.id) {
+                await updateStudentProfile(profileUser.id, editData, token);
+                setProfileUser(prev => prev ? ({ ...prev, ...editData }) : undefined);
+            }
+            setIsEditing(false);
+        } catch (error) {
+            console.error("Failed to update profile", error);
+        }
+    };
+
     const displayStudentYear = profileUser?.year ? studentTypeMap[profileUser.year] : undefined;
     const aboutMeArray = profileUser?.aboutMe ? profileUser.aboutMe.split(', ') : [];
     const selectedLabels = aboutMeArray.map(value => situationLabelMap[value]);
@@ -73,66 +103,132 @@ export default function ProfilePage() {
                 <>
                     <div className='profile-header'>
                         <h1><span>{profileUser.firstName}</span> <span>{profileUser.lastName}</span></h1>
+                        <button className="call-to-action-button" onClick={() => setIsEditing(!isEditing)}>
+                            {isEditing ? 'Cancel' : 'Edit Profile'}
+                        </button>
                     </div>
-                    <div className='profile-section'>
-                        <h2>Contact Information</h2>
-                        <p><span className="attribute">Email:</span> {profileUser.email}</p>
-                    </div>
-                    {role === STUDENT_ROLE && (
-                        <>
-                            <div className='profile-section'>
-                                <h2>Academic Information</h2>
-                                <p><span className="attribute"></span>{displayStudentYear}</p>
-                                <p><span className="attribute">College of </span> {profileUser.major?.college}</p>
-                                <p><span className="attribute">Majoring in </span> {profileUser.major?.name}</p>
-                            </div>
-                            <div className='profile-section'>
-
-                                <h2>Current Situation</h2>
-                                <ul>
-                                    {selectedLabels.map((label, index) => (
-                                        <li key={index}>{label}</li>
-                                    ))}
-                                </ul>
-                            </div>
-                        </>
-                    )}
-                    {role === STUDENT_ROLE && profileUser.subscriptions && (
+                    {isEditing ? (
+                        <div className='edit-section'>
+                            {role === PROFESSOR_ROLE && (
+                                <>
+                                    <h2>Edit Lab Information</h2>
+                                    <label>
+                                        Lab Name:
+                                        <input
+                                            className="text-input"
+                                            type="text"
+                                            name="lab.name"
+                                            value={editData.lab?.name || profileUser.lab?.name || ''}
+                                            onChange={handleEditChange}
+                                        />
+                                    </label>
+                                    <label>
+                                        URL:
+                                        <input
+                                            className="text-input"
+                                            type="text"
+                                            name="lab.url"
+                                            value={editData.lab?.url || profileUser.lab?.url || ''}
+                                            onChange={handleEditChange}
+                                        />
+                                    </label>
+                                    <label>
+                                        Description:
+                                        <textarea
+                                            className="text-input"
+                                            name="lab.description"
+                                            value={editData.lab?.description || profileUser.lab?.description || ''}
+                                            onChange={handleEditChange}
+                                        />
+                                    </label>
+                                </>
+                            )}
+                            {role === STUDENT_ROLE && (
+                                <>
+                                    <h2>Edit Academic Information</h2>
+                                    <label>
+                                        Year:
+                                        <input
+                                            className="text-input"
+                                            type="text"
+                                            name="year"
+                                            value={editData.year || profileUser.year || ''}
+                                            onChange={handleEditChange}
+                                        />
+                                    </label>
+                                    <label>
+                                        About Me:
+                                        <textarea
+                                            className="text-input"
+                                            name="aboutMe"
+                                            value={editData.aboutMe || profileUser.aboutMe || ''}
+                                            onChange={handleEditChange}
+                                        />
+                                    </label>
+                                </>
+                            )}
+                            <button className="call-to-action-button" onClick={handleEditSave}>Save</button>
+                        </div>
+                    ) : (
                         <>
                             <div className='profile-section'>
-                                <h2>Subscriptions</h2>
-                                <ul>
-                                    {profileUser.subscriptions.map((sub, index) => (
-                                        <li key={index}>{sub}</li>
-                                    ))}
-                                </ul>
+                                <h2>Contact Information</h2>
+                                <p><span className="attribute">Email:</span> {profileUser.email}</p>
                             </div>
+                            {role === STUDENT_ROLE && (
+                                <>
+                                    <div className='profile-section'>
+                                        <h2>Academic Information</h2>
+                                        <p>{displayStudentYear}</p>
+                                        <p><span className="attribute">College of </span> {profileUser.major?.college}</p>
+                                        <p><span className="attribute">Majoring in </span> {profileUser.major?.name}</p>
+                                    </div>
+                                    <div className='profile-section'>
+                                        <h2>Current Situation</h2>
+                                        <ul>
+                                            {selectedLabels.map((label, index) => (
+                                                <li key={index}>{label}</li>
+                                            ))}
+                                        </ul>
+                                    </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>
+                                    <p><span className="attribute">Professor</span></p>
+                                    <p><span className="attribute">College of</span> {profileUser.college}</p>
+                                </div>
+                            )}
+                            {(role === PROFESSOR_ROLE && profileUser.lab) && (
+                                <div className='profile-section'>
+                                    <h2>Research Lab Information</h2>
+                                    <p><span className="attribute">Lab Name:</span> {profileUser.lab?.name}</p>
+                                    <p><span className="attribute">College:</span> {profileUser.lab?.major.college}</p>
+                                    <p><span className="attribute">Major:</span> {profileUser.lab?.major.name}</p>
+                                    <p><span className="attribute">Principal Investigator:</span> {profileUser.lab?.principleInvestigator}</p>
+                                    <p><span className="attribute">URL:</span> {profileUser.lab?.url}</p>
+                                    <p><span className="attribute">Description:</span> {profileUser.lab?.description}</p>
+                                </div>
+                            )}
                         </>
                     )}
-                    {role === PROFESSOR_ROLE && (
-                        <div className='profile-section'>
-                            <h2>Academic Information</h2>
-                            <p><span className="attribute"></span>Professor</p>
-                            <p><span className="attribute">College of</span> {profileUser.college}</p>
-                        </div>
-                    )}
-                    {(role === PROFESSOR_ROLE && profileUser.lab) && (
-                        <div className='profile-section'>
-                            <h2>Research Lab Information</h2>
-                            <p><span className="attribute">Lab Name:</span> {profileUser.lab?.name}</p>
-                            <p><span className="attribute">College:</span> {profileUser.lab?.major.college}</p>
-                            <p><span className="attribute">Major:</span> {profileUser.lab?.major.name}</p>
-                            <p><span
-                                className="attribute">Principle Investigator:</span> {profileUser.lab?.principleInvestigator}
-                            </p>
-                            <p><span className="attribute">URL:</span> {profileUser.lab?.url}</p>
-                            <p><span className="attribute">Description:</span> {profileUser.lab?.description}</p>
-                        </div>
-                    )}
                 </>
             ) : (
                 <p>Loading...</p>
             )}
         </div>
     );
-}
+}
\ No newline at end of file

src/services.ts

@@ -214,4 +214,24 @@ export async function signUp(signUpForm: SignupForm): Promise<SignUpResponse> {
             throw new Error("An unexpected error occurred");
         }
     }
-}
+}
\ No newline at end of file
+
+export const updateProfessorProfile = async (id: number, data: Partial<ProfessorUser>, token: string) => {
+    const response = await axios.put(`${professorsAPI}/${id}`, data, {
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        }
+    });
+    return response.data as ProfessorUser;
+};
+
+export const updateStudentProfile = async (id: number, data: Partial<StudentUser>, token: string) => {
+    const response = await axios.put(`${studentsAPI}/${id}`, data, {
+        headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+        }
+    });
+    return response.data as StudentUser;
+};
\ No newline at end of file

src/types.ts

@@ -34,7 +34,8 @@ export interface OpeningsItem {
     description: string;
     type: string;
     url: string;
-    labId: number;
+    labName: string;
+    professor: ProfessorUser;
 }
 
 export interface CollegeItem {