Guard against fetching before the first page

akivajgordon · May 31, 2018 · 92b6286 · 92b6286
1 parent a6b9a73
commit 92b6286
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/cypress/integration/app.cypress.test.js b/cypress/integration/app.cypress.test.js
@@ -2,9 +2,17 @@
 /* global cy */
 
 describe('app', () => {
-  it('starts displaying text from בראשית', () => {
+  beforeEach(() => {
     cy.visit('http://localhost:8000')
+  })
 
+  it('starts displaying text from בראשית', () => {
     cy.contains('בְּרֵאשִׁ֖ית בָּרָ֣א אֱלֹהִ֑ים אֵ֥ת הַשָּׁמַ֖יִם וְאֵ֥ת הָאָֽרֶץ׃')
   })
+
+  it('loads in the next page when scrolling down', () => {
+    cy.get('#js-app').scrollTo(0, 1000)
+
+    cy.contains('וְאֵ֛ת כָּל־רֶ֥מֶשׂ הָֽאֲדָמָ֖ה לְמִינֵ֑הוּ וַיַּ֥רְא אֱלֹהִ֖ים כִּי־טֽוֹב׃')
+  })
 })
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/index.js b/index.js
@@ -39,11 +39,15 @@ const insertAfter = (parent, child) => {
   parent.insertAdjacentElement('beforeend', child)
 }
 
-const fetchPage = (n) => window.fetch(`/build/pages/${n}.json`)
-  .then((res) => res.json())
-  .then((page) => Page(page, true))
+const fetchPage = (n) => {
+  if (n <= 0) return Promise.resolve()
 
-const iterator = IntegerIterator.new({ startingAt: 223 })
+  return window.fetch(`/build/pages/${n}.json`)
+    .then((res) => res.json())
+    .then((page) => Page(page, true))
+}
+
+const iterator = IntegerIterator.new({ startingAt: 1 })
 
 document.addEventListener('DOMContentLoaded', () => {
   InfiniteScroller

diff --git a/src/infinite-scroller.js b/src/infinite-scroller.js
@@ -19,16 +19,18 @@ const InfiniteScroller = {
 
       const hiddenBelowHeight = scrollView.scrollHeight - (scrollView.clientHeight + scrollView.scrollTop)
 
-      if (hiddenAboveHeight < 3 * height) {
+      if (hiddenAboveHeight < 0.5 * height) {
         oneAtATime(() => fetchPreviousContent.fetch())
           .then((content) => {
+            if (!content) return
+
             const belowHeight = scrollView.scrollHeight - scrollView.scrollTop
 
-            if (content) fetchPreviousContent.render(container, content)
+            fetchPreviousContent.render(container, content)
 
             scrollView.scrollTop = scrollView.scrollHeight - belowHeight
           })
-      } else if (hiddenBelowHeight < height) {
+      } else if (hiddenBelowHeight < 0.5 * height) {
         oneAtATime(() => fetchNextContent.fetch())
           .then((content) => {
             if (content) fetchNextContent.render(container, content)