You can find a summary of the code updates in this pull request . Read on for explanations.
1. New state and type
First, let’s set up the state in src/hooks/use-quote-styles.ts to receive the new color data.
New state type
The plan is to replace the quote
state (which can only contain a string, the quote itself), with a quoteProperties
state. The quoteProperties
value will be an object with this shape:
types/index.ts
We’ll define and export this type in src/types/index.ts, since we’ll eventually need this type for the revised QuoteContent
props as well.
Create state
Next we’ll delete the quote
state and replace it with quoteProperties
in src/hooks/use-quote-styles.ts:
use-quote-styles.ts
Eventually, we’ll update the destructured output of useQuoteStyles
in src/app/page.tsx, but we’ll wait until later and make all the necessary changes to that file at once. Let’s continue to focus on useQuoteStyles
for now.
2. Update state with response
We know from src/app/api/get-quote-styles/route.ts that the response should have the shape of the QuoteProperties
type. But it’s good to check and be sure, just in case.
Validate JSON
As the JSON gets more complicated, so will the logic to validate it. Let’s replace the current simple conditional with an isValidJson
function:
before
after
The type of the argument for isValidJson
will be any
, since the output of await response.json()
is any
Here’s the isValidJson
function. It can be defined outside the useQuoteStyles
function because it takes input and doesn’t need to use the json
variable defined within useQuoteStyles
. It should be ouside the useQuoteStyles
function because isValidJson
doesn’t need to be (and shouldn’t be) re-defined every time useQuoteStyles
runs (on state update, for example).
Note: There are tools to help with this type of validation (such as zod ), but these tools are outside the scope of this workshop.
3. Use state for Card
Finally, we need to update how the state is consumed in src/app/page.tsx and src/components/QuoteContent/QuoteContent.tsx
Update QuoteContent props
In src/app/page.tsx, we’ll update the destructuring of return values from useQuoteStyles
to include the new quoteProperties
state instead of the old quote
state. Then we’ll pass quoteProperties
to the QuoteContent
component (we’ll update the props in QuoteContent.tsx
next).
page.tsx before
page.tsx after
Update Card props
Finally, in src/components/QuoteContent/QuoteContent.tsx, we’ll change the quote: string
prop to quoteProperties: QuoteProperties
.
QuoteContent.tsx
And destructure quote
and colors
off of quoteProperties
so we can display the quote and pass the colors to Card
.
QuoteContent.tsx
Because Card
has already been set up to use the props for styles, we should not have to edit Card
at all to see the colors.
You may or may not agree with the colors that OpenAI chooses (and the colors aren’t always that consistent), but we do get colors displayed with the quote!
Next up
In the next workshop, we’ll get a font suggestion from OpenAI, and also correct the grammar and gendered language.
Workshops in this series
- OpenAI Node SDK
- Prompt engineering: color
- Apply color response
- Prompt engineering: quote cleanup and font
- Apply font response (coming October 10, 2024)
- Quote entry (coming October 17, 2024)