Skip to content

Commit 3745329

Browse files
mizlanmizlan
authored
Upgrade dependencies (#117)
* Fix attribute class -> className * Upgrade dependencies fix: Refactor Navbar routing for React Router v7 * Remove erroneous header link in ML post * Fix HTML error arising from <h1> inside <p> * Fix broken links by prefixing with / We would link to /college/facebook, e.g., when we want to link to /facebook, which is a result of omitting a preceding "/" in a link * Upgrade CI Node version to v22 * ci: Give explicit names to default exports
1 parent 51855ab commit 3745329

File tree

16 files changed

+14457
-31840
lines changed

16 files changed

+14457
-31840
lines changed

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ jobs:
1010
working-directory: website
1111
strategy:
1212
matrix:
13-
node-version: [12.x, 14.x]
14-
13+
node-version: [22.x]
1514
steps:
1615
- uses: actions/checkout@v2
1716
- name: Use Node.js ${{ matrix.node-version }}

‎website/jest.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
setupFiles: ['<rootDir>/src/setupFiles.js'],
3+
};

‎website/package-lock.json‎

Lines changed: 14337 additions & 31723 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎website/package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^4.2.4",
7-
"@testing-library/react": "^9.5.0",
8-
"@testing-library/user-event": "^7.2.1",
9-
"apexcharts": "^3.25.0",
10-
"react": "^16.13.1",
11-
"react-apexcharts": "^1.3.7",
12-
"react-dom": "^16.13.1",
13-
"react-router-dom": "^5.2.0",
14-
"react-scripts": "3.4.3",
6+
"@testing-library/jest-dom": "^6.6.3",
7+
"@testing-library/react": "^16.3.0",
8+
"@testing-library/user-event": "^14.6.1",
9+
"apexcharts": "^4.5.0",
10+
"react": "^19.1.0",
11+
"react-apexcharts": "^1.7.0",
12+
"react-dom": "^19.1.0",
13+
"react-router": "^7.5.1",
14+
"react-scripts": "^5.0.1",
1515
"react-scroll": "^1.8.1",
1616
"recharts": "^2.0.8"
1717
},
@@ -41,10 +41,10 @@
4141
]
4242
},
4343
"devDependencies": {
44-
"lint-staged": "^11.1.1",
45-
"prettier": "^2.3.1",
46-
"stylelint": "^13.11.0",
47-
"stylelint-config-standard": "^20.0.0"
44+
"lint-staged": "^15.5.1",
45+
"prettier": "^3.5.3",
46+
"stylelint": "^16.18.0",
47+
"stylelint-config-standard": "^38.0.0"
4848
},
4949
"lint-staged": {
5050
"*.(js|html)": "prettier --write",

‎website/src/App.js‎

Lines changed: 18 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import "./main.css";
33
import "./components/mainContent/navbar.css";
44
import Navbar from "./components/mainContent/Navbar";
5-
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
5+
import { BrowserRouter as Router, Routes, Route } from "react-router";
66
import LandingPage from "./components/LandingPage";
77
import CollegeAdmissionsUT from "./caseStudies/CollegeAdmissionsUT";
88
import CaseStudyFacebook from "./caseStudies/CaseStudyFacebook";
@@ -15,72 +15,27 @@ function App() {
1515
return (
1616
<div className="app">
1717
<Router>
18-
{/* conditionally render the heading in navbar */}
19-
<Switch>
20-
{/* render default navbar if URL is empty */}
21-
<Route exact path="/">
22-
<div className="navbar">
23-
<Navbar path="/" subtitle={getHeader()} />
24-
</div>
25-
</Route>
26-
{/* pass in URL through params if it's not the default URL */}
27-
<Route
28-
path="/:currentPage"
29-
render={(input) => (
30-
<div className="navbar">
31-
<Navbar
32-
path={"/" + input.match.params.currentPage}
33-
subtitle={getHeader(input.match.params.currentPage)}
34-
/>
35-
</div>
36-
)}
37-
></Route>
38-
</Switch>
18+
<div className="navbar">
19+
<Routes>
20+
<Route path="/">
21+
<Route index element={<Navbar />} />
22+
<Route path=":currentPage" element={<Navbar />} />
23+
</Route>
24+
</Routes>
25+
</div>
3926

40-
<Switch>
41-
<Route exact path="/">
42-
<LandingPage />
43-
</Route>
44-
<Route path="/aboutUs">
45-
<AboutUsPage />
46-
</Route>
47-
<Route path="/college">
48-
<CollegeAdmissionsUT />
49-
</Route>
50-
<Route path="/facebook">
51-
<CaseStudyFacebook />
52-
</Route>
53-
<Route path="/facialRecognition">
54-
<FacialRecognition />
55-
</Route>
56-
<Route path="/conclusion">
57-
<ConclusionPage />
58-
</Route>
59-
<Route path="/resources">
60-
<ResourcesPage />
61-
</Route>
62-
</Switch>
27+
<Routes>
28+
<Route exact path="/" element={<LandingPage />} />
29+
<Route path="/aboutUs" element={<AboutUsPage />} />
30+
<Route path="/college" element={<CollegeAdmissionsUT />} />
31+
<Route path="/facebook" element={<CaseStudyFacebook />} />
32+
<Route path="/facialRecognition" element={<FacialRecognition />} />
33+
<Route path="/conclusion" element={<ConclusionPage />} />
34+
<Route path="/resources" element={<ResourcesPage />} />
35+
</Routes>
6336
</Router>
6437
</div>
6538
);
6639
}
6740

6841
export default App;
69-
70-
//function that renders the heading for the navbar from the route parameters
71-
function getHeader(path) {
72-
let subtitle = "A TeachLA Learning Lab!";
73-
const pageNames = {
74-
aboutUs: "Who's TeachLA?",
75-
college: "Case Study #1: College Admissions",
76-
facebook: "Case Study #2: Facebook Ads",
77-
facialRecognition: "Case Study #3: Facial Recognition",
78-
conclusion: "In Conclusion...",
79-
resources: "To Learn More...",
80-
};
81-
//return default dictionary value if path is falsy
82-
83-
//get the subtitle from our pageNames dictionary if path exists
84-
if (path) ({ [path]: subtitle } = pageNames);
85-
return subtitle;
86-
}

‎website/src/assets/College/collegeLabContent.js‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import EssayContainer from "../../components/posts/CollegeAdmissions/essay/Essay
55
import WomenEnrollmentContainer from "../../components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js";
66
import { MatchingGame } from "./MatchingGame.js";
77

8-
export default [
8+
const content = [
99
{
1010
post: {
1111
profilePic: teachLogo,
@@ -176,29 +176,29 @@ export default [
176176
profilePic: teachLogo,
177177
profilePicName: "Profile Picture - Thinking Like an ML Model",
178178
header: "Thinking Like an ML Model",
179-
headerLink: true,
180-
linkTo: "facebook",
181179
subheader:
182180
"Why did the model take factors unrelated to competence into account?",
183181
bodyText: [
184182
{
185183
body: (
186-
<p className="bold">
187-
The computer isn't really looking for gender. So why does it learn
188-
to take that into account without being told to do so?
189-
<br></br>
190-
<br></br>
191-
Here's an interactive example that emulates how machine learning
192-
models "learn".
193-
<br></br>
194-
<br></br>
195-
Grouping exercise!
196-
<br></br>
197-
Explain why you make mistakes.
198-
<br></br>
199-
Explain how that's similar to how ML models make mistakes.
184+
<>
185+
<p className="bold">
186+
The computer isn't really looking for gender. So why does it
187+
learn to take that into account without being told to do so?
188+
<br></br>
189+
<br></br>
190+
Here's an interactive example that emulates how machine learning
191+
models "learn".
192+
<br></br>
193+
<br></br>
194+
Grouping exercise!
195+
<br></br>
196+
Explain why you make mistakes.
197+
<br></br>
198+
Explain how that's similar to how ML models make mistakes.
199+
</p>
200200
<MatchingGame />
201-
</p>
201+
</>
202202
),
203203
},
204204
],
@@ -210,7 +210,7 @@ export default [
210210
profilePicName: "Profile Picture - Facebook Logo",
211211
header: "Case Study #2: Facebook Ads",
212212
headerLink: true,
213-
linkTo: "facebook",
213+
linkTo: "/facebook",
214214
subheader: "Social Media Targets Ads Through Demographics",
215215
bodyText: [
216216
{
@@ -227,3 +227,5 @@ export default [
227227
},
228228
},
229229
];
230+
231+
export default content;

‎website/src/assets/Facebook/adContent.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import preschool from "./ads/preschool.svg";
1010
import janitor from "./ads/janitor.svg";
1111
import retail from "./ads/retail.svg";
1212

13-
export default {
13+
const content = {
1414
Lumber: {
1515
img: lumber,
1616
header: "Strong Lumberjacks Needed!",
@@ -122,3 +122,5 @@ export default {
122122
pay: "$15-$17 an hour",
123123
},
124124
};
125+
126+
export default content;

‎website/src/assets/Facebook/facebookLabContent.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import facebookAds from "./personalizedAds.svg";
1515
import anime from "./animationpic.svg";
1616
import teachLogo from "../../assets/teachla-logo.svg";
1717

18-
export default [
18+
const content = [
1919
{
2020
post: {
2121
profilePic: facebookLogo,
@@ -503,7 +503,7 @@ export default [
503503
profilePicName: "Profile Picture - Facial Recognition",
504504
header: "Case Study #3: Facial Recognition",
505505
headerLink: true,
506-
linkTo: "facialRecognition",
506+
linkTo: "/facialRecognition",
507507
subheader: "Facial Recognition Technology And Its Implications",
508508
bodyText: [
509509
{
@@ -537,3 +537,5 @@ export default [
537537
},
538538
},
539539
];
540+
541+
export default content;

‎website/src/components/mainContent/Navbar.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React, { useState } from "react";
2-
import { Link } from "react-router-dom";
2+
import { Link, useParams } from "react-router";
33
import teachLogo from "../../assets/teachla-logo.svg";
44
import navButton from "../../assets/navButton.svg";
55
import "../../main.css";
66
import "../../index.css";
77
import "./navbar.css";
88

99
export default function NavBar(props) {
10+
const params = useParams();
11+
1012
// dropdownOpen: boolean variable for whether the dropdown menu is open or closed
1113
const [dropdownOpen, setDropdownOpen] = useState(false);
1214

@@ -15,6 +17,11 @@ export default function NavBar(props) {
1517
setDropdownOpen(!dropdownOpen);
1618
};
1719

20+
// on the homepage (/), currentPage is intentionally undefined
21+
const currentPage = params.currentPage;
22+
23+
const subtitle = getHeader(currentPage);
24+
1825
const navSections = [
1926
{
2027
path: "/",
@@ -94,9 +101,27 @@ export default function NavBar(props) {
94101
<Link className="title-link" to="/">
95102
<h1 className="title">Bias by Us</h1>
96103
</Link>
97-
<h2 className="subtitle">{props.subtitle}</h2>
104+
<h2 className="subtitle">{subtitle}</h2>
98105
</div>
99106
{dropdownArea()}
100107
</div>
101108
);
102109
}
110+
111+
//function that renders the heading for the navbar from the route parameters
112+
function getHeader(path) {
113+
let subtitle = "A TeachLA Learning Lab!";
114+
const pageNames = {
115+
aboutUs: "Who's TeachLA?",
116+
college: "Case Study #1: College Admissions",
117+
facebook: "Case Study #2: Facebook Ads",
118+
facialRecognition: "Case Study #3: Facial Recognition",
119+
conclusion: "In Conclusion...",
120+
resources: "To Learn More...",
121+
};
122+
//return default dictionary value if path is falsy
123+
124+
//get the subtitle from our pageNames dictionary if path exists
125+
if (path) ({ [path]: subtitle } = pageNames);
126+
return subtitle;
127+
}

‎website/src/components/posts/CollegeAdmissions/essay/ScoreBar.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ export default function ScoreBar(props) {
88
scaledScore = scaledScore < 0 ? 0 : scaledScore > 100 ? 100 : scaledScore;
99

1010
return (
11-
<div class="score-bar">
12-
<div class="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
11+
<div className="score-bar">
12+
<div className="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
1313
</div>
1414
);
1515
}

0 commit comments

Comments
 (0)