fix(bodyValue): adjust bodyValue func for case where we reset pagin…

…ation

When we are purposely reseting pagination, we have `pageInfo.page === 1`. More subtly, we need to account for when the `previous` body is actually the call `pageInfo.page === 2`, in that case, we shouldn't reset the entire body, but continue through the code path to return the `current` body before the previous body.

Also, let's remove all functions (`concat`, `splice`) that mutate the passed in body, as this may mutate state,

app/utils/bodyValue.ts

@@ -17,6 +17,7 @@ export default function bodyValue (prev: Object | any[] | undefined, curr: Objec
       // shim to insert a unique index as the first item in each Array (row)
       // useful for a react element key to keep track of rendered rows while we paginate
       const { page, pageSize } = pageInfo
+
       curr.forEach((d, i) => {
         const index = ((page - 1) * pageSize) + i
         d.unshift(index)
@@ -25,24 +26,33 @@ export default function bodyValue (prev: Object | any[] | undefined, curr: Objec
       if (prev.length !== 0) {
         const currLastIndex = curr[curr.length - 1][0]
         const prevLastIndex = prev[prev.length - 1][0] || 0
+        const prevFirstIndex = prev[0][0]
+
+        // if the prevFirstIndex equals page size, and page is equal to 1, then
+        // we have scrolled up from fetching the second page. We should therefore
+        // keep the previous page
+        // however, if page is 1 and the prevFirstIndex is not equal to pageSize,
+        // (meaning the previous call was not to the second page, so we most
+        // likely reset the pagination) we should return just the current body
+        if (page === 1 && prevFirstIndex !== pageSize) {
+          return curr
+        }
 
         // user scrolled up and got an earlier page
         if (currLastIndex < prevLastIndex) {
-          prev.splice(pageSize, pageSize)
-
-          return curr.concat(prev)
+          return [...curr, ...prev.slice(0, pageSize)]
         }
       }
 
       // check length of prev, remove 1 pageSize of rows from the beginning if greater than 2 pageSizes
       if (prev.length === (pageSize * 2)) {
-        prev.splice(0, pageSize)
+        return [...prev.slice(pageSize, pageSize * 2), ...curr]
       }
 
-      return prev.concat(curr)
+      return [...prev, ...curr]
     }
 
-    return prev.concat(curr)
+    return [...prev, ...curr]
   }
   // work through cases where the current body value is an object (but not an array)
   if (typeof curr === 'object') {

test/app/utils/bodyValue.test.ts

@@ -0,0 +1,83 @@
+import bodyValue from '../../../app/utils/bodyValue'
+
+describe('bodyValue', () => {
+  const prevArr = [[0,1,2],[3,4,5]]
+  const currArr = [['a','b','c'],['d','e','f']]
+  const concatArr = [[0,1,2],[3,4,5],['a','b','c'],['d','e','f']]
+  const initPageInfo = {
+    isFetching: false,
+    page: 1,
+    pageSize: 2,
+    fetchedAll: false
+  }
+  const pageInfo2 = {
+    isFetching: false,
+    page: 2,
+    pageSize: 2,
+    fetchedAll: false
+  }
+  const pageInfo3 = {
+    isFetching: false,
+    page: 3,
+    pageSize: 2,
+    fetchedAll: false
+  }
+  const arrayCases = [
+    {
+      describe: 'all empty',
+      prev: [],
+      curr: [],
+      pageInfo: pageInfo2,
+      expected: []
+    },
+    {
+      describe: 'prev is empty',
+      prev: [],
+      curr: [['a','b','c'],['d','e','f']],
+      pageInfo: initPageInfo,
+      expected: [[0, 'a','b','c'],[1, 'd','e','f']]
+    },
+    {
+      describe: 'curr is empty',
+      prev: [['a','b','c'],['d','e','f']],
+      curr: [],
+      pageInfo: initPageInfo,
+      expected: [['a','b','c'],['d','e','f']],
+    },
+    {
+      describe: 'prev and curr exist, page 2',
+      prev: [[0, 'a','b','c'],[1, 'd','e','f']],
+      curr: [['g','h','i'],['j','k','l']],
+      pageInfo: pageInfo2,
+      expected: [[0, 'a','b','c'],[1, 'd','e','f'],[2, 'g','h','i'],[3, 'j','k','l']],
+    },
+    {
+      describe: 'prev has double pageSize, page 3',
+      prev: [[0, 'a','b','c'],[1, 'd','e','f'],[2, 'g','h','i'],[3, 'j','k','l']],
+      curr: [['m','n','o'],['p','q','r']],
+      pageInfo: pageInfo3,
+      expected: [[2, 'g','h','i'],[3, 'j','k','l'],[4, 'm','n','o'],[5, 'p','q','r']],
+    },
+    {
+      describe: 'prev and curr exist, init: page 1',
+      prev: [[0, 'a','b','c'],[1, 'd','e','f']],
+      curr: [['g','h','i'],['j','k','l']],
+      pageInfo: initPageInfo,
+      expected: [[0, 'g','h','i'],[1, 'j','k','l']]
+    },
+    {
+      describe: 'prev is actually page 2, curr is page 1, init: page 1',
+      prev: [[2, 'g','h','i'],[3, 'j','k','l']],
+      curr: [['a','b','c'],['d','e','f']],
+      pageInfo: initPageInfo,
+      expected: [[0, 'a','b','c'],[1, 'd','e','f'],[2, 'g','h','i'],[3, 'j','k','l']]
+    }
+  ]
+
+  arrayCases.forEach(({describe, prev, curr, pageInfo, expected}) => {
+    it (`case '${describe}'`, () => {
+      const got = bodyValue(prev, curr, pageInfo)
+      expect(got).toStrictEqual(expected)
+    })
+  })
+})