Exploring widgets and data fetching in react-chatbot-kit

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
okay so in this video i want to handle creating widgets and custom components so that we can kind of get the chatbot to display anything that we wanted to and i also want to merge that with getting data from an api and putting that into the chatbot states and then rendering it to the screen so basically what we're going to be doing is we're going to use jsonplaceholder api and we are going to use the slash to do's endpoint which will just give us a list of to-do's so in our chatbot what we want to have happen is that when we write in show me my to-dos we want the chatbot to respond to that with a message and then display the component that's responsible for getting that data and putting it into states and then rendering out the to-do's so let's get started on that we'll start by going to the config and we'll add a or remove this entry in the state and we'll add a new entry that says to dose and it's going to be an empty array and the next thing we are going to be doing is we are going to create a new component called to-dos and it's just going to be a functional component and for now we'll return a div hello world okay so we got that now in the let's see you know what i want to do is i want to go to the config and i want to register this as a widget so let's do widgets which is a config property and we'll give that a object sorry we're given gonna give it an array and it's going to contain objects now widgets are components that you create on your own and then you register them in the config because we want the widget to be decorated with some things that only the chatbot can give us so basically we wanted to receive retrieve states we wanted to receive some methods that will help make our lives easier and so to make that happen we need to define it as a function that we can call at a later point in time so let's head over to the documentation and we can go up to the config example and then here i want to grab the first entry and we i'm gonna paste it into the config and then we're going to talk about it whoops let's try to do it properly paste that in all right so here we have a widget object and it has three properties it has the widget name which is a name that we give it to refer to it later when we want to use it it has the widget function which is a function that returns a jsx element so it returns the component that we've created and we also have a map state to props property that tells the chatbot which state that we want to give to this component so we defined todos up here and what we want to do is to have this component have access to that state so to do that we'll say to dose and that will map this piece of state to whatever component we put in here now it says overview and we want to change that because the component that we created was called to dose so let's import that and we'll name this one to do's and we'll also put the correct component here all right so now we have a registered widget that we can use in our react chatbot and the way we use it is by adding an options property to the create chatbot message so let's do that here and then later we'll change it so it actually is in response to a message but for development purposes i like to just put it right here and then i can see what i'm working with so i'll say widget and i want to [Music] specify the name of the widget that we just registered so i want to say to do's and save that and if we head to the chat bot then we can see here that nothing's happening so we need to go and check out the to-do's component to do's it returns hello world it's you know what actually let's go to the documentation i might have gotten the thing here wrong no that looks right let's see config create chatbot message hello world widget to do's which is named to-do's so perhaps this is just hidden because yeah so it's here it's just invisible so let's fix that and we're going to give it to do css and we'll import that file so we just created a css file here and we're just importing it directly into this jsx file so now we can say to this widget and in the css we'll say to do's widget and color dnd so that should make the text visible for us sweet now let's go ahead and see if we can console.log the props that is passed into this component and we'll take a look at it so let's open the developer tools and we can see the props object right here and we've given the component by registering it in the config we've injected this component with some properties and because we defined it as a function where we're able to do that so you can see now we have the todos array here it's currently empty we have a set state function which allows us to manipul manipulate the internal state of the chatbot it's the same function that's passed to the action provider we have an action provider here that is the same that we've defined earlier and we also have a scroll interview function which we can call if the component that we are rendering is [Music] overflowing the container we might want to scroll the container here to the bottom so it's always correctly aligned so that's the properties that are being passed into these components now what we want to do is we want to fetch the data from the api and we want to put it into the chatbot state so let's take a look at how we'll do that so i'll just grab this link right here to this endpoint and we want to use a hook called use effect and we want to use get use state as well from react and then we will actually know we will not be using u-state because we'll be setting this in the chatbot states not a local state in this component so we just need use effect so we're going to say use effect and we're going to give it a callback function and we're going to give it an empty dependency array so we just want to run this function when the component is being loaded up so the first time it mounts we want to run this function and what we are going to do is we are going to say fetch and we're going to say then res json and then we will take that data and we'll do let's console.log it for now and in the source i'm gonna do pre i'm just gonna set up a prettier rc so that i can get some outdoor formatting here okay there we go much better so we're using use effect here to run a function whenever this component gets mounted and then fetch will take care of going to this url and retrieve the data and fetch first returns a result that we are converting to json and then we'll have the data here and we'll log it out in the console so let's go back to the browser and we will we can see here on the left hand side that we've gotten all 200 of the to-dos and we're ready to put that into our state but first we might want to trim that down a little bit so maybe we'll just grab five of those to do's so let's head back to our component and we'll say that const five first to do's equals data slice zero five zero six and then we are going to be using the set state function that is passed in from the properties so let's the structure set state from props and we want to do set state and we need to give it a callback because we don't want to overwrite state we just want to [Music] we just want to add to it so we need to preserve everything that was there from before so we're spreading out the state so we're taking everything that's in the state and kind of saying that okay so we're creating a new state object but take everything from the old states and put it in and then we are going to do to do's and we're going to say that to do's equal five first to-do's so this is a array because data.slice will return to us an array with the first five items and then we'll set the chatbot state we'll copy all the old state over and will set the toduce property to be equal to five first to-do's so after that if we console.log props stay to deuce here we should be getting the five first all right so let's see i think it's just a property directly on the yeah it is it's not under state so it's just props to deuce and it seems like it took the six first oh it doesn't matter five or six so you can see here we start off with an empty array and then once we fetch the data and put it into the state we're re-rendering and we have an array of six to-do's so let's go ahead and put those on the screen and we are going to just map over them in a list and use their ids as keys so we're going to create a function called render to do's and we're going to say props to-do's map and in here we're going to put a unordered list and we wouldn't want the render to do is to produce six list items and then insert that into the unordered list so inside of here we'll do this render to do's and then we want this function to return list items with the to-do text so let's say this is going to be to do list widget list item and this is going to be to do widgets list and then we're going to give this the key of to do dot id and we're going to say to do and let's go back and check the title and we're going to say to do title inside of there so now if we go back to our whoops render to do's is not defined that's not good and it's not a class so this doesn't make sense so that should take care of that and we'll refresh here to do's is not defined oh of course so when you're used to working with class-based components you might find yourself forgetting some of the things that functional components needs so here we need to add const in front of render to do's because it's obviously a a variable and it's just storing this function so uh we're restoring a function in the variable constrainer to dos so that should take care of it it looks like we still have one final error it says expect the assignment and instead saw an expression and i know that we need to return whatever we are doing from render to do's and we need to return our list item okay so as you can see now we have the to-do's rendered to the screen and we can start making it pretty if we want to and we won't spend too much time on this but let's see if we can do just a few basic things here so let's do margin 0 padding 0 on the actual list and then the to-do list item and list style type none as well and the list item font size one ram margin eight pixels zero that will just give the a little bit of margin on the top and bottom and on to the left and right and we'll say margin text line left and yeah i think that probably works for now i mean these to do this don't really make any sense but this is all about just learning how to fetch the data and display it through a custom component so it doesn't really matter that much what is being displayed um but we have it here now so let's go ahead and make it so that the chatbot responds with this when we request it so let's go back to config and we'll remove the options object here and restore it to just saying hello world to begin with and now we'll head over to the message parser and we'll add a new clause here and let's say if lowercase includes to-dos then we want to say this action provider and we haven't created this method yet so for now let's just comment this out and we'll head over to the action provider so in the action provider we'll say um introduce handler i'll say message equals this create chatbot message sure here's your to-do's and we'll give it the options object and we'll say widget to loose and we'll say this set chatbot message message so now we've made a handler and the handler just makes the chatbot say sure here's your to-dos and then it renders the widget that we've been working on with this message so if we go back to our message person now we say this action provider handle to do's and make sure that that was the same name it's not so we need to make sure that those two match up to this handler so now if everything works correctly we should be able to write anything that has to do's in it into the chatbot and get the response in return where the chatbot renders the widget component so let's see if it works perfect so we asked for our to-dos and we triggered the correct handler from the message parser and we were able to show our widget onto the screen and also fetch data put it into state and have that state trigger a render of our component so this has been quite a long episode but i think it's really interesting as well because with this knowledge you can do a lot of different things and you can customize your chat bots to display really any kind of data that you might want to display to your users so thanks for tuning in and this is it for now
Info
Channel: Fredrik Oseberg Coding Lessons
Views: 2,489
Rating: undefined out of 5
Keywords:
Id: YGXXITnXvYU
Channel Id: undefined
Length: 25min 4sec (1504 seconds)
Published: Thu Aug 13 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.