Shankar frontend

src/App.tsx

@@ -1,6 +1,9 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
 import "./style/App.css";
+
+import Opportunities from "./opportunities/pages/opportunities.tsx";
+
 import Home from "./shared/pages/Home.tsx";
 import PageNotFound from "./shared/pages/404.tsx";
 import MainNavigation from "./shared/components/Navigation/MainNavigation.tsx";
@@ -34,6 +37,8 @@ function App() {
               <Route path="/login" element={<LoginRedirection />} />
               <Route path="/signout" element={<LogoutRedirection />} />
               <Route path="/logout" element={<LogoutRedirection />} />
+
+              <Route path="/opportunities" element={<Opportunities />} />
 
               <Route path="/jobs" element={<Jobs />} />
               <Route path="/profile" element={<ProfilePage />} />

src/opportunities/components/opportunitiesDetails.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+
+
+//Created a new interface to make displaying an opportunity easier, contains 9 fields
+
+export interface Opportunity {
+  name: string;
+  description: string;
+  recommended_experience: string;
+  pay: number;
+  semester: string;
+  year: number;
+  application_due: Date;
+  location: string;
+  professor: string
+  // Add any other relevant information about an opportunity
+}
+
+
+// List of sample opportunities of type Opportunity
+
+const sampleOpportunities: Opportunity[] = [
+  {
+    name: "Research Assistant - Machine Learning Lab",
+    description: "Work on cutting-edge ML projects",
+    recommended_experience: "Python, Machine Learning basics",
+    pay: 15.00,
+    semester: "Fall",
+    year: 2024,
+    application_due: new Date("2024-08-01"),
+    location: "DCC",
+    professor: "Dr. Emily Chen"
+  },
+  {
+    name: "Data Visualization Intern - Data Science Center",
+    description: "Create compelling visualizations for real-world datasets.",
+    recommended_experience: "D3.js, Tableau, or Matplotlib",
+    pay: 12.50,
+    semester: "Spring",
+    year: 2025,
+    application_due: new Date("2025-01-15"),
+    location: "EMPAC",
+    professor: "Dr. Alan Green"
+  },
+  {
+    name: "Undergraduate Researcher - Renewable Energy Lab",
+    description: "Analyze energy efficiency of solar panel setups.",
+    recommended_experience: "R, Excel, or energy systems knowledge",
+    pay: 14.00,
+    semester: "Summer",
+    year: 2025,
+    application_due: new Date("2025-04-30"),
+    location: "Jonsson Engineering Center",
+    professor: "Dr. Maria Santos"
+  },
+  {
+    name: "AI in Healthcare Research Assistant",
+    description: "Develop and test AI models for diagnostic tools.",
+    recommended_experience: "Python, TensorFlow, basic healthcare knowledge",
+    pay: 16.00,
+    semester: "Fall",
+    year: 2024,
+    application_due: new Date("2024-07-20"),
+    location: "Biotech Center",
+    professor: "Dr. Raj Patel"
+  },
+  {
+    name: "Human-Computer Interaction (HCI) Researcher",
+    description: "Study user interfaces to improve accessibility.",
+    recommended_experience: "HTML, CSS, JavaScript, Usability Testing",
+    pay: 13.00,
+    semester: "Spring",
+    year: 2025,
+    application_due: new Date("2025-01-10"),
+    location: "Carnegie Building",
+    professor: "Dr. Susan Miller"
+  },
+  {
+    name: "Climate Modeling Research Intern",
+    description: "Simulate climate patterns using advanced modeling techniques.",
+    recommended_experience: "Python, MATLAB, or climate science coursework",
+    pay: 14.50,
+    semester: "Summer",
+    year: 2025,
+    application_due: new Date("2025-03-15"),
+    location: "Troy Building",
+    professor: "Dr. John Reynolds"
+  }
+];
+
+
+// This component returns a 'list' of all the opportunities 
+
+const OpportunitiesList = () => {
+  return (
+    <div className="p-4">
+      <div className="overflow-x-auto">
+        <table className="w-full border-collapse">
+          <thead>
+            {/* Column Headers */}
+            <tr className="bg-gray-100">
+              <th className="p-3 text-left border">Position</th>
+              <th className="p-3 text-left border">Description</th>
+              <th className="p-3 text-left border">Location</th>
+              <th className="p-3 text-left border">Pay</th>
+              <th className="p-3 text-left border">Professor</th>
+              <th className="p-3 text-left border">Term</th>
+              <th className="p-3 text-left border">Action</th>
+            </tr>
+          </thead>
+          <tbody>
+            {/* Info about the opportunities */}
+            {sampleOpportunities.map((opportunity, index) => (
+              <tr key={index} className="hover:bg-gray-50">
+                <td className="p-3 border font-medium">{opportunity.name}</td>
+                <td className="p-3 border">{opportunity.description}</td>
+                <td className="p-3 border">{opportunity.location}</td>
+                <td className="p-3 border">${opportunity.pay}/hr</td>
+                <td className="p-3 border">{opportunity.professor}</td>
+                <td className="p-3 border">
+                  {opportunity.semester} {opportunity.year}
+                </td>
+                <td className="p-3 border">
+                  <button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600">
+                    Apply
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default OpportunitiesList;

src/opportunities/pages/Jobs.tsx

@@ -1,40 +1,41 @@
-import React, { useState } from "react";
-import Posts from "../components/Posts.tsx";
+import React from "react";
+
+import Posts from "../components/Posts";
+
 import PageNavigation from "../../shared/components/Navigation/PageNavigation";
+
 import usePageNavigation from "../../shared/hooks/page-navigation-hook";
 
-const Jobs = () => {
-  const [loading, setLoading] = useState<string | boolean>(false);
-  const [years, setYears] = useState<string[]>([]);
-
-  async function fetchYears() {
-    const response = await fetch(`${process.env.REACT_APP_BACKEND_SERVER}/years`);
-
-    if (response.ok) {
-      const data = await response.json();
-      setYears(data);
-    } else {
-      console.log("No response for years");
-      setLoading("no response");
-    }
-  }
-  fetchYears()
+import OpportunitiesList from "../components/opportunitiesDetails.tsx";
+
+interface PageNavigationType {
+  activePage: string;
+  pages: string[];
+}
+
+const Jobs: React.FC = () => {
 
-  const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search");
+  // navigation bar
+  const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search") as [
+    PageNavigationType,
+    (page: string) => void
+  ];
 
-  return loading === false && years != null ? (
-    <section className="flex flex-col h-screen justify-between gap-3 p-1">
+  // displaying opportunities list component
+  return (
+    <section className="flex flex-col h-screen justify-between gap-3">
       <section className="flex2 gap-3">
         <section>
           <PageNavigation title="Jobs" pages={pages} switchPage={switchPage} />
-          {pages.activePage === "Search" && <Posts years={years}/>}
+
+          {pages.activePage === "Search" && <Posts />}
+
         </section>
       </section>
+      <OpportunitiesList></OpportunitiesList>
     </section>
-  ) : loading === "no response" ? (
-    <h1>There was no response</h1>
-  ) : (
-    <h1>Loading...</h1>
+
+
   );
 };
 

src/opportunities/pages/opportunities.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import OpportunitiesList from "../components/opportunitiesDetails.tsx";
+
+
+export default function Opportunities() {
+
+
+  // returning opportunities component on (currently not in use) opportunities page
+  return (
+    <div className="w-9/12 mx-auto">
+        <OpportunitiesList></OpportunitiesList>
+    </div>
+  );
+};