Events cards (#214)

* completed rough event card

* possible fix

* remove console log

* fix padding (#213)

* fix text colors for different orgs

* responsive navbar (#215)

* started responsive navbar

* commit typing

* finish navbar

* move navbar styles to component level module

* commit module typing

* use proper color variables

* use seconds for transitions

* fix navlink order

* fix easing functions

* add css comments

* Fetch data for board cards at build time server-side (#211)

* fetch board data from spreadsheet and populate

* moved code to api util function

* isr generate date once a day

* delete hardcoded data

* fixed board card fetch

* fixes

* Update BoardAPI.ts

* dumb fix

* Update Navbar.module.scss (#216)

* fix navbar with events tab

* optional facebook url

.gitignore

@@ -32,6 +32,3 @@ yarn-error.log*
 
 # vercel
 .vercel
-
-# autogenerated css module typings
-*.module.scss.d.ts

pages/_app.tsx

@@ -8,7 +8,6 @@ import "src/components/BoardGrid/styles.scss";
 import "src/components/Button/styles.scss";
 import "src/components/CommunitiesGrid/styles.scss";
 import "src/components/Footer/styles.scss";
-import "src/components/NavigationBar/styles.scss";
 import "src/components/ScrollDownArrow/styles.scss";
 import "src/components/Statistic/styles.scss";
 // section css imports
@@ -28,7 +27,7 @@ const MyApp = ({ Component, pageProps }) => (
         margin: `0 auto`,
         maxWidth: 960,
         minHeight: 960,
-        padding: `81px 0`,
+        padding: `85px 0`,
       }}
     >
       <main>

pages/about.tsx

@@ -9,8 +9,10 @@ import AboutMembership from "src/sections/about/About.Membership";
 import AboutBoard from "src/sections/about/About.Board";
 
 import HeroImage from "public/assets/about-images/about-hero.png";
+import { BoardMemberProps } from "src/types";
+import { getBoardData } from "src/api/BoardAPI";
 
-const AboutPage: React.FC = () => {
+const AboutPage: React.FC<{ board: BoardMemberProps[] }> = ({ board }) => {
   const size: Size = useWindowSize();
   const [isMobile, setIsMobile] = useState(false);
 
@@ -29,9 +31,19 @@ const AboutPage: React.FC = () => {
       <AboutHero isMobile={isMobile} image={HeroImage.src} />
       <AboutGetInvolved isMobile={isMobile} />
       {isMobile ? null : <AboutMembership />}
-      <AboutBoard isMobile={isMobile} />
+      <AboutBoard isMobile={isMobile} board={board} />
     </>
   );
 };
 
 export default AboutPage;
+
+export async function getStaticProps() {
+  const boardData = await getBoardData();
+  return {
+    props: {
+      board: boardData || [],
+    },
+    revalidate: 1 * 60 * 60, // generate once every hour (in seconds)
+  };
+}

pages/events.tsx

@@ -1,9 +1,24 @@
-const EventsPage: React.FC = () => {
+import { EventsArray, getAllEvents } from "src/api/EventsAPI";
+import SEO from "src/components/SEO";
+import EventsContent from "src/sections/events/Events.Content";
+
+const EventsPage: React.FC<{ events: EventsArray }> = ({ events }) => {
   return (
     <>
-      <h1>Events Page</h1>
+      <SEO title="Events" path="/events" />
+      <EventsContent events={events} />
     </>
   );
 };
 
 export default EventsPage;
+
+export async function getStaticProps() {
+  const eventsData = await getAllEvents();
+  return {
+    props: {
+      events: eventsData || [],
+    },
+    revalidate: 1 * 60 * 60,
+  };
+}

src/api/BoardAPI.ts

@@ -0,0 +1,46 @@
+import { BoardMemberProps } from "src/types";
+
+const formatLinkedIn = val => {
+  return val.includes("https://www.linkedin.com/in/") ? val : `https://www.linkedin.com/in/${val}`;
+};
+
+export const getBoardData = async () => {
+  const url = process.env.SPREADSHEET_URL; // Default value can be found at https://vercel.com/acmucsd/main-website/settings/environment-variables
+
+  const data: BoardMemberProps[] = await fetch(url)
+    .then(res => res.text())
+    .then(res => JSON.parse(res.substring(47).slice(0, -2))) // only get object
+    .then(res => {
+      const cols = res.table.cols.map((col, idx) => {
+        return { idx, label: col.label };
+      });
+      const colMap = {};
+      cols.forEach(colHeader => {
+        colMap[colHeader.label.toLowerCase()] = colHeader.idx;
+      });
+      colMap["team"] = 0; // Team shall always be the first column
+
+      const rows = res.table.rows
+        .map(row => row.c)
+        .map(row => {
+          const get = label => row[colMap[label.toLowerCase()]]?.v ?? ""; // helper function for repetitive task
+          const userData: BoardMemberProps = {
+            name: get("Name"), // use spreadsheet column headers to find data
+            org: get("Team").toLowerCase(),
+            title: get("Position"),
+            profile_image: get("Profile Picture"),
+            email: get("ACM Email") || null,
+            personal_link: get("Website") || null,
+            linkedin_link: formatLinkedIn(get("LinkedIn")) || null,
+          };
+          return userData;
+        })
+        .filter(user => user.name) // name is required
+        .filter(user => user.org && user.org !== "members at large") // valid suborg is required
+        .filter(user => user.title) // position title is required
+        .filter(user => user.profile_image); // image url is required
+
+      return rows;
+    });
+  return data;
+};