Lay out the card · Level 1

Behind, or starting here? Download the code as it should be before this lesson.

Right now the card has one shape: the recipe, or Loading… forever if anything went wrong. A real card has four: waiting, problem, nothing found, and the dish. The cook changes first, so the card has something to show for each.

Use the tunnel for this lesson if you like: none of these steps touch the manifest. Start it with the key exported, as in lesson 3.

Step 1: Let the cook report problems

When findDish throws, the resolver call fails and the card never hears why. Catch the error, write it to the log for you, and send a short message back as data for the person looking at the card:

Editsrc/resolvers/index.js

Catch supplier errors and send them back as data.

5	5
6	6		`resolver.define('getDish', async () => {`
7	7		`const query = 'pad thai';`
8		−	Removed: `const dish = await findDish(query, process.env.API_NINJAS_KEY);`
9		−	Removed: `return { query, dish };`
	8	+	Added: `try {`
	9	+	Added: `const dish = await findDish(query, process.env.API_NINJAS_KEY);`
	10	+	Added: `return { query, dish };`
	11	+	Added: `} catch (error) {`
	12	+	Added: console.error(`Supplier lookup failed for "${query}":`, error);
	13	+	Added: `return { query, dish: null, error: error.message };`
	14	+	Added: `}`
10	15		`});`
11	16
12	17		`export const handler = resolver.getDefinitions();`

Why: Resolver

console.error goes to the app’s logs, which lesson 7 reads. error.message is one of the plain sentences findDish throws, such as the one about a missing key, so it is safe to show.

Stuck? I changed code in src/

Done: getDish catches errors and returns them as error

Step 2: Fetch more furniture

Each state needs a UI Kit component: Spinner while waiting, SectionMessage for problems and empty results, List and ListItem for the ingredients.

Editsrc/frontend/index.jsx

Add the list, spinner and message components.

1	1		`import React, { useEffect, useState } from 'react';`
2		−	Removed: `import ForgeReconciler, { Heading, Inline, Lozenge, Stack, Text } from '@forge/react';`
	2	+	Added: `import ForgeReconciler, { Heading, Inline, List, ListItem, Lozenge, SectionMessage, Spinner, Stack, Text } from '@forge/react';`
3	3		`import { invoke } from '@forge/bridge';`
4	4
5	5		`const App = () => {`

Why: UI Kit

Done: index.jsx imports List, ListItem, SectionMessage and Spinner

Step 3: Handle waiting, problems and nothing found

Return early for each state before the full card. The order matters: no answer yet, then a problem, then an empty result.

Editsrc/frontend/index.jsx

Show a spinner, a problem or an empty card before the full card.

7	7		`useEffect(() => {`
8	8		`invoke('getDish').then(setResult);`
9	9		`}, []);`
10		−	Removed: `const dish = result?.dish;`
	10	+	Added: `if (!result) return <Spinner label="Asking the supplier" />;`
	11	+	Added: `if (result.error) {`
	12	+	Added: `return (`
	13	+	Added: `<SectionMessage appearance="error" title="The kitchen could not get a recipe">`
	14	+	Added: `<Text>{result.error}</Text>`
	15	+	Added: `</SectionMessage>`
	16	+	Added: `);`
	17	+	Added: `}`
	18	+	Added: `if (!result.dish) {`
	19	+	Added: `return (`
	20	+	Added: <SectionMessage appearance="information" title={`No recipe for “${result.query}”`}>
	21	+	Added: `<Text>Name a dish in the work item summary, such as Pad thai, then reload.</Text>`
	22	+	Added: `</SectionMessage>`
	23	+	Added: `);`
	24	+	Added: `}`
	25	+	Added: `const { dish } = result;`
11	26		`return (`
12	27		`<Stack space="space.200">`
13	28		`<Inline space="space.100" alignBlock="center">`

Why: UI Kit

After these checks, dish always exists, so the full card below no longer needs dish ? everywhere.

Stuck? The card says there is no recipe for my work item

Done: the card returns early for no result, an error and no dish

Step 4: Plate the full card

Now lay out the whole recipe: the heading and servings, then the ingredients as a list, then the method.

Editsrc/frontend/index.jsx

Title and servings, then ingredients as a list, then the method.

26	26		`return (`
27	27		`<Stack space="space.200">`
28	28		`<Inline space="space.100" alignBlock="center">`
29		−	Removed: `<Heading size="medium">{dish ? dish.title : 'Loading...'}</Heading>`
30		−	Removed: `{dish && <Lozenge>{dish.servings}</Lozenge>}`
	29	+	Added: `<Heading size="medium">{dish.title}</Heading>`
	30	+	Added: `<Lozenge>{dish.servings}</Lozenge>`
31	31		`</Inline>`
32		−	Removed: `<Text>{dish ? dish.method : ''}</Text>`
	32	+	Added: `<Heading size="small">Ingredients</Heading>`
	33	+	Added: `<List type="unordered">`
	34	+	Added: `{dish.ingredients.map((item) => (`
	35	+	Added: `<ListItem key={item}>{item}</ListItem>`
	36	+	Added: `))}`
	37	+	Added: `</List>`
	38	+	Added: `<Heading size="small">Method</Heading>`
	39	+	Added: `<Text>{dish.method}</Text>`
33	40		`</Stack>`
34	41		`);`
35	42		`};`

Why: UI Kit

React needs a key on each list item; the ingredient’s own text works here.

Done: the card shows a title, servings, an ingredient list and a method

Step 5: Taste it, then break it on purpose

Deploy if the tunnel is not running, then reload the Pad thai ticket:

RunTerminal

forge deploy

You should see, on the work itemExampleAn example: the supplier’s recipe will differ.

Recipe card

Pad Thai 4 servings

Ingredients

8 oz rice noodles
2 tbsp tamarind paste
1 cup bean sprouts

Method

Soak the noodles in warm water, then stir-fry with the sauce…

Then see a state you wrote. With the tunnel running, change 'pad thai' in src/resolvers/index.js to a dish nobody sells, such as 'moon cheese', save, and reload. The card shows the information message instead of failing. Change it back to 'pad thai' when you have seen it.

Stuck? I changed code in src/ · The card says there is no recipe for my work item

Done: you saw the full recipe, then the No recipe message, and changed the dish back

Compare with yours: download the code after this lesson.