Feat: workday api within about page

app/about/page.tsx

@@ -1,3 +1,37 @@
-export default function About() {
-  return <div>About</div>
+import { Opportunities } from "@/components/Opportunities"
+import { getWorkdayData } from "@/app/about/queries"
+import { UserPlusIcon } from "@heroicons/react/24/solid"
+import SectionHeader from "@/components/SectionHeader"
+import Spinner from "@/components/assets/Spinner"
+import Link from "next/link"
+import React, { Suspense } from "react"
+
+export default async function About() {
+  try {
+    const data = getWorkdayData()
+    return (
+      <div>
+        <SectionHeader
+          href={"#opportunities"}
+          title={"Opportunities"}
+          icon={<UserPlusIcon className="h-7 w-7" />}
+        />
+        <Suspense fallback={<Spinner />}>
+          <Opportunities data={data} />
+        </Suspense>
+      </div>
+    )
+  } catch (err: any) {
+    console.error(err)
+    return (
+      <div>
+        <SectionHeader
+          href={"#opportunities"}
+          title={"Opportunities"}
+          icon={<UserPlusIcon className="h-7 w-7" />}
+        />
+        <p>{err.message}</p>
+      </div>
+    )
+  }
 }

app/about/queries.js

@@ -0,0 +1,26 @@
+export async function getWorkdayData() {
+  const myHeaders = new Headers()
+  myHeaders.append("Content-Type", "application/json")
+  myHeaders.append(
+    "Cookie",
+    "PLAY_SESSION=9365d69619d226b22f74256e51894a0476197a1f-instance=vps-prod-tvvtdnej.prod-vps.pr501.cust.pdx.wd; __cf_bm=zYtKNPBpg6veqmLc2qdk_TeHEGdGWIcSRG9tdtkQNbQ-1721323439-1.0.1.1-TApbCV1fQKTtEauZKvZ5XnXrZQJL7dcML6ixA3AycoiBMROa.iAzMq_K.5E7iaZfCj9.WhQQlmYfAxW8wdwZgQ; __cflb=02DiuHJZe28xXz6hQKLf1exjNbMDM5uxekNnt7kFV7LUC; _cfuvid=hqIGrDcFihah5EiFO0c_HEM4gIPwkeWCOxjMxNqjR20-1721323439159-0.0.1.1-604800000; wd-browser-id=fc0f0b1d-4547-488d-b353-99c751c61dae; wday_vps_cookie=1122671626.53810.0000"
+  )
+
+  const raw = JSON.stringify({
+    limit: 20,
+    offset: 0,
+    appliedFacets: {},
+    searchText: "180 George Street",
+  })
+
+  const response = await fetch(
+    "https://brown.wd5.myworkdayjobs.com/wday/cxs/brown/staff-careers-brown/jobs",
+    {
+      method: "POST",
+      headers: myHeaders,
+      body: raw,
+    }
+  )
+  const json = await response.json()
+  return json
+}

app/page.tsx

@@ -1,9 +1,57 @@
 import EventSection from "@/components/EventSection"
+import { getEventData } from "@/app/queries"
+import { getStringDate } from "@/components/calendar/utils"
+import SectionHeader from "@/components/SectionHeader"
+import React, { Suspense } from "react"
+import Spinner from "@/components/assets/Spinner"
 
-export default function Home() {
-  return (
-    <main className="bg-white flex min-h-screen flex-col items-center justify-between p-0 lg:p-24">
-      <EventSection />
-    </main>
-  )
+export default async function Home() {
+  try {
+    const currentDate = new Date()
+    const today = getStringDate(
+      currentDate.getMonth() + 1,
+      currentDate.getDate(),
+      currentDate.getFullYear()
+    )
+    const futureDates = getEventData(today)
+    const pastDates = getEventData(`-2 months${today}`)
+
+    return (
+      <div className="px-2 my-6 space-y-2">
+        <SectionHeader href={"#events"} title={"Events"} />
+        <Suspense fallback={<Spinner />}>
+          <EventSection
+            streamedDataPast={pastDates}
+            streamedDataFuture={futureDates}
+            currentDate={currentDate}
+            today={today}
+          />
+        </Suspense>
+        <div className="flex justify-center">
+          <a
+            className="bg-secondary-blue-500 text-white p-4 rounded"
+            href="https://events.brown.edu/ccv/all"
+          >
+            VIEW ALL EVENTS
+          </a>
+        </div>
+      </div>
+    )
+  } catch (err: any) {
+    console.error(err)
+    return (
+      <div className="px-2 my-6 space-y-2">
+        <SectionHeader href={"#events"} title={"Events"} />
+        <p>{err.message}</p>
+        <div className="flex justify-center">
+          <a
+            className="bg-secondary-blue-500 text-white p-4 rounded"
+            href="https://events.brown.edu/ccv/all"
+          >
+            VIEW ALL EVENTS
+          </a>
+        </div>
+      </div>
+    )
+  }
 }

app/queries.js

@@ -0,0 +1,7 @@
+export async function getEventData(time) {
+  const response = await fetch(
+    `https://events.brown.edu/live/json/events/description_long/true/group/Center%20for%20Computation%20and%20Visualization%20%28CCV%29/start_date/${time}/`
+  )
+  const data = await response.json()
+  return data
+}

components/EventSection.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { use, useEffect, useState } from "react"
 import { getStringDate } from "@/components/calendar/utils"
 import CalendarEvent from "@/components/calendar/CalendarEvent"
 import CalendarWeekly from "@/components/calendar/CalendarWeekly"
@@ -24,125 +24,95 @@ function classNames(...classes: (string | boolean | undefined)[]) {
   return classes.filter(Boolean).join(" ")
 }
 
-const EventSection = () => {
-  const [dataFuture, setDataFuture] = useState([])
-  const [dataPast, setDataPast] = useState([])
-  const [isLoading, setLoading] = useState(true)
-  const [view, setView] = useState("Upcoming")
-  const currentDate = new Date()
-  const today = getStringDate(
-    currentDate.getMonth() + 1,
-    currentDate.getDate(),
-    currentDate.getFullYear()
-  )
+interface EventSectionProps {
+  streamedDataFuture: Promise<any>
+  streamedDataPast: Promise<any>
+  today: string
+  currentDate: Date
+}
 
+export function EventSection({
+  streamedDataFuture,
+  streamedDataPast,
+  today,
+  currentDate,
+}: EventSectionProps): JSX.Element {
+  const dataFuture = use(streamedDataFuture)
+  const dataPast = use(streamedDataPast)
+  const [view, setView] = useState("Upcoming")
   const CAL_VIEW_ARRAY = ["Weekly", "Monthly", "Upcoming"]
 
-  useEffect(() => {
-    fetch(
-      `https://events.brown.edu/live/json/events/description_long/true/group/Center%20for%20Computation%20and%20Visualization%20%28CCV%29/start_date/${today}/`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setDataFuture(data)
-        setLoading(false)
-      })
-    fetch(
-      `https://events.brown.edu/live/json/events/description_long/true/group/Center%20for%20Computation%20and%20Visualization%20%28CCV%29/start_date/-2 months${today}/`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        setDataPast(data)
-      })
-  }, [today])
   return (
-    <article className="container px-2 my-6 space-y-2">
-      <div>
-        <h1 id="events" role="heading" className="font-semibold text-4xl">
-          Events
-        </h1>
+    <div>
+      <div className="hidden min-h-8 relative lg:block">
+        <div className="toggle-btn">
+          {CAL_VIEW_ARRAY.map((item) => {
+            return (
+              <p
+                id={item}
+                key={item}
+                className={classNames(
+                  view === item ? "selected" : "",
+                  item === "Weekly" && "hidden lg:inline-block",
+                  item !== "Weekly" && "inline-block",
+                  "m-0 rounded-sm py-2 px-3"
+                )}
+                role="button"
+                onClick={() => setView(item)}
+              >
+                {item}
+              </p>
+            )
+          })}
+        </div>
       </div>
-      <div>
-        <div className="min-h-8 relative">
-          <div className="toggle-btn">
-            {CAL_VIEW_ARRAY.map((item) => {
+      {!dataFuture && <p>No event data</p>}
+      {view === "Upcoming" && (
+        <div className="flex flex-wrap justify-between gap-4">
+          {dataFuture &&
+            dataFuture.slice(0, 4).map((e: DataProps, i: number) => {
               return (
-                <p
-                  id={item}
-                  key={item}
-                  className={classNames(
-                    view === item ? "selected" : "",
-                    item === "Weekly" && "hidden lg:inline-block",
-                    item !== "Weekly" && "inline-block",
-                    "m-0 rounded-sm py-2 px-3"
-                  )}
-                  role="button"
-                  onClick={() => setView(item)}
+                <div
+                  key={i}
+                  className="bg-gray flex gap-6 overflow-hidden column min-w-[30ch]"
                 >
-                  {item}
-                </p>
+                  <CalendarEvent
+                    id={e.id}
+                    date_time={e.date_time}
+                    title={e.title}
+                    url={e.url}
+                    date={e.date}
+                    date_utc={e.date_utc}
+                    date2_utc={e.date2_utc}
+                    date_iso={e.date_iso}
+                    description_long={e.description_long}
+                    contact_info={e.contact_info}
+                    description={e.description}
+                  />
+                </div>
               )
             })}
-          </div>
         </div>
-        {isLoading && <p>Loading...</p>}
-        {!dataFuture && <p>No event data</p>}
-        {view === "Upcoming" && (
-          <div className="flex flex-wrap justify-between">
-            {dataFuture &&
-              dataFuture.slice(0, 4).map((e: DataProps, i) => {
-                return (
-                  <div
-                    key={i}
-                    className="bg-gray flex gap-6 overflow-hidden column min-w-[30ch]"
-                  >
-                    <CalendarEvent
-                      id={e.id}
-                      date_time={e.date_time}
-                      title={e.title}
-                      url={e.url}
-                      date={e.date}
-                      date_utc={e.date_utc}
-                      date2_utc={e.date2_utc}
-                      date_iso={e.date_iso}
-                      description_long={e.description_long}
-                      contact_info={e.contact_info}
-                      description={e.description}
-                    />
-                  </div>
-                )
-              })}
-          </div>
-        )}
-        {view === "Weekly" && (
-          <div className="h-0 min-h-[768px] ">
-            <CalendarWeekly
-              today={today}
-              currentDate={currentDate}
-              events={dataPast.concat(dataFuture)}
-            />
-          </div>
-        )}
-        {view === "Monthly" && (
-          <div>
-            <CalendarMonth
-              today={today}
-              currentDate={currentDate}
-              events={dataPast.concat(dataFuture)}
-            />
-          </div>
-        )}
-      </div>
-
-      <div className="flex justify-center">
-        <a
-          className="bg-secondary-blue-500 text-white p-4 rounded"
-          href="https://events.brown.edu/ccv/all"
-        >
-          VIEW ALL EVENTS
-        </a>
-      </div>
-    </article>
+      )}
+      {view === "Weekly" && (
+        <div className="h-0 min-h-[768px] ">
+          <CalendarWeekly
+            today={today}
+            currentDate={currentDate}
+            events={dataPast.concat(dataFuture)}
+          />
+        </div>
+      )}
+      {view === "Monthly" && (
+        <div>
+          <CalendarMonth
+            today={today}
+            currentDate={currentDate}
+            events={dataPast.concat(dataFuture)}
+          />
+        </div>
+      )}
+    </div>
   )
 }
 

components/LinkCard.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+
+type CardProps = {
+  className?: string
+}
+
+export function LinkCard({
+  className = "",
+  children,
+}: React.PropsWithChildren<CardProps>) {
+  return (
+    <section
+      className={`"h-full p-6 flex flex-col gap-2 rounded-lg drop-shadow-md hover:drop-shadow-lg transition duration-500" ${className ? className : "bg-gray-50 border-white border-2"}`}
+      /* https://design-system.w3.org/components/cards.html#block-link-cards */ data-component="card"
+    >
+      {children}
+    </section>
+  )
+}