Make team page reactive

.eslintrc.cjs

@@ -25,4 +25,4 @@ module.exports = {
     },
     // ...
   ],
-}
+}

astro.config.mjs

@@ -1,9 +1,11 @@
 import { defineConfig } from "astro/config";
-
 import vercel from "@astrojs/vercel/serverless";
 
+import react from "@astrojs/react";
+
 // https://astro.build/config
 export default defineConfig({
   output: "server",
   adapter: vercel(),
-});
+  integrations: [react()]
+});

package.json

@@ -11,8 +11,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@astrojs/react": "^3.6.2",
     "@astrojs/vercel": "^3.5.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
     "astro": "^2.6.0",
+    "react": "^19.0.0-beta",
+    "react-dom": "^19.0.0-beta",
     "sass": "^1.63.6",
     "typoist": "^1.2.2"
   },
@@ -21,7 +26,7 @@
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-astro": "^0.27.1",
-    "husky": "^8.0.3",
+    "husky": "^9.1.6",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
     "prettier-plugin-astro": "^0.10.0",
@@ -31,5 +36,6 @@
     "*.{astro,js,ts}": [
       "eslint --ext .js,.astro --fix"
     ]
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/components/TeamList.astro

@@ -0,0 +1,43 @@
+---
+import TeamCard from "./TeamCard.astro";
+
+import ADVISORS from "../../data/advisors.json";
+import CTMS from "../../data/ctms.json";
+import EXECUTIVES from "../../data/execs.json";
+import ALUMS from "../../data/alums.json";
+
+const { team_members } = Astro.props as Props;
+---
+
+<ul role="list" class="link-card-grid">
+    {
+        team_members.length > 0 &&
+        team_members.map((member) => (
+            <TeamCard
+              name={member.name}
+              github_username={member.github_username}
+              linkedin_username={member.linkedin_username}
+              website_url={member.website_url}
+            />
+        ))
+    }
+</ul>
+
+<style lang="scss">
+  @import "../styles/index.scss";
+  .link-card-grid {
+    max-width: 1400px;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
+    grid-gap: 1.5rem;
+    margin: 2rem 0;
+
+    justify-items: center;
+
+    @media (max-width: #{$screen-xl-max}) {
+      grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
+      grid-gap: 1rem;
+    }
+  }
+</style>

src/components/TeamTab.astro

@@ -12,16 +12,19 @@ const tabItems: TabItem[] = [
     displayName: "Core Team",
     link: "/team/ctms",
     icon: "about",
+    team: "ctms",
   },
   {
     displayName: "Executives",
     link: "/team/executives",
     icon: "team",
+    team: "executives",
   },
   {
     displayName: "Advisors",
     link: "/team/advisors",
     icon: "events",
+    team: "advisors",
   },
 ];
 
@@ -31,16 +34,28 @@ const currentPath = Astro.url.pathname;
 <div class="tab">
   {
     tabItems.map((item, index) => (
-      <a
-        class:list={{ active: currentPath === item.link }}
-        href={currentPath === item.link ? "#team" : `${item.link}#team`}
-      >
+      <a href="#team" id={item.team}>
         <div class="tab-title">{item.displayName}</div>
       </a>
     ))
   }
 </div>
 
+<script>
+  import { teamTableState } from "../utils/state.ts";
+
+  // remove repetition here
+  document.getElementById("ctms").addEventListener('click', () => {
+      teamTableState.teamState = "ctms";
+  });
+  document.getElementById("executives").addEventListener('click', () => {
+      teamTableState.teamState = "executives";
+  });
+  document.getElementById("advisors").addEventListener('click', () => {
+      teamTableState.teamState = "advisors";
+  });
+</script>
+
 <style lang="scss">
   @import "../styles/index.scss";
 

src/components/TeamTable.jsx

@@ -0,0 +1,25 @@
+import { useState } from 'react'
+import { teamTableState } from "../utils/state.ts"
+
+// fix redundant variables and refactor code
+export default function TeamTable(props) {
+    const [team, setTeam] = useState("ctms");
+
+    teamTableState.listen(() => {
+        setTeam(teamTableState.teamState);
+    })
+
+    let out = null;
+
+    switch (team) {
+      case "ctms":
+        return(<div>props.ctms</div>);
+        break;
+      case "executives":
+        return(<div>props.executives</div>);
+        break;
+      case "advisors":
+        return(<div>props.advisors</div>);
+        break;
+    }
+}

src/pages/team/[...team].astro

@@ -2,6 +2,8 @@
 import Layout from "../../layouts/Layout.astro";
 import TeamCard from "../../components/TeamCard.astro";
 import TeamTab from "../../components/TeamTab.astro";
+import TeamList from "../../components/TeamList.astro";
+import TeamTable from "../../components/TeamTable.jsx";
 
 import ADVISORS from "../../data/advisors.json";
 import CTMS from "../../data/ctms.json";
@@ -47,33 +49,13 @@ switch (team) {
     </div>
     <h1 id="team"><Title title="Meet The Team" /></h1>
     <TeamTab />
-    <ul role="list" class="link-card-grid">
-      {
-        team_members.length > 0 &&
-          team_members.map((member) => (
-            <TeamCard
-              name={member.name}
-              github_username={member.github_username}
-              linkedin_username={member.linkedin_username}
-              website_url={member.website_url}
-            />
-          ))
-      }
-    </ul>
+    <TeamTable client:load>
+      <TeamList team_members={CTMS} slot='ctms' />
+      <TeamList team_members={EXECUTIVES} slot='executives' />
+      <TeamList team_members={ADVISORS} slot='advisors' />
+    </TeamTable>
     <h1><Title title="Our Alums" /></h1>
-    <ul role="list" class="link-card-grid">
-      {
-        ALUMS.length > 0 &&
-          ALUMS.map((member) => (
-            <TeamCard
-              name={member.name}
-              github_username={member.github_username}
-              linkedin_username={member.linkedin_username}
-              website_url={member.website_url}
-            />
-          ))
-      }
-    </ul>
+    <TeamList team_members={ALUMS} />
   </main>
 </Layout>
 
@@ -153,20 +135,4 @@ switch (team) {
       margin-bottom: 1rem;
     }
   }
-
-  .link-card-grid {
-    max-width: 1400px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
-    grid-gap: 1.5rem;
-    margin: 2rem 0;
-
-    justify-items: center;
-
-    @media (max-width: #{$screen-xl-max}) {
-      grid-template-columns: repeat(auto-fit, minmax(12ch, 1fr));
-      grid-gap: 1rem;
-    }
-  }
 </style>

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/strict"
-}
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}