complete DiscussionPage.tsx html/css - add dummy data in discussion.json

src/assets/global.css

@@ -206,6 +206,17 @@ body {
     background: var(--secondary-color);
 }
 
+.secondary-button,
+.secondary-button:visited {
+    display: inline-block;
+    background: none;
+    border: none;
+    color: var(--secondary-color);
+    text-decoration: none;
+    font-style: italic;
+    cursor: pointer;
+}
+
 .tertiary-button,
 .tertiary-button:visited {
     display: inline-block;

src/components/DiscussionList.css

+ul#discussion-posts {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    gap: 5px;
+}
\ No newline at end of file

src/components/DiscussionList.tsx

+import {getDiscussions} from "../data.ts";
+import DiscussionListItem from "./DiscussionListItem";
+import './DiscussionList.css';
+
+export default function DiscussionList() {
+
+    const discussionList = getDiscussions().map((discussion) => (
+        <DiscussionListItem discussion={discussion}/>
+    ));
+
+    return <ul id="discussion-posts">{discussionList}</ul>
+}
\ No newline at end of file

src/components/DiscussionListItem.css

+.discussion-post {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 20px;
+    gap: 10px;
+    border-bottom: 1px solid var(--default-text-color);
+    border-radius: 5px;
+    width: 100%;
+}
+
+.discussion-post .discussion-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-decoration: underline;
+}
+
+.discussion-post .discussion-author-details {
+    font-size: 1rem;
+    font-style: italic;
+}
+
+.discussion-post .discussion-content {
+    font-size: 1.1rem;
+    text-align: left;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.discussion-post .discussion-details a {
+    font-size: 1rem;
+    text-decoration: underline;
+}
\ No newline at end of file

src/components/DiscussionListItem.tsx

+import {Link} from "react-router-dom";
+import {DiscussionItem, ProfessorUser, StudentUser} from "../types.ts";
+import {discussionPagePath, profilePagePath} from "../utils.ts";
+import "./DiscussionListItem.css";
+
+function isStudentUser(author: StudentUser | ProfessorUser): author is StudentUser {
+    return (author as StudentUser).studentType !== undefined;
+}
+
+function humanizeDate(dateString: string) {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    });
+}
+
+export default function DiscussionListItem(props: {
+    discussion: DiscussionItem;
+}) {
+
+    const id = props.discussion.id;
+    const title = props.discussion.title;
+    const author = props.discussion.author;
+    const content = props.discussion.content;
+    const dateCreated = humanizeDate(props.discussion.dateCreated);
+    const comments = props.discussion.comments;
+    const likes = props.discussion.likes;
+    const emailFirstPart = props.discussion.author.email.split('@')[0];
+
+    let authorDetails;
+    if (isStudentUser(author)) {
+        authorDetails = `${author.studentType} | ${author.major.name} | ${author.studentDescription}`;
+    } else {
+        authorDetails = `${author.professorType} | ${author.researchLabCollege?.name}`;
+    }
+
+    return (
+        <li key={id} className="discussion-post">
+            <Link to={`${discussionPagePath}/${id}`}>
+                <h1 className="discussion-title">{title}</h1>
+            </Link>
+            <p className="discussion-author-details">{authorDetails}</p>
+            <p className="discussion-content">{content}</p>
+            <p className="discussion-details">
+                Posted by <Link
+                to={`${profilePagePath}/${emailFirstPart}`}>{emailFirstPart}</Link> on {dateCreated} | <i
+                className="fa-regular fa-comment"></i> {comments} | <i
+                className="fa-regular fa-thumbs-up"></i> {likes}
+            </p>
+
+        </li>
+    );
+}
\ No newline at end of file

src/components/FilterLabsLink.css

+ul.college-filter {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    list-style-type: none;
+}
+
+li.college-filter-item {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-left: 0.5em;
+}
 
-.college-name {
-    font-size: 1.5rem; /* Adjust the size as needed */
+div.college-name {
     font-weight: bold;
     cursor: pointer;
-    margin-bottom: 0.5rem;
 }
 
-.major-name {
-    font-size: 1.2rem; /* Adjust the size as needed */
-    margin-left: 1rem; /* Indent to differentiate from college names */
+ul.major-filter {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    list-style-type: none;
+    margin: 1em 0 1em 1em;
+}
+
+li.major-name {
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+

src/components/FilterLabsLinks.tsx

@@ -29,12 +29,12 @@ export default function FilterLabsLinks(props: CollegeProps) {
     const collegeLinks = props.colleges.map((college) => {
         const isOpen = openColleges[college.id] || false;
         return (
-            <li key={college.id}>
+            <li className='college-filter-item' key={college.id}>
                 <div className="college-name" onClick={() => handleCollegeClick(college.name, college.id)} >
                     {college.name}
                 </div>
                 {isOpen && (
-                    <ul>
+                    <ul className='major-filter'>
                         {college.majors.map((major) => (
                             <li key={major.id} className="major-name" onClick={() => handleMajorClick(major.name)}>{major.name}</li>
                         ))}
@@ -45,5 +45,5 @@ export default function FilterLabsLinks(props: CollegeProps) {
     });
 
 
-    return <ul>{collegeLinks}</ul>;
+    return <ul className='college-filter'>{collegeLinks}</ul>;
 }
\ No newline at end of file

src/data.ts

+import sourceData from "./discussion.json";
+import {DiscussionItem} from "./types.ts";
+
+export function getDiscussions(): DiscussionItem[] {
+    return sourceData.discussions as DiscussionItem[];
+}
\ No newline at end of file

src/discussion.json

+{
+  "discussions": [
+    {
+      "id": 1,
+      "title": "Looking for a College of Engineering Research position",
+      "content": "Hello everyone, I hope you're all doing well. My name is Harold, and I'm currently an undergraduate student majoring in Aerospace Engineering at Virginia Tech. I'm reaching out here because I'm really passionate about aerospace research and am actively looking for a research position to gain practical experience and contribute to ongoing projects. A bit about my background: I've developed a solid foundation in key aerospace subjects like fluid dynamics, propulsion systems, and structural analysis through my coursework. I've particularly enjoyed projects related to aerodynamics and aircraft design, which have sparked my interest in research and innovation. I have experience with software tools such as MATLAB, ANSYS, and SolidWorks, and I thrive in collaborative environments. I'm eager to apply my skills, learn new ones, and contribute to meaningful research in the aerospace field.",
+      "author": {
+        "id": 1,
+        "firstName": "John",
+        "lastName": "Doe",
+        "email": "johndoe@example.com",
+        "studentType": "Undergraduate",
+        "major": {
+          "id": 1,
+          "name": "Aerospace Engineering"
+        },
+        "studentDescription": "Actively Seeking Research Opportunity"
+      },
+      "dateCreated": "2023-07-12T00:00:00Z",
+      "comments": 12,
+      "likes": 10
+    },
+    {
+      "id": 2,
+      "title": "Recent Advances in Aerodynamics and Flow Control - Research Update",
+      "content": "I am pleased to share with you some exciting updates from our latest research efforts in the field of aerodynamics and flow control. Over the past year, our team at Virginia Tech has been working diligently on several innovative projects, and I am thrilled to present some of our key accomplishments:\nDevelopment of Active Flow Control Mechanisms: We have successfully designed and tested a novel active flow control mechanism that significantly reduces drag on aircraft wings. This new mechanism employs a combination of synthetic jet actuators and surface plasma discharges to manipulate boundary layer behavior, leading to improved aerodynamic efficiency. Our initial wind tunnel tests have shown a reduction in drag by up to 15%, which has the potential to enhance fuel efficiency in commercial aircraft significantly.",
+      "author": {
+        "id": 1,
+        "firstName": "Steve",
+        "lastName": "Brown",
+        "email": "robertbrown@example.com",
+        "professorType": "Principal Investigator",
+        "researchLabName": "Aerodynamics Engineering Lab",
+        "researchLabUrl": "http://example.com",
+        "researchLabPrincipalInvestigator": "Dr. Robert Brown",
+        "researchLabCollege": {
+          "id": 1,
+          "name": "College of Engineering"
+        },
+        "researchLabDescription": "Our lab focuses on the future of Electrical Engineering."
+      },
+      "dateCreated": "2023-07-28T00:00:00Z",
+      "comments": 29,
+      "likes": 150
+    },
+    {
+      "id": 3,
+      "title": "Exciting Milestones in My Biomedical Engineering Research Journey",
+      "content": "I hope you're all doing well! My name is Hassan, and I am a graduate researcher in Biomedical Engineering at Virginia Tech. I am excited to share some of the accomplishments from my recent research projects in the field of biomedical engineering.\nDevelopment of Biocompatible Materials for Implants: One of my key projects involved the development of novel biocompatible materials for medical implants. Using advanced polymer synthesis techniques, I have created materials that exhibit enhanced biocompatibility and mechanical properties. These materials have the potential to improve the longevity and performance of implants, benefiting patients with conditions requiring long-term medical devices.",
+      "author": {
+        "id": 2,
+        "firstName": "Alice",
+        "lastName": "Johnson",
+        "email": "alicejohnson@example.com",
+        "studentType": "Graduate (Master's)",
+        "major": {
+          "id": 2,
+          "name": "Biomedical Engineering"
+        },
+        "studentDescription": "Current Researcher Receiving Credit"
+      },
+      "dateCreated": "2023-07-31T00:00:00Z",
+      "comments": 12,
+      "likes": 60
+    }
+  ]
+}
\ No newline at end of file

src/pages/DiscussionPage.css

+.discussion-page {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+}
+
+.discussion-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 1em;
+    align-items: center;
+}
+
+.discussion-header h1 {
+    font-size: 2em;
+    font-weight: bold;
+}
+
+.discussion-header-buttons {
+    display: flex;
+    gap: 1em;
+    align-items: center;
+}
\ No newline at end of file

src/pages/DiscussionPage.tsx

 import './DiscussionPage.css'
+import DiscussionList from "../components/DiscussionList.tsx";
+import {Link} from "react-router-dom";
+import {discussionPagePath} from "../utils.ts";
 
 export default function DiscussionPage() {
     return (
         <div className='discussion-page center-content'>
-            <h1>PLACEHOLDER FOR DISCUSSION PAGE</h1>
+            <section className='discussion-header'>
+                <h1>Discussion Forum</h1>
+                <div className='discussion-header-buttons'>
+                    <div className='sort-dropdown'>
+                        <label htmlFor="filter" className='secondary-button'>Sort by:</label>
+                        <select className='secondary-button' name="filter" id="filter">
+                            <option value="newest">Date (Oldest First)</option>
+                            <option value="oldest">Date (Newest First)</option>
+                            {/*<option value="highest">Likes (Highest to Lowest)</option>*/}
+                            {/*<option value="lowest">Likes (Lowest to Highest)</option>*/}
+                        </select>
+                    </div>
+                    <Link to={`${discussionPagePath}/create`}>
+                        <button className='primary-button'>Create Discussion</button>
+                    </Link>
+
+                </div>
+            </section>
+            <DiscussionList/>
         </div>
     );
 }
\ No newline at end of file

src/pages/LabsPage.css

 .labs-page {
     display: flex;
     flex-direction: row;
-    /*align-items: center;*/
     padding: 1em;
 }
 
@@ -11,19 +10,15 @@
     border: double 5px var(--tertiary-color);
 }
 
-.labs-nav ul {
-    display: flex;
-    flex-direction: column;
-}
-
-.labs-nav ul li {
-    padding: 1em 0;
+.labs-nav-title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-align: left;
 }
 
 .labs-content {
     display: flex;
     flex-direction: column;
-    //holder them to left of the column
     justify-content: left;
     padding: 1em;
 }

src/pages/LabsPage.tsx

@@ -87,7 +87,7 @@ export default function LabsPage() {
     return (
         <div className='labs-page center-content'>
             <div className='labs-nav'>
-                <h2 className='labs-nav-title'>Filter Options</h2>
+                <h1 className='labs-nav-title'>Filter Options</h1>
                 <FilterLabsLinks colleges={colleges}/>
             </div>
             <div className='labs-content'>

src/types.ts

@@ -37,4 +37,37 @@ export interface ResearchLabProps {
 
 export interface CollegeProps {
     colleges: CollegeItem[];
-}
\ No newline at end of file
+}
+
+export interface DiscussionItem {
+    id: number;
+    title: string;
+    content: string;
+    author: StudentUser | ProfessorUser;
+    dateCreated: string;
+    comments?: number;
+    likes?: number;
+}
+
+export interface StudentUser {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    studentType: string;    // Undergraduate or Graduate
+    major: MajorItem;   // Major
+    studentDescription: string; // "Actively Seeking Research Opportunities" or "Current Researcher Receiving Credit"
+}
+
+export interface ProfessorUser {
+    id: number;
+    firstName: string;
+    lastName: string;
+    email: string;
+    professorType?: string;  // Principal Investigator or Researcher
+    researchLabName?: string;
+    researchLabUrl?: string;
+    researchLabPrincipalInvestigator?: string;
+    researchLabCollege?: CollegeItem;
+    researchLabDescription?: string;
+}

src/utils.ts

 // http://localhost:8080/api/login
-// export const baseUrl = 'https://vtrc-backend.discovery.cs.vt.edu/api'
-export const baseUrl = 'http://localhost:8080/api'
+export const baseUrl = 'https://vtrc-backend.discovery.cs.vt.edu/api'
+// export const baseUrl = 'http://localhost:8080/api'
 
 export const loginAPI = `${baseUrl}/login`;
 export const labsAPI = `${baseUrl}/labs`;