Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat: workday api within about page #22

Merged
merged 28 commits into from
Dec 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
72ca4e5
chore: add swr and cors libs for fetching and middleware
hetd54 Aug 2, 2024
e1830e0
feat: middleware to post req to workday
hetd54 Aug 2, 2024
98b1a18
feat: workday data on about page
hetd54 Aug 2, 2024
4febae6
Merge branch 'main' into feat-workday-api
hetd54 Nov 25, 2024
4e89709
refactor: app routing
hetd54 Nov 25, 2024
26d79fa
refactor: api route for workday api
hetd54 Nov 25, 2024
763d046
fix: requestoptions typing
hetd54 Nov 25, 2024
075b03b
Merge branch 'main' into feat-workday-api
hetd54 Nov 26, 2024
c860637
style: match existing site
hetd54 Nov 26, 2024
cd58219
refactor: LinkCard with block link
hetd54 Nov 26, 2024
830b63d
style: more responsive
hetd54 Nov 26, 2024
f896d45
feat: add link to section for scroll
hetd54 Nov 26, 2024
7ab4f77
chore: remove unused deps
hetd54 Nov 26, 2024
07c2943
deps: update next
hetd54 Dec 2, 2024
ecaff23
refactor: main in layout
hetd54 Dec 2, 2024
296d237
Merge branch 'main' into feat-workday-api
hetd54 Dec 3, 2024
f318f6e
Merge branch 'main' into feat-workday-api
hetd54 Dec 5, 2024
e93df46
chore: remove extra divs
hetd54 Dec 10, 2024
29304cc
feat: spinner
hetd54 Dec 10, 2024
db8858e
feat: stream fetched data to client component
hetd54 Dec 17, 2024
e0c9ae5
feat: SectionHeader component
hetd54 Dec 17, 2024
a1a3045
Merge branch 'main' into feat-workday-api
hetd54 Dec 17, 2024
ae13bb3
refactor: stream event data to subcomponents
hetd54 Dec 17, 2024
508f86b
fix: add back monthly cal view
hetd54 Dec 17, 2024
4b6ddc8
chore: return error if unable to fetch
hetd54 Dec 17, 2024
4a2c824
chore: remove unused hooks
hetd54 Dec 17, 2024
a618c91
fix: appease the linter
hetd54 Dec 17, 2024
065cd57
refactor: fragments for components
hetd54 Dec 18, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 36 additions & 2 deletions app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
hetd54 marked this conversation as resolved.
Show resolved Hide resolved
</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>
)
}
}
26 changes: 26 additions & 0 deletions app/about/queries.js
Original file line number Diff line number Diff line change
@@ -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"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be hidden as a secret? or does it not matter lol

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wasn't a secret in the old repo, and there are no edit privileges associated with it, so I think it is okay?

)

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
}
60 changes: 54 additions & 6 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
}
7 changes: 7 additions & 0 deletions app/queries.js
Original file line number Diff line number Diff line change
@@ -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
}
190 changes: 80 additions & 110 deletions components/EventSection.tsx
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>
Comment on lines +28 to +29
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these have to be 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 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>
)}
</>
)
}

Expand Down
19 changes: 19 additions & 0 deletions components/LinkCard.tsx
Original file line number Diff line number Diff line change
@@ -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"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀
Does this work? I thought you needed some JS in there too to make this work.... BIG if true 🤔

>
{children}
</section>
)
}
Loading