add posted details

src/components/DiscussionListItem.tsx

@@ -41,7 +41,7 @@ export default function DiscussionListItem(props: { discussion: DiscussionItem,
         if (token !== NO_TOKEN) {
             deleteDiscussion(id, token)
                 .then(() => {
-                    refreshDiscussions(); // refresh discussions after deletion
+                    refreshDiscussions(""); // refresh discussions after deletion
                     console.log('Discussion deleted successfully');
                 })
                 .catch((error) => {

src/components/OpeningListItem.css

@@ -29,3 +29,8 @@
     font-size: 1.1rem;
     text-align: left;
 }
+
+.opening-item .opening-details a {
+    font-size: 1rem;
+    text-decoration: underline;
+}

src/components/OpeningListItem.tsx

@@ -2,12 +2,17 @@ import {OpeningsItem} from "../types.ts";
 import "./OpeningListItem.css"
 import { useState} from "react";
 import OpeningPopup from "./OpeningPopup.tsx";
+import {Link} from "react-router-dom";
+import {dateTimeFormatOptions, profilePagePath} from "../utils.ts";
 
 export default function OpeningListItem(props: { opening: OpeningsItem }) {
     const id = props.opening.id;
     const name = props.opening.name;
     const type = props.opening.type;
     const labName = props.opening.labName;
+    const createdAtDate = new Date(props.opening.createdAt);
+    const createdAtString = createdAtDate.toLocaleString('en-US', dateTimeFormatOptions);
+    const professorName = `${props.opening.professor.firstName} ${props.opening.professor.lastName}`
 
     const [showPopup, setShowPopup] = useState(false);
     const togglePopup = () => {
@@ -19,7 +24,9 @@ export default function OpeningListItem(props: { opening: OpeningsItem }) {
             <li key={id} className="opening-item">
                 <h1 className="opening-title" onClick={togglePopup}>{name}</h1>
                 <p className="opening-lab">{labName}</p>
-                <p className="opening-type">{type}</p>
+                <p className="opening-details"><Link
+                    to={`${profilePagePath}/PROFESSOR/${professorName}`}>{professorName}</Link> posted a <strong>{type}</strong> opportunity on {createdAtString}
+                </p>
             </li>
             {showPopup && (
                 <OpeningPopup opening={props.opening} onClose={togglePopup}/>

src/components/OpeningPopup.tsx

@@ -2,6 +2,7 @@ import {OpeningsItem} from "../types.ts";
 import React from "react";
 import {Link} from "react-router-dom";
 import "./Popup.css"
+import {dateTimeFormatOptions} from "../utils.ts";
 
 interface OpeningPopupProps {
     opening: OpeningsItem | null;
@@ -12,6 +13,10 @@ const OpeningPopup: React.FC<OpeningPopupProps> = ({opening, onClose}) => {
     if (!opening) return null;
     console.log(opening)
 
+    const createdAtDate = new Date(opening.createdAt);
+    const createdAtString = createdAtDate.toLocaleString('en-US', dateTimeFormatOptions);
+    const professorName = `${opening.professor.firstName} ${opening.professor.lastName}`
+
     return (
         <div className="popup-info-overlay">
             <div className="popup-info-content">
@@ -31,9 +36,13 @@ const OpeningPopup: React.FC<OpeningPopupProps> = ({opening, onClose}) => {
                 </div>
                 <div>
                     <h3>Posted By</h3>
-                    <p>{opening.professor.firstName} {opening.professor.lastName}</p>
+                    <p>{professorName}</p>
                     <p>{opening.professor.email}</p>
                 </div>
+                <div>
+                    <h3>Posted On</h3>
+                    <p>{createdAtString}</p>
+                </div>
                 <section>
                     <Link to={`${opening.url}`} target="_blank">
                         <button className="primary-button">Go to Application</button>