Skip to content

Commit f6129d7

Browse files
RafaelCenzanoRafaelCenzano
authored
Shankar frontend (#124)
2 parents 1224827 + 2d92f39 commit f6129d7

File tree

4 files changed

+183
-26
lines changed

4 files changed

+183
-26
lines changed

‎src/App.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import React from "react";
22
import { Routes, Route } from "react-router-dom";
33
import "./style/App.css";
4+
5+
import Opportunities from "./opportunities/pages/opportunities.tsx";
6+
47
import Home from "./shared/pages/Home.tsx";
58
import PageNotFound from "./shared/pages/404.tsx";
69
import MainNavigation from "./shared/components/Navigation/MainNavigation.tsx";
@@ -34,6 +37,8 @@ function App() {
3437
<Route path="/login" element={<LoginRedirection />} />
3538
<Route path="/signout" element={<LogoutRedirection />} />
3639
<Route path="/logout" element={<LogoutRedirection />} />
40+
41+
<Route path="/opportunities" element={<Opportunities />} />
3742

3843
<Route path="/jobs" element={<Jobs />} />
3944
<Route path="/profile" element={<ProfilePage />} />

‎src/opportunities/components/opportunitiesDetails.tsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from "react";
2+
3+
4+
//Created a new interface to make displaying an opportunity easier, contains 9 fields
5+
6+
export interface Opportunity {
7+
name: string;
8+
description: string;
9+
recommended_experience: string;
10+
pay: number;
11+
semester: string;
12+
year: number;
13+
application_due: Date;
14+
location: string;
15+
professor: string
16+
// Add any other relevant information about an opportunity
17+
}
18+
19+
20+
// List of sample opportunities of type Opportunity
21+
22+
const sampleOpportunities: Opportunity[] = [
23+
{
24+
name: "Research Assistant - Machine Learning Lab",
25+
description: "Work on cutting-edge ML projects",
26+
recommended_experience: "Python, Machine Learning basics",
27+
pay: 15.00,
28+
semester: "Fall",
29+
year: 2024,
30+
application_due: new Date("2024-08-01"),
31+
location: "DCC",
32+
professor: "Dr. Emily Chen"
33+
},
34+
{
35+
name: "Data Visualization Intern - Data Science Center",
36+
description: "Create compelling visualizations for real-world datasets.",
37+
recommended_experience: "D3.js, Tableau, or Matplotlib",
38+
pay: 12.50,
39+
semester: "Spring",
40+
year: 2025,
41+
application_due: new Date("2025-01-15"),
42+
location: "EMPAC",
43+
professor: "Dr. Alan Green"
44+
},
45+
{
46+
name: "Undergraduate Researcher - Renewable Energy Lab",
47+
description: "Analyze energy efficiency of solar panel setups.",
48+
recommended_experience: "R, Excel, or energy systems knowledge",
49+
pay: 14.00,
50+
semester: "Summer",
51+
year: 2025,
52+
application_due: new Date("2025-04-30"),
53+
location: "Jonsson Engineering Center",
54+
professor: "Dr. Maria Santos"
55+
},
56+
{
57+
name: "AI in Healthcare Research Assistant",
58+
description: "Develop and test AI models for diagnostic tools.",
59+
recommended_experience: "Python, TensorFlow, basic healthcare knowledge",
60+
pay: 16.00,
61+
semester: "Fall",
62+
year: 2024,
63+
application_due: new Date("2024-07-20"),
64+
location: "Biotech Center",
65+
professor: "Dr. Raj Patel"
66+
},
67+
{
68+
name: "Human-Computer Interaction (HCI) Researcher",
69+
description: "Study user interfaces to improve accessibility.",
70+
recommended_experience: "HTML, CSS, JavaScript, Usability Testing",
71+
pay: 13.00,
72+
semester: "Spring",
73+
year: 2025,
74+
application_due: new Date("2025-01-10"),
75+
location: "Carnegie Building",
76+
professor: "Dr. Susan Miller"
77+
},
78+
{
79+
name: "Climate Modeling Research Intern",
80+
description: "Simulate climate patterns using advanced modeling techniques.",
81+
recommended_experience: "Python, MATLAB, or climate science coursework",
82+
pay: 14.50,
83+
semester: "Summer",
84+
year: 2025,
85+
application_due: new Date("2025-03-15"),
86+
location: "Troy Building",
87+
professor: "Dr. John Reynolds"
88+
}
89+
];
90+
91+
92+
// This component returns a 'list' of all the opportunities
93+
94+
const OpportunitiesList = () => {
95+
return (
96+
<div className="p-4">
97+
<div className="overflow-x-auto">
98+
<table className="w-full border-collapse">
99+
<thead>
100+
{/* Column Headers */}
101+
<tr className="bg-gray-100">
102+
<th className="p-3 text-left border">Position</th>
103+
<th className="p-3 text-left border">Description</th>
104+
<th className="p-3 text-left border">Location</th>
105+
<th className="p-3 text-left border">Pay</th>
106+
<th className="p-3 text-left border">Professor</th>
107+
<th className="p-3 text-left border">Term</th>
108+
<th className="p-3 text-left border">Action</th>
109+
</tr>
110+
</thead>
111+
<tbody>
112+
{/* Info about the opportunities */}
113+
{sampleOpportunities.map((opportunity, index) => (
114+
<tr key={index} className="hover:bg-gray-50">
115+
<td className="p-3 border font-medium">{opportunity.name}</td>
116+
<td className="p-3 border">{opportunity.description}</td>
117+
<td className="p-3 border">{opportunity.location}</td>
118+
<td className="p-3 border">${opportunity.pay}/hr</td>
119+
<td className="p-3 border">{opportunity.professor}</td>
120+
<td className="p-3 border">
121+
{opportunity.semester} {opportunity.year}
122+
</td>
123+
<td className="p-3 border">
124+
<button className="bg-blue-500 text-white px-4 py-1 rounded hover:bg-blue-600">
125+
Apply
126+
</button>
127+
</td>
128+
</tr>
129+
))}
130+
</tbody>
131+
</table>
132+
</div>
133+
</div>
134+
);
135+
};
136+
137+
export default OpportunitiesList;

‎src/opportunities/pages/Jobs.tsx‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,41 @@
1-
import React, { useState } from "react";
2-
import Posts from "../components/Posts.tsx";
1+
import React from "react";
2+
3+
import Posts from "../components/Posts";
4+
35
import PageNavigation from "../../shared/components/Navigation/PageNavigation";
6+
47
import usePageNavigation from "../../shared/hooks/page-navigation-hook";
58

6-
const Jobs = () => {
7-
const [loading, setLoading] = useState<string | boolean>(false);
8-
const [years, setYears] = useState<string[]>([]);
9-
10-
async function fetchYears() {
11-
const response = await fetch(`${process.env.REACT_APP_BACKEND_SERVER}/years`);
12-
13-
if (response.ok) {
14-
const data = await response.json();
15-
setYears(data);
16-
} else {
17-
console.log("No response for years");
18-
setLoading("no response");
19-
}
20-
}
21-
fetchYears()
9+
import OpportunitiesList from "../components/opportunitiesDetails.tsx";
10+
11+
interface PageNavigationType {
12+
activePage: string;
13+
pages: string[];
14+
}
15+
16+
const Jobs: React.FC = () => {
2217

23-
const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search");
18+
// navigation bar
19+
const [pages, switchPage] = usePageNavigation(["Search", "Saved"], "Search") as [
20+
PageNavigationType,
21+
(page: string) => void
22+
];
2423

25-
return loading === false && years != null ? (
26-
<section className="flex flex-col h-screen justify-between gap-3 p-1">
24+
// displaying opportunities list component
25+
return (
26+
<section className="flex flex-col h-screen justify-between gap-3">
2727
<section className="flex2 gap-3">
2828
<section>
2929
<PageNavigation title="Jobs" pages={pages} switchPage={switchPage} />
30-
{pages.activePage === "Search" && <Posts years={years}/>}
30+
31+
{pages.activePage === "Search" && <Posts />}
32+
3133
</section>
3234
</section>
35+
<OpportunitiesList></OpportunitiesList>
3336
</section>
34-
) : loading === "no response" ? (
35-
<h1>There was no response</h1>
36-
) : (
37-
<h1>Loading...</h1>
37+
38+
3839
);
3940
};
4041

‎src/opportunities/pages/opportunities.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from "react";
2+
import OpportunitiesList from "../components/opportunitiesDetails.tsx";
3+
4+
5+
export default function Opportunities() {
6+
7+
8+
// returning opportunities component on (currently not in use) opportunities page
9+
return (
10+
<div className="w-9/12 mx-auto">
11+
<OpportunitiesList></OpportunitiesList>
12+
</div>
13+
);
14+
};

0 commit comments

Comments
 (0)