Render the Conversation From the DB
In this lesson, you'll be tasked with creating a function called RenderConversationFromDB that will render any existing conversation from the database when the app loads. We start by retrieving the conversation using the get method and then converting the snapshot into an array of objects. We iterate over each object, create a speech bubble div element, and add appropriate CSS classes based on whether the speaker is a human or the AI. The speech bubble is then appended to the chatbot conversation.
To ensure security, we use text content instead of innerHTML for adding the text to the speech bubble. Finally, we move the conversation down so the latest message is always in view using scroll top. The RenderConversationFromDB function is called upon app load to automatically render the conversation from the database.
[00:00] we need a function that will render out the conversation as it exists on the database when the app loads so the user can see what has already been discussed. Now, I've set you a challenge to do this, and it might seem like a big challenge, but actually, this function is just going to recycle bits of code we've already written,
[00:19] and it's a good opportunity for you to get some more practice with Firebase. So the challenge is this. Create a function called RenderConversationFromDB, which will render any existing conversation in the database. Now, this function should be called when the app loads. Now, take all the time you need to do this.
[00:39] There are a few things to think about, and if you need any extra help, I've created a file up here called hint.md, and it's got some tips in there that will really help you. Now, if you don't want any help, pause now and get started. I'm going to open hint.md so those watching on YouTube can pause it and read it.
[01:01] Okay, good luck with the challenge, and when you're ready, I'll show you my way. Okay, hopefully you managed to do that just fine, so let's come down here and set up this function. Now, the first thing that we need this function to do is to get the conversation from the database. So we'll use the get method,
[01:25] and we'll pass in the reference to the database. We'll chain on then, and we know the callback function here will be an async function, and it will have the snapshot as a parameter. Inside the body of this function, let's use an if to make sure the snapshot exists, because if there is no snapshot,
[01:44] if there's nothing in the database, this function need not do anything. And now we want to get that snapshot as an array of objects, and we can do that by saying object.values, and we'll pass in snapshot, and we'll need the val method. Now we can iterate over that array using a foreach,
[02:03] and we'll represent each item in the database with database object, which I'll shorten to dbObj. Now for each database object, we want to create a new speech bubble, and we can do that with document.createElement, and we'll create a div. Now we'll need to add some classes to that div,
[02:22] and that goes with every speech bubble is just speech. Now the second CSS class is dependent on whether it's a human or the AI that's speaking. So I'm going to open up the backticks, and both classes start with speech dash, and now I'll use dollar sign and curly braces,
[02:41] and in here, we're going to use a ternary. So I'm going to say dbObj.role, and I'm going to ask if that is triple equals to user. If it is, this CSS class should be speech dash human, and if it's not, it should be speech dash AI.
[02:59] Okay, now we need to append that speech bubble to chatbot conversation, which we took control of right up here on line 23, and apologies, in hint.md, I think I said it was line 22, but I'm sure you found it. So let's say chatbotConversation.appendChild,
[03:17] and the element we want to append is new speech bubble, and lastly, we need to add the text to the speech bubble. Now I did say in hint.md, make sure that a malicious user can't use this to input JavaScript, so hopefully you didn't use innerHTML to do this. Text content is secure
[03:36] because anything which is inputted is just going to be parsed as text. It cannot be parsed as HTML with script tags and with executable JavaScript inside them. Lastly, we just want to move the conversation down so the latest message is always in view, and we've done that several times in the app with scroll top,
[03:55] and we're setting chatbotConversation.scrollTop equal to chatbotConversation.scrollHeight. Now to check it's working, all we need to do is call it, and if we call it right there, it should run every time the app loads. Let's hit save and see what happens, and there we are. Our conversation is rendered,
[04:15] so everything that we've got in the database, we can see it all right here, is now rendered automatically as soon as we load, and we can see that the ternary has been successful because we've got different speech bubbles depending on whether it's the AI or the human that has spoken. Okay, that's a really good job.
[04:33] The final task then is to wire up this start over button. Let's do that in the next scrim.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!