Feat: workday api within about page #22
Conversation
|
Visit the preview URL for this PR (updated for commit ecaff23): https://ccv-website-next--pr22-feat-workday-api-e51yic13.web.app (expires Mon, 09 Dec 2024 18:49:37 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 809aa2d3a6cfe026c3c7417c932015a8f1d9ec89 |
| 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" |
There was a problem hiding this comment.
👀
Does this work? I thought you needed some JS in there too to make this work.... BIG if true 🤔
components/Opportunities.tsx
Outdated
| const handleApiCall = async () => { | ||
| try { | ||
| const res = await fetch("/api/about", { | ||
| method: "POST", | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| }) | ||
|
|
||
| if (!res.ok) { | ||
| throw new Error(`Failed to fetch: ${res.status}`) | ||
| } | ||
|
|
||
| const opportunities = await res.json() | ||
| setData(opportunities.json) | ||
| } catch (err: any) { | ||
| setError(err.message) | ||
| } finally { | ||
| setLoading(false) | ||
| } | ||
| } | ||
| useEffect(() => { | ||
| handleApiCall() | ||
| }, []) |
There was a problem hiding this comment.
Just out of curiosity, why not handle this in one of the server components? That way you only have to transmit the HTML of the page and you don't have to worry about loading state or whatever.
There was a problem hiding this comment.
Do you mean pulling this out into its own server component? So "OpportunitiesSection" could be the html and such and Opportunities.tsx could be the server component?
I personally find it frustrating when things get too abstracted and there are 6 files that I need to look into to understand what specifically I need to edit/change; projects get overwhelming as the components folder grows; however, this is running on each page load which is probably overkill?
Thinking about it, this is worth moving for functionality; I need some help thinking about file structure in the future though!
There was a problem hiding this comment.
Sortof! This is informed by a convention I've come to for myself. When possible, I like to do all my fetching / data interactions at the highest component level I can / is reasonable. For NextJS, it's on the page.tsx level. And I think some developers on Next JS and I are of the same opinion about this because all page.tsx components are async by default!
So the pattern would be that you do your asynchronous fetch action in the page, await the result, and then pass the resolved data to the UI component later on. For this example, it might look something like this:
app/about/page.tsx
export default async function About() {
try {
// Omitting function definition for brevity
const data: OpportunityProps = await handleApiCall();
return <Opportunities data={data} />;
}
catch (ex) {
// Handle the case when the fetch fails for whatever reason, display a different page.
return <p>{ex}</p>;
}
}components/Opportunities.tsx
"use client";
export function Opportunities({ data }: {data:OpportunityProps}) {
// However you want to display the fetched data, you can omit the fetch effect because you're getting passed validated data.
return (
<>
{data.map( /* ... */)}
</>
);
}Does this make sense? I got a little lazy when writing this 😓
components/Opportunities.tsx
Outdated
| data.jobPostings.map((position) => { | ||
| return ( |
There was a problem hiding this comment.
This is a very small thing, but when I don't have any Logic happening inside an anonymous function like this, I tend to like to omit the return statement. Now sure if that's your vibe too, but I think the code ends up looking cleaner.
| <p className="flex items-center text-secondary-blue-700 gap-2 md:gap-4"> | ||
| <MapPinIcon className="h-4 w-4" /> Providence, RI - | ||
| United States | ||
| </p> | ||
| <p className="text-gray-800">{position.title}</p> |
There was a problem hiding this comment.
Wonder if things like this should be p's or span's... MDN didn't come down one way or the other, but I think there might be a reason to use something more generic here, in that this doesn't represent a paragraph in totality? Not sure though!!!
| streamedDataFuture: Promise<any> | ||
| streamedDataPast: Promise<any> |
There was a problem hiding this comment.
Do these have to be any?
| 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" |
There was a problem hiding this comment.
Should this be hidden as a secret? or does it not matter lol
There was a problem hiding this comment.
It wasn't a secret in the old repo, and there are no edit privileges associated with it, so I think it is okay?
Changes
Folder structure for fetching
Loading States for data fetching
SectionHeader component
Gonna use this SO many places so I just made it a component, used in both the About page and Home page