259 homepage infinite scrolling v2

[jerohero]

closes #259

What is it supposed to do
Fixes the issue from the previous infinite scrolling PR ( #275 ) where the previous post blocks wouldn't fill when loading more posts.

Current state:

New state:

How can we test your branch
Try adding/removing posts and scroll down (home page) to see if post blocks get filled properly, and if there is no unwanted behavior like posts disappearing.

Additional notes
Since posts get fetched in pages of 6 posts, the pages won't end 'cleanly' on a fetch when one page doesn't give 6 posts (they will only get filled at the next fetch, when the user scrolls down): If this is undesired I could fix this by simply fetching again when the fetch results don't contain 6 posts, so the user doesn't get to see it as much. I could also increase the page length to get the same result (which will most likely be done in the future anyway as fetching once every 6 posts can be expensive). Note that this only occurs once the end of the homepage is reached, which I assume won't happen often in production.

1. General checklist

• [x] a. Tested happy flow.
• [x] b. Tested unhappy flow.
• [x] c. No unexpected exceptions.
• [x] d. No code with high complexity. (Big O)
• [x] e. EOF newline.
• [x] f. No linter warnings or errors.

2. If relevant, front-end checklist

• [x] a. Responsive. (Desktop all the way to mobile 320px)
• [x] b. Using SCSS variables where relevant.
• [x] c. Relevant class names
• [x] d. No modified global SCSS properties, except if necessary and fully tested the impact.
• [x] e. Checked caniuse for more modern CSS properties.

3. If relevant, back-end checklist

• [ ] a. No unhandled promise rejections.
• [ ] b. Seeders still functional.
• [ ] c. No primary-key violations.
• [ ] d. Normalization, at least 3NF.
• [ ] e. Used guards (middleware) where necessary and tested if route is guarded.

4. If relevant, test these browsers

• [x] a. Chrome
• [x] b. Firefox
• [ ] c. Opera
• [x] d. Edge
• [ ] e. Safari

[jerohero]

Pagination doesn't seem to work well when changing on back-end to 13 per page.

Check rest of comments too.

Fixed it with the following code in renderNewPostsAtLastPostsBlock():

const amountOfPostBlocks = Math.ceil(posts.length / this.MAX_POSTS_IN_BLOCK)

for (let i = 0; i < amountOfPostBlocks; i++) {
  const postsInPostsBlock = posts.slice(
    this.MAX_POSTS_IN_BLOCK * i,
    this.MAX_POSTS_IN_BLOCK * (i + 1)
  )

  postsBlocks.push(this.createPostsBlock(postsInPostsBlock))
}

_MAX_POSTS_INBLOCK will still always be 6 since that's how they're shown in the post blocks, but the logic behind deciding whether the end of the posts has been reached (in fetchPosts()) has been changed to:

if (json.posts.length < json.per_page) {
  this.setEndReached(true)
}

This makes it dynamic; the posts amount per page from the API is used.

One thing I did notice while testing this is that it doesn't work when the posts per page amount is 1. I don't think we'll ever want to set it to that amount, but it might be worth mentioning anyway.

[jerohero]

Tests succeed

[jerohero]

@AjobK I made the changes we discussed last week (fix thumbnails and scroll end reached detection). I fixed an issue that suddenly made scrolling not function at all, so I am not entirely sure this is what you meant.

[MrGooss]

Issue with page infinitely reloading when there aren't enough posts to fill the page. Could be fixed by checking the total count of posts en seeing if loading new posts is necessary or not.