Loading New Data

[00:00:00]
>> Evgenii Ray: So we completed the step one and step two and the next part will be to load some data. So when our viewport touches the bottom observer, now we need to render some items. Basically, we're going to replicate the exercise that we did before on laser scroller, one thing you may also notice, since they, virtualization is the sliding window.

[00:00:26]
So we also need to maintain the state where we keep the start and then pointer to know what exactly the window we're currently rendering. So we'll create a new start and then variables on the virtual list state and when we load the new chunk of data, we're gonna increment the end pointer to specify that now we're rendering the page 1 and page 2.

[00:00:53]
So this will be our next part of the exercise, so let's get back to the code now.
>> Evgenii Ray: So here inside effect function,
>> Evgenii Ray: So let's see, we call the handle intersection observer method, but now we need to implement the bottom observer, which already predefined here. So let's write some logic first, we need to fetch the data.

[00:01:26]
So for that,
>> Evgenii Ray: Actually, we need to look for the properties first that we are defining on the virtual list. So there are four properties that we are going to utilize, the first one is the getPage. So the getPage is just a function that takes the page number and returns the promise of some generic data.

[00:01:51]
So it's kind of a data function that we're gonna use to fetch the next chunk of data. Then we have the getTemplate function, the getTemplate function accepts the single piece of data and returns the newly created HTML element. So we're gonna use that, so the virtual list will be able to accept some generic HTML template, so it's gonna work with any template.

[00:02:15]
So the template is defined by the user of our virtual list. And there is also updateTemplate function, which is very similar to getTemplate, but it also accepts the element which already exists in a virtual list. When we call the updateTemplate, instead of creating a new element, we take the new data and just update the existing element within the list.

[00:02:40]
So we don't really create a new HTML element. And there is a page size. We need to know how many elements we render per single API call. This will tell us what is the limit that we can render on the page. So for instance, if the page size is 10, then we can say that we just want to render two pages of data all the time.

[00:03:09]
So this means 20 elements will be the maximum number of nodes in the virtual list. And let's go to index html first and define this attributes, right now they all now's, so first let's create a function that will generate the HTML element for us. So here I will, I'm going to build the function that's going to accept two arguments, they don't end the element, so let's start implementing this.

[00:03:44]
So if the element is not provided, then we're going to use the document fragment that we already used before, to create a new HTML element, so let's do that. Template content call note through and then first element child, so it's basically the same thing that we already keep it for.

[00:04:17]
Now we want to update the cart element, we know that, we use the same data title and the body, so we want to update the title and the body of the cart, so let's query this cart title and cart body.
>> Evgenii Ray: So let's use cart query selector all, so we're gonna query the cart title and also cart body content, so now we need to update the cart title.

[00:04:51]
Okay, now we need to update the data that we received from, we need to update the data inside HTML element but that we received from API, so we use the text content attribute, let's modify it to title.
>> Evgenii Ray: And then let's do cart body, text content, and Textcontent.tatum.body, and then we return the following cart.

[00:05:21]
So now we can just copy this function and use it as the get template and update template. So when we have the get template, only the datum is provided, so we always generate a new element. But when we use the MLA template, then the element is provided, so we reuse existing element and update the data.

[00:05:44]
Then the page size, we can set it to be 10, because I know that our mockdb returns 10 elements. And the getPage, we're going to use the db.getPage function, so let's use the pointer, and let's provide the pointer here. So let's now go back to the virtual list and use the properties that we set.

[00:06:10]
So we're going to write the code in the handle bottom observer now, so first we need to fetch the data. Okay, so we're gonna use the properties that we set on our class and the property that I need is geth. So it's a function that will return the data, this function accepts the pointer and I know that we need to create a new pointer on the state.

[00:06:37]
So let's assume that there is end pointer that will give us the latest rendered page number, and let's evade this data because I know that it should trust the promise. So let's create the end pointer and the start pointer on state so we initialize it to zero.
>> Evgenii Ray: And then, so we increasing the pointer by one when we can do in the bottom up server, so the next time it executes it will be one, two, and three and so on.

[00:07:15]
Okay, now we need to convert the data to the HTML elements, so basically we're slightly repeating the exercise we did before, so let's create the fragment to accumulate all the.
>> Evgenii Ray: Now we're gonna look for the data
>> Evgenii Ray: And we're going to create a new cart
>> Evgenii Ray: And we are going to pass the data datum.title and datum.body.

[00:07:58]
>> Evgenii Ray: So there are the, there is a minor mistake, we need to utilize the properties that we set, so it's going to be the getTemplate function. So this template function accepts the datum, and since we're not reusing any element, so we're just generating the new cart. And then we just append the new card to the fragment, so we append the cart to the fragment.

[00:08:20]
And once the this is appended and we generated all the content, now we can get the reference to our list, so we already have the function for that. Get virtual list, and then we append the fragment to the list, list append fragment.
>> Evgenii Ray: So that's probably it, and now let's try to run our index.html to see if it works.

[00:08:55]
>> Evgenii Ray: I need to remove my word.
>> Evgenii Ray: It definitely works, It's getting, so we place it somewhere here and let's remove that one,
>> Evgenii Ray: And refresh the page. So now if we scroll down.
>> Evgenii Ray: We see that our new data is loaded, and this is the end of the current part.