@lowentry/react-redux 1.9.2 → 1.10.1

package/index.js

@@ -399,7 +399,7 @@ var LeRed = function () {
                     case 0:
                       _context5.next = 2;
                       return ReduxSagaEffects.takeEvery(reducerAction, /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(action) {
-                        var promiseResolve, promiseReject, promise, result;
+                        var promiseResolve, promiseReject, _promise, result;
                         return _regeneratorRuntime.wrap(function _callee4$(_context4) {
                           while (1) switch (_context4.prev = _context4.next) {
                             case 0:
@@ -407,16 +407,16 @@ var LeRed = function () {
                               promiseReject = null;
                               _context4.prev = 2;
                               if (action.__lowentry_dispatch__ === true) {
-                                promise = new Promise(function (resolve, reject) {
+                                _promise = new Promise(function (resolve, reject) {
                                   promiseResolve = resolve;
                                   promiseReject = reject;
                                 });
                                 if (Array.isArray(action.__lowentry_dispatch_result__)) {
-                                  if (typeof promise !== 'undefined') {
-                                    action.__lowentry_dispatch_result__.push(promise);
+                                  if (typeof _promise !== 'undefined') {
+                                    action.__lowentry_dispatch_result__.push(_promise);
                                   }
                                 } else {
-                                  action.__lowentry_dispatch_result__ = promise;
+                                  action.__lowentry_dispatch_result__ = _promise;
                                 }
                               }
                               _context4.next = 6;
@@ -618,7 +618,7 @@ var LeRed = function () {
     return LeRed.useEffect(function () {
       var stop = false;
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-        var _iterator, _step, promise;
+        var _iterator, _step, _promise2;
         return _regeneratorRuntime.wrap(function _callee5$(_context6) {
           while (1) switch (_context6.prev = _context6.next) {
             case 0:
@@ -630,7 +630,7 @@ var LeRed = function () {
                 _context6.next = 13;
                 break;
               }
-              promise = _step.value;
+              _promise2 = _step.value;
               if (!stop) {
                 _context6.next = 7;
                 break;
@@ -638,7 +638,7 @@ var LeRed = function () {
               return _context6.abrupt("return");
             case 7:
               _context6.next = 9;
-              return promise;
+              return _promise2;
             case 9:
               if (!stop) {
                 _context6.next = 11;
@@ -674,7 +674,7 @@ var LeRed = function () {
     return LeRed.useEffect(function () {
       var stop = false;
       _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-        var _iterator2, _step2, promise;
+        var _iterator2, _step2, _promise3;
         return _regeneratorRuntime.wrap(function _callee6$(_context7) {
           while (1) switch (_context7.prev = _context7.next) {
             case 0:
@@ -690,7 +690,7 @@ var LeRed = function () {
                 _context7.next = 14;
                 break;
               }
-              promise = _step2.value;
+              _promise3 = _step2.value;
               if (!stop) {
                 _context7.next = 8;
                 break;
@@ -698,7 +698,7 @@ var LeRed = function () {
               return _context7.abrupt("return");
             case 8:
               _context7.next = 10;
-              return promise;
+              return _promise3;
             case 10:
               if (!stop) {
                 _context7.next = 12;
@@ -1100,7 +1100,7 @@ var LeRed = function () {
           setImageUrl(url + (urlHasQ ? '&' : '?') + ((options === null || options === void 0 ? void 0 : options.queryParam) || 'lowentryretryingimgversion') + '=' + retries.current++);
         }, typeof (options === null || options === void 0 ? void 0 : options.delay) === 'function' ? INT_LAX_ANY(options === null || options === void 0 ? void 0 : options.delay(retries.current), defaultDelay) : INT_LAX_ANY(options === null || options === void 0 ? void 0 : options.delay, defaultDelay));
       }
-    }, [url]);
+    }, [url, options]);
     var onImageLoadErrorIgnored = LeRed.useCallback(function () {}, []);
     if (!url) {
       return [url, onImageLoadErrorIgnored];
@@ -1109,13 +1109,17 @@ var LeRed = function () {
   };
 
   /**
-   * Allows you to easily obtain external data.
+   * Allows you to easily convert promises to react hooks.
+   *
+   * The given callable should return promises. The returned promises can be an array, an object, or even a single promise. The returned data of this hook will match the promises it has operated on.
+   *
+   * The given comparingValues can be anything, this is used to detect whether the given promises have changed or not, and so whether new promises have to be generated and executed again.
    */
-  LeRed.useExternal = function (url, options, hardcodedResponseFunction) {
-    var paramsRef = LeRed.useRef({
-      url: url,
-      options: options
-    });
+  LeRed.usePromises = function (callable, comparingValues) {
+    var comparingValuesClone = LeUtils.clone(comparingValues);
+    var comparingValuesRef = LeRed.useRef(comparingValuesClone);
+    var latestComparingValuesRef = LeRed.useRef();
+    latestComparingValuesRef.current = comparingValuesClone;
     var _LeRed$useState11 = LeRed.useState(null),
       _LeRed$useState12 = _slicedToArray(_LeRed$useState11, 2),
       data = _LeRed$useState12[0],
@@ -1132,158 +1136,228 @@ var LeRed = function () {
       setLoading(true);
       setData(null);
       setError(null);
-      var urlStrings = [];
-      if (IS_OBJECT(url) || IS_ARRAY(url)) {
-        LeUtils.each(url, function (urlString, key) {
-          urlStrings.push({
-            urlString: STRING(urlString),
-            key: key
+      try {
+        var promises = callable();
+        var promisesKeyed = [];
+        if (IS_OBJECT(promises) || IS_ARRAY(promises)) {
+          LeUtils.each(promises, function (urlString, key) {
+            promisesKeyed.push({
+              promise: promise,
+              key: key
+            });
           });
+        } else {
+          promisesKeyed.push({
+            promises: promises,
+            key: undefined
+          });
+        }
+        var wrappedPromises = [];
+        LeUtils.each(promisesKeyed, function (_ref3) {
+          var promise = _ref3.promise,
+            key = _ref3.key;
+          wrappedPromises.push(promise.then( /*#__PURE__*/function () {
+            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(result) {
+              return _regeneratorRuntime.wrap(function _callee7$(_context8) {
+                while (1) switch (_context8.prev = _context8.next) {
+                  case 0:
+                    return _context8.abrupt("return", {
+                      result: result,
+                      key: key
+                    });
+                  case 1:
+                  case "end":
+                    return _context8.stop();
+                }
+              }, _callee7);
+            }));
+            return function (_x) {
+              return _ref4.apply(this, arguments);
+            };
+          }()));
         });
-      } else {
-        urlStrings.push({
-          urlString: STRING(url),
-          key: undefined
+        Promise.all(wrappedPromises).then(function (resultObjects) {
+          var _resultObjects$pop;
+          if (IS_OBJECT(promises)) {
+            var results = {};
+            LeUtils.each(resultObjects, function (_ref5) {
+              var result = _ref5.result,
+                key = _ref5.key;
+              results[key] = result;
+            });
+            return results;
+          } else if (IS_ARRAY(promises)) {
+            var _results = [];
+            LeUtils.each(resultObjects, function (_ref6) {
+              var result = _ref6.result,
+                key = _ref6.key;
+              _results[key] = result;
+            });
+            return _results;
+          }
+          return (_resultObjects$pop = resultObjects.pop()) === null || _resultObjects$pop === void 0 ? void 0 : _resultObjects$pop.result;
+        }).then(function (results) {
+          if (!LeUtils.equals(latestComparingValuesRef.current, comparingValuesClone)) {
+            // canceled
+            return;
+          }
+          comparingValuesRef.current = comparingValuesClone;
+          setLoading(false);
+          setData(results);
+          setError(null);
+        })["catch"](function (error) {
+          if (!LeUtils.equals(latestComparingValuesRef.current, comparingValuesClone)) {
+            // canceled
+            return;
+          }
+          comparingValuesRef.current = comparingValuesClone;
+          setLoading(false);
+          setData(null);
+          setError(LeUtils.purgeErrorMessage(error));
+        });
+        return function () {
+          LeUtils.each(wrappedPromises, function (promise) {
+            try {
+              var _promise$cancel;
+              promise === null || promise === void 0 || (_promise$cancel = promise.cancel) === null || _promise$cancel === void 0 || _promise$cancel.call(promise);
+            } catch (e) {
+              console.error('Failed to cancel the given promise:', e);
+            }
+            try {
+              var _promise$remove;
+              promise === null || promise === void 0 || (_promise$remove = promise.remove) === null || _promise$remove === void 0 || _promise$remove.call(promise);
+            } catch (e) {
+              console.error('Failed to remove the given promise:', e);
+            }
+          });
+        };
+      } catch (error) {
+        LeUtils.setAnimationFrameTimeout(function () {
+          if (!LeUtils.equals(latestComparingValuesRef.current, comparingValuesClone)) {
+            // canceled
+            return;
+          }
+          comparingValuesRef.current = comparingValuesClone;
+          setLoading(false);
+          setData(null);
+          setError(LeUtils.purgeErrorMessage(error));
         });
       }
-      var fetches = [];
-      LeUtils.each(urlStrings, function (_ref3) {
-        var urlString = _ref3.urlString,
-          key = _ref3.key;
-        fetches.push(LeUtils.fetch(urlString, _objectSpread({
+    }, [comparingValuesClone]);
+    if (!LeUtils.equals(comparingValuesRef.current, comparingValuesClone)) {
+      return [null, true, null];
+    }
+    return [data, loading, error];
+  };
+
+  /**
+   * Allows you to easily obtain external data.
+   */
+  LeRed.useExternal = function (url, options, responseFunction) {
+    return LeRed.usePromises(function () {
+      var createFetch = function createFetch(urlString) {
+        return LeUtils.fetch(STRING(urlString), _objectSpread({
           retries: 3
         }, options !== null && options !== void 0 ? options : {})).then( /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(response) {
+          var _ref7 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8(response) {
             var data;
-            return _regeneratorRuntime.wrap(function _callee7$(_context8) {
-              while (1) switch (_context8.prev = _context8.next) {
+            return _regeneratorRuntime.wrap(function _callee8$(_context9) {
+              while (1) switch (_context9.prev = _context9.next) {
                 case 0:
-                  _context8.next = 2;
-                  return hardcodedResponseFunction(response);
+                  _context9.next = 2;
+                  return responseFunction(response);
                 case 2:
-                  data = _context8.sent;
+                  data = _context9.sent;
                   if (!(typeof (options === null || options === void 0 ? void 0 : options.verify) === 'function')) {
-                    _context8.next = 6;
+                    _context9.next = 6;
                     break;
                   }
-                  _context8.next = 6;
+                  _context9.next = 6;
                   return options.verify(data, response);
                 case 6:
-                  return _context8.abrupt("return", {
-                    data: data,
-                    key: key
-                  });
+                  return _context9.abrupt("return", data);
                 case 7:
                 case "end":
-                  return _context8.stop();
+                  return _context9.stop();
               }
-            }, _callee7);
+            }, _callee8);
           }));
-          return function (_x) {
-            return _ref4.apply(this, arguments);
+          return function (_x2) {
+            return _ref7.apply(this, arguments);
           };
-        }()));
-      });
-      Promise.all(fetches).then(function (values) {
-        var _values$pop;
-        if (IS_OBJECT(url)) {
-          var result = {};
-          LeUtils.each(values, function (_ref5) {
-            var data = _ref5.data,
-              key = _ref5.key;
-            result[key] = data;
-          });
-          return result;
-        } else if (IS_ARRAY(url)) {
-          var _result = [];
-          LeUtils.each(values, function (_ref6) {
-            var data = _ref6.data,
-              key = _ref6.key;
-            _result[key] = data;
-          });
-          return _result;
-        }
-        return (_values$pop = values.pop()) === null || _values$pop === void 0 ? void 0 : _values$pop.data;
-      }).then(function (data) {
-        paramsRef.current = {
-          url: url,
-          options: options
-        };
-        setLoading(false);
-        setData(data);
-        setError(null);
-      })["catch"](function (error) {
-        paramsRef.current = {
-          url: url,
-          options: options
-        };
-        setLoading(false);
-        setData(null);
-        setError(LeUtils.purgeErrorMessage(error));
-      });
-      return function () {
-        LeUtils.each(fetches, function (fetch) {
-          fetch.remove();
-        });
+        }());
       };
-    }, [url, options]);
-    if (!LeUtils.equals(paramsRef.current, {
-      url: url,
-      options: options
-    })) {
-      return [null, true, null];
-    }
-    return [data, loading, error];
+      if (IS_OBJECT(url)) {
+        var promises = {};
+        LeUtils.each(url, function (urlString, key) {
+          promises[key] = createFetch(urlString);
+        });
+        return promises;
+      }
+      if (IS_ARRAY(url)) {
+        var _promises = [];
+        LeUtils.each(url, function (urlString) {
+          _promises.push(createFetch(urlString));
+        });
+        return _promises;
+      }
+      return createFetch(url);
+    }, [url, options, responseFunction]);
   };
 
   /**
    * Allows you to easily obtain external JSON data.
    */
   LeRed.useExternalJson = function (url, options) {
-    return LeRed.useExternal(url, options, function (response) {
+    var responseFunction = LeRed.useCallback(function (response) {
       return response.json();
-    });
+    }, []);
+    return LeRed.useExternal(url, options, responseFunction);
   };
 
   /**
    * Allows you to easily obtain external Blob data.
    */
   LeRed.useExternalBlob = function (url, options) {
-    return LeRed.useExternal(url, options, function (response) {
+    var responseFunction = LeRed.useCallback(function (response) {
       return response.blob();
-    });
+    }, []);
+    return LeRed.useExternal(url, options, responseFunction);
   };
 
   /**
    * Allows you to easily obtain external ArrayBuffer data.
    */
   LeRed.useExternalArrayBuffer = function (url, options) {
-    return LeRed.useExternal(url, options, function (response) {
+    var responseFunction = LeRed.useCallback(function (response) {
       return response.arrayBuffer();
-    });
+    }, []);
+    return LeRed.useExternal(url, options, responseFunction);
   };
 
   /**
    * Allows you to easily obtain external string data.
    */
   LeRed.useExternalString = function (url, options) {
-    return LeRed.useExternal(url, options, function (response) {
+    var responseFunction = LeRed.useCallback(function (response) {
       return response.text();
-    });
+    }, []);
+    return LeRed.useExternal(url, options, responseFunction);
   };
 
   /**
    * Allows you to easily obtain external form data.
    */
   LeRed.useExternalFormData = function (url, options) {
-    return LeRed.useExternal(url, options, function (response) {
+    var responseFunction = LeRed.useCallback(function (response) {
       return response.formData();
-    });
+    }, []);
+    return LeRed.useExternal(url, options, responseFunction);
   };
-  LeRed.Root = LeRed.memo(function (_ref7) {
-    var store = _ref7.store,
-      children = _ref7.children,
-      other = _objectWithoutProperties(_ref7, _excluded);
+  LeRed.Root = LeRed.memo(function (_ref8) {
+    var store = _ref8.store,
+      children = _ref8.children,
+      other = _objectWithoutProperties(_ref8, _excluded);
     if (ISSET(store)) {
       store = LeRed.configureStore(store);
       return /*#__PURE__*/React.createElement(ReactRedux.Provider, _extends({
@@ -1294,57 +1368,57 @@ var LeRed = function () {
   });
   LeRed.PreloadComponent = function (load) {
     if (typeof window !== 'undefined') {
-      var promise = load(); // start loading already, before it's being rendered in React
+      var _promise4 = load(); // start loading already, before it's being rendered in React
       return function () {
-        return promise;
+        return _promise4;
       };
     }
     return load;
   };
-  LeRed.LoadComponent = LeRed.memo(function (_ref8) {
-    var loading = _ref8.loading,
-      load = _ref8.load,
-      other = _objectWithoutProperties(_ref8, _excluded2);
+  LeRed.LoadComponent = LeRed.memo(function (_ref9) {
+    var loading = _ref9.loading,
+      load = _ref9.load,
+      other = _objectWithoutProperties(_ref9, _excluded2);
     var _LeRed$useState17 = LeRed.useState(loading !== null && loading !== void 0 ? loading : null),
       _LeRed$useState18 = _slicedToArray(_LeRed$useState17, 2),
       Component = _LeRed$useState18[0],
       setComponent = _LeRed$useState18[1];
     LeRed.useEffect(function () {
-      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
         var LoadedComponent;
-        return _regeneratorRuntime.wrap(function _callee8$(_context9) {
-          while (1) switch (_context9.prev = _context9.next) {
+        return _regeneratorRuntime.wrap(function _callee9$(_context10) {
+          while (1) switch (_context10.prev = _context10.next) {
             case 0:
               if (!(typeof load === 'function')) {
-                _context9.next = 6;
+                _context10.next = 6;
                 break;
               }
-              _context9.next = 3;
+              _context10.next = 3;
               return load();
             case 3:
-              _context9.t0 = _context9.sent;
-              _context9.next = 9;
+              _context10.t0 = _context10.sent;
+              _context10.next = 9;
               break;
             case 6:
-              _context9.next = 8;
+              _context10.next = 8;
               return load;
             case 8:
-              _context9.t0 = _context9.sent;
+              _context10.t0 = _context10.sent;
             case 9:
-              LoadedComponent = _context9.t0;
+              LoadedComponent = _context10.t0;
               if (LoadedComponent) {
-                _context9.next = 13;
+                _context10.next = 13;
                 break;
               }
               setComponent(null);
-              return _context9.abrupt("return");
+              return _context10.abrupt("return");
             case 13:
               setComponent( /*#__PURE__*/React.createElement(LoadedComponent, other));
             case 14:
             case "end":
-              return _context9.stop();
+              return _context10.stop();
           }
-        }, _callee8);
+        }, _callee9);
       }))();
     }, []);
     return Component;