diff --git a/app/about/page.tsx b/app/about/page.tsx index be39304..552534e 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -1,3 +1,37 @@ -export default function About() { - return
About
+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 ( +
+ } + /> + }> + + +
+ ) + } catch (err: any) { + console.error(err) + return ( +
+ } + /> +

{err.message}

+
+ ) + } } diff --git a/app/about/queries.js b/app/about/queries.js new file mode 100644 index 0000000..6982cba --- /dev/null +++ b/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 +} diff --git a/app/page.tsx b/app/page.tsx index 185d847..17cc5b8 100644 --- a/app/page.tsx +++ b/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 ( -
- -
- ) +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 ( +
+ + }> + + +
+ + VIEW ALL EVENTS + +
+
+ ) + } catch (err: any) { + console.error(err) + return ( +
+ +

{err.message}

+
+ + VIEW ALL EVENTS + +
+
+ ) + } } diff --git a/app/queries.js b/app/queries.js new file mode 100644 index 0000000..25cf2f6 --- /dev/null +++ b/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 +} diff --git a/components/EventSection.tsx b/components/EventSection.tsx index 849d4f7..d5357c2 100644 --- a/components/EventSection.tsx +++ b/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 + streamedDataPast: Promise + 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 ( -
-
-

- Events -

+ <> +
+
+ {CAL_VIEW_ARRAY.map((item) => { + return ( +

setView(item)} + > + {item} +

+ ) + })} +
-
-
-
- {CAL_VIEW_ARRAY.map((item) => { + {!dataFuture &&

No event data

} + {view === "Upcoming" && ( +
+ {dataFuture && + dataFuture.slice(0, 4).map((e: DataProps, i: number) => { return ( -

setView(item)} +

- {item} -

+ +
) })} -
- {isLoading &&

Loading...

} - {!dataFuture &&

No event data

} - {view === "Upcoming" && ( -
- {dataFuture && - dataFuture.slice(0, 4).map((e: DataProps, i) => { - return ( -
- -
- ) - })} -
- )} - {view === "Weekly" && ( -
- -
- )} - {view === "Monthly" && ( -
- -
- )} -
- - -
+ )} + {view === "Weekly" && ( +
+ +
+ )} + {view === "Monthly" && ( +
+ +
+ )} + ) } diff --git a/components/LinkCard.tsx b/components/LinkCard.tsx new file mode 100644 index 0000000..003ad34 --- /dev/null +++ b/components/LinkCard.tsx @@ -0,0 +1,19 @@ +import React from "react" + +type CardProps = { + className?: string +} + +export function LinkCard({ + className = "", + children, +}: React.PropsWithChildren) { + return ( +
+ {children} +
+ ) +} diff --git a/components/Opportunities.tsx b/components/Opportunities.tsx new file mode 100644 index 0000000..998eda5 --- /dev/null +++ b/components/Opportunities.tsx @@ -0,0 +1,58 @@ +"use client" +import React, { use, useState, useEffect } from "react" +import Link from "next/link" +import { LinkCard } from "@/components/LinkCard" +import { + MapPinIcon, + ArrowRightIcon, + UserPlusIcon, +} from "@heroicons/react/24/solid" +import Spinner from "@/components/assets/Spinner" + +interface PositionProps { + title: string + externalPath: string + locationsText: string + postedOn: string + bulletFields: string[] +} + +export function Opportunities({ data }: { data: Promise }) { + const opportunities = use(data) + return ( + <> + {opportunities.jobPostings.length > 0 && + opportunities.jobPostings.map((position: PositionProps) => { + return ( +
+ + +
+
+

+ Providence, RI - + United States +

+

{position.title}

+
+ +
+

Learn More

+ +
+
+ + +
+ ) + })} + + ) +} diff --git a/components/SectionHeader.tsx b/components/SectionHeader.tsx new file mode 100644 index 0000000..9635d95 --- /dev/null +++ b/components/SectionHeader.tsx @@ -0,0 +1,21 @@ +"use client" +import Link from "next/link" +import React from "react" + +interface SectionHeaderProps { + title: string + href: string + icon?: React.ReactNode +} + +const SectionHeader = ({ title, href, icon }: SectionHeaderProps) => { + return ( + +

+ {icon && icon} {title} +

+ + ) +} + +export default SectionHeader diff --git a/components/assets/Spinner.tsx b/components/assets/Spinner.tsx new file mode 100644 index 0000000..13eb77b --- /dev/null +++ b/components/assets/Spinner.tsx @@ -0,0 +1,28 @@ +import React from "react" +import { LogoProps } from "@/components/assets/types" + +const Spinner: React.FC = ({ width = 75 }) => { + return ( +
+ + Loading... +
+ ) +} + +export default Spinner diff --git a/components/calendar/CalendarHeading.tsx b/components/calendar/CalendarHeading.tsx index b1e5ec5..1fab7cf 100644 --- a/components/calendar/CalendarHeading.tsx +++ b/components/calendar/CalendarHeading.tsx @@ -29,7 +29,7 @@ export const CalendarHeading: React.FC = ({ @@ -45,7 +45,7 @@ export const CalendarHeading: React.FC = ({