Release v1.3.0

.eslintrc.json

@@ -24,7 +24,7 @@
   "settings": {
     "react": {
       "pragma": "React",
-      "version": "^16.7.0"
+      "version": "^17.0.0"
     }
   }
 }

CHANGELOG.md

@@ -10,6 +10,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 ### Fixed
 ### Removed
 
+## [1.3.0] - 2020-10-31
+
+### Added
+- feat(hocs): Wrap Components displayNames in HOCs
+
+### Changed
+- chore(deps): Update dependencies
+
+### Fixed
+- fix(usePolling): Do not modify original intervals array when check sorting
+
 ## [1.2.0] - 2020-06-21
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-provider/react",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "React bindings for @data-provider",
   "keywords": [
     "data-provider",
@@ -46,38 +46,38 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.10.3",
-    "@babel/preset-env": "7.10.3",
-    "@babel/preset-react": "7.10.1",
-    "@data-provider/core": "2.5.2",
-    "@rollup/plugin-babel": "5.0.3",
-    "@rollup/plugin-commonjs": "13.0.0",
+    "@babel/core": "7.12.3",
+    "@babel/preset-env": "7.12.1",
+    "@babel/preset-react": "7.12.1",
+    "@data-provider/core": "2.6.1",
+    "@rollup/plugin-babel": "5.2.1",
+    "@rollup/plugin-commonjs": "16.0.0",
     "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "8.0.1",
-    "@testing-library/jest-dom": "5.10.1",
-    "@testing-library/react": "10.3.0",
+    "@rollup/plugin-node-resolve": "10.0.0",
+    "@testing-library/jest-dom": "5.11.5",
+    "@testing-library/react": "11.1.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
-    "babel-jest": "26.0.1",
+    "babel-jest": "26.6.1",
     "babel-polyfill": "6.26.0",
     "coveralls": "3.0.9",
-    "eslint": "7.3.0",
-    "eslint-config-prettier": "6.11.0",
+    "eslint": "7.12.1",
+    "eslint-config-prettier": "6.15.0",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.0",
-    "eslint-plugin-react-hooks": "4.0.4",
-    "husky": "4.2.5",
-    "jest": "26.0.1",
-    "lint-staged": "10.2.11",
-    "prettier": "2.0.5",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-redux": "7.2.0",
-    "react-test-renderer": "16.13.1",
+    "eslint-plugin-react": "7.21.5",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "husky": "4.3.0",
+    "jest": "26.6.1",
+    "lint-staged": "10.5.0",
+    "prettier": "2.1.2",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "react-redux": "7.2.2",
+    "react-test-renderer": "17.0.1",
     "redux": "4.0.5",
-    "rollup": "2.17.1",
-    "rollup-plugin-terser": "6.1.0",
-    "sinon": "9.0.2"
+    "rollup": "2.32.1",
+    "rollup-plugin-terser": "7.0.2",
+    "sinon": "9.2.1"
   },
   "lint-staged": {
     "*.js": "eslint --resolve-plugins-relative-to=.",
@@ -92,6 +92,6 @@
     }
   },
   "engines": {
-    "node": "12.x || 14.x"
+    "node": "12.x || 14.x || 15.x"
   }
 }

rollup.config.js

@@ -25,6 +25,7 @@ const BASE_PLUGINS = [
   }),
   json(),
   babel({
+    babelHelpers: "bundled",
     babelrc: false,
     presets: ["@babel/env"],
   }),

sonar-project.properties

@@ -1,6 +1,6 @@
 sonar.organization=data-provider
 sonar.projectKey=data-provider-react
-sonar.projectVersion=1.2.0
+sonar.projectVersion=1.3.0
 
 sonar.sources=src,test
 sonar.exclusions=node_modules/**

src/usePolling.js

@@ -25,7 +25,7 @@ class PollingHandler {
   }
 
   _checkInterval() {
-    const sortedIntervals = this._intervalTimes.sort((a, b) => a - b);
+    const sortedIntervals = [...this._intervalTimes].sort((a, b) => a - b);
     if (sortedIntervals[0] !== this._currentIntervalTime) {
       this._clearInterval();
       this._currentIntervalTime = sortedIntervals[0];

src/withDataProvider.js

@@ -17,6 +17,9 @@ const isFunction = (provider) => {
 
 const defaultKeys = ["data", "loading", "error", "loaded"];
 
+const getDisplayName = (WrappedComponent) =>
+  WrappedComponent.displayName || WrappedComponent.name || "Component";
+
 const useProvider = (provider, props) => {
   return useMemo(() => {
     if (isFunction(provider)) {
@@ -72,65 +75,97 @@ export const withDataProviderBranch = (provider, keys) => (
   Component,
   LoadingComponent,
   ErrorComponent
-) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { dataProp, loadingProp, errorProp, loading, error } = useDataProviderCustomProps(
-    providerToRead,
-    keys
-  );
-  if (loading) {
-    if (LoadingComponent) {
-      return <LoadingComponent {...props} {...loadingProp} />;
+) => {
+  const WithDataProviderBranch = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { dataProp, loadingProp, errorProp, loading, error } = useDataProviderCustomProps(
+      providerToRead,
+      keys
+    );
+    if (loading) {
+      if (LoadingComponent) {
+        return <LoadingComponent {...props} {...loadingProp} />;
+      }
+      return null;
     }
-    return null;
-  }
-  if (error) {
-    if (ErrorComponent) {
-      return <ErrorComponent {...props} {...errorProp} />;
+    if (error) {
+      if (ErrorComponent) {
+        return <ErrorComponent {...props} {...errorProp} />;
+      }
+      return null;
     }
-    return null;
-  }
-  return <Component {...props} {...dataProp} />;
-};
-
-export const withDataProvider = (provider, keys) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { dataProp, loadingProp, errorProp } = useDataProviderCustomProps(providerToRead, keys);
-  return <Component {...props} {...dataProp} {...loadingProp} {...errorProp} />;
-};
-
-export const withData = (provider, key) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { dataProp } = useDataCustomProp(providerToRead, key);
-  return <Component {...props} {...dataProp} />;
-};
-
-export const withLoading = (provider, key) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { loadingProp } = useLoadingCustomProp(providerToRead, key);
-  return <Component {...props} {...loadingProp} />;
-};
-
-export const withLoaded = (provider, key) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { loadedProp } = useLoadedCustomProp(providerToRead, key);
-  return <Component {...props} {...loadedProp} />;
-};
-
-export const withError = (provider, key) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  const { errorProp } = useErrorCustomProp(providerToRead, key);
-  return <Component {...props} {...errorProp} />;
-};
-
-export const withPolling = (provider, interval) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  usePolling(providerToRead, interval);
-  return <Component {...props} />;
-};
-
-export const withRefresh = (provider) => (Component) => (props) => {
-  const providerToRead = useProvider(provider, props);
-  useRefresh(providerToRead);
-  return <Component {...props} />;
+    return <Component {...props} {...dataProp} />;
+  };
+  WithDataProviderBranch.displayName = `WithDataProviderBranch${getDisplayName(Component)}`;
+  return WithDataProviderBranch;
+};
+
+export const withDataProvider = (provider, keys) => (Component) => {
+  const WithDataProvider = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { dataProp, loadingProp, errorProp } = useDataProviderCustomProps(providerToRead, keys);
+    return <Component {...props} {...dataProp} {...loadingProp} {...errorProp} />;
+  };
+  WithDataProvider.displayName = `WithDataProvider${getDisplayName(Component)}`;
+  return WithDataProvider;
+};
+
+export const withData = (provider, key) => (Component) => {
+  const WithData = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { dataProp } = useDataCustomProp(providerToRead, key);
+    return <Component {...props} {...dataProp} />;
+  };
+  WithData.displayName = `WithData${getDisplayName(Component)}`;
+  return WithData;
+};
+
+export const withLoading = (provider, key) => (Component) => {
+  const WithLoading = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { loadingProp } = useLoadingCustomProp(providerToRead, key);
+    return <Component {...props} {...loadingProp} />;
+  };
+  WithLoading.displayName = `WithLoading${getDisplayName(Component)}`;
+  return WithLoading;
+};
+
+export const withLoaded = (provider, key) => (Component) => {
+  const WithLoaded = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { loadedProp } = useLoadedCustomProp(providerToRead, key);
+    return <Component {...props} {...loadedProp} />;
+  };
+  WithLoaded.displayName = `WithLoaded${getDisplayName(Component)}`;
+  return WithLoaded;
+};
+
+export const withError = (provider, key) => (Component) => {
+  const WithError = (props) => {
+    const providerToRead = useProvider(provider, props);
+    const { errorProp } = useErrorCustomProp(providerToRead, key);
+    return <Component {...props} {...errorProp} />;
+  };
+  WithError.displayName = `WithError${getDisplayName(Component)}`;
+  return WithError;
+};
+
+export const withPolling = (provider, interval) => (Component) => {
+  const WithPolling = (props) => {
+    const providerToRead = useProvider(provider, props);
+    usePolling(providerToRead, interval);
+    return <Component {...props} />;
+  };
+  WithPolling.displayName = `WithPolling${getDisplayName(Component)}`;
+  return WithPolling;
+};
+
+export const withRefresh = (provider) => (Component) => {
+  const WithRefresh = (props) => {
+    const providerToRead = useProvider(provider, props);
+    useRefresh(providerToRead);
+    return <Component {...props} />;
+  };
+  WithRefresh.displayName = `WithRefresh${getDisplayName(Component)}`;
+  return WithRefresh;
 };