How to integrate an Artificial Intelligence in your React App?

Part 2

In this installment, we are going to see how we can manage data sent from Alan in our React app.

We know that data is sent as part of an Object, that is identified by a command. In our useEffect, we are expecting for this possible commands:

if command === “newHeadlines”, Alan will send the articles fetched and declared as articles:

Alan is getting the voice command “CNN” for example, making the request to the API and sending the articles back to the Client app — our React — then we are getting this data and putting it in a piece of state.

When the command is “highlight”, Allan tells React which article is reading so we can add a class to the card, making it so the user can see the card in evidence.

When the command is “open”, Allan tells React what article number’s the user decided to open, so we run the script to open the url for that article.

When comes to the UI, I have an NewsCards, which renders a a NewsCard for each article:

Also, for this project, I am using JavaScript for the styles, so for each component I have an styles.js and, using makeStyles hook from Material UI, I can import and export those styles and apply classes:

When we export makeStyles(), we get back a useStyles hook:

The classes object now is all the CSS applied in the styles.js file and we can apply it in our markups.

And that’s it for our Allan AI application, hope you enjoyed it and hopefully I’ll see you next week with another topic.