Repository

https://github.com/igormuba/Steem-Feed-Example-/tree/FeedPages

What Will I Learn?

Use start_author and start_permlink paramethers
Work with arrays to scroll to the next feed page

Requirements

Internet connection
Code editor
Browser
Reading the previous classes is recommended but not necessary

Difficulty

Intermediate

Tutorial Contents

Previously we have learned how to find your own Steem feed (yes, it is visible by anyone!) using the Steem JS library, but it has no use if we can't scroll to other posts, we will then create a reactive interface (means there is no need to reload the page!) to scroll through your feed.

Next page button

This is step is simple and we have done similar reactive functions in the past, users hate reloading the page.

Create a button input and assign a function to it

<input type="button" value="Next Page" onclick="nextPage()">

Simple enough, but the button still obviously does not do anything, so let us define the function nextPage() we have assigned to it

The get feed function

In the last tutorial we have used the steem.api.getDiscussionsByFeed(query, function (err, result) by just calling it, but we want to be able to reuse it, so, follow me and assign it into a function and call it right after, functionally so far nothing will change, but by creating a function for it we can reuse it without having to type it again later.

function getTheFeed(){
//The old code tog et the feed goes here
}

Making the posts array

It is important that we have an array of the posts we are displaying so we keep track of the last one, because the last one is where we will get the info on where to start scrolling

So, create a variable outside everything

let posts;
//create an empty variable

And inside the function that gets the posts, we assign them to this variable

posts=result;
// attach the result array to it

So it should look like this

Ok, so far, again, not much has changed.

Now is when we will indeed make the freed scroll.

A new Query is necessary

After an empty function nextPage() is defined, we need to change the query, remember, so far the query looks like

let query = {
    tag: 'igormuba',
    limit: 3
}
// tag is the user whose feed we will get
//limit is how many posts we will get

But like this all it does is get the last 3 posts from your timeline, it won't scroll no matter what you do haha

So, inside the function nexPage we must reformat our query to include the paramethers start_permlink and start_author. The first one is the link of the last post, the one that will be the first on the "new page", the last is the author, together they help the API find where we left off

query = {
        tag: 'igormuba',
        limit: 3,
        start_author: posts[2].author,
        start_permlink: posts[2].permlink
    }
// start_author is whose posts is the last one
// start_permlink is the link to the last post (redundant with author)

Calling the next page

Now, inside the nextPage after we have reformatted the query, we simply call the getTheFeed(); and it should work

The results

Let us test if it works

This are the last 2 posts from the feed we have made

And this are the first 4 from my steemit feed

If I click "next page" on our feed, this are the first 2 posts

You can see, it works, it starts from the last post

One more thing

Yes, I have noticed, it is not cool to start from the last post, we see the same post 2 times, but there is a very simple trick we can use so we never repeat a post while scrolling through the feed.

This are the changes you need to make in order for the next page to start on the next post without repeating:

Change both queries, the definition and the change, to limit: 4, so it fetches 4 posts instead of just 3.

Inside the getTheFeed() change the for loop to for (let i=0; i<3; i++) instead of for (let i=0; results.length; i++)

This will make only 3 posts appear, we could not change the for loop but it would give us ugly errors on the console, so why not do a simple change to avoid ugly errors, right?

Now on the nextPage function you need to change the start_author and start_permlink to

start_author: posts[3].author, //start from the 4th author
start_permlink: posts[3].permlink // the 4th link

After all this changes you try by yourself, you will start from the next post and not repeat. Simple changes, big results.

Curriculum

Proof of Work Done