[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.