Upgrade dependencies

.github/workflows/build.yml

@@ -10,8 +10,7 @@ jobs:
         working-directory: website
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
-
+        node-version: [22.x]
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}

website/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFiles: ['<rootDir>/src/setupFiles.js'],
+};

website/package.json

@@ -3,15 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "apexcharts": "^3.25.0",
-    "react": "^16.13.1",
-    "react-apexcharts": "^1.3.7",
-    "react-dom": "^16.13.1",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "apexcharts": "^4.5.0",
+    "react": "^19.1.0",
+    "react-apexcharts": "^1.7.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.5.1",
+    "react-scripts": "^5.0.1",
     "react-scroll": "^1.8.1",
     "recharts": "^2.0.8"
   },
@@ -41,10 +41,10 @@
     ]
   },
   "devDependencies": {
-    "lint-staged": "^11.1.1",
-    "prettier": "^2.3.1",
-    "stylelint": "^13.11.0",
-    "stylelint-config-standard": "^20.0.0"
+    "lint-staged": "^15.5.1",
+    "prettier": "^3.5.3",
+    "stylelint": "^16.18.0",
+    "stylelint-config-standard": "^38.0.0"
   },
   "lint-staged": {
     "*.(js|html)": "prettier --write",

website/src/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import "./main.css";
 import "./components/mainContent/navbar.css";
 import Navbar from "./components/mainContent/Navbar";
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route } from "react-router";
 import LandingPage from "./components/LandingPage";
 import CollegeAdmissionsUT from "./caseStudies/CollegeAdmissionsUT";
 import CaseStudyFacebook from "./caseStudies/CaseStudyFacebook";
@@ -15,72 +15,27 @@ function App() {
   return (
     <div className="app">
       <Router>
-        {/* conditionally render the heading in navbar */}
-        <Switch>
-          {/* render default navbar if URL is empty */}
-          <Route exact path="/">
-            <div className="navbar">
-              <Navbar path="/" subtitle={getHeader()} />
-            </div>
-          </Route>
-          {/* pass in URL through params if it's not the default URL */}
-          <Route
-            path="/:currentPage"
-            render={(input) => (
-              <div className="navbar">
-                <Navbar
-                  path={"/" + input.match.params.currentPage}
-                  subtitle={getHeader(input.match.params.currentPage)}
-                />
-              </div>
-            )}
-          ></Route>
-        </Switch>
+        <div className="navbar">
+          <Routes>
+            <Route path="/">
+              <Route index element={<Navbar />} />
+              <Route path=":currentPage" element={<Navbar />} />
+            </Route>
+          </Routes>
+        </div>
 
-        <Switch>
-          <Route exact path="/">
-            <LandingPage />
-          </Route>
-          <Route path="/aboutUs">
-            <AboutUsPage />
-          </Route>
-          <Route path="/college">
-            <CollegeAdmissionsUT />
-          </Route>
-          <Route path="/facebook">
-            <CaseStudyFacebook />
-          </Route>
-          <Route path="/facialRecognition">
-            <FacialRecognition />
-          </Route>
-          <Route path="/conclusion">
-            <ConclusionPage />
-          </Route>
-          <Route path="/resources">
-            <ResourcesPage />
-          </Route>
-        </Switch>
+        <Routes>
+          <Route exact path="/" element={<LandingPage />} />
+          <Route path="/aboutUs" element={<AboutUsPage />} />
+          <Route path="/college" element={<CollegeAdmissionsUT />} />
+          <Route path="/facebook" element={<CaseStudyFacebook />} />
+          <Route path="/facialRecognition" element={<FacialRecognition />} />
+          <Route path="/conclusion" element={<ConclusionPage />} />
+          <Route path="/resources" element={<ResourcesPage />} />
+        </Routes>
       </Router>
     </div>
   );
 }
 
 export default App;
-
-//function that renders the heading for the navbar from the route parameters
-function getHeader(path) {
-  let subtitle = "A TeachLA Learning Lab!";
-  const pageNames = {
-    aboutUs: "Who's TeachLA?",
-    college: "Case Study #1: College Admissions",
-    facebook: "Case Study #2: Facebook Ads",
-    facialRecognition: "Case Study #3: Facial Recognition",
-    conclusion: "In Conclusion...",
-    resources: "To Learn More...",
-  };
-  //return default dictionary value if path is falsy
-
-  //get the subtitle from our pageNames dictionary if path exists
-  if (path) ({ [path]: subtitle } = pageNames);
-  return subtitle;
-}

website/src/assets/College/collegeLabContent.js

@@ -5,7 +5,7 @@ import EssayContainer from "../../components/posts/CollegeAdmissions/essay/Essay
 import WomenEnrollmentContainer from "../../components/posts/CollegeAdmissions/enrollmentGraph/WomenEnrollmentContainer.js";
 import { MatchingGame } from "./MatchingGame.js";
 
-export default [
+const content = [
   {
     post: {
       profilePic: teachLogo,
@@ -176,29 +176,29 @@ export default [
       profilePic: teachLogo,
       profilePicName: "Profile Picture - Thinking Like an ML Model",
       header: "Thinking Like an ML Model",
-      headerLink: true,
-      linkTo: "facebook",
       subheader:
         "Why did the model take factors unrelated to competence into account?",
       bodyText: [
         {
           body: (
-            <p className="bold">
-              The computer isn't really looking for gender. So why does it learn
-              to take that into account without being told to do so?
-              <br></br>
-              <br></br>
-              Here's an interactive example that emulates how machine learning
-              models "learn".
-              <br></br>
-              <br></br>
-              Grouping exercise!
-              <br></br>
-              Explain why you make mistakes.
-              <br></br>
-              Explain how that's similar to how ML models make mistakes.
+            <>
+              <p className="bold">
+                The computer isn't really looking for gender. So why does it
+                learn to take that into account without being told to do so?
+                <br></br>
+                <br></br>
+                Here's an interactive example that emulates how machine learning
+                models "learn".
+                <br></br>
+                <br></br>
+                Grouping exercise!
+                <br></br>
+                Explain why you make mistakes.
+                <br></br>
+                Explain how that's similar to how ML models make mistakes.
+              </p>
               <MatchingGame />
-            </p>
+            </>
           ),
         },
       ],
@@ -210,7 +210,7 @@ export default [
       profilePicName: "Profile Picture - Facebook Logo",
       header: "Case Study #2: Facebook Ads",
       headerLink: true,
-      linkTo: "facebook",
+      linkTo: "/facebook",
       subheader: "Social Media Targets Ads Through Demographics",
       bodyText: [
         {
@@ -227,3 +227,5 @@ export default [
     },
   },
 ];
+
+export default content;

website/src/assets/Facebook/adContent.js

@@ -10,7 +10,7 @@ import preschool from "./ads/preschool.svg";
 import janitor from "./ads/janitor.svg";
 import retail from "./ads/retail.svg";
 
-export default {
+const content = {
   Lumber: {
     img: lumber,
     header: "Strong Lumberjacks Needed!",
@@ -122,3 +122,5 @@ export default {
     pay: "$15-$17 an hour",
   },
 };
+
+export default content;

website/src/assets/Facebook/facebookLabContent.js

@@ -15,7 +15,7 @@ import facebookAds from "./personalizedAds.svg";
 import anime from "./animationpic.svg";
 import teachLogo from "../../assets/teachla-logo.svg";
 
-export default [
+const content = [
   {
     post: {
       profilePic: facebookLogo,
@@ -503,7 +503,7 @@ export default [
       profilePicName: "Profile Picture - Facial Recognition",
       header: "Case Study #3: Facial Recognition",
       headerLink: true,
-      linkTo: "facialRecognition",
+      linkTo: "/facialRecognition",
       subheader: "Facial Recognition Technology And Its Implications",
       bodyText: [
         {
@@ -537,3 +537,5 @@ export default [
     },
   },
 ];
+
+export default content;

website/src/components/mainContent/Navbar.js

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router";
 import teachLogo from "../../assets/teachla-logo.svg";
 import navButton from "../../assets/navButton.svg";
 import "../../main.css";
 import "../../index.css";
 import "./navbar.css";
 
 export default function NavBar(props) {
+  const params = useParams();
+
   // dropdownOpen: boolean variable for whether the dropdown menu is open or closed
   const [dropdownOpen, setDropdownOpen] = useState(false);
 
@@ -15,6 +17,11 @@ export default function NavBar(props) {
     setDropdownOpen(!dropdownOpen);
   };
 
+  // on the homepage (/), currentPage is intentionally undefined
+  const currentPage = params.currentPage;
+
+  const subtitle = getHeader(currentPage);
+
   const navSections = [
     {
       path: "/",
@@ -94,9 +101,27 @@ export default function NavBar(props) {
         <Link className="title-link" to="/">
           <h1 className="title">Bias by Us</h1>
         </Link>
-        <h2 className="subtitle">{props.subtitle}</h2>
+        <h2 className="subtitle">{subtitle}</h2>
       </div>
       {dropdownArea()}
     </div>
   );
 }
+
+//function that renders the heading for the navbar from the route parameters
+function getHeader(path) {
+  let subtitle = "A TeachLA Learning Lab!";
+  const pageNames = {
+    aboutUs: "Who's TeachLA?",
+    college: "Case Study #1: College Admissions",
+    facebook: "Case Study #2: Facebook Ads",
+    facialRecognition: "Case Study #3: Facial Recognition",
+    conclusion: "In Conclusion...",
+    resources: "To Learn More...",
+  };
+  //return default dictionary value if path is falsy
+
+  //get the subtitle from our pageNames dictionary if path exists
+  if (path) ({ [path]: subtitle } = pageNames);
+  return subtitle;
+}

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

@@ -8,8 +8,8 @@ export default function ScoreBar(props) {
   scaledScore = scaledScore < 0 ? 0 : scaledScore > 100 ? 100 : scaledScore;
 
   return (
-    <div class="score-bar">
-      <div class="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
+    <div className="score-bar">
+      <div className="score-bar-circle" style={{ left: scaledScore + "%" }}></div>
     </div>
   );
 }

website/src/components/posts/Facebook/conclusion/conclusion.js

@@ -3,7 +3,8 @@ import "../../../../assets/Facebook/facebookLabContent.css";
 import dial from "../../../../assets/dial.jpg";
 import looking from "../../../../assets/looking.jpg";
 import whyad from "../../../../assets/whyamiseeingthisad.png";
-export default [
+
+const content = [
   {
     card: {
       head: "1. Lessening the focus on targeted advertisements at the slight cost of revenue loss",
@@ -59,3 +60,5 @@ export default [
     },
   },
 ];
+
+export default content;

website/src/components/posts/Facebook/socialMedia/initialAds.js

@@ -1,5 +1,6 @@
 import placeholderThumbnail from "../../../../assets/placeholderThumbnail.png";
 import "./socialMedia.css";
+
 const adData = [
   [0.27966767, 0.10170184, 0.04216069, 0.01245083], //lumber
   [0.13921071, 0.09911504, 0.09458128, 0.05468602], //AI
@@ -13,6 +14,7 @@ const adData = [
   [0.04034156, 0.06471523, 0.09940547, 0.12949953], // Janitor
   [0.03507962, 0.05173587, 0.11007304, 0.13183236], // Supermarket
 ];
+
 //adPercentages represented this way: index 0 is white male, index 1 is black male, index 2 is white female, index 3 is black female
 const adNames = [
   "Lumber",
@@ -27,7 +29,11 @@ const adNames = [
   "Janitor",
   "Retail",
 ];
+
 let initialAdFrequencies = [];
+
+/*this is the setup for all the ads initially for the histogram, x/y for the axes of data, 
+and thumbnail for the picture*/
 for (let i = 0; i < 11; i++) {
   initialAdFrequencies[i] = {
     x: adNames[i],
@@ -36,8 +42,9 @@ for (let i = 0; i < 11; i++) {
     adPercentages: adData[i],
   };
 }
-/*this is the setup for all the ads initially for the histogram, x/y for the axes of data, 
-and thumbnail for the picture*/
-export default {
+
+const ads = {
   adList: initialAdFrequencies,
 };
+
+export default ads;

website/src/components/posts/PostHeader.js

@@ -1,7 +1,7 @@
 import React from "react";
 import "./posts.css";
 import "../mainContent/mainContent.css";
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 function HeaderLinkWrapper(props) {
   return props.headerLink ? (