On this one we'll play around with nested async calls to multiple apis. This means we'll have to write a few promises with others nested in it.
The result will be a sort of random To-Do table with activities dictated by the results coming from boredapi and an image (gif) attached to each activity coming from tenor api.
We'll use what's provided by a plain CRA app in JavaScript, no extra libraries or typescript this time.
The service layer
Or in this case, just a promise to fetch the data from the apis we need.
Go ahead and create a directory called service/ under /src, create an index.js file in it and add the following to it.
A few global constants to pick up the api's urls
export const BORED_API_URL = 'https://www.boredapi.com/api/activity';
export const TENOR_SEARCH_URL = 'https://g.tenor.com/v1/search';
// Here we build the tenor api url using a key to be able to
// authenticate and also we set the limit to 1, since we only
// need a single image for each activity.
export const gifUrl = (term) => `${TENOR_SEARCH_URL}?q=${term}&key=LIVDSRZULELA&limit=1`
Now we'll start to write our main Promise using async/await pattern, we'll add chunks of code step by step and explain what each piece is doing.
We'll call our promise "fetchActivity" because it will fetch a single activity and return an object that will contain an id, boredapi data and also the tenor gif data.
export const fetchActivity = async (id) => {
try {
// We need to get the json data from the boredapi.
// For now we'll just leave a placeholder object.
const boredJson = {};
// Same with tenor gif data, we'll have to figure out
// a way to query this api using the activity
// name we fetched in the previous api call.
const tenorGifData = {};
// Return the stuff we'll use from our UI later on.
return {
id,
data: {
...boredJson,
gif: tenorGifData
}
};
} catch (e) {
console.error('Error while fetching activity:', e);
}
}
Now we use fetch to do the first call to boredapi, so we can get activity data.
export const fetchActivity = async (id) => {
try {
// Here we wire up fetch with the BORED_API_URL global constant.
// Await the fetch call to get the response.
const boredResponse = await fetch(BORED_API_URL);
// We want the json serialized verion of the response here,
// keep in mind that .json() also returns a promise, so it's
// very important to always remember to use `await` here as well.
const boredJson = await boredResponse.json();
...
Ok, now we have the boredapi activity data available, we should be able to get the activity name and use that with the tenor api to fetch a gif that should be somewhat related to the activity name.
...
// Right underneath our boredJson response constant,
// we extract the `activity` key from the json response
// which contains text of the activity name.
const { activity } = boredJson;
// We use fetch again to hit the tenor api, using the
// gifUrl helper to build the url text fetch gif data
// by that text we pass as an argument.
const tenorResponse = await fetch(gifUrl(activity));
// Same here, we want the json serialized version of
// the tenor api response.
const tenorJson = await tenorResponse.json();
// And finally we do some good ole hardcoding to get
// the image data we want, in this case I go for the
// tinygif version, that's all I need for now.
const tenorGifData = tenorJson.results[0].media[0].tinygif;
...
If you followed the steps correctly, you should have a fully working promise that fetches data from both apis and returns an object with it. Below I will post the full example.
export const BORED_API_URL = 'https://www.boredapi.com/api/activity';
export const TENOR_SEARCH_URL = 'https://g.tenor.com/v1/search';
export const gifUrl = (term) => `${TENOR_SEARCH_URL}?q=${term}&key=LIVDSRZULELA&limit=1`
export const fetchActivity = async (id) => {
try {
const boredResponse = await fetch(BORED_API_URL);
const boredJson = await boredResponse.json();
const { activity } = boredJson;
const tenorResponse = await fetch(gifUrl(activity));
const tenorJson = await tenorResponse.json();
const tenorGifData = tenorJson.results[0].media[0].tinygif;
return {
id,
data: {
...boredJson,
gif: tenorGifData
}
};
} catch (e) {
console.error('Error while fetching activity:', e);
}
}
Disclaimer: The promise doesn't have any error checking or data sanity checking. This code can be used in production only if you add such things to it, otherwise I wouldn't recommend it.
The above should be fairly easy to accomplish, just read the fetch api documentation and how to make sure fetch was successful.
The UI component
We are going to build a very basic table of activities, each activity will be fetched consecutively, always keeping in mind that it'll be a 100% asynchronous flow.
Adding the table to display the data.
import { useState, useCallback } from 'react';
import './App.css';
const App = () => {
const [activityData, setActivityData] = useState([]);
const fetchActivities = useCallback(() => {
// TODO:
}, []);
const renderRows = (data = []) => {
if (data.length === 0) {
return (
<tr>
<td>No data</td>
</tr>
);
}
// Render a "Loading" state when an activity
// is to be executed (object in local state
// is present) but is not yet resolved.
return data.map(({ id, resolved, data }) => {
if (!resolved) {
return (
<tr key={id}>
<td><div className="spinner">Loading</div></td>
</tr>
);
}
// Once the activity is resolved, get the
// necessary data from the response payload
// and append a table row with it.
const { activity, type, participants, price, link, key, accessibility, gif: { url } } = data;
return (
<tr key={key}>
<td>{activity}</td>
<td>{type}</td>
<td>{participants}</td>
<td>{price}</td>
<td><a rel="noreferrer noopener" target="_blank" href={link}>{link}</a></td>
<td>{key}</td>
<td>{accessibility}</td>
<td><img alt={activity} src={url} /></td>
</tr>
);
}
)
};
return (
<div className="App">
<h1>To-Do's</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>type</th>
<th>participants</th>
<th>price</th>
<th>link</th>
<th>key</th>
<th>accessibility</th>
<th>gif</th>
</tr>
</thead>
<tbody>
{renderRows(activityData)}
</tbody>
</table>
<button onClick={fetchActivities}>Fetch</button>
</div>
);
}
We are going to fetch batches of 10 activities everytime the user hits the button. To accomplish this we will add a function to build an array of promises which will be later used to fire requests to the bored and tenor apis.
First we add buildPromises function to our component.
...
import { fetchActivity } from './service';
...
const buildPromises = useCallback(() => {
let promises = [];
// We iterate 10 times here to build an array
// of promises using fetchActivity with an id
// based on the index we iterate on.
// The index will help us track the promise and
// its state in the component local state.
for (let i = 0; i < 10; ++i) {
promises = [...promises, async () => fetchActivity(i)];
// React state updates are async, so we need
// to useState with a callback that receives the previous state,
// that way we make sure we are working with the updated version
// of activityData. If we don't do this we'll probably get an
// empty array, or at least we won't get the data we are expecting.
// I encourage you to try it out and see the difference for yourself.
setActivityData((prevActivityData) => ([...prevActivityData, { id: i, resolved: false, data: undefined }]));
}
return promises;
}, []);
...
Now we'll implement the fetchActivities function using our fetchActivity promise from before.
...
const fetchActivities = useCallback(async () => {
const promises = buildPromises();
// We use async for of... to execute our
// collection of promises and fetch the results.
for await (const prom of promises) {
const response = await prom();
setActivityData(prevActivityData => prevActivityData.map((a) => {
// We check for the id of that promise
// in the response and if it matches,
// we update the object in the local state
// with the actual data.
if (a.id === response.id) {
return {
...response,
// We update the resulting object to have a
// `resolved: true` value so we can play around
// with spinners in the UI later on.
resolved: true
}
}
return a;
}));
}
}, [buildPromises]);
...
And that's it! at this point you have a basic but fully working component that should render a table, load batches of 10 activities and render those in a loading state while they are being fetched.
Here's the full code of App.js
import { useState, useCallback } from 'react';
import './App.css';
import { fetchActivity } from './service';
function App() {
// [{ id, resolved, data }]
const [activityData, setActivityData] = useState([]);
const buildPromises = useCallback(() => {
let promises = [];
for (let i = 0; i < 10; ++i) {
promises = [...promises, async () => fetchActivity(i)];
setActivityData((prevActivityData) => ([...prevActivityData, { id: i, resolved: false, data: undefined }]));
}
return promises;
}, []);
const fetchActivities = useCallback(async () => {
const promises = buildPromises();
for await (const prom of promises) {
const response = await prom();
setActivityData(prevActivityData => prevActivityData.map((a) => {
if (a.id === response.id) {
return {
...response,
resolved: true
}
}
return a;
}));
}
}, [buildPromises]);
// [{ id, resolved, data }]
const renderRows = (data = []) => {
if (data.length === 0) {
return (
<tr>
<td>No data</td>
</tr>
);
}
// TODO: FIXME: There's a chance the boredapi can return
// the exact same activity, hence the key is the same
// and this will cause a conflict with the table row element keys
// so we need a check to merge data in case there's a dupe activity.
return data.map(({ id, resolved, data }) => {
if (!resolved) {
return (
<tr key={id}>
<td><div className="spinner">Loading</div></td>
</tr>
);
}
const { activity, type, participants, price, link, key, accessibility, gif: { url } } = data;
return (
<tr key={key}>
<td>{activity}</td>
<td>{type}</td>
<td>{participants}</td>
<td>{price}</td>
<td><a rel="noreferrer noopener" target="_blank" href={link}>{link}</a></td>
<td>{key}</td>
<td>{accessibility}</td>
<td><img alt={activity} src={url} /></td>
</tr>
);
}
)
};
return (
<div className="App">
<h1>To-Do's</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>type</th>
<th>participants</th>
<th>price</th>
<th>link</th>
<th>key</th>
<th>accessibility</th>
<th>gif</th>
</tr>
</thead>
<tbody>
{renderRows(activityData)}
</tbody>
</table>
<button onClick={fetchActivities}>Fetch</button>
</div>
);
}
export default App;