@economic/taco 2.47.0-server.5 → 2.47.0-server.6

package/dist/taco.cjs.development.js

@@ -12689,16 +12689,14 @@ function Row(props) {
       var search = props.table.getState().globalFilter;
       var hiddenColumns = getHiddenColumns(props.table.getState().columnVisibility);
       var pageIndexesToFetch = [];
-      /*
-      // if there's no direction, it means the scroll bar got dropped un unloaded pages,
-      // in that case, load forward and backward pages to prevent skeletons
-      if (scrollDirection === 'backward' || !scrollDirection) {
-          const backIndex = pageIndex - 1;
-           if (backIndex > -1) {
-              pageIndexesToFetch.push(backIndex);
-          }
-      }
-      */
+      // if there's no direction, it means the scroll bar got dropped un unloaded pages,
+      // in that case, load forward and backward pages to prevent skeletons
+      if (scrollDirection === 'backward' || !scrollDirection) {
+        var backIndex = pageIndex - 1;
+        if (backIndex > -1) {
+          pageIndexesToFetch.push(backIndex);
+        }
+      }
       // always load the next page
       if ((scrollDirection === 'forward' || !scrollDirection) && pageIndex + 2 < tableMeta.server.pageCount) {
         pageIndexesToFetch.push(pageIndex + 1);
@@ -23133,76 +23131,68 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
       reset = false;
     }
     try {
+      // if a request is already pending for this page (and it's not a reset), skip it
       if (_pendingPageRequests.current[pageIndex] && !reset) {
         return Promise.resolve();
       }
       var hasChangedData = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || search !== _lastUsedSearch.current;
-      // set values so we can track if they changed between loads
-      _lastUsedSorting.current = sorting;
-      _lastUsedFilters.current = filters;
-      _lastUsedSearch.current = search;
-      _lastUsedHiddenColumns.current = hiddenColumns;
       // if the page is already loaded and has actual rows, abort
-      if (data.pages.includes(pageIndex) && !hasChangedData && !reset) {
-        var position = data.pages.indexOf(pageIndex);
-        if (data.rows[position * pageSize] !== undefined) {
-          return Promise.resolve();
-        }
+      if (data.cache[pageIndex] && data.cache[pageIndex][0] && !hasChangedData && !reset) {
+        return Promise.resolve();
       }
+      // create an id to track the update
+      var requestId = uuid.v4();
       // set the page as loading, so that subsequent requests don't retrigger it
       _pendingPageRequests.current[pageIndex] = true;
-      var direction = getDirection2(pageIndex, _lastFetchedPage.current);
-      var _temp2 = _finallyRethrows(function () {
-        return _catch(function () {
-          return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, search, hiddenColumns)).then(function (response) {
-            length.current = response.length;
-            // update state, here we do some "magic" to support "load in place"
-            setData(function (currentData) {
-              var nextPages = getPages(pageIndex, _lastFetchedPage.current, reset ? [] : currentData.pages, direction);
-              var nextRows = currentData.rows;
-              if (reset || !direction) {
-                var index = nextPages.indexOf(pageIndex);
-                var startIndex = (index > -1 ? index : 0) * pageSize;
-                if (reset) {
-                  nextRows = [].concat(response.data);
-                } else if (startIndex > 0 || pageIndex === 0) {
-                  nextRows = Array(startIndex).fill(undefined).concat(response.data);
-                } else if (startIndex === 0) {
-                  nextRows = response.data.concat(currentData.rows.slice(pageSize));
-                }
-              } else if (direction === 'forward') {
-                // if the new data will exceed the dataset size, then chop off the start or end
-                // this keeps the stored dataset to our preferred size
-                if (currentData.rows.length >= DATASET_SIZE) {
-                  nextRows = currentData.rows.slice(DEFAULT_PAGE_SIZE).concat(response.data);
-                } else {
-                  nextRows = currentData.rows.concat(response.data);
-                }
-              } else if (direction === 'backward') {
-                if (currentData.rows.length >= DATASET_SIZE) {
-                  nextRows = response.data.concat(currentData.rows.slice(0, -1 * pageSize));
-                } else {
-                  nextRows = currentData.rows.concat(response.data);
-                }
-              }
-              return {
-                rows: nextRows,
-                pages: nextPages
-              };
-            });
+      var _temp2 = _catch(function () {
+        _lastRequestId.current = requestId;
+        return Promise.resolve(fetchPage(pageIndex, pageSize, sorting, filters, search, hiddenColumns)).then(function (response) {
+          length.current = response.length;
+          // update state, here we do some "magic" to support "load in place"
+          setData(function (currentData) {
+            // if this request wasn't the last one, just return the current state to prevent weird updates
+            if (_lastRequestId.current !== requestId) {
+              return currentData;
+            }
+            var direction = getDirection(pageIndex, currentData.pages);
+            var nextPages = getPages(pageIndex, currentData.lastFetchedPage, reset ? [] : currentData.pages, direction);
+            // set values so we can track if they changed between loads
+            _lastUsedSorting.current = sorting;
+            _lastUsedFilters.current = filters;
+            _lastUsedSearch.current = search;
+            _lastUsedHiddenColumns.current = hiddenColumns;
+            // cache data as an object to prevent any duplicates for pages
+            var nextCache;
+            if (reset || hasChangedData || !direction) {
+              nextCache = nextPages.reduce(function (acc, p) {
+                var _extends2;
+                return _extends({}, acc, (_extends2 = {}, _extends2[p] = Array(pageSize).fill(undefined), _extends2));
+              }, {});
+            } else {
+              nextCache = _extends({}, currentData.cache);
+            }
+            nextCache[pageIndex] = response.data;
+            // cleanup "unloaded" pages
+            if (direction === 'forward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[0]];
+            } else if (direction === 'backward' && currentData.rows.length >= DATASET_SIZE) {
+              delete nextCache[currentData.pages[currentData.pages.length - 1]];
+            }
+            // remap rows from the cached data - do it here and not in render to save some performance
+            var rows = Object.values(nextCache).reduce(function (acc, p) {
+              return acc.concat(p);
+            }, []);
+            return {
+              cache: nextCache,
+              pages: nextPages,
+              rows: rows,
+              lastFetchedPage: pageIndex
+            };
           });
-        }, function () {});
-      }, function (_wasThrown2, _result2) {
-        // reset pending requests
-        delete _pendingPageRequests.current[pageIndex];
-        // update the last loaded page
-        _lastFetchedPage.current = {
-          index: pageIndex,
-          direction: direction
-        };
-        if (_wasThrown2) throw _result2;
-        return _result2;
-      });
+          // reset pending requests
+          delete _pendingPageRequests.current[pageIndex];
+        });
+      }, function () {});
       return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
@@ -23221,20 +23211,21 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
   // data will be filled after the first request
   var _React$useState = React__default.useState({
       rows: [],
-      pages: []
+      pages: [],
+      cache: {},
+      lastFetchedPage: undefined
     }),
     data = _React$useState[0],
     setData = _React$useState[1];
   // track which pages have been loaded to dedupe requests
   var _pendingPageRequests = React__default.useRef({});
+  // it's possible to spam updates, e.g. sort, so we don't set state if the last request wasn't the current oen
+  var _lastRequestId = React__default.useRef();
+  // store last used properties
   var _lastUsedSorting = React__default.useRef([]);
   var _lastUsedFilters = React__default.useRef([]);
   var _lastUsedSearch = React__default.useRef();
   var _lastUsedHiddenColumns = React__default.useRef([]);
-  var _lastFetchedPage = React__default.useRef({
-    index: undefined,
-    direction: undefined
-  });
   var loadAll = function loadAll(sorting, filters, search, hiddenColumns) {
     try {
       // set values so we can track if they changed between loads
@@ -23246,9 +23237,18 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
         return _catch(function () {
           return Promise.resolve(fetchAll(sorting, filters, search, hiddenColumns)).then(function (response) {
             length.current = response.length;
+            var pages = [];
+            var cache = {};
+            Array.from(Array(response.length / pageSize).keys()).forEach(function (index) {
+              pages.push(index);
+              var startIndex = index * pageSize;
+              cache[index] = response.data.slice(startIndex, startIndex + pageSize);
+            });
             setData({
+              cache: cache,
+              pages: pages,
               rows: response.data,
-              pages: Array.from(Array(response.length / pageSize).keys())
+              lastFetchedPage: undefined
             });
           });
         }, function () {});
@@ -23265,11 +23265,10 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
   };
   var invalidate = function invalidate() {
     try {
-      console.log('invalidate');
       // reset stuff
       _pendingPageRequests.current = {};
       // load the current page again
-      return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
+      return loadPage(getCurrentPage(data.pages), _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -23278,7 +23277,7 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
     try {
       // reset before loading the current page
       _pendingPageRequests.current = {};
-      return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), sorting, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
+      return loadPage(getCurrentPage(data.pages), sorting, _lastUsedFilters.current, _lastUsedSearch.current, _lastUsedHiddenColumns.current, true);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -23287,7 +23286,7 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
     try {
       // reset before loading the current page
       _pendingPageRequests.current = {};
-      return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, filters, _lastUsedSearch.current, hiddenColumns, true);
+      return loadPage(0, _lastUsedSorting.current, filters, _lastUsedSearch.current, hiddenColumns, true);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -23296,7 +23295,7 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
     try {
       // reset before loading the current page
       _pendingPageRequests.current = {};
-      return loadPage(getCurrentPage(data.pages, _lastFetchedPage.current), _lastUsedSorting.current, _lastUsedFilters.current, search, hiddenColumns, true);
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, search, hiddenColumns, true);
     } catch (e) {
       return Promise.reject(e);
     }
@@ -23314,37 +23313,27 @@ function useTableDataLoader2(fetchPage, fetchAll, options) {
     _experimentalDataLoader2: true
   }, invalidate];
 }
-function getCurrentPage(currentPages, lastFetchedPage) {
+function getCurrentPage(currentPages) {
   if (currentPages.length <= 2) {
-    var _currentPages$;
-    return (_currentPages$ = currentPages[0]) !== null && _currentPages$ !== void 0 ? _currentPages$ : 0;
-  }
-  var middle = Math.floor(DATASET_SIZE_MULTIPLIER / 2);
-  if (lastFetchedPage.index) {
-    if (!lastFetchedPage.direction) {
-      return lastFetchedPage.index;
-    }
-    return lastFetchedPage.direction === 'forward' ? lastFetchedPage.index + middle : lastFetchedPage.index - middle;
+    return currentPages[0];
   }
-  return 0;
+  // for even page lengths we can't know which is the current visible page - it could even be both
+  // so we load one of them and rely on the "load next/previous page" functionality in row
+  var middle = Math.floor(currentPages.length / 2);
+  return currentPages[middle];
 }
-function getDirection2(pageIndex, lastUsedPage) {
-  if (lastUsedPage.index === undefined) {
-    return undefined;
-  }
-  if (pageIndex > lastUsedPage.index) {
-    if (lastUsedPage.index + 1 === pageIndex || lastUsedPage.index + DATASET_SIZE_MULTIPLIER === pageIndex) {
+function getDirection(pageIndex, currentPages) {
+  if (currentPages.length) {
+    if (pageIndex === currentPages[currentPages.length - 1] + 1) {
       return 'forward';
-    }
-  } else if (pageIndex < lastUsedPage.index) {
-    if (lastUsedPage.index - 1 === pageIndex || lastUsedPage.index - DATASET_SIZE_MULTIPLIER === pageIndex) {
+    } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
       return 'backward';
     }
   }
   return undefined;
 }
-function getPages(pageIndex, lastUsedPage, currentPages, direction) {
-  if (currentPages.length && (pageIndex === lastUsedPage.index || currentPages.includes(pageIndex))) {
+function getPages(pageIndex, lastUsedPageIndex, currentPages, direction) {
+  if (currentPages.length && (pageIndex === lastUsedPageIndex || currentPages.includes(pageIndex))) {
     return currentPages;
   }
   if (direction === 'forward') {
@@ -23355,11 +23344,7 @@ function getPages(pageIndex, lastUsedPage, currentPages, direction) {
     var _nextPages = currentPages.length === DATASET_SIZE_MULTIPLIER ? currentPages.slice(0, -1) : currentPages;
     return [pageIndex].concat(_nextPages);
   }
-  if (pageIndex === 0) {
-    return [0];
-  }
-  // don't go forward, the current page will trigger load of the next page
-  return [pageIndex - 1, pageIndex];
+  return [pageIndex];
 }
 
 var useBoundaryOverflowDetection = function useBoundaryOverflowDetection(ref, dependencies) {